/* ==========================================================================
   LEGACY CONTENT COMPATIBILITY
   ==========================================================================

   The Dista staging site's page bodies were authored with the OLD theme's
   blocks (dista-website). Most of those were static-save blocks, so their
   markup lives in post_content and still renders under this theme — it just
   arrives unstyled, because the old theme's stylesheet is not here.

   This file restyles that surviving markup with THIS theme's design tokens,
   so the other team's content renders correctly without editing a single
   page. Their content is authoritative and must not be rewritten.

   Token mapping from the old theme:
     --rule   -> --dista-outline      --accent -> --dista-primary
     --ink    -> --dista-ink          --bg-2   -> --dista-surface
     --ink-2  -> --dista-ink-2        --ink-3  -> --dista-ink-2
   The old theme set headings in Newsreader (serif). This theme is Roboto
   everywhere by explicit decision, so all serif stacks are dropped here.

   Two old blocks were DYNAMIC (render.php) and render nothing without the
   old theme: dista/hero-anim and dista/service-visual. Their containers are
   left in the markup but empty; the rules below collapse them so they leave
   no hole rather than a gap.

   DELETE THIS WHOLE FILE once the pages are migrated to native patterns.
   Nothing else in the theme depends on it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Section containers
   The theme constrains post-content children to 1100px. The legacy sections
   were designed to run the full width of the page, so let them fill the
   1400px wide container instead (matching this theme's own alignwide
   sections) rather than sitting in a narrow 1100px column.
   -------------------------------------------------------------------------- */
.hero-a,
.how-a,
.logos-a,
.quote-a,
.pricing-a,
.final-a,
.text-a,
.service-row-a {
	max-width: none;
	box-sizing: border-box;
}

.hero-a,
.how-a,
.logos-a,
.pricing-a,
.final-a,
.text-a,
.service-row-a {
	border-bottom: 1px solid var(--dista-outline);
	padding-bottom: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--60);
}

.final-a {
	border-bottom: none;
}

/* --------------------------------------------------------------------------
   2. Section header strip  (sec-head / sec-num / sec-name / sec-rule / sec-meta)
   A mono, uppercase eyebrow row: "02 — NÄIN SE TOIMII ———— 3 VAIHETTA"
   -------------------------------------------------------------------------- */
.sec-head {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	font-family: var(--dista-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dista-ink-2);
	margin-bottom: var(--wp--preset--spacing--40);
}

.sec-head p,
.hero-foot p,
.hero-meta p,
.how-stat p,
.final-meta p {
	margin: 0;
}

.sec-num {
	color: var(--dista-primary);
}

.sec-name {
	color: var(--dista-ink);
	font-weight: 500;
}

hr.sec-rule,
.sec-rule {
	flex: 1;
	border: none;
	height: 1px;
	margin: 0;
	background: var(--dista-outline);
}

.sec-meta {
	color: var(--dista-ink-2);
}

/* --------------------------------------------------------------------------
   3. Hero  (hero-a / hero-h1 / hero-sub-row / hero-lede / hero-cta-block /
             hero-stage / hero-foot / hero-meta / hero-trust)
   -------------------------------------------------------------------------- */
.hero-h1 {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 var(--wp--preset--spacing--50);
	text-wrap: balance;
}

/*
 * Default hero size only when the heading has no block font-size
 * (no has-*-font-size / has-custom-font-size class). Matches theme.json
 * h1 → xx-large. Once Typography → Size is set in the editor, the
 * preset (!important) or custom inline size must win — do not lock here.
 */
.hero-h1:not([class*="-font-size"]) {
	font-size: var(--wp--preset--font-size--xx-large);
}

.hero-h1 em {
	font-style: italic;
	color: var(--dista-primary);
	font-weight: 400;
}

.hero-sub-row {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--dista-outline);
}

.hero-lede {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--dista-ink-2);
	max-width: 56ch;
	margin: 0;
}

.hero-cta-block {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--20);
	font-family: var(--dista-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
}

/* dista/hero-anim was a dynamic block — this container is now always empty.
   Collapse it entirely so the hero does not carry a dead gap. */
.hero-stage:empty {
	display: none;
}

.hero-foot,
.hero-meta {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--dista-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	color: var(--dista-ink-2);
	text-transform: uppercase;
}

.hero-trust {
	font-family: var(--dista-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dista-ink-2);
}

/* --------------------------------------------------------------------------
   4. "Näin se toimii" three-step grid
      (how-a / how-grid / how-card / how-num / how-stat)
   -------------------------------------------------------------------------- */
/* minmax(0, 1fr) rather than 1fr: a bare 1fr floors each track at its content's
   min-width, so long unbreakable words pulled the three columns to different
   widths (288/233/214 at 800px) instead of splitting the row evenly. */
.how-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--dista-outline);
}

.how-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--wp--preset--spacing--40);
	border-right: 1px solid var(--dista-outline);
}

