/* ============================================================
   3.2 Erfolgsgeschichten — page styles (auto-linked for "cases")
   Only what main.css doesn't cover; var(--token) values only.
   ============================================================ */

/* ── Hero: centered dark intro band (surface-dark + eyebrow-dark
   in main.css; no visual per spec) ─────────────────────────── */
.cases-hero {
    padding-block: var(--space-2xl);
    text-align: center;
}
.cases-hero .breadcrumb__trail { justify-content: center; }
.cases-hero__eyebrow { margin-bottom: var(--space-md); } /* pill look: .eyebrow-dark */
.cases-hero__headline { margin-bottom: var(--space-sm); }
.cases-hero__sub { font-size: var(--text-lg); color: var(--ink-inverse-muted); }

/* Breadcrumb on the dark hero: quiet inverse ink (main.css colors
   target light surfaces and would fail AA here) */
.cases-hero .breadcrumb { color: var(--ink-inverse-muted); }
.cases-hero .breadcrumb__trail a { color: var(--ink-inverse-muted); }
.cases-hero .breadcrumb__trail a:hover { color: var(--surface-0); }
.cases-hero .breadcrumb__trail [aria-current="page"] { color: var(--ink-inverse); }
.cases-hero .breadcrumb__sep { color: var(--ink-inverse-muted); opacity: .6; }

@media (min-width: 1024px) {
    .cases-hero { padding-block: var(--space-3xl) var(--space-2xl); }
}

/* Index hero: centered text on phones and tablets, text left and the
   animated story visual right from bp-lg (same grid as the contact hero). */
.cases-hero__intro { max-width: 46rem; margin-inline: auto; }
.cases-hero__grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 1024px) {
    .cases-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-2xl); }
    .cases-hero__intro { margin-inline: 0; text-align: left; }
    .cases-hero__intro .breadcrumb__trail { justify-content: flex-start; }
}

/* Hero visual (hero-visual.css base): story card with a logo stand-in and a
   quote whose lines type in, a trend card whose line draws itself from
   "before" to "after" (no numbers, no axes), then a badge. Decorative. */
