/* =========================================================
   Industry page — body sections
   [brokk_industry_segments] / [brokk_industry_machines] /
   [brokk_industry_versions] / [brokk_industry_attachments] /
   [brokk_industry_cases], rendered by components/industry-lower/.

   Namespace: .brk-il*. Nothing here is shared with another
   surface, so every rule is scoped to that prefix.

   No font-family anywhere: headings and card names are real
   h2/h3 elements and inherit Saira from the "brokk" theme
   style. Body copy inherits Geist from the root.
   ========================================================= */

/* Each shortcode returns an empty string when its data is missing (no
   machines matched, no featured links/related posts, no cases yet), but the
   Bricks section around it still renders and still applies its section
   padding. The three sections carry .brk-il-section so this can collapse
   them without naming element IDs — see components/product-lower.css for
   the same pattern and the measurement behind it. */
.brk-il-section:not(:has(.brk-il)) {
    display: none;
}

.brk-il {
    --brk-il-line: var(--neutral-light, #d9d9d9);
    --brk-il-hairline: var(--neutral-trans-10, rgba(0,0,0,0.1));
    --brk-il-muted: var(--accent, #575E62);
    --brk-il-surface: var(--white, #fff);
    --brk-il-plate: #eee;

    width: 100%;
}

/* ── Section head: heading left, link right, on one baseline ── */
.brk-il__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-m, 3rem);
    flex-wrap: wrap;
    margin-bottom: var(--space-m, 3rem);
}

.brk-il__title {
    margin: 0;
}

.brk-il__title span {
    color: var(--secondary, #f1b204);
}

.brk-il__head-link {
    color: var(--brk-il-muted);
    font-size: var(--text-s, 1.5rem);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    flex: 0 0 auto;
}

.brk-il__head-link:hover,
.brk-il__head-link:focus-visible {
    color: var(--text-dark, #000);
}

.brk-il__arrow {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    color: var(--brk-il-muted);
}

/* Pilknuffen kommer från style.css (plan 079); samma vikt här så att färgbytet behåller sin toning. */
:is(a, button) svg.brk-il__arrow {
    transition: translate var(--dur-fast) var(--ease-out), color var(--dur-base) ease;
}

/* ── Card grids (Machines, Cases) ────────────────────────────
   auto-fit: both sections carry as few as 1-2 items on some
   industries (Nuclear: 3 machines, Security & Rescue: 2), and a
   fixed column count would leave grey holes. */
/* min(…, 100%) rather than a bare minimum: auto-fit honours the minimum even
   when it is wider than the container, so a 300px track pushes past a 320px
   phone and the whole page scrolls sideways. Wrapping it in min() lets the
   track shrink to the container instead, which removes the need for a
   breakpoint here at all. */
.brk-il__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    gap: var(--grid-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Kvantitetsfråga: exakt tre kort.
   ACSS --grid-auto-3 sätter minsta spalt till ~360px. Vid 1091px containerbredd
   får tre sådana inte plats (3 × 360 + 2 × gap = 1136px), så auto-fit faller till
   två spalter — och tre kort blir två plus en föräldralös halvbred rad.
   Sex maskiner (Tunneling) och åtta (Mining) går jämnt ut på två spalter; tre
   (Security & Rescue) gör det inte.

   Lösningen sänker minsta spalt just för tre-fallet i stället för att låsa
   spaltantalet. Då fyller korten raden när de får plats och faller till en spalt
   på smal skärm av sig själv — samma resonemang som min()-kommentaren ovan, och
   utan en egen brytpunkt. */
.brk-il__grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
}

/* A container so the fact row can respond to the CARD's width rather than the
   viewport's. The two do not track each other here: at 1440 the grid puts four
   cards in a row at ~307px each, while the /product archive puts three at
   ~513px, so a viewport breakpoint would fire on the wrong surface. */
.brk-il__card {
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    border: 1px solid var(--brk-il-line);
    border-radius: var(--radius, 5px);
    background: var(--brk-il-surface);
    overflow: hidden;
}

.brk-il__card-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

/* Machine cards: the image is its own link (matches the /product archive
   card — title/excerpt/facts are not clickable there, only the image and
   the "View machine" button are). Case cards still wrap the whole card in
   one link — see .brk-il__card--case below. */
.brk-il__media {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.brk-il__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--dur-image-zoom) var(--ease-image-zoom); /* samma bildzoom i alla kort */
}

.brk-il__card--case .brk-il__media {
    aspect-ratio: auto;
}

.brk-il__media--case {
    height: auto;
}

.brk-il__media--case img {
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

@media (hover: hover) and (pointer: fine) {
    .brk-il__media:hover img,
    .brk-il__card--case .brk-il__card-link:hover .brk-il__media img {
        transform: scale(1.03);
    }
}

@media (prefers-reduced-motion: reduce) {
    .brk-il__media img,
    .brk-il__arrow {
        transition: none;
    }
    .brk-il__media:hover img,
    .brk-il__card--case .brk-il__card-link:hover .brk-il__media img {
        transform: none;
    }
}

/* ── Touch (mobilpoleringen 2026-09-14) ──────────────────────
   Länkraden under maskinkorten ("+ Compare models" / "Find a dealer") var
   115×33 och 74×33. Under 992 px får länkarna 44 px höjd; raden växer 11 px,
   vilket kortet tål. */
@media (max-width: 991px) {
    .brk-il__head-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ── Bransch-subnaven under 992 (Bricks-elementet #sticky-subnav) ────────
   Naven är ett Bricks nav-menu-element i mallen 9194, så dess CSS bor i
   databasen. Det som saknades i mobil ligger här, keyat på elementets id:

   - Länkarna var 12 px höga (bara textraden) i ett 62 px band: 44 px träffyta,
     och bandets padding dras ned lika mycket så att höjden står still.
   - Scroll-snap på scrollern (den brxe-nav-menu-div som redan har
     overflow-x: auto): ett svep landar på ett helt menyord, inte mitt i.
   Fade-indikatorn i högerkant (.brk-fade-right) fanns redan. */
@media (max-width: 991px) {
    #sticky-subnav {
        padding-block: 0.8rem;
    }

    #sticky-subnav .brxe-nav-menu {
        scroll-snap-type: x proximity;
        scroll-padding-inline: var(--gutter, 2rem);
    }

    #sticky-subnav .bricks-nav-menu > li {
        scroll-snap-align: start;
    }

    #sticky-subnav .bricks-nav-menu a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ── Related ─────────────────────────────────────────────────
   Skiss 2026-09-21: fyra kort i raden — bild 16:9, "TYP · DATUM", rubrik —
   hela bredden, ingen kortram. Ersätter den kapade tvåspaltslistan från
   "Mer om och relaterat" (alt 1b); delbranscherna ligger i registret. */
.brk-il__related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
    gap: var(--grid-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.brk-il__related-item {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: inherit;
    text-decoration: none;
}

.brk-il__related-item:focus-visible {
    outline: 2px solid var(--primary, #ffcd00);
    outline-offset: 2px;
}

.brk-il__related-thumb {
    display: block;
    aspect-ratio: 16 / 10;
    margin-bottom: 0.6rem;
    overflow: hidden;
    background: var(--brk-il-plate);
    border-radius: var(--radius-xs, 2px);
}

.brk-il__related-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-image-zoom) var(--ease-image-zoom); /* samma bildzoom i alla kort */
}

@media (hover: hover) and (pointer: fine) {
    .brk-il__related-item:hover .brk-il__related-thumb img {
        transform: scale(1.03);
    }
}

.brk-il__related-meta {
    font-size: var(--text-xs, 1.2rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--base-semi-light, #a6a6a6);
}

.brk-il__related-title {
    font-size: var(--h5, 1.8rem);
    font-family: var(--font-condensed);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.15;
}

/* ── Case card ───────────────────────────────────────────── */
.brk-il__grid--cases {
    grid-template-columns: repeat(auto-fit, minmax(320px, 460px));
    justify-content: start;
}

.brk-il__case-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-s, 2.2rem) var(--space-m, 3rem) var(--space-xs, 3rem);
}

.brk-il__case-meta {
    margin: 0 0 var(--space-xs, 1.6rem);
    color: var(--base-semi-light, #a6a6a6);
    font-size: var(--text-xs, 1.2rem);
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.5;
    text-transform: uppercase;
}

.brk-il__case-title {
    margin: 0 0 var(--space-xs, 1.6rem);
    font-size: var(--h4, 2rem);
}

.brk-il__case-excerpt {
    margin: 0 0 var(--space-m, 3rem);
    font-size: var(--text-s, 1.5rem);
    font-weight: 400;
    color: var(--text-dark-muted);
}

.brk-il__case-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s, 2.2rem);
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: var(--space-xs, 1.6rem);
    border-top: 1px solid var(--brk-il-hairline);
    color: var(--brk-il-muted);
    font-size: var(--text-xs, 1.2rem);
}

.brk-il__case-robot strong {
    color: var(--text-dark, #000);
}

.brk-il__case-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    white-space: nowrap;
}

.brk-il__case-cta .brk-il__arrow {
    width: 1.4rem;
    height: 1.4rem;
}

/* ── Focus ────────────────────────────────────────────────
   The whole card is one link, so the ring belongs on the card
   rather than on the text inside it. */
.brk-il__card-link:focus-visible,
.brk-il__related-item:focus-visible {
    outline: 2px solid var(--primary, #ffcd00);
    outline-offset: 2px;
}

/* ── Fact value with no data ──────────────────────────────
   Only reachable via the Reach column, which is an explicit choice on the
   industry and therefore holds its place as a dash instead of collapsing
   the card to two columns. See industry-lower.php. */
.brk-il__fact-value--empty {
    color: var(--base-semi-light, #a6a6a6);
}

/* ── Mission segments ─────────────────────────────────────
   Security & Rescue only. Same auto-fit idea as the other grids so 1-4
   segments all lay out without a media query. 380px rather than 300px:
   the applications list needs the width to avoid one word per line. */
.brk-il__grid--segments {
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
}

.brk-il__segment {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--brk-il-line);
    background: var(--brk-il-surface);
    border-radius: var(--radius, 5px);
}

.brk-il__segment-media {
    overflow: hidden;
}

.brk-il__segment-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 3 / 2; /* = Mediaflows "Website content" (1440×960): ingen beskärning */
}

.brk-il__segment-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 1.6875rem);
    flex: 1;
    padding: var(--space-m, 3rem);
}