.how-card:last-child {
	border-right: none;
}

/* Keep this rule AFTER `.how-card p` below, or spell the exclusion out there:
   both selectors have equal specificity (0,1,1), so whichever comes last wins.
   `.how-card p { flex: 1 }` was overriding `flex: none` here and stretching the
   number box to absorb each card's leftover space — the step numbers ended up
   at different heights even though the text was always a single line. */
p.how-num,
.how-num {
	font-family: var(--dista-mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--dista-primary);
	letter-spacing: 0.1em;
	margin: 0 0 var(--wp--preset--spacing--40);
	flex: none;
	white-space: nowrap;
}

/* The first step's number also carries a stray leading <br> in the source
   content ("<br>01"). Their content is authoritative and not ours to edit, so
   neutralise it here. Scoped to .how-num — the <br> in .hero-h1 is deliberate. */
.how-num br {
	display: none;
}

.how-card h3 {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* The child combinator is required: descendant `.how-card p` would also match
   the two paragraphs inside .how-stat and, at specificity (0,2,1), beat the
   `.how-stat > p` rules below — forcing flex-grow:1 on them and splitting the
   stat strip into equal halves. :not(.how-num) — see the note on .how-num. */
.how-card > p:not(.how-num) {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--dista-ink-2);
	margin: 0 0 var(--wp--preset--spacing--40);
	flex: 1;
}

/* Stat strip pinned to the bottom of every card so they line up across the row */
.how-card .how-stat,
.how-stat {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	border-top: 1px solid var(--dista-outline);
	padding-top: var(--wp--preset--spacing--20);
	margin-top: auto;
	font-family: var(--dista-mono);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--dista-ink-2);
}

/* The two paragraphs were each taking an equal half of the strip, so longer
   labels ("HITRATE vastanneista") wrapped to two lines while shorter ones
   ("Tunnistustarkkuus") did not — leaving the stat rules at different heights
   across the row. Let the label take only what it needs and pin the value to
   the right edge instead of splitting the width 50/50. */
.how-stat {
	flex-wrap: nowrap;
}

.how-stat > p {
	flex: 0 1 auto;
	min-width: 0;
}

.how-stat > p:last-child {
	margin-left: auto;
	white-space: nowrap;
	text-align: right;
}

.how-stat b,
.how-stat strong {
	color: var(--dista-primary);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small);
}

/* --------------------------------------------------------------------------
   5. Client logo row  (logos-a / logo-row)
   -------------------------------------------------------------------------- */
.logo-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--dista-outline);
	border-bottom: 1px solid var(--dista-outline);
	padding: var(--wp--preset--spacing--40) 0;
}

.logo-row img {
	max-height: 44px;
	width: auto;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.logo-row img:hover {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   6. Pull quote  (quote-a / quote-mark / quote-attr)
   -------------------------------------------------------------------------- */
.quote-a {
	border-left: 2px solid var(--dista-primary);
	padding-left: var(--wp--preset--spacing--40);
}

.quote-mark {
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--dista-primary);
	line-height: 1;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.quote-attr {
	font-family: var(--dista-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dista-ink-2);
	margin-top: var(--wp--preset--spacing--30);
}

/* --------------------------------------------------------------------------
   7. Pricing  (pricing-a / price-grid / price-card / price-tier /
                price-amount / price-desc / price-feat / price-flag)
   NOTE: .featured and .custom are dangerously generic class names, so they
   are only ever styled when chained to .price-card.
   -------------------------------------------------------------------------- */
/* Separate bordered cards with a gap, not one joined grid — this follows the
   original design, where each tier was its own box and the recommended tier
   wore an accent badge overlapping its top edge. */
.price-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	align-items: stretch;
}

/* Only the featured tier carries a .price-flag ("YDINPALVELU"). It is lifted
   out of flow and rendered as a badge, and every card reserves the same top
   padding for it, so the tier / price / description rows line up across all
   three instead of that one card sitting ~30px lower. */
.price-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--50);
	border: 1px solid var(--dista-outline);
	border-radius: var(--dista-radius-lg);
	background: var(--dista-base);
}

.price-card.featured {
	border-color: var(--dista-primary);
	background: var(--dista-surface);
}

