/**
 * 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: var(--font-condensed);
    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: var(--font-condensed);
    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;
}

/* Ingen hovereffekt på korten — kunden vill ha dem stilla (2026-09-08).
   Tangentbordsfokus är kvar: det är inte en hovereffekt utan den enda
   markering som visar var man står utan mus. */
.brk-pk__related-card:focus-visible { border-color: var(--brk-pk-ink); }

/* Bildkort med text ovanpå (Services-undersidorna, plan 034). Grundkortet ovan
   används på andra sidor och rörs inte. Fortfarande ingen hovereffekt. */
.brk-pk__related-card--overlay {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--white);
}
.brk-pk__related-card--overlay .brk-pk__related-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
}
.brk-pk__related-card--overlay .brk-pk__related-media img { height: 100%; aspect-ratio: auto; }
.brk-pk__related-card--overlay:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.brk-pk__related-overlay {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-s);
    padding: var(--space-xl) var(--space-m) var(--space-m);
    background: linear-gradient(to top, var(--black-trans-70), transparent);
}
.brk-pk__related-text { display: flex; flex-direction: column; gap: .6rem; }
.brk-pk__related-kicker {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-light-muted);
}
.brk-pk__related-card--overlay .brk-pk__related-title {
    padding: 0;
    margin: 0;
    font-size: var(--h4);
    line-height: 1.05;
    color: var(--white);
}
.brk-pk__related-icon { flex: none; font-size: 2rem; color: var(--white); fill: currentColor; }

/* ── Steg: "How it works" (plan 034) ─────────────────────────── */

.brk-pk__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-l);
}
.brk-pk__step {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-top: var(--space-s);
    border-top: 1px solid var(--brk-pk-line);
}
.brk-pk__step .brk-pk__card-num {
    font-family: inherit;
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--brk-pk-muted);
    margin: 0;
}
.brk-pk__step .brk-pk__card-title { margin: 0; }
.brk-pk__step .brk-pk__card-text { color: var(--brk-pk-muted); font-size: var(--text-m); }
@media (max-width: 991px) { .brk-pk__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 478px) { .brk-pk__steps { grid-template-columns: minmax(0, 1fr); } }

/* ── Rader i den svarta faktarutan (Spare parts, plan 034) ───── */

.brk-pk__box-rows { list-style: none; margin: 0; padding: 0; width: 100%; align-self: stretch; }
.brk-pk__box-rows > .brk-pk__box-row { width: 100%; } /* strecken över hela rutans bredd */
.brk-pk__box-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-xs) 0;
    border-top: 1px solid #333;
    color: var(--text-light);
    font-size: var(--text-m);
    font-weight: 500;
}
a.brk-pk__box-row { text-decoration: none; transition: color var(--dur-surface) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a.brk-pk__box-row:hover { color: var(--primary); } }
.brk-pk__box-note a { color: var(--text-light); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .brk-pk__box-note a:hover { color: var(--primary); } }
.brk-pk__box-row svg, .brk-pk__box-row .brxe-icon { flex: none; width: 1.8rem; height: 1.8rem; fill: currentColor; }

/* ── Jämförelse: maskin mot verktyg ──────────────────────────
   Claude Design "Brokk vs Jackhammer", alternativ 1c. Två kort med samma
   fyra rader, ett "vs"-märke emellan och ett svart band med slutsatsen.
   Första användning: /brokk-vs-jackhammers/ (3405). Klasserna är globala
   Bricks-klasser i kategorin Page kit, precis som brk-pk__*, så modulen
   går att bygga igen på en bransch- eller produktsida från byggaren.

   Typografi ärvs: kortnamnen och bandet är riktiga rubriker. Det enda
   som sätts här är etiketternas versalstil, som inte har någon global
   stil. */

/* flex-direction sätts uttryckligen: ACSS ger varje Bricks-block column. */
.brk-vs__head {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-m, 3rem);
    margin-bottom: var(--space-m, 3rem);
}