.brk-il__segment-title {
    margin: 0;
    font-size: var(--h3, 2.8rem);
}

.brk-il__segment-intro {
    margin: 0;
    font-size: var(--text-s, 1.5rem);
    line-height: 1.6;
    color: var(--text-dark-muted);
}

.brk-il__segment-label {
    margin: 0;
    padding-top: var(--space-s, 2.25rem);
    border-top: 1px solid var(--brk-il-hairline);
    font-size: var(--text-xs, 1.2rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brk-il-muted);
}

.brk-il__segment-apps {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 1.6875rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Grid rather than a list marker: the checkmark is a real element so it can
   take the brand colour, and the second column keeps wrapped lines aligned
   under each other instead of under the icon. */
.brk-il__segment-apps li {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.6rem;
    align-items: start;
    font-size: var(--text-s, 1.5rem);
    line-height: 1.55;
}

/* Black, not the brand yellow: at 20px the tick is a thin stroke, and yellow
   on white sits at roughly 1.5:1 contrast — it read as a smudge rather than a
   mark. The yellow accent stays on the section headings, where it is large
   enough to carry it. */
.brk-il__check {
    width: 2rem;
    height: 2rem;
    color: var(--text-dark, #000);
    /* The glyph sits high inside its 24px viewBox, so the box has to drop a
       little for the tick to read as centred on the first line of text. */
    margin-top: 0.15em;
}

/* ── Versions (MX / MD / MN) ──────────────────────────────
   Tre kort i segmentkortens mönster (design 2026-10-05): namn med snedstreck
   och etikett, en rad text, en etikettledd speclista med tunna linjer.
   Samma auto-fit som övriga rutnät, så 2–4 versioner fungerar och korten
   staplas på smal skärm med etiketterna kvar på varje rad. */
.brk-il__versions-lead {
    max-width: 64rem;
    margin: calc(var(--space-xs, 1.6875rem) * -1) 0 var(--space-m, 3rem);
    font-size: var(--text-s, 1.5rem);
    line-height: 1.6;
    color: var(--text-dark-muted);
}

.brk-il__grid--versions {
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

.brk-il__version {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--brk-il-line);
    background: var(--brk-il-surface);
    border-radius: var(--radius, 5px);
    overflow: hidden;
}

.brk-il__version-media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3 / 2;
}

.brk-il__version-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-m) var(--space-m) var(--space-s);
}

