/*
 * Kundecases (Referencer)
 * Styles for brick_case_facts (faktastribe), brick_testimonial og
 * brick_case. Alt er scoped under komponentklasserne, og arvede tema-styles
 * på bare elementer (blockquote, figure, dl) nulstilles eksplicit.
 * NB: temaets intersectionobserver.css sætter position: relative på alle
 * section > * med højere specificitet end en enkelt klasse — positionering
 * på direkte sektionsbørn kræver derfor selektorer der inkluderer sektionen.
 */

/* ---------- Faktastribe (brick_case_facts) ----------
   To-delt kort: .case-facts-identity (kunden, pink-tonet) + dl.case-facts-grid
   (casens fakta, hvid). overflow:hidden på boxen lader identitetspanelet
   bløde ud til boxens egne afrundede hjørner uden manuel per-hjørne radius. */
.case-facts-box {
    display: flex;
    background: #fff;
    border: 0.1rem solid var(--borderLight);
    border-radius: 1rem;
    overflow: hidden;
    font-size: 0.9em;
}

/* ---------- Kunde-panel (venstre) ---------- */
.case-facts-identity {
    flex: 0 0 clamp(15rem, 28%, 19rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--light);
    padding: 2.25rem 2rem;
}

.case-facts-kunde-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accentDarker);
    margin: 0 0 1.25rem 0;
}

.case-facts-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.case-facts-logo {
    max-height: 2.5rem;
    width: auto;
    max-width: 100%;
    margin-bottom: 1rem;
}

.case-facts-name {
    font-weight: 700;
    font-size: 1.3em;
    line-height: 1.25;
    margin-bottom: 0.4rem;
}

.case-facts-name a {
    color: inherit;
    text-decoration: none;
}

.case-facts-name a:hover {
    color: var(--accent);
}

/* Branche (direkte barn af .case-facts-identity) vejer tungere end de
   sekundære stats (Lokation/Størrelse/Kunde siden, samlet i
   .case-facts-meta-stats) — dem holder .case-facts-meta-stats farven på
   direkte, i stedet for en søskende-selector, fordi den nu er nødvendig for
   at flyde linjerne på mobil (se mediaquery). De sekundære linjer har hver
   et lille stroke-ikon (samme visuelle sprog som karrusel-pilene) for bedre
   scanbarhed — ikonet arver linjens farve via currentColor. */
.case-facts-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--textDarker);
    font-size: 0.9em;
    line-height: 1.4;
    margin: 0 0 0.35rem 0;
}

.case-facts-meta svg {
    width: 0.9em;
    height: 0.9em;
    flex-shrink: 0;
}

.case-facts-meta-stats {
    display: block;
}

.case-facts-meta-stats .case-facts-meta {
    color: var(--textMedium);
}

.case-facts-meta:last-child {
    margin-bottom: 0;
}