.cases-hero__visual { max-width: 400px; }
.cases-hero__visual .hva__card { gap: var(--space-sm); }
.cases-hero__visual .hva__label { font-size: var(--text-md); }
.csv-icon { width: 40px; height: 40px; } /* raw px: compact icon circle */
.csv-icon > .icon { width: 20px; height: 20px; }
.csv-story { margin-right: 12%; padding-bottom: var(--space-lg); }
.csv-logo { display: flex; align-items: center; gap: var(--space-sm); }
.csv-logo__mark {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; /* raw px: logo stand-in tile */
    border-radius: var(--radius-md); background: var(--blue-100); color: var(--blue-700);
}
.csv-logo__name { display: grid; gap: 6px; flex: 1 1 auto; } /* raw px: bar gap */
.csv-bar { display: block; width: 70%; height: 10px; border-radius: var(--radius-full); background: var(--ink-400); opacity: .55; } /* raw px: name stand-in */
.csv-bar--short { width: 45%; height: 8px; opacity: .3; }
.csv-quote {
    display: flex; gap: var(--space-sm); align-items: flex-start;
    padding: var(--space-sm);
    border-radius: var(--radius-md); background: var(--surface-50);
    border-left: 3px solid var(--accent-500); /* raw px: rule width */
}
.csv-quote__mark { flex: none; color: var(--accent-500); line-height: 0; }
.csv-quote__lines { display: grid; gap: var(--space-xs); flex: 1 1 auto; padding-top: 4px; } /* raw px: aligns with the mark */
.csv-line { display: block; height: 8px; border-radius: var(--radius-full); background: var(--line-200); transform-origin: left center; } /* raw px: text line stand-in */
.csv-line--short { width: 55%; }
.csv-trend { position: relative; margin: calc(-1 * var(--space-md)) 0 0 12%; gap: var(--space-xs); }
.csv-chart { display: block; width: 100%; height: auto; overflow: visible; }
.csv-chart__base { fill: none; stroke: var(--line-200); stroke-width: 2; stroke-dasharray: 4 6; }
.csv-chart__area { fill: var(--accent-100); stroke: none; }
.csv-chart__line { fill: none; stroke: var(--accent-500); stroke-width: 4; stroke-linecap: round; }
.csv-chart__dot { fill: var(--accent-500); stroke: var(--surface-0); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.cases-hero__visual .hva__badge { background: var(--accent-500); border-color: var(--accent-300); }
@media (max-width: 1023.98px) {
    /* below the two-column hero the visual would push the stories down */
    .cases-hero__visual { display: none; }
}

/* ── Reference grid: real logo images ──────────────────────────
   main.css caps card logos at 32px (wordmark scale); the real PNGs
   (96px-high sources) read better at 40px — same height the trust
   strip uses. Fixed height + width:auto keeps CLS at 0. Wide logo +
   long sector pill may not share one row on phones, so allow wrap. */
/* Story and logo-tile cards: every logo sits in the same fixed box
   (72px high on desktop, 64px on phones), scaled with object-fit: contain,
   centred. A wide logo is held back by the box width, a square one still
   gets the full height, so no logo dominates and none is tiny. Two logos
   (optional second logo of a story) share the row with a small gap. */
:is(#cases-grid, #cases-stories) .reference-card__logo {
    display: block;
    width: 200px; height: 72px; max-height: none; /* main.css caps card logos at 32px */
    object-fit: contain;
}
:is(#cases-grid, #cases-stories) .reference-card__logos {
    display: flex; align-items: center; justify-content: center;
    gap: var(--space-md);
}
:is(#cases-grid, #cases-stories) .reference-card__logos .reference-card__logo {
    width: 120px; /* two boxes plus the gap stay inside the narrowest card */
}
:is(#cases-grid, #cases-stories) .reference-card__head {
    flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-sm);
    min-height: 128px; /* 72px logo box + pill + gap, keeps rows even */
    padding-block: var(--space-xs);
    text-align: center;
}
@media (max-width: 480px) {
    :is(#cases-grid, #cases-stories) .reference-card__logo { height: 64px; }
    :is(#cases-grid, #cases-stories) .reference-card__head { min-height: 116px; }
}

/* ── CTA band: the --blue variant is dark site-wide now (main.css
   handles on-dark buttons). Keep only the hairline that separates
   the band from the blue-900 footer that follows it. */
.cta-band--blue { border-bottom: 1px solid var(--line-dark); }

/* ── Success stories (DB, admin-managed) ───────────────────────
   Cards reuse reference-card. Quote marks follow the card's own
   language (a fallback card carries lang=). */
.cases-stories__heading { margin-bottom: var(--space-lg); }
.reference-card__headline { font-size: var(--text-lg); font-weight: 600; }
:is(.reference-card__quote, .cases-feature__quote, .voice-card__quote, .story-quote) blockquote { quotes: "\201E" "\201C"; }
:is(.reference-card__quote, .cases-feature__quote, .voice-card__quote, .story-quote) blockquote:lang(en) { quotes: "\201C" "\201D"; }
:is(.reference-card__quote, .cases-feature__quote, .voice-card__quote, .story-quote) blockquote:lang(sv) { quotes: "\201D" "\201D"; }
:is(.reference-card__quote, .cases-feature__quote, .voice-card__quote, .story-quote) blockquote:lang(es) { quotes: "\00AB" "\00BB"; }
:is(.reference-card__quote, .cases-feature__quote, .voice-card__quote, .story-quote) blockquote:lang(hu) { quotes: "\201E" "\201D"; }
:is(.reference-card__quote, .cases-feature__quote, .voice-card__quote, .story-quote) blockquote p::before { content: open-quote; }
:is(.reference-card__quote, .cases-feature__quote, .voice-card__quote, .story-quote) blockquote p::after { content: close-quote; }

/* ── Story detail page ───────────────────────────────────────── */
.story-hero__logo {
    display: inline-block;
    margin-top: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: var(--surface-0);
    border-radius: var(--radius-md);
    line-height: 0;
}
.story-hero__logo img { width: 240px; max-width: 100%; height: auto; max-height: 96px; object-fit: contain; }
.story-hero__logo--pair { display: inline-flex; align-items: center; gap: var(--space-lg); }
.story-hero__logo--pair img { width: auto; max-width: 160px; max-height: 80px; }
/* Detail quote: same pull-quote look as the voice cards on the index */
.story-quote {
    position: relative;
    margin-top: var(--space-xl);
    padding: var(--space-lg) var(--space-lg) var(--space-lg) calc(var(--space-lg) + var(--space-xs));
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-left: 4px solid var(--accent-500); /* raw px: accent rule */
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.story-quote blockquote { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.45; color: var(--ink-900); }
.story-quote figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--ink-600); }
.story-quote cite { font-style: normal; font-weight: 600; color: var(--ink-900); }
.story-note { margin-top: var(--space-xl); }
.story-back { margin-top: var(--space-xl); }
.story-back a { display: inline-flex; align-items: center; gap: var(--space-2xs); }

/* Images in the story body (BlogMarkdown figures): text-column width at most,
   square photos capped so they do not dominate the page, no layout shift
   (width/height attributes reserve the box). */
.story-article .prose figure.post-figure {
    width: fit-content;
    max-width: min(100%, 560px);
    margin-block: var(--space-lg);
    margin-inline: auto;
}
.story-article .prose figure.post-figure img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border-radius: var(--radius-lg);
}
.story-article .prose figure.post-figure figcaption {
    margin-top: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--ink-600);
}