/* Namn stort, etiketten som gul bricka (design 2026-10-14). */
.brk-il__version-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
}

.brk-il__version-name {
    margin: 0;
    font-size: var(--h2);
    line-height: 1;
}

.brk-il__version-tag {
    flex: none;
    padding: .7rem 1rem;
    border-radius: var(--radius-xs);
    background: var(--primary);
    color: var(--text-dark);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}

/* min-height: en rad text i ett kort och två i ett annat ska inte förskjuta speclistorna. */
.brk-il__version-intro {
    margin: var(--space-xs) 0 var(--space-s);
    min-height: 3.1em;
    font-size: var(--text-m);
    line-height: 1.55;
    color: var(--text-dark);
    text-wrap: pretty;
}

.brk-il__version-specs {
    margin: 0;
    border-top: 1px solid var(--brk-il-line);
}

.brk-il__version-row {
    display: grid;
    grid-template-columns: 13.2rem minmax(0, 1fr); /* plats för "COMMUNICATION" i versaler */
    gap: 2rem;
    padding: 2rem 0;
    border-bottom: 1px solid var(--brk-il-hairline);
}

/* Kortets ram avslutar listan; inget eget streck under sista raden (Anders 2026-10-14). */
.brk-il__version-row:last-child {
    border-bottom: 0;
    padding-bottom: .4rem;
}