.price-flag {
	position: absolute;
	top: calc(var(--wp--preset--spacing--30) * -0.75);
	left: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--dista-primary);
	color: var(--dista-base);
	font-family: var(--dista-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Tier names wrap to one, two or three lines depending on length
   ("KONSULTOINTI" vs "YRITYS- JA KONTAKTITIEDOT"), which pushed the prices and
   everything under them out of line. Reserve the three lines the longest one
   actually needs. The line-height is set explicitly so the calc is
   self-consistent — `em` resolves against font-size, not line-height, so
   `calc(1.4em * 3)` silently under-reserved when line-height was 1.6.
   Released at mobile, where cards stack and nothing needs to line up. */
.price-tier {
	font-family: var(--dista-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dista-ink-2);
	line-height: 1.6;
	min-height: calc(1.6em * 3);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.price-card.featured .price-tier {
	color: var(--dista-primary);
}

/* min-height keeps the row below aligned: the .custom variant is set smaller
   (see below), so without it that card's description started ~16px higher than
   the other two. Derived from the token so it stays in sync with the type scale. */
.price-amount {
	display: flex;
	align-items: center;
	font-family: var(--dista-mono);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--dista-ink);
	min-height: calc(var(--wp--preset--font-size--x-large) * 1.1);
	margin: 0 0 var(--wp--preset--spacing--20);
}

/* "Sopimuksen mukaan" is prose, not a figure — the original stepped it down so
   it did not shout at the same scale as a number. */
.price-amount.custom {
	font-size: var(--wp--preset--font-size--large);
}

.price-amount .curr {
	font-size: 0.5em;
	vertical-align: super;
	color: var(--dista-ink-2);
	margin-right: 4px;
}

.price-amount .per {
	font-size: 0.4em;
	color: var(--dista-ink-2);
	margin-left: 6px;
}

.price-desc {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--dista-ink-2);
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* A ruled list with "+" markers, as in the original. */
.price-feat {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	border-top: 1px solid var(--dista-outline);
	font-size: var(--wp--preset--font-size--small);
	color: var(--dista-ink-2);
	flex: 1;
}

.price-feat li {
	position: relative;
	padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--dista-outline);
	line-height: 1.5;
}

.price-feat li::before {
	content: "+";
	position: absolute;
	left: 0;
	color: var(--dista-primary);
}

/* CTA pinned to the bottom edge of every card so the button row aligns. */
.price-card .wp-block-buttons {
	margin-top: auto;
	width: 100%;
}

.price-card .wp-block-button,
.price-card .wp-block-button__link {
	width: 100%;
	text-align: center;
}

/* Only the recommended tier gets a solid button. Without this all three render
   solid orange, which reads as three competing primary actions and loses the
   emphasis the featured tier is supposed to carry. */
.price-card .wp-block-button__link {
	background-color: transparent;
	color: var(--dista-ink);
	border: 1px solid var(--dista-outline);
}

.price-card .wp-block-button__link:hover,
.price-card .wp-block-button__link:focus-visible {
	border-color: var(--dista-primary);
	color: var(--dista-primary);
}

.price-card.featured .wp-block-button__link {
	background-color: var(--dista-primary);
	border-color: var(--dista-primary);
	color: var(--dista-base);
	font-weight: 500;
}

.price-card.featured .wp-block-button__link:hover,
.price-card.featured .wp-block-button__link:focus-visible {
	background-color: var(--dista-secondary);
	border-color: var(--dista-secondary);
	color: var(--dista-base);
}

/* --------------------------------------------------------------------------
   8. Final CTA band
      (final-a / final-grid / final-eyebrow / final-cta-col / cta-big / final-meta)
   -------------------------------------------------------------------------- */
.final-a {
	background: var(--dista-surface);
	border: 1px solid var(--dista-outline);
	border-radius: var(--dista-radius-lg);
	padding: var(--wp--preset--spacing--50);
}

.final-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

.final-eyebrow {
	font-family: var(--dista-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dista-primary);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.cta-big {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
	font-weight: 500;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.final-cta-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
}

.final-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	font-family: var(--dista-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dista-ink-2);
}

/* --------------------------------------------------------------------------
   9. Service rows  (service-row-a / svc-lede)
   dista/service-visual was dynamic and now renders nothing; any empty
   visual container is collapsed so the row does not sit lopsided.
   -------------------------------------------------------------------------- */
.svc-lede {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--dista-ink-2);
	max-width: 68ch;
}

.service-row-a .service-stage:empty,
.service-row-a .svc-visual:empty,
.service-row-a > div:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   10. Plain text section  (text-a)
   -------------------------------------------------------------------------- */
.text-a {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	color: var(--dista-ink-2);
}

.text-a h2,
.text-a h3 {
	color: var(--dista-ink);
}

/* --------------------------------------------------------------------------
   11. Mobile — every multi-column legacy grid collapses to one column
   -------------------------------------------------------------------------- */
@media (max-width: 781.98px) {
	.hero-sub-row,
	.final-grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}

	.hero-cta-block {
		align-items: flex-start;
	}

	.how-grid,
	.price-grid {
		grid-template-columns: 1fr;
	}

	.how-card,
	.price-card {
		border-right: none;
		border-bottom: 1px solid var(--dista-outline);
	}

	/* Cards are stacked now, so the desktop row reservations would only add
	   dead space. Let each one hug its own content. */
	.price-tier {
		min-height: 0;
	}

	.how-card:last-child,
	.price-card:last-child {
		border-bottom: none;
	}

	.logo-row {
		justify-content: center;
		gap: var(--wp--preset--spacing--30);
	}
}