/* ==========================================================================
 * /ai/<slug> visual sections (WS25, 2026-10-05). Loaded for layouts ai / ai_item after
 * ai-products.css. Problem vs outcome pair, cost formula strip, step timeline with real
 * captures (.lx-capture), benefits list beside a photo, limits + needs pair.
 * Homepage language (luxury.css .lx-head / .lx-card / .lx-capture). Tokens only.
 * ========================================================================== */

.cm-aip .cm-aiv .lx-head h2 { margin-inline: auto; }
.cm-aip .cm-aip-hero__subline { margin: 0 0 var(--sp-12); font-size: var(--fs-14); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); color: var(--c-brand-400); }
.cm-aip .cm-aiv-label {
	display: inline-flex; align-items: center; gap: var(--sp-8); margin: 0 0 var(--sp-12);
	font-family: var(--font-heading); font-size: var(--fs-12); font-weight: var(--fw-semibold);
	letter-spacing: var(--lx-eyebrow-track); text-transform: uppercase; color: var(--c-brand-600);
}
.cm-aip .cm-aiv-label--dark { color: var(--c-brand-400); }
.cm-aip .cm-aiv-ico {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: var(--sp-32); height: var(--sp-32); border-radius: var(--r-circle);
}
.cm-aip .cm-aiv-ico svg { width: var(--sp-16); height: var(--sp-16); }
.cm-aip .cm-aiv-ico--warn { background: var(--c-lx-scrim-soft); color: var(--c-brand-400); border: 1px solid var(--c-lx-line-dark); }
.cm-aip .cm-aiv-ico--ok { background: var(--c-success-bg); color: var(--c-success); }
.cm-aip .cm-aiv-ico--info { background: var(--c-brand-50); color: var(--c-brand-600); }
.cm-aip .cm-aiv-label .cm-aiv-ico { width: var(--sp-24); height: var(--sp-24); }

/* ---- problem vs outcome: two equal-height cards ---- */
.cm-aip .cm-aiv-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lx-grid-gap); align-items: stretch; }
.cm-aip .cm-aiv-problem {
	position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end;
	min-height: calc(var(--sp-96) * 5); border-radius: var(--lx-radius-sm);
	background: var(--c-navy-900); color: var(--c-surface-0); box-shadow: var(--shadow-lx-2);
}
.cm-aip .cm-aiv-problem::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, var(--c-lx-scrim-mid) 0%, var(--c-lx-scrim-strong) 55%, var(--c-lx-scrim-strong) 100%);
}
.cm-aip .cm-aiv-problem__body { position: relative; z-index: 2; padding: var(--sp-32); }
.cm-aip .cm-aiv-problem__lead { margin: 0 0 var(--sp-20); font-size: var(--text-lead); line-height: var(--lh-body); color: var(--c-surface-0); max-width: 60ch; }
.cm-aip .cm-aiv-rows { display: grid; gap: var(--sp-16); margin: 0; padding: 0; list-style: none; }
.cm-aip .cm-aiv-rows li { display: flex; gap: var(--sp-12); align-items: flex-start; font-size: var(--fs-15); line-height: var(--lh-body); color: var(--c-lx-on-dark-muted); }
.cm-aip .cm-aiv-rows--light li { color: var(--c-ink-700); }

.cm-aip .cm-aiv-outcome { display: flex; flex-direction: column; height: 100%; }
.cm-aip .cm-aiv-outcome__media img { width: 100%; max-height: calc(var(--sp-96) * 3.5); object-fit: cover; object-position: top left; }
.cm-aip .cm-aiv-outcome__body { padding: var(--sp-24) var(--sp-32) var(--sp-32); }
.cm-aip .cm-aiv-outcome__text { margin: 0; font-size: var(--fs-16); line-height: var(--lh-body); color: var(--c-ink-700); max-width: 60ch; }

