/* ai-products.css: /ai catalogue and /ai/<slug> product pages (WS9, CHG-20261004-WS9-*).
 * Builds on hub.css (cm-hub__*). Tokens only. Every navy / photo band is an inset rounded
 * card (David 2026-10-04): the hero uses the shared card vars from templates/cmsmart/css/ui-cards.css
 * (--cm-card-inset / --cm-card-radius / --cm-card-gap); closing band and CTA reuse .cm-hub__band /
 * .cm-hub__cta, which ui-cards.css already turns into inset cards. */

/* ---- hero card ---- */
.cm-aip-hero {
	margin-inline: var(--cm-card-inset, var(--container-pad));
	margin-block: var(--cm-card-gap, var(--sp-24));
	border-radius: var(--cm-card-radius, var(--r-16));
	overflow: hidden;
	background: linear-gradient(135deg, var(--c-navy-500), var(--c-navy-600));
	color: var(--c-surface-0);
}
.cm-aip-hero__grid {
	display: grid;
	gap: var(--sp-32);
	align-items: center;
	padding: var(--sp-32) var(--sp-24);
}
.cm-aip-hero a:not(.cm-btn) { color: var(--c-surface-0); }
.cm-aip-hero .cm-hub__eyebrow,
.cm-aip-hero .cm-hub__eyebrow a { color: var(--c-accent-200); text-decoration: none; }
.cm-aip-hero .cm-hub__h1 { color: var(--c-surface-0); margin-bottom: var(--sp-8); }
.cm-aip-hero__tagline {
	margin: 0 0 var(--sp-12);
	font-size: var(--text-h4);
	font-weight: var(--fw-semibold);
	color: var(--c-accent-100);
}
.cm-aip-hero__intro { margin: 0 0 var(--sp-16); font-size: var(--text-lead); max-width: var(--measure); color: var(--c-surface-0); }
.cm-aip-hero .cm-hub__meta { color: var(--c-accent-100); margin-bottom: var(--sp-16); }
.cm-aip-hero .cm-btn--ghost { color: var(--c-surface-0) !important; border-color: var(--c-navy-200); }
.cm-aip-hero .cm-btn--ghost:hover { background: var(--c-navy-400); }
.cm-aip-frame {
	margin: 0;
	background: var(--c-surface-0);
	border-radius: var(--r-12);
	box-shadow: var(--shadow-3);
	overflow: hidden;
}
.cm-aip-frame img { display: block; width: 100%; height: auto; }
.cm-aip-frame figcaption {
	padding: var(--sp-8) var(--sp-12);
	font-size: var(--fs-13);
	color: var(--color-text-muted);
	background: var(--color-section);
}

/* ---- at a glance ---- */
.cm-aip-glance { padding: var(--sp-16) 0 0; }
.cm-aip-glance__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-12);
	margin: 0;
}
.cm-aip-glance__grid > div {
	padding: var(--sp-12) var(--sp-16);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-12);
}
.cm-aip-glance dt { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--ls-label); }
.cm-aip-glance dd { margin: var(--sp-2) 0 0; font-size: var(--fs-14); color: var(--color-heading); font-weight: var(--fw-semibold); }

/* ---- generic cards / grids ---- */
.cm-aip-grid { display: grid; gap: var(--sp-16); margin: 0; padding: 0; list-style: none; }
.cm-aip-card {
	padding: var(--sp-16) var(--sp-24);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-12);
	box-shadow: var(--shadow-1);
}
.cm-aip-card h3 { margin: 0 0 var(--sp-8); font-size: var(--text-h5); color: var(--color-heading); font-weight: var(--fw-semibold); }
.cm-aip-card p { margin: 0; font-size: var(--fs-14); color: var(--color-text); }
.cm-aip-note {
	margin: var(--sp-16) 0 0;
	padding: var(--sp-16) var(--sp-24);
	background: var(--c-brand-50);
	border-left: 4px solid var(--color-primary);
	border-radius: var(--r-8);
}
.cm-aip-note strong { color: var(--color-heading); }
.cm-aip-lead { font-size: var(--text-lead); max-width: var(--measure); margin: 0 0 var(--sp-16); }
.cm-aip-split { display: grid; gap: var(--sp-32); align-items: start; }