/* ── Story header image (optional, next to the headline) ───────
   Text left, square image right from 900px, stacked below that
   with the image under the title. Without an image the header
   keeps its centered narrow look (no modifier class). */
.story-hero--image { text-align: left; }
.story-hero--image .breadcrumb__trail { justify-content: flex-start; }
.story-hero__grid {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}
.story-hero__media {
    margin: 0;
    width: 100%;
    max-width: 480px;
    line-height: 0;
}
.story-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--surface-0);
}
@media (min-width: 900px) {
    .story-hero__grid {
        grid-template-columns: minmax(0, 1fr) 440px;
        gap: var(--space-2xl);
    }
    .story-hero__media { justify-self: end; }
}

/* ── Index: featured story ─────────────────────────────────────
   One large card: header image left (from bp-md), logo + sector,
   headline, teaser, button. Without an image the text spans. */
.cases-feature__label {
    display: inline-flex; align-items: center; gap: var(--space-2xs);
    margin-bottom: var(--space-sm);
    font-size: var(--text-sm); font-weight: 600; color: var(--accent-600);
}
.cases-feature {
    display: grid;
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.cases-feature__media { margin: 0; line-height: 0; background: var(--surface-50); }
.cases-feature__media img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.cases-feature__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg); }
.cases-feature__brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.cases-feature__logo { display: block; width: auto; max-width: 200px; height: 64px; object-fit: contain; object-position: left center; } /* raw px: logo box */
.cases-feature__logo-text { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--ink-600); }
.cases-feature__headline { font-size: var(--text-2xl-fluid); line-height: 1.2; }
.cases-feature__teaser { font-size: var(--text-lg); color: var(--ink-600); }
.cases-feature__quote { border-left: 3px solid var(--accent-500); padding-left: var(--space-md); } /* raw px: rule width */
.cases-feature__quote blockquote { font-style: italic; }
.cases-feature__quote figcaption { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--ink-600); }
.cases-feature__link { margin-top: auto; }
@media (min-width: 768px) {
    .cases-feature--media { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .cases-feature__media img { aspect-ratio: auto; min-height: 100%; }
    .cases-feature__body { padding: var(--space-xl); justify-content: center; }
}

/* ── Index: further stories as wide rows (logos left from bp-md) */
.cases-rows { display: grid; gap: var(--space-lg); margin-top: var(--space-lg); }
@media (min-width: 768px) {
    .reference-card--row {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr); /* raw px: logo column */
        column-gap: var(--space-xl); row-gap: var(--space-sm);
        align-content: start;
        padding: var(--space-xl);
    }
    .reference-card--row > * { grid-column: 2; }
    .reference-card--row > .reference-card__head {
        grid-column: 1; grid-row: 1 / span 4;
        align-self: center;
        padding: var(--space-md);
        border-radius: var(--radius-md); background: var(--surface-50);
    }
    .reference-card--row .reference-card__headline { font-size: var(--text-xl); }
    .reference-card--row .reference-card__teaser { font-size: var(--text-md); }
    .reference-card--row .reference-card__link { margin-top: var(--space-xs); }
}

/* ── Index: voices (pull-quote cards on a white band) ──────────── */
.cases-voices { background: var(--surface-0); border-top: 1px solid var(--line-200); }
.cases-voices__heading { margin-bottom: var(--space-lg); }
.cases-voices__grid { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 900px) {
    .cases-voices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.voice-card {
    display: flex; flex-direction: column; gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--surface-50);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
}
.voice-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.voice-card__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); min-width: 0; }
.voice-card__logo { display: block; width: auto; max-width: 180px; height: 56px; object-fit: contain; object-position: left center; } /* raw px: logo box */
.voice-card__logo-text { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--ink-600); }
.voice-card__mark { flex: none; width: 48px; height: 48px; color: var(--accent-600); background: var(--accent-100); } /* raw px: compact icon circle */
.voice-card__mark > .icon { width: 22px; height: 22px; }
.voice-card__headline { font-size: var(--text-lg); font-weight: 600; }
.voice-card__quote { margin: 0; }
.voice-card__quote blockquote { font-size: var(--text-md); line-height: 1.65; color: var(--ink-900); }
.voice-card__cite {
    display: grid; gap: var(--space-3xs);
    margin-top: var(--space-md); padding-top: var(--space-md);
    border-top: 1px solid var(--line-200);
    font-size: var(--text-sm); color: var(--ink-600);
}
.voice-card__cite cite { font-style: normal; font-weight: 600; color: var(--ink-900); }
.voice-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: auto; }
@media (min-width: 1024px) {
    .voice-card { padding: var(--space-xl); }
}