/* ---------- Fakta-grid (højre) ---------- */
dl.case-facts-grid {
    flex: 1;
    margin: 0;
    padding: 2.25rem clamp(1.75rem, 3vw, 2.75rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2rem;
    align-content: start;
}

.case-facts-item dt {
    font-weight: 600;
    color: var(--textDarker);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem 0;
}

.case-facts-item dd {
    margin: 0;
    color: var(--textMedium);
}

/* ---------- Chips (delt af alle rækker i fakta-gridet) ---------- */
ul.case-facts-pills {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.case-facts-pills li {
    margin: 0;
}

.case-facts-chip {
    display: inline-flex;
    border: 0.1rem solid var(--borderLight);
    /* Stor nok til pilleform på én linje, lille nok til at en ombrudt chip
       bliver en afrundet rektangel i stedet for en oval klat. */
    border-radius: 1.2rem;
    text-wrap: balance;
    padding: 0.2rem 0.85rem;
    background: #fff;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

/* Pink — linker videre til Pinkskys egne sider (Produkter/Løsninger/Tjenester). */
.case-facts-chip--accent {
    border-color: var(--accent);
    color: var(--accentDarker);
}

.case-facts-chip--accent:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Grå — understøttende teknisk detalje (Byggeklodser/Integrationer), uanset
   om den enkelte chip selv er et link. */
.case-facts-chip--muted {
    color: var(--textDarker);
}

a.case-facts-chip--muted:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ---------- Testimonial ---------- */
section.testimonial {
    padding: 3.5em 0;
    color: #fff;
    /* Temaets section.hasbackgroundcolor giver 2rem margin-top (hvid stribe
       over farvede bånd) — den fjernes kun for testimonials, så båndet
       ligger til kant mod forrige sektion uanset dens baggrund. */
    margin-top: 0;
}

section.testimonial .testimonial-figure {
    margin: 0;
    padding: 0;
}

section.testimonial .testimonial-quote {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

section.testimonial .testimonial-text {
    font-family: var(--fontBody);
    font-style: italic;
    font-weight: 400;
    font-size: 1.4em;
    line-height: 1.55;
    color: #fff;
    margin: 0;
}

section.testimonial .testimonial-text p {
    margin: 0 0 0.9em 0;
    font-size: inherit;
    color: inherit;
}

section.testimonial .testimonial-text p:last-child {
    margin-bottom: 0;
}

section.testimonial .testimonial-text p:first-child::before {
    content: "\201C";
}

section.testimonial .testimonial-text p:last-child::after {
    content: "\201D";
}

section.testimonial .testimonial-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.75rem;
}

section.testimonial .testimonial-photo {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
    filter: none;
}

section.testimonial .testimonial-attribution {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.35;
}

section.testimonial .testimonial-attribution strong {
    font-weight: 600;
    /* flex-række så LinkedIn-chippen centreres optisk mod navnet i stedet
       for at hænge på tekstens baseline */
    display: flex;
    align-items: center;
}

section.testimonial .testimonial-role {
    font-size: 0.85em;
    opacity: 0.85;
}

/* Lysegrå kvadratisk chip (LinkedIn-logoets egen form) bag det sorte
   linkedin.svg — accent-på-accent (.button.icon) ville være usynligt på det
   pink bånd. Bevidst ikke temaets --light, som er translucent sort og blot
   ville tone det pink. */
section.testimonial .testimonial-linkedin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    margin-left: 0.5rem;
    background: #e9e9e9;
    border-radius: 0.25rem;
    transition: opacity 0.15s ease;
}

section.testimonial .testimonial-linkedin img {
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    filter: none;
}

section.testimonial .testimonial-linkedin:hover,
section.testimonial .testimonial-linkedin:focus-visible {
    opacity: 0.75;
}

section.testimonial .testimonial-logo {
    max-height: 2rem;
    width: auto;
    background: #fff;
    border-radius: 0.5rem;
    padding: 0.3rem 0.5rem;
}

/* ---------- Case-highlight (brick_cases, 1 match) ----------
   NB: these are called "highlight", not "teaser", on purpose. Trafilatura — and the
   readability-style extractors AI crawlers are built on — unconditionally prune any
   div/section/span/p whose class or id contains "teaser" (TEASER_DISCARD_XPATH), which
   silently deleted this whole block from the extracted page text. Don't rename back. */
.case-highlight-card {
    position: relative; /* containing block for the title link's .stretched-link overlay */
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    border: 0.1rem solid var(--borderLight);
    border-radius: 1rem;
    background: var(--light);
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The card title is the only text inside the anchor, so it must read as a heading */
.case-highlight-link {
    color: inherit;
    text-decoration: none;
}

.case-highlight-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.case-highlight-logo {
    max-height: 3.5rem;
    max-width: 10rem;
    width: auto;
    flex-shrink: 0;
}

.case-highlight-content h3 {
    margin: 0.25rem 0 0.5rem 0;
    padding-top: 0;
}

.case-highlight-content p {
    margin: 0 0 1rem 0;
    color: var(--textMedium);
}

.case-highlight-label {
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accentDarker);
}

.case-highlight-heading {
    margin: 0 0 1.75rem 0;
}

/* ---------- Case-carousel (brick_cases, 2+ matches) ---------- */
.case-carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.case-carousel-header .case-highlight-heading {
    margin: 0 0 1.75rem 0;
}

.case-carousel-arrows {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.case-carousel-arrow {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 0.1rem solid var(--borderLight);
    background: #fff;
    color: var(--textDarker);
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.case-carousel-arrow:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.case-carousel-arrow:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}

.case-carousel-arrow:disabled:hover {
    border-color: var(--borderLight);
    color: var(--textDarker);
}

/* `display: flex` above has the same specificity as the UA stylesheet's
   `[hidden] { display: none }` and loads after it, so it silently wins and
   the hidden attribute never actually hides anything without this override. */
.case-carousel-arrow[hidden] {
    display: none;
}

.case-carousel-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 0.5rem;
    margin: 0 -0.1rem; /* undo case-card border clipping the focus ring */
}

.case-card {
    position: relative; /* containing block for the title link's .stretched-link overlay */
    flex: 0 0 21rem;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    border: 0.1rem solid var(--borderLight);
    border-radius: 1rem;
    overflow: hidden;
    background: var(--light);
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.case-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

/* Deliberately NOT position: relative — that would make this the containing block for
   the title link's .stretched-link overlay, shrinking the card's click target to just
   the media area. The photo variant stacks its title with CSS grid instead. */
.case-card-media {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.case-card-media--photo {
    aspect-ratio: 16 / 9;
    display: grid;
    /* Explicit row, so the box's aspect-ratio height stays definite and the image's
       height: 100% + object-fit: cover resolve against it. Without this the row sizes
       to the image's intrinsic height and both children overflow the clipped box. */
    grid-template-rows: 100%;
}

/* Photo and overlaid title share one grid cell */
.case-card-media--photo > img,
.case-card-media--photo > .case-card-title--overlay {
    grid-area: 1 / 1;
    min-width: 0;
    min-height: 0;
}

.case-card-media--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.case-card-media--logo {
    height: 7rem;
    background: linear-gradient(135deg, var(--light) 0%, var(--borderLight) 100%);
    padding: 1.5rem;
}

.case-card-media--logo img {
    max-height: 3.5rem;
    max-width: 80%;
    width: auto;
}

/* The 2-line clamp lives on the inner link, not on the h3: both card variants make the
   h3 a flex or grid item, and those blockify display, which kills -webkit-box. */
.case-card-title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.case-card-title {
    margin: 1rem 1.25rem 0 1.25rem;
    font-size: 1.05em;
    overflow: hidden;
}

.case-card-title--overlay {
    align-self: end;
    /* Grid-stacked on top of the photo, but a block background alone still paints UNDER
       a replaced element in the same cell, so the gradient needs its own stacking
       context. isolation (not position: relative) — a positioned ancestor would become
       the containing block for the title link's .stretched-link overlay and shrink the
       card's click target to just this heading. */
    isolation: isolate;
    margin: 0;
    padding: 1rem 1.25rem;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.case-card-content {
    padding: 1rem 1.25rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.case-card-content p {
    margin: 0;
    color: var(--textMedium);
    font-size: 0.9em;
    flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.case-card-content .button {
    align-self: flex-start;
}

/* ---------- Mobil ---------- */
@media (max-width: 700px) {
    .case-highlight-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    section.testimonial .testimonial-caption {
        flex-wrap: wrap;
    }

    .case-card {
        flex-basis: 15.5rem;
    }

    .case-facts-box {
        flex-direction: column;
    }

    .case-facts-identity {
        flex-basis: auto;
        padding: 1.75rem 1.5rem;
    }

    /* Bigger logo/name so the header carries real visual weight instead of
       reading as a compact aside above the (much longer) details grid. */
    .case-facts-logo {
        max-height: 3rem;
    }

    .case-facts-name {
        font-size: 1.5em;
    }

    /* Lokation/Størrelse/Kunde-siden flow as a wrapped inline row instead of
       stacking one-per-line — denser, and Branche above them still reads as
       the header's own line. */
    .case-facts-meta-stats {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.75rem;
    }

    .case-facts-meta-stats .case-facts-meta {
        margin-bottom: 0;
    }

    /* Single column, full-width groups — a 2-column split leaves each group
       too narrow for its pills to actually flow (they end up one-per-line
       anyway, just in a narrower box). Full width gives the flowing pills
       below room to genuinely wrap two-or-more per row. */
    dl.case-facts-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.5rem 1.25rem;
    }

    /* Pills flow horizontally on mobile — the vertical stack is a desktop
       affordance for the narrow 3-column grid tracks; on mobile it just
       makes every fact-group taller than it needs to be. */
    ul.case-facts-pills {
        flex-direction: row;
        flex-wrap: wrap;
    }
}