.brk-il__version-row dt {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.7;
    color: var(--brk-il-muted);
}

.brk-il__version-row dd {
    margin: 0;
    font-size: var(--text-s);
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-dark);
}

@media (max-width: 478px) {
    .brk-il__version-row { grid-template-columns: 10.5rem minmax(0, 1fr); gap: 1.4rem; padding: 1.6rem 0; }
}

/* Saknat värde: raden står kvar, texten "Not included" dämpad. */
.brk-il__version-row--empty dd {
    font-weight: 400;
    color: var(--brk-il-muted);
}

/* ── Attachment chips ─────────────────────────────────────
   Renders once product-attachments carry a brokk_industry term. Sedan
   2026-08-31 gör 19 av dem det, fördelade på sju branscher.

   Formen är INTE längre rund. Chipsen stod tidigare på --radius-circle, men
   pillerformen är utfasad över hela sajten: språkchipsen i marknadsväljaren,
   filterpillren på produktarkivet och de här gick alla till en nästan rak kant
   under samma omgång.

   Tokenet är --radius-xs, samma som knapparna. DESIGN.md kallar --radius-xs
   knapparnas steg och --radius husets allmänna standard, men beslutet
   2026-08-31 är att pillerfamiljen — chips, filterknappar, filtrets toggle —
   ska dela kant med knapparna snarare än med panelerna. Sidan har annars två
   nästan lika raka kanter bredvid varandra, vilket bara läses som slarv.

   Dropdownmenyns rader och chips ligger kvar på --hdd-link-radius (4px) och
   ska vara lite rundare än knapparna. Panelytor (bannern, marknadsmodalen)
   ligger på --radius (5px). De är inte en del av den här familjen.

   --radius-circle finns kvar som sajtens enda token för verkligt rund form
   (se DESIGN.md > Shapes) — den används bara inte här längre. */
.brk-il__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs, 1.6875rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.brk-il__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, 1.2rem);
    /* Paddingen som en variabel: bildwrappern måste dra tillbaka exakt samma
       värde för att gå ut i kanten, och två lösa 1rem hade glidit isär. */
    --brk-il-chip-pad-y: 1rem;
    padding: var(--brk-il-chip-pad-y) var(--space-s, 2.25rem);
    border: 1px solid var(--brk-il-line);
    border-radius: var(--radius-xs, 2.222px);
    background: var(--brk-il-surface);
    /* Bilden är utfallande, så den måste klippas mot chipets radie. */
    overflow: hidden;
    color: inherit;
    font-size: var(--text-s, 1.5rem);
    font-weight: 600;
    text-decoration: none;
}

/* Ingen färgregel här. Chipsen bar en som satte --text-dark-muted, därför att
   ACSS länkhover annars färgade dem #806600. Den gulbruna tonen är sedan
   2026-08-31 utbytt globalt i ACSS — --link-color-hover är #000000 — så chipsen
   ärver nu svart som alla andra länkar, och ramen ensam bär hovern. */
/* Utfallande bild: den går ut i chipets vänsterkant och fyller hela höjden.
   :has() tar bort vänsterpaddingen bara på de chips som faktiskt har en bild —
   ett chip utan bild behåller sin normala padding och ser oförändrat ut.

   object-fit: cover, inte contain. Produktbilderna har mycket luft inbyggd
   runt redskapet; contain visade hela filen och redskapet blev några få pixlar
   i en ruta som mest var tom. cover fyller ytan och beskär bort marginalen. */
.brk-il__chip:has(.brk-il__chip-media) {
    padding-left: 0;
}

/* Wrappern sträcker sig — inte bilden. align-self: stretch biter inte på ett
   <img> med egen proportion, och height:100% mot en auto-hög förälder blir
   auto.

   Negativ marginal uppåt/nedåt: stretch sträcker bara till FLEXRADENS höjd,
   alltså chipets innehållsbox utan padding. Uppmätt gav det 37px i ett 59px
   chip — bilden låg inte an mot kanterna. Marginalen drar tillbaka chipets
   egen vertikala padding så bilden verkligen blir utfallande. */