/* ---- steps ---- */
.cm-aip-steps { counter-reset: aip; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-12); }
.cm-aip-steps li {
	counter-increment: aip;
	position: relative;
	padding: var(--sp-12) var(--sp-16) var(--sp-12) calc(var(--sp-16) + var(--sp-40));
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-12);
}
.cm-aip-steps li::before {
	content: counter(aip);
	position: absolute;
	left: var(--sp-12);
	top: var(--sp-12);
	width: var(--sp-24);
	height: var(--sp-24);
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--c-surface-0);
	font-size: var(--fs-13);
	font-weight: var(--fw-bold);
}

/* ---- value table ---- */
.cm-aip-tablewrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--r-12); background: var(--color-surface); }
.cm-aip-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.cm-aip-table th, .cm-aip-table td { padding: var(--sp-12) var(--sp-16); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.cm-aip-table th { background: var(--color-section); color: var(--color-heading); font-weight: var(--fw-semibold); white-space: nowrap; }
.cm-aip-table tr:last-child td { border-bottom: 0; }

/* ---- gallery ---- */
.cm-aip-gallery { display: grid; gap: var(--sp-16); margin: 0; padding: 0; list-style: none; }
.cm-aip-gallery figure { margin: 0; height: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-12); overflow: hidden; box-shadow: var(--shadow-1); }
.cm-aip-gallery a { display: block; background: var(--color-surface-sunken); }
.cm-aip-gallery img { display: block; width: 100%; height: auto; }
.cm-aip-gallery figcaption { padding: var(--sp-8) var(--sp-12); font-size: var(--fs-13); color: var(--color-text-muted); }

/* ---- plans ---- */
.cm-aip-plans { display: grid; gap: var(--sp-12); grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; list-style: none; }
.cm-aip-plan { position: relative; padding: var(--sp-16); text-align: left; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-12); }
.cm-aip-plan--best { border: 2px solid var(--c-navy-500); padding-top: var(--sp-24); }
.cm-aip-plan__flag { position: absolute; top: calc(-1 * var(--sp-12)); left: var(--sp-16); padding: var(--sp-2) var(--sp-8); border-radius: var(--r-8); background: var(--c-navy-500); color: var(--c-surface-0); font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; }
.cm-aip-plan__name { margin: 0; font-weight: var(--fw-semibold); color: var(--color-heading); }
.cm-aip-plan__price { margin: var(--sp-4, 4px) 0; font-size: var(--text-h3); font-weight: var(--fw-bold); color: var(--color-heading); line-height: var(--lh-tight); }
.cm-aip-plan__price small { font-size: var(--fs-14); font-weight: var(--fw-normal); color: var(--color-text-muted); }
.cm-aip-plan__tokens { margin: 0; font-weight: var(--fw-semibold); color: var(--c-navy-500); font-size: var(--fs-14); }
.cm-aip-plan__per { margin: var(--sp-2) 0 0; font-size: var(--fs-13); color: var(--color-text-muted); }

/* ---- changelog ---- */
.cm-aip-log { list-style: none; margin: 0; padding: 0 0 0 var(--sp-16); border-left: 2px solid var(--color-border); display: grid; gap: var(--sp-24); }
.cm-aip-log li { position: relative; }
.cm-aip-log li::before { content: ""; position: absolute; left: calc(-1 * var(--sp-16) - 6px); top: var(--sp-8); width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); }
.cm-aip-log__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-8); margin: 0 0 var(--sp-4, 4px); }
.cm-aip-log__ver { font-size: var(--text-h4); font-weight: var(--fw-bold); color: var(--color-heading); }
.cm-aip-log__date { font-size: var(--fs-13); color: var(--color-text-muted); }
.cm-aip-log h4 { margin: var(--sp-8) 0 var(--sp-2); font-size: var(--fs-13); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--color-text-muted); }
.cm-aip-log ul { margin: 0; padding-left: var(--sp-16); font-size: var(--fs-14); }

/* ---- catalogue cards (/ai) ---- */
.cm-aip-cat { display: grid; gap: var(--sp-24); margin: 0; padding: 0; list-style: none; }
.cm-aip-prod {
	display: grid;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-16);
	box-shadow: var(--shadow-2);
	overflow: hidden;
}
.cm-aip-prod__media { margin: 0; background: var(--color-surface-sunken); display: flex; align-items: center; justify-content: center; padding: var(--sp-16); }
.cm-aip-prod__media img { display: block; width: 100%; height: auto; border-radius: var(--r-8); border: 1px solid var(--color-border); background: var(--c-surface-0); }
.cm-aip-prod__body { padding: var(--sp-24); display: grid; gap: var(--sp-8); align-content: start; }
.cm-aip-prod__body h3 { margin: 0; font-size: var(--text-h3); line-height: var(--lh-heading); }
.cm-aip-prod__body h3 a { color: var(--color-heading); text-decoration: none; }
.cm-aip-prod__body h3 a:hover { color: var(--color-link-hover); }
.cm-aip-prod__tag { margin: 0; font-weight: var(--fw-semibold); color: var(--c-navy-500); }
.cm-aip-prod__body p { margin: 0; }
.cm-aip-prod__ul { margin: 0; padding-left: var(--sp-16); font-size: var(--fs-14); }

/* ---- tablet / desktop ---- */
@media (min-width: 640px) {
	.cm-aip-glance__grid { grid-template-columns: repeat(4, 1fr); }
	.cm-aip-grid--2, .cm-aip-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.cm-aip-gallery { grid-template-columns: repeat(2, 1fr); }
	.cm-aip-plans { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
	.cm-aip-hero__grid { grid-template-columns: 1.05fr 1fr; padding: var(--sp-48) var(--sp-40); gap: var(--sp-40); }
	.cm-aip-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.cm-aip-split { grid-template-columns: 1.1fr 1fr; }
	.cm-aip-prod { grid-template-columns: 1fr 1.1fr; }
	.cm-aip-cat li:nth-child(even) .cm-aip-prod__media { order: 2; }
	.cm-aip-gallery--n3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.cm-aip-hero__grid { padding: var(--sp-24) var(--sp-16); }
	.cm-aip-card, .cm-aip-prod__body { padding: var(--sp-16); }
}

.cm-aip-fine { margin: var(--sp-16) 0 0; font-size: var(--fs-13); color: var(--color-text-muted); }
@media (min-width: 900px) { .cm-aip-split.cm-aip-split--one { grid-template-columns: 1fr; } }

/* ---- feature capture thumbnails + /ai card strip ---- */
.cm-aip-card--feat { display: grid; gap: var(--sp-8); align-content: start; }
.cm-aip-thumb { margin: 0 0 var(--sp-4, 4px); border: 1px solid var(--color-border); border-radius: var(--r-8); overflow: hidden; background: var(--color-surface-sunken); }
.cm-aip-thumb img { display: block; width: 100%; height: auto; }
.cm-aip-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); margin: var(--sp-4, 4px) 0; padding: 0; list-style: none; align-items: start; }
.cm-aip-strip li { border: 1px solid var(--color-border); border-radius: var(--r-8); overflow: hidden; background: var(--color-surface-sunken); }
.cm-aip-strip img { display: block; width: 100%; height: auto; }

/* ---- brand pass: horizontal feature cards, tall-card group, horizontal gallery cards, clips ---- */
.cm-aip-grid--feat { display: grid; gap: var(--sp-16); margin: 0; padding: 0; list-style: none; }
.cm-aip-card--feat { padding: 0; overflow: hidden; display: grid; gap: 0; align-content: stretch; }
.cm-aip-card--feat .cm-aip-thumb { margin: 0; border: 0; border-radius: 0; aspect-ratio: 3 / 2; background: var(--color-surface-sunken); }
.cm-aip-card--feat .cm-aip-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.cm-aip-card--feat .cm-aip-card__body { padding: var(--sp-16) var(--sp-24); }
.cm-aip-card--feat .cm-aip-card__body h3 { margin: 0 0 var(--sp-8); font-size: var(--text-h5); }

.cm-aip-tall { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-16); grid-template-columns: repeat(2, 1fr); }
.cm-aip-tallcard { position: relative; margin: 0; border-radius: var(--r-16); overflow: hidden; background: var(--c-navy-600); box-shadow: var(--shadow-2); }
.cm-aip-tallcard figure { margin: 0; aspect-ratio: 4 / 5; }
.cm-aip-tallcard figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-aip-tallcard__body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-40) var(--sp-16) var(--sp-16); color: var(--c-surface-0); background: linear-gradient(to top, var(--c-navy-overlay-strong), var(--c-navy-overlay-soft) 60%, transparent); }
.cm-aip-tallcard__body h3, .cm-aip-tallcard__body h3 a { margin: 0 0 var(--sp-4, 4px); font-size: var(--text-h5); color: var(--c-surface-0); text-decoration: none; font-weight: var(--fw-semibold); }
.cm-aip-tallcard__body p { margin: 0; font-size: var(--fs-13); color: var(--c-accent-100); }
.cm-aip-tallcard__n { display: inline-grid; place-items: center; width: var(--sp-24); height: var(--sp-24); margin-bottom: var(--sp-8); border-radius: 50%; background: var(--color-primary); color: var(--c-surface-0); font-size: var(--fs-13); font-weight: var(--fw-bold); }

.cm-aip-hcards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-24); }
.cm-aip-hcard { display: grid; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-16); box-shadow: var(--shadow-1); overflow: hidden; }
.cm-aip-hcard figure { margin: 0; background: var(--color-surface-sunken); }
.cm-aip-hcard figure a { display: block; }
.cm-aip-hcard figure img { display: block; width: 100%; height: auto; }
.cm-aip-hcard__body { padding: var(--sp-24); align-self: center; }
.cm-aip-hcard__body h3 { margin: 0 0 var(--sp-8); font-size: var(--text-h4); color: var(--color-heading); }
.cm-aip-hcard__body p { margin: 0; }

.cm-aip-clips { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-24); }
.cm-aip-clip { margin: 0; }
.cm-aip-clip__btn { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-16); overflow: hidden; cursor: pointer; background: var(--c-navy-600); box-shadow: var(--shadow-2); }
.cm-aip-clip__btn img { display: block; width: 100%; height: auto; }
.cm-aip-clip__play { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .2s; }
.cm-aip-clip__play::before { content: ""; width: var(--sp-48); height: var(--sp-48); border-radius: 50%; background: var(--color-primary); }
.cm-aip-clip__play::after { content: ""; position: absolute; margin-left: var(--sp-4, 4px); border-left: var(--sp-16) solid var(--c-surface-0); border-top: var(--sp-8) solid transparent; border-bottom: var(--sp-8) solid transparent; }
.cm-aip-clip__btn[aria-pressed="true"] .cm-aip-clip__play { opacity: 0; }
.cm-aip-clip__btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.cm-aip-clip__cap { margin: var(--sp-8) 0 0; font-size: var(--fs-14); color: var(--color-text-muted); }

@media (min-width: 640px) {
	.cm-aip-grid--feat { grid-template-columns: repeat(2, 1fr); }
	.cm-aip-card--feat { grid-template-columns: 40% 1fr; }
	.cm-aip-card--feat .cm-aip-thumb { aspect-ratio: auto; min-height: 100%; }
	.cm-aip-clips { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.cm-aip-tall { grid-template-columns: repeat(4, 1fr); }
	.cm-aip-hcard { grid-template-columns: 1.3fr 1fr; }
	.cm-aip-hcards .cm-aip-hcard:nth-child(even) figure { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
	.cm-aip-clip__play { transition: none; }
}