/* =========================================================================
   pages-cases.css — Aurora wave CASES (/cases/ + 4 segments)
   Project: mikekarni · theme teya-generated-site
   Scope: ALL selectors under .tmpl-segment. Tokens from assets/dist/style.css.
   Honest stance: no fabricated cases — visuals support "типовые сценарии по
   данным рынка". on-light accent tokens on light sections.
   ========================================================================= */

/* -------------------------------------------------------------------------
   HERO (B1 / ai-01) — text + illustration split, dark navy
   ------------------------------------------------------------------------- */
.tmpl-segment .seg-hero {
	position: relative;
	overflow: hidden;
}

.tmpl-segment .seg-hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--space-xl);
	align-items: center;
}

.tmpl-segment .seg-hero__lead {
	color: var(--muted);
	max-width: 56ch;
}

.tmpl-segment .seg-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

.tmpl-segment .seg-hero__media {
	display: flex;
	justify-content: center;
}

.tmpl-segment .seg-hero__img {
	width: 100%;
	max-width: 540px;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-elevated-dark);
}

/* -------------------------------------------------------------------------
   INTRO (ai-02) — honesty longread, light narrow
   ------------------------------------------------------------------------- */
.tmpl-segment .seg-intro .lead {
	color: var(--color-on-bg-light);
}

/* -------------------------------------------------------------------------
   DISCLAIMER line (mono) — used in scenarios + before-after
   ------------------------------------------------------------------------- */
.tmpl-segment .seg-disclaimer {
	display: block;
	margin: calc(var(--space-md) * -0.5) 0 var(--space-lg);
	color: var(--muted);
}

.tmpl-segment .section--light .seg-disclaimer {
	color: var(--muted-light);
}

/* -------------------------------------------------------------------------
   SCENARIOS grid (ai-03 / B3) — product-cutout icon cards
   ------------------------------------------------------------------------- */
.tmpl-segment .seg-scenarios__grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tmpl-segment .seg-scenario {
	display: flex;
	flex-direction: column;
}

.tmpl-segment .seg-scenario__icon {
	width: 88px;
	height: 88px;
	object-fit: contain;
}

.tmpl-segment .seg-scenario__link,
.tmpl-segment .seg-segment__link {
	margin-top: auto;
	padding-top: var(--space-sm);
	font-weight: 600;
	font-size: var(--fs-body-sm);
}

/* On dark scenario cards (index ai-03) keep teal-bright link */
.tmpl-segment .section--dark .seg-scenario__link {
	color: var(--color-secondary);
}

.tmpl-segment .seg-scenarios__cross {
	margin-top: var(--space-lg);
	margin-bottom: 0;
}

/* Strong in-body link — readable on light + dark */
.tmpl-segment .seg-link-strong {
	font-weight: 600;
	border-bottom: 1px solid currentColor;
}

.tmpl-segment .section--dark .seg-link-strong {
	color: var(--color-secondary);
}

.tmpl-segment .section--light .seg-link-strong {
	color: var(--color-teal-on-light);
}

/* -------------------------------------------------------------------------
   SEGMENTS (ai-04) — segment visual + 4 cards, light
   ------------------------------------------------------------------------- */
.tmpl-segment .seg-segments__visual {
	margin-bottom: var(--space-lg);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card-light);
}

.tmpl-segment .seg-segments__img {
	width: 100%;
	height: auto;
}

.tmpl-segment .seg-segments__grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tmpl-segment .seg-segment {
	display: flex;
	flex-direction: column;
}

/* -------------------------------------------------------------------------
   PAINS (B2) — client inner-thought quotes, dark
   ------------------------------------------------------------------------- */
.tmpl-segment .seg-pains__lead {
	color: var(--muted);
	max-width: 64ch;
}

.tmpl-segment .seg-pains__grid {
	list-style: none;
	margin: 0 0 var(--space-lg);
	padding: 0;
}

.tmpl-segment .seg-pain {
	margin: 0;
}

.tmpl-segment .seg-pain__quote {
	margin: 0;
	font-size: var(--fs-body-lg);
	line-height: 1.5;
	color: var(--color-on-bg);
}

.tmpl-segment .seg-pains__close {
	max-width: 72ch;
	margin: 0;
	color: var(--muted);
}

/* -------------------------------------------------------------------------
   EFFECT (B4) — "по данным рынка" trust block, dark
   ------------------------------------------------------------------------- */
.tmpl-segment .seg-effect .badge-trust,
.tmpl-segment .seg-honesty .badge-trust,
.tmpl-segment .seg-start .badge-trust {
	margin-bottom: var(--space-md);
}

.tmpl-segment .seg-effect .lead {
	color: var(--muted);
}

.tmpl-segment .seg-effect em,
.tmpl-segment .seg-honesty em {
	font-style: normal;
	color: var(--color-tertiary);
	font-weight: 600;
}

.tmpl-segment .section--light .seg-honesty em {
	color: var(--color-green-on-light);
}

/* -------------------------------------------------------------------------
   START (B5) / HONESTY (ai-05) — green trust accent, light
   ------------------------------------------------------------------------- */
.tmpl-segment .seg-start .lead,
.tmpl-segment .seg-honesty .lead {
	color: var(--color-on-bg-light);
}

.tmpl-segment .seg-start__back {
	margin-top: var(--space-md);
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   FAQ (visible = FAQPage schema) — dark accordion
   ------------------------------------------------------------------------- */
.tmpl-segment .seg-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.tmpl-segment .seg-faq__item {
	background: var(--surface-lowest);
	border: 1px solid var(--outline);
	border-radius: var(--radius-md);
	padding: var(--space-sm) var(--space-md);
}

.tmpl-segment .seg-faq__item summary {
	cursor: pointer;
	font-family: var(--font-display);
	font-size: var(--fs-headline-sm);
	font-weight: 600;
	line-height: 1.3;
	list-style: none;
	padding-right: var(--space-lg);
	position: relative;
}

.tmpl-segment .seg-faq__item summary::-webkit-details-marker {
	display: none;
}

.tmpl-segment .seg-faq__item summary::after {
	content: "+";
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: -2px;
	font-size: 28px;
	line-height: 1;
	color: var(--color-secondary);
	transition: transform var(--dur-fast) var(--ease-standard);
}

.tmpl-segment .seg-faq__item[open] summary::after {
	content: "–";
}

.tmpl-segment .seg-faq__item p {
	margin: var(--space-sm) 0 var(--space-xs);
	color: var(--muted);
}

.tmpl-segment .seg-faq__item a {
	color: var(--color-secondary);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   CROSS-CUTTING CTA (B6 / ai-06) — before footer, dark + gold
   ------------------------------------------------------------------------- */
.tmpl-segment .seg-cta {
	text-align: center;
}

.tmpl-segment .seg-cta__inner .lead {
	color: var(--muted);
	margin-inline: auto;
	max-width: 60ch;
}

.tmpl-segment .seg-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: center;
	margin-top: var(--space-md);
}

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.tmpl-segment .seg-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.tmpl-segment .seg-hero__media {
		order: -1;
	}

	.tmpl-segment .seg-hero__img {
		max-width: 420px;
	}
}

@media (max-width: 600px) {
	.tmpl-segment .seg-cta__actions,
	.tmpl-segment .seg-hero__cta {
		flex-direction: column;
	}

	.tmpl-segment .seg-cta__actions .btn,
	.tmpl-segment .seg-hero__cta .btn {
		width: 100%;
	}

	.tmpl-segment .seg-faq__item summary {
		font-size: var(--fs-body-lg);
	}
}