.brk-il__chip-media {
    flex: none;
    align-self: stretch;
    width: 5.6rem;
    margin-block: calc(var(--brk-il-chip-pad-y) * -1);
    overflow: hidden;
}

/* ── Registrets chips: [brokk_industry_attachments chips_only="true"] i
   sidospalten (designen "Branschsida omviktad" 3a, 2026-09-21). Samma chip
   som ovan, tätare och utan bild — registret är smalt och chipsen ska läsas
   som en överblick. Klassnamnet --box är kvar från den svarta boxen (04a) som
   det här ersatte; markupen i PHP är oförändrad. */
.brk-il--box .brk-il__chips {
    gap: var(--space-xs, 1.2rem);
}

.brk-il--box .brk-il__chip {
    --brk-il-chip-pad-y: 1.1rem;
    padding-inline: var(--space-s, 1.8rem);
    font-size: var(--text-s, 1.5rem);
    font-weight: 500;
}

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

.brk-il__chip:hover,
.brk-il__chip:focus-visible {
    border-color: var(--text-dark, #000);
}

.brk-il__chip:focus-visible {
    outline: 2px solid var(--primary, #ffcd00);
    outline-offset: 2px;
}

/* ── Maskinkorten (designen "Branschsida omviktad" 3a + skiss 2026-09-21) ──
   Samma kort som /product-arkivet — .brk-il__card ger ram, radie och vit
   yta, rutnätet ger mellanrummen — men avskalat: bild, namn + pil, tre fakta.
   30 rem minsta kort: fyra i raden vid 1480 px, sju maskiner + jämförelse-
   kortet blir 4 + 4. */
.brk-il__grid--machines,
.brk-il__grid--machines:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
}

/* Högst fyra i raden (skissen). Auto-fit ensamt gav fem på breda skärmar,
   med så smala kort att faktan staplades. Samma tak för Related. */
@media (min-width: 1280px) {
    .brk-il__grid--machines,
    .brk-il__grid--machines:has(> :nth-child(3):last-child),
    .brk-il__related-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.brk-il__cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 1.4rem);
    height: 100%;
    padding: var(--space-s, 2.2rem);
    color: inherit;
    text-decoration: none;
}

.brk-il__cell .brk-il__media {
    aspect-ratio: 4 / 3;
}

.brk-il__cell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs, 1rem);
}

.brk-il__card-name {
    margin: 0;
    font-size: var(--h5, 1.9rem);
    line-height: 1.1;
}