/* ---- cost formula strip (variables only) ---- */
.cm-aip .cm-aiv-formula {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12) var(--sp-24);
	margin-top: var(--lx-grid-gap); padding: var(--sp-20) var(--sp-24);
	background: var(--c-surface-0); border: 1px solid var(--c-lx-line); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1);
}
.cm-aip .cm-aiv-formula__lead { margin: 0; font-family: var(--font-heading); font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--c-navy-900); }
.cm-aip .cm-aiv-formula__eq { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); margin: 0; }
.cm-aip .cm-aiv-var {
	display: inline-flex; padding: var(--sp-4) var(--sp-12); border-radius: var(--r-pill);
	background: var(--c-lx-capture-bg-1); border: 1px solid var(--c-lx-line); font-size: var(--fs-14); color: var(--c-navy-800);
}
.cm-aip .cm-aiv-op { font-weight: var(--fw-bold); color: var(--c-brand-600); }
.cm-aip .cm-aiv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- step timeline: one card per step, connecting line behind the cards ---- */
.cm-aip .cm-aiv-timeline {
	position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--lx-grid-gap);
	margin: 0; padding: 0; list-style: none; counter-reset: none;
}
.cm-aip .cm-aiv-timeline--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cm-aip .cm-aiv-timeline--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cm-aip .cm-aiv-timeline::before {
	content: ""; position: absolute; z-index: 0; left: var(--sp-24); right: var(--sp-24); top: calc(var(--sp-96) * 1.6);
	height: var(--sp-2); background: linear-gradient(90deg, var(--c-brand-500), var(--c-navy-300));
}
.cm-aip .cm-aiv-step { position: relative; z-index: 1; display: flex; flex-direction: column; }
.cm-aip .cm-aiv-step__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; }
.cm-aip .cm-aiv-step__body { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-20) var(--sp-20) var(--sp-24); }
.cm-aip .cm-aiv-pill {
	align-self: flex-start; display: inline-flex; padding: var(--sp-4) var(--sp-12); border-radius: var(--r-pill);
	background: var(--c-brand-500); color: var(--c-surface-0); font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label);
	box-shadow: var(--shadow-lx-cta);
}
.cm-aip .cm-aiv-step__title { margin: 0; font-family: var(--font-heading); font-size: var(--fs-18); font-weight: var(--fw-semibold); line-height: var(--lh-heading); color: var(--c-navy-900); }
.cm-aip .cm-aiv-step__body p { margin: 0; font-size: var(--fs-14); line-height: var(--lh-body); color: var(--c-ink-500); }

/* ---- benefits: editorial list beside one photo ---- */
.cm-aip .cm-aiv-benefits {
	display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--lx-split-gap); align-items: stretch;
	margin-top: var(--lx-grid-gap);
}
.cm-aip .cm-aiv-benefits__photo { position: relative; overflow: hidden; margin: 0; min-height: calc(var(--sp-96) * 3); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-2); background: var(--c-lx-sand); }
.cm-aip .cm-aiv-benefits__list { display: grid; gap: var(--sp-24); align-content: center; margin: 0; padding: 0; list-style: none; }
.cm-aip .cm-aiv-benefits__list li { display: flex; gap: var(--sp-16); align-items: flex-start; }
.cm-aip .cm-aiv-benefits__list h3 { margin: 0 0 var(--sp-4); font-family: var(--font-heading); font-size: var(--fs-18); font-weight: var(--fw-semibold); color: var(--c-navy-900); }
.cm-aip .cm-aiv-benefits__list p { margin: 0; color: var(--c-ink-500); max-width: 60ch; }

/* ---- limits + what you need ---- */
.cm-aip .cm-aiv-limits { padding: var(--sp-32); }
.cm-aip .cm-aiv-needs { display: flex; flex-direction: column; }
.cm-aip .cm-aiv-needs__media img { width: 100%; }
.cm-aip .cm-aiv-needs__body { padding: var(--sp-24) var(--sp-32) var(--sp-32); }
.cm-aip .cm-aiv-needs .cm-hub__checks { margin-bottom: var(--sp-16); }

/* ---- responsive ---- */
@media (max-width: 1100px) {
	.cm-aip .cm-aiv-timeline, .cm-aip .cm-aiv-timeline--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cm-aip .cm-aiv-timeline::before { display: none; }
}
@media (max-width: 860px) {
	.cm-aip .cm-aiv-pair, .cm-aip .cm-aiv-benefits { grid-template-columns: minmax(0, 1fr); }
	.cm-aip .cm-aiv-problem { min-height: calc(var(--sp-96) * 4); }
}
@media (max-width: 640px) {
	.cm-aip .cm-aiv-timeline, .cm-aip .cm-aiv-timeline--5, .cm-aip .cm-aiv-timeline--3 { grid-template-columns: minmax(0, 1fr); padding-left: var(--sp-20); }
	.cm-aip .cm-aiv-timeline::before { display: block; left: var(--sp-8); right: auto; top: 0; bottom: 0; width: var(--sp-2); height: auto; background: linear-gradient(180deg, var(--c-brand-500), var(--c-navy-300)); }
	.cm-aip .cm-aiv-problem__body, .cm-aip .cm-aiv-limits { padding: var(--sp-24); }
	.cm-aip .cm-aiv-outcome__body, .cm-aip .cm-aiv-needs__body { padding: var(--sp-20) var(--sp-24) var(--sp-24); }
	.cm-aip .cm-aiv-formula { flex-direction: column; align-items: flex-start; }
}