/**
 * Undersidornas designspråk.
 *
 * Det här var en gång stilmallen till en PHP-renderare som byggde hela
 * undersidan från ett ACF-fält. Renderaren är pensionerad — sidorna byggs i
 * Bricks nu — men reglerna härifrån är det som gjorde kitet värt något, och de
 * bor kvar. Klasserna är registrerade som globala Bricks-klasser och sätts från
 * byggaren, precis som ACSS-klasserna på resten av sajten.
 *
 * Det ursprungliga skälet gäller fortfarande: åtta undersidor gick fel på samma
 * fyra sätt, och en regel som rättas här rättas på alla.
 *
 *   Sektionsavstånd är 80 px, aldrig 200.
 *   Två ytor växlar, vit och varm.
 *   Bilder håller sig innanför sidmarginalen; ingenting halvbläder.
 *
 * Typografi saknas med flit: rubriker och knappar ärver Saira och knapputseendet
 * från temastilen, och en font-family här hade forkat designsystemet för de här
 * sidorna enbart. Undantagen är siffervärdet och kortnumret, som är
 * display-siffror utan globala stilar.
 *
 * Layout, rutnät och sektionspadding ligger INTE här utan i elementens egna
 * Bricks-inställningar, där de går att ändra i byggaren. Här ligger bara det som
 * ska vara lika överallt.
 */

/* Kitets tal ligger på :root sedan modulerna blev riktiga Bricks-sektioner.
   Tidigare bodde de på .brk-pk, wrappern som shortcoden la runt allt — den finns
   inte längre, och --brk-pk-section behöver nå sektionernas padding-kontroll i
   byggaren. */
:root {
    --brk-pk-warm: #F0ECE4;
    --brk-pk-line: var(--neutral-light, #d9d9d9);
    --brk-pk-muted: var(--accent, #575E62);
    --brk-pk-ink: var(--text-dark, #000);

    /* Ett tal för hela kitet. Sidorna som läste som oändliga gjorde det för att
       sektioner spacades individuellt, mellan 40 och 200 px. */
    --brk-pk-section: clamp(3.5rem, 6vw, 5rem);
}

/* ── Ytor ────────────────────────────────────────────────────── */

/* Vit sätts explicit och inte som frånvaro av klass: kortregeln längre ner
   behöver kunna se vilken yta den ligger på. */
.brk-pk__section--plain { background: var(--white, #fff); }
.brk-pk__section--warm  { background: var(--brk-pk-warm); }

/* ── Hero ────────────────────────────────────────────────────── */

.brk-pk__hero {
    position: relative;
    /* En höjd och en proportion för varje undersida. Beskuren, aldrig
       brevlådad — ett format som anpassar sig efter bilden är hur de gamla
       sidorna fick åtta olika hero-höjder. */
    height: clamp(20rem, 34vw, 48rem);
    overflow: hidden;
}

.brk-pk__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Ingress ─────────────────────────────────────────────────── */

.brk-pk__kicker {
    margin: 0 0 var(--space-xs, 1.2rem);
    font-size: var(--text-xs, 1.3rem);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brk-pk-muted);
}

/* Snedstrecket före rubriken. Dekor, och därför aria-hidden i markupen. */
.brk-pk__slash {
    color: var(--secondary, #f1b204);
    margin-right: .12em;
}

.brk-pk__lead {
    margin: 0;
}

/* ── Kortrad ─────────────────────────────────────────────────── */

.brk-pk__card-grid {
    margin: var(--space-m, 3rem) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    /* auto-fit, så tre förmåner och fyra steg använder samma rutnät utan att
       någon rad ser trasig ut. */
    grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
    gap: var(--space-s, 2.2rem);
}

.brk-pk__card {
    background: var(--white, #fff);
    border: 1px solid var(--brk-pk-line);
    padding: var(--space-s, 2.2rem);
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* På en varm yta är korten vita; på en vit behöver de den varma tonen i
   stället, annars försvinner de in i sidan. */
.brk-pk__section--plain .brk-pk__card { background: var(--brk-pk-warm); border-color: transparent; }

.brk-pk__card-num {
    font-family: "Saira Semi Condensed", sans-serif;
    font-size: var(--text-l, 2.4rem);
    font-weight: 700;
    line-height: 1;
    color: var(--secondary, #f1b204);
    margin-bottom: .2em;
}

.brk-pk__card-title { margin: 0; }
.brk-pk__card-text { margin: 0; font-size: var(--text-s, 1.5rem); line-height: 1.55; }

/* ── Sifferrad ───────────────────────────────────────────────── */

.brk-pk__stat { text-align: center; }

.brk-pk__stat-value {
    /* Ett tunt gult understreck i stället för en fylld cirkel: gult är accenten
       för handling och emfas på den här sajten, inte en form att fylla. */
    font-family: "Saira Semi Condensed", sans-serif;
    display: inline-block;
    font-size: var(--h1);
    font-weight: 700;
    line-height: 1;
    border-bottom: 2px solid var(--secondary, #f1b204);
    padding-bottom: .15em;
}

.brk-pk__stat-label {
    margin: var(--space-xs, 1.2rem) 0 0;
    font-size: var(--text-xs, 1.3rem);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brk-pk-muted);
}

/* ── Relaterat ───────────────────────────────────────────────── */

.brk-pk__related-grid {
    margin: var(--space-m, 3rem) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--space-s, 2.2rem);
}

.brk-pk__related-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--brk-pk-line);
    background: var(--white, #fff);
    color: inherit;
    text-decoration: none;
}

.brk-pk__related-media {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--brk-pk-warm);
    overflow: hidden;
}

.brk-pk__related-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.brk-pk__related-title {
    display: block;
    padding: var(--space-xs, 1.2rem) var(--space-s, 2.2rem) var(--space-s, 2.2rem);
    font-weight: 600;
}

.brk-pk__related-card:hover,
.brk-pk__related-card:focus-visible { border-color: var(--brk-pk-ink); }