.brk-il__cell:hover .brk-il__arrow,
.brk-il__cell:focus-visible .brk-il__arrow {
    color: var(--text-dark, #000);
}

.brk-il__cell:focus-visible {
    outline: 2px solid var(--primary, #ffcd00);
    outline-offset: -2px;
}

/* Tre fakta i en rad under ett streck. min-width: 0 av samma skäl som
   tidigare: värden som "1230 kg; 2712 lbs" får inte sätta ett golv för
   kolumnen. Under 36 rem cellbredd staplas de. */
/* auto-spår, inte 1fr: "PRODUCTIVITY" (och "Produktivität", "Wydajność") är
   bredare än en tredjedel av ett smalt kort och klipptes av kortets
   overflow. Med auto får den kolumnen sin bredd och de korta värdena
   ("37 kW") lämnar plats. Räcker inte det bryts etiketten i stället för
   att klippas. */
.brk-il__card-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    margin-top: auto;
    padding-top: var(--space-xs, 1.2rem);
    border-top: 1px solid var(--brk-il-line);
}

.brk-il__fact {
    /* Etikett, värde och lbs i delade rader (subgrid): bryts en etikett
       ("PRODUCTIVITY" i smala kort) står värdena ändå på samma linje. */
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
    min-width: 0;
    padding-right: var(--space-xs, 1.2rem);
}

/* Skiljelinjer mellan kolumnerna som på /product-kortet. */
.brk-il__fact + .brk-il__fact {
    padding-left: var(--space-xs, 1.2rem);
    border-left: 1px solid var(--brk-il-line);
}

.brk-il__fact-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: var(--text-xs, 1.2rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    overflow-wrap: break-word; /* inte anywhere: den gör min-content till en bokstav, så auto-kolumnen krymper och "PRODUCTIVIT/Y" bryts */
    hyphens: auto;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--base-semi-light, #a6a6a6);
}

/* Huvudvärdet med statbarens viktning — Saira, fett, versaler — men i
   kortets storlek, inte produktsidans. Den alternativa enheten (lbs) liten
   och tunn under. */
.brk-il__fact-value {
    display: block;
    font-family: var(--font-condensed);
    font-size: var(--text-s, 1.5rem);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--text-dark, #000);
}

.brk-il__fact-alt {
    display: block;
    margin-top: 0.2rem;
    font-size: var(--text-xs, 1.2rem);
    font-weight: 400;
    color: var(--text-dark-muted, #595959);
}

/* Tre kolumner behöver ~30 rem; under det staplas faktan. Cellerna är
   30–37 rem breda på desktop, så tröskeln ligger under dem med marginal
   för översättning ("Produktivität"). */
@container (max-width: 300px) {
    .brk-il__card-facts {
        grid-template-columns: 1fr;
    }

    .brk-il__fact,
    .brk-il__fact + .brk-il__fact {
        padding: 0;
        border-left: 0;
    }

    .brk-il__fact + .brk-il__fact {
        margin-top: var(--space-xs, 1.2rem);
        padding-top: var(--space-xs, 1.2rem);
        border-top: 1px solid var(--brk-il-line);
    }
}

/* "Not sure which one?" — det sista kortet i rutnätet, i luckan efter
   maskinerna som i skissen. Grå yta, texten nertill. Faller det på egen rad
   (tre maskiner + kortet på smal skärm) håller min-height det från att bli
   en tunn remsa. */
.brk-il__card--compare {
    /* --brk-il-compare-bg sätts inline per kort (industry-lower.php) — samma
       bild på alla branschsidor. Gradienten säkrar läsbar text nertill oavsett
       var beskärningen råkar hamna; utan --brk-il-compare-bg blir det bara
       den gråa ytan som innan. */
    /* Bilden har sin egen mörka toning nertill redan — ingen extra
       gradient/overlay ovanpå den. */
    background:
        var(--brk-il-compare-bg, none) center top / cover no-repeat,
        var(--neutral-ultra-light, #f6f6f6);
    border-color: transparent;
}

/* Hela rutan är länken: texten nertill, sedan "Compare models" med pil. */
.brk-il__compare-link {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-xs, 1.4rem);
    /* Rutan stretchar annars till radens övriga kort (fint när fler maskiner
       delar raden), men står den ensam på sin egen rad finns inget att
       stretcha mot och den föll tillbaka till en nästan kvadratisk box —
       för kort för att bildens egen mörka botten skulle nå texten. */
    min-height: 38rem;
    padding: var(--space-s, 2.2rem);
    color: inherit;
    text-decoration: none;
}

.brk-il__compare-text {
    font-size: var(--text-s, 1.5rem);
    font-weight: 400; /* länken ärver annars fetstil till brödtexten */
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
}

.brk-il__compare-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: var(--text-s, 1.5rem);
    font-weight: 600;
    color: #fff;
}

.brk-il__compare-cta .brk-il__arrow {
    color: currentColor;
}


.brk-il__compare-link:hover .brk-il__compare-cta,
.brk-il__compare-link:focus-visible .brk-il__compare-cta {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.brk-il__compare-link:focus-visible {
    outline: 2px solid var(--primary, #ffcd00);
    outline-offset: -2px;
}

/* ── Registret i sidospalten (Bricks-blocket med klassen brk-il-register) ──
   Ersätter den svarta boxen (04a): tunna linjer på vit botten. Ordningen är
   designens — applikationer, redskap, knappar — och blocket är fortfarande
   sticky via de globala klasserna. Rubriker (h3) ärver Saira från temastilen. */
.brk-il-register {
    /* Ingen linje överst: den första sektionen börjar direkt (2026-09-21). */
    border-top: 0;
}

.brk-il-register > * {
    padding-block: var(--space-m, 3rem);
    border-bottom: 1px solid var(--brk-il-line, var(--neutral-light, #d9d9d9));
}

.brk-il-register > :last-child {
    border-bottom: 0;
}

/* Bricks skriver ut shortcode-elementets <div> även när shortcoden returnerar
   tomt (Cement, Nuclear, Security & Rescue saknar applikationer). Utan detta
   hade den tomma diven fått linje och luft som en egen sektion. */
.brk-il-register > .brxe-shortcode:not(:has(*)) {
    display: none;
}

.brk-il__reg-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s, 1.8rem);
    margin-bottom: var(--space-s, 1.8rem);
}

/* Sektionsrubriken ska väga mer än radernas titlar: h3-storlek och 700,
   raderna h5 och 600. Temastilens h3 är 600, därav den uttryckliga vikten. */
.brk-il-register .brk-il__reg-title,
.brk-il-register .brk-il__reg-head h3 {
    margin: 0;
    font-size: var(--h3, 2.6rem);
    font-weight: 700;
    line-height: 1.1;
}

.brk-il__reg-count {
    font-size: var(--text-s, 1.3rem);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--base-semi-light, #8a8a8a);
    white-space: nowrap;
}

.brk-il-register .brk-il__reg-link {
    font-size: var(--text-s, 1.4rem);
    font-weight: 600;
    color: var(--text-dark-muted, #595959);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.brk-il-register .brk-il__reg-link:hover,
.brk-il-register .brk-il__reg-link:focus-visible {
    color: var(--text-dark, #000);
}

.brk-il__apps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.brk-il__app + .brk-il__app {
    border-top: 1px solid var(--brk-il-hairline, rgba(0,0,0,0.1));
}

/* De dolda raderna ligger i en egen <ol> inuti <details> (brk_il_expandable_rows()),
   så "+"-regeln ovan ser dem aldrig som syskon till den sista synliga raden —
   strecket mellan rad 3 och rad 4 saknas annars när listan fälls ut. */
.brk-il__apps--more {
    border-top: 1px solid var(--brk-il-hairline, rgba(0,0,0,0.1));
}

.brk-il__app-link {
    display: grid;
    grid-template-columns: 9.6rem minmax(0, 1fr) 2.4rem;
    align-items: start;
    gap: var(--space-s, 1.8rem);
    padding: var(--space-s, 2rem) 0;
    color: inherit;
    text-decoration: none;
}

/* Tumnageln i överkant, i linje med titelns första rad; pilen förblir centrerad. */
.brk-il__app-thumb {
    display: block;
    overflow: hidden;
    border-radius: var(--radius, 4px);
    background: var(--shade-ultra-light, rgba(0,0,0,0.05));
    aspect-ratio: 4 / 3;
}

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

.brk-il__app-title {
    display: block;
    font-family: var(--font-condensed);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--h5, 2rem);
    line-height: 1.1;
}

.brk-il__app-intro {
    display: block;
    margin-top: 0.6rem;
    font-size: var(--text-s, 1.5rem);
    font-weight: 400; /* länken ärver annars fetstil till intron */
    line-height: 1.55;
    color: var(--text-dark-muted, #595959);
}

/* Pilen i samma 24 px som Related-kortens och maskinkortens. */
.brk-il__app-link .brk-il__arrow {
    align-self: center;
    width: 2.4rem;
    height: 2.4rem;
}

.brk-il__app-link:hover .brk-il__arrow,
.brk-il__app-link:focus-visible .brk-il__arrow {
    color: var(--text-dark, #000);
}

.brk-il__app-link:focus-visible {
    outline: 2px solid var(--primary, #ffcd00);
    outline-offset: 2px;
}

/* "Show N more"/"Show less" ska stå EFTER hela listan, inte mellan raderna.
   <summary> måste vara <details>:s första barn i HTML (annars läser skärm-
   läsare/tangentbordsnavigering fel), så ombytet görs med flex-order: den
   dolda listan (order 1) före knappen (order 2), oavsett DOM-ordning. */
/* .brk-more.brk-more i read-more.css sätter display:block med dubblerad
   klass (samma specificitet-trick som här, se den filens kommentar) — och
   read-more.css laddas EFTER den här filen, så vid lika specificitet vinner
   den på källordning. Tre klasser för att vinna på specificitet i stället. */
.brk-more.brk-more.brk-il__apps-more {
    display: flex;
    flex-direction: column;
}

.brk-il__apps-more > .brk-more__toggle {
    order: 2;
    padding-top: var(--space-s, 1.8rem);
}

.brk-il__apps-more > .brk-il__apps--more {
    order: 1;
}

/* Knappen renderas av en shortcode (antalet är dynamiskt); Bricks wrapper-div
   är flex-barnet i knappraden, så knappen fyller den. */
.brk-il-register .brk-il__machines-btn {
    display: flex;
    align-items: center;
    justify-content: space-between; /* text vänster, pil höger */
    gap: 1rem;
    width: 100%;
    text-align: left;
}

/* Pil nedåt: knappen hoppar till maskinerna längre ner på sidan. */
.brk-il__machines-btn-arrow {
    width: 1.8rem;
    height: 1.8rem;
    transform: rotate(90deg);
    transition: transform var(--dur-base) ease;
}

.brk-il__machines-btn:hover .brk-il__machines-btn-arrow,
.brk-il__machines-btn:focus-visible .brk-il__machines-btn-arrow {
    transform: rotate(90deg) translateX(3px);
}

/* Knappraden byter läge EN gång på vägen från desktop till mobil.
   Registrets bredd är inte monoton mot fönstret (30–40 % av fönstret ner till
   991 px, sedan full bredd, sedan smal igen), så ett innehålls- eller
   container-styrt villkor fick knapparna att växla rad/stapel fem–sex gånger
   (2026-09-22). Därför ett enda fönstervillkor: rad från 1600 px, där
   registret är ≥ 565 px och båda knapparna ryms på en rad utan radbruten
   text; staplade i full bredd under det. Texten bryts aldrig (nowrap +
   min-width: max-content) — blir en översättning för lång på bred skärm
   lägger flex-wrap knappen på egen rad i stället för att dela texten.
   !important: Bricks skriver raden med id-selektor. */
.brk-il-register > .brxe-block:last-child > * {
    min-width: max-content;
}

.brk-il-register > .brxe-block:last-child .bricks-button {
    white-space: nowrap;
}

@media (max-width: 1599px) {
    .brk-il-register > .brxe-block:last-child {
        flex-direction: column !important;
    }

    .brk-il-register > .brxe-block:last-child > * {
        flex: 0 0 auto !important;
        width: 100%;
    }
}

/* Knappen renderas av en shortcode (antalet är dynamiskt); Bricks wrapper-div
   är flex-barnet i knappraden, så knappen fyller den. */
.brk-il-register .brk-il__machines-btn {
    display: flex;
    align-items: center;
    justify-content: space-between; /* text vänster, pil höger */
    gap: 1rem;
    width: 100%;
    text-align: left;
}

/* Pil nedåt: knappen hoppar till maskinerna längre ner på sidan. */
.brk-il__machines-btn-arrow {
    width: 1.8rem;
    height: 1.8rem;
    transform: rotate(90deg);
    transition: transform var(--dur-base) ease;
}

.brk-il__machines-btn:hover .brk-il__machines-btn-arrow,
.brk-il__machines-btn:focus-visible .brk-il__machines-btn-arrow {
    transform: rotate(90deg) translateX(3px);
}

/* Knappraden: rad när båda knapparna får plats, staplad annars — styrt av
   innehållet, inte av en brytpunkt. Registrets bredd svänger när fönstret
   krymper (30–40 % av fönstret ner till 991 px, sedan full bredd, sedan smal
   igen), så en container-query fick knapparna att byta läge fem–sex gånger
   på vägen ner till mobil (2026-09-22). Med nowrap + min-width: max-content
   kan en knapp aldrig få två textrader, och flex-wrap lägger den andra på
   egen rad exakt när texten inte längre ryms. Bricks ger raden flex-wrap och
   kolumn under 768 px. */
.brk-il-register > .brxe-block:last-child > * {
    min-width: max-content;
}

.brk-il-register > .brxe-block:last-child .bricks-button {
    white-space: nowrap;
}

/* Knappen renderas av en shortcode (antalet är dynamiskt); Bricks wrapper-div
   är flex-barnet i knappraden, så knappen fyller den. */
.brk-il-register .brk-il__machines-btn {
    display: flex;
    align-items: center;
    justify-content: space-between; /* text vänster, pil höger */
    gap: 1rem;
    width: 100%;
    text-align: left;
}

/* Pil nedåt: knappen hoppar till maskinerna längre ner på sidan. */
.brk-il__machines-btn-arrow {
    width: 1.8rem;
    height: 1.8rem;
    transform: rotate(90deg);
    transition: transform var(--dur-base) ease;
}

.brk-il__machines-btn:hover .brk-il__machines-btn-arrow,
.brk-il__machines-btn:focus-visible .brk-il__machines-btn-arrow {
    transform: rotate(90deg) translateX(3px);
}

/* Knappraden staplas när registret är smalt. Registrets bredd följer inte
   viewporten (30–40 % av den till 991 px, sedan full bredd), så en
   container-query på registret är rätt mått — inte en brytpunkt. Bricks skriver
   raden som #brxe-…{flex-direction:row}, därav !important. Under 50 rem får
   "6 machines for this industry" annars tre rader. */
/* Registret är ett fx-child bland fx-children: raderna i det tonar in med
   resten av containern (samma skäl som chipsens fx-child i PHP). */
.brk-il-register .brk-il--apps,
.brk-il-register .brk-il--box {
    width: 100%;
}