.brk-vs__head-lead {
    margin: 0;
    max-width: 52rem;
    font-size: var(--text-m, 1.6rem);
    line-height: 1.6;
}

.brk-vs__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.4rem minmax(0, 1fr);
    align-items: stretch;
}

.brk-vs__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-s, 2.2rem);
    padding: var(--space-m, 3rem);
    border-radius: var(--radius, 5px);
}

.brk-vs__card--brokk {
    background: var(--black, #000);
    color: var(--white, #fff);
}

.brk-vs__card--jack {
    background: var(--white, #fff);
    border: 1px solid var(--brk-pk-line);
    color: var(--brk-pk-muted);
}

/* Bildplattan: 16/9 på båda korten så raderna hamnar på samma höjd.
   Frilagd produktbild ligger hel (contain); ett foto beskärs (cover). */
.brk-vs__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-xs, 2px);
}

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

/* Frilagd produktbild ligger hel, foto beskärs. Inget mer än så.

   Här stod tidigare transform: translateY(-18%) scale(1.6) med förskjuten
   transform-origin, och object-position: 82% på fotot. Det var CSS som
   kompenserade för att källbilderna inte är beskurna för sin plats — och det
   håller bara så länge exakt de bilderna ligger kvar. Byter redaktören bild
   hamnar zoomen fel utan att någon rört stilmallen. Ramningen ska sitta i
   bilden, inte i CSS:en. */
.brk-vs__media--contain img { object-fit: contain; }

.brk-vs__kicker {
    margin: 0 0 .6rem;
    font-size: var(--text-xs, 1.2rem);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--primary, #ffcd00);
}

.brk-vs__card--jack .brk-vs__kicker { color: var(--base-semi-light, #a6a6a6); }

.brk-vs__name {
    margin: 0;
    line-height: 1;
}

.brk-vs__rows {
    display: flex;
    flex-direction: column;
}

.brk-vs__row {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--space-xs, 1.6rem);
    padding: var(--space-xs, 1.6rem) 0;
    border-top: 1px solid var(--brk-pk-line);
}

.brk-vs__card--brokk .brk-vs__row { border-top-color: var(--base-semi-dark, #363636); }

.brk-vs__label {
    font-size: var(--text-xs, 1.2rem);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--base-semi-light, #a6a6a6);
    line-height: 1.5;
}

.brk-vs__value {
    font-size: var(--text-s, 1.5rem);
    line-height: 1.5;
}

.brk-vs__card--brokk .brk-vs__value {
    font-weight: 500;
    color: var(--white, #fff);
}

.brk-vs__badge {
    display: flex;
    align-items: center;
    justify-content: center;
}

.brk-vs__badge-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: var(--radius-circle, 50vw);
    background: var(--primary, #ffcd00);
    color: var(--black, #000);
    font-weight: 700;
    font-size: var(--text-s, 1.5rem);
    text-transform: uppercase;
    /* Ringen i ytans färg lyfter märket från kortkanterna. */
    box-shadow: 0 0 0 8px var(--brk-pk-warm);
}

.brk-vs__band {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m, 3rem);
    margin-top: var(--space-m, 3rem);
    padding: var(--space-s, 2.2rem) var(--space-m, 3rem);
    background: var(--black, #000);
    color: var(--white, #fff);
    border-radius: var(--radius, 5px);
}

.brk-vs__band-text {
    margin: 0;
    max-width: 76rem;
    font-size: var(--h4);
    line-height: 1.2;
    color: var(--white, #fff);
}

.brk-vs__band-text em {
    font-style: normal;
    color: var(--primary, #ffcd00);
}

@media (max-width: 991px) {
    .brk-vs__grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--space-s, 2.2rem);
    }
}

@media (max-width: 478px) {
    .brk-vs__card { padding: var(--space-s, 2.2rem); }
    .brk-vs__row {
        grid-template-columns: minmax(0, 1fr);
        gap: .4rem;
    }
}