/* =========================================================
   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);
    transition: transform 0.2s 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: var(--grid-auto-3);
    gap: var(--space-m, 3rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 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);
    background: var(--brk-il-surface);
}

.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 0.35s ease;
}

.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;
}

.brk-il__media:hover img {
    transform: scale(1.04);
}

.brk-il__card--case .brk-il__card-link:hover .brk-il__media img {
    transform: scale(1.04);
}

@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;
    }
}

/* ── Machine card body ─────────────────────────────────────
   Every value below is measured off the live /product archive card
   (components/product-filter, template 6358) rather than invented, so the
   two surfaces read as the same component. */
.brk-il__card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-s, 2.2rem);
}

/* Avstånden runt strecket är hämtade ur /product-kortet (mall 6358), som är
   förlagan: 30px ner till strecket, 22,5px från strecket till etiketterna,
   30px från faktaraden ner till knappen. Utan det första satt excerpten
   nästan i strecket — margin-top:auto ger bara luft när kortet sträcks av
   ett högre syskon, och i en full rad blir den noll. */
.brk-il__card-name {
    margin: 0 0 var(--space-m, 3rem);
    font-size: var(--h4, 2rem);
}

/* Finns en excerpt är det den som bär avståndet ner till strecket, och
   luckan mellan rubrik och excerpt ska vara den mindre. */
.brk-il__card-name:has(+ .brk-il__card-excerpt) {
    margin-bottom: var(--space-xs, 1.6rem);
}

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

.brk-il__card-facts {
    display: flex;
    border-top: 1px solid var(--brk-il-line);
    margin-top: auto;
    padding-top: var(--space-s, 2.2rem);
    margin-bottom: var(--space-m, 3rem);
}

/* min-width: 0 is the fix, not a tidy-up. A flex item defaults to
   min-width: auto, which refuses to shrink below its content — and the value
   carried white-space: nowrap, so "1230 kg; 2712 lbs" set a floor the column
   could not go under. The row then measured 331px inside a 261px box and the
   third column ran 47px past the card edge. Measured on Tunneling at 1440. */
.brk-il__fact {
    flex: 1;
    min-width: 0;
    padding: 0 var(--space-xs, 1.6rem) 0 0;
}

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

/* Three labelled columns need roughly 330px, so the switch sits at 360 rather
   than right on the limit: at 375px the card measures 333px and "Productivity"
   landed in a 103px column needing 100px — inside the card, but with the row
   already overflowing itself. The margin also absorbs translation, which is
   the real risk: German turns the label into "Produktivität" and Polish into
   "Wydajność", and DESIGN.md puts that expansion at roughly 30%.

   Stacking below the threshold is what the /product card already does at its
   own narrow sizes, so this is the same behaviour rather than a new one. */
@container (max-width: 360px) {
    .brk-il__card-facts {
        flex-direction: column;
    }

    .brk-il__fact {
        padding: 0;
    }

    /* The divider moves with the axis: a left border between stacked rows
       would draw a stray tick down the side. */
    .brk-il__fact + .brk-il__fact {
        padding-left: 0;
        padding-top: var(--space-xs, 1.6rem);
        margin-top: var(--space-xs, 1.6rem);
        border-left: 0;
        border-top: 1px solid var(--brk-il-line);
    }
}

/* --text-xs rather than the 1.1rem the /product card hardcodes inline in
   Bricks: one pixel apart, but on the documented ramp. Same call
   product-lower.css already made for .brk-pl__case-meta, so the two files
   do not disagree about the same label. */
.brk-il__fact-label {
    display: block;
    font-size: var(--text-xs, 1.2rem);
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--base-semi-light, #a6a6a6);
}

/* No white-space: nowrap. It was what made the column unshrinkable, and the
   values break cleanly anyway — "1230 kg; 2712 lbs" wraps at the semicolon,
   which is where a reader would break it too. */
.brk-il__fact-value {
    display: block;
    font-size: var(--text-xs, 1.2rem);
    font-weight: 500;
}

/* Real classes from the live button (bricks-button → Saira + uppercase from
   the theme style; btn--base → the --btn-* colour variables) plus this
   component's own layout on top — same approach as brk-pl__card-name
   inheriting Saira from a real heading instead of hardcoding font-family. */
.brk-il__card-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    font-size: var(--text-s, 1.5rem);
    font-weight: 600;
    padding: var(--space-xs, 1.6rem) var(--space-s, 2.2rem);
    border-radius: var(--radius-xs, 2.2px);
    background: var(--btn-background, var(--base, #2d2d2d));
    color: var(--btn-text-color, var(--base-ultra-light, #f2f2f2));
}

.brk-il__card-btn:hover,
.brk-il__card-btn:focus-visible {
    background: var(--btn-background-hover, var(--base-hover, #363636));
}

.brk-il__card-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s, 2.2rem);
    margin-top: var(--space-xs, 1.6rem);
}

.brk-il__card-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs, 1.2rem);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--accent, #575E62);
    padding: 6px 0;
}

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

/* ── More about + Related posts ──────────────────────────── */
.brk-il__more-about-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-l, 4rem);
    align-items: start;
}

@media (max-width: 991px) {
    .brk-il__more-about-grid {
        grid-template-columns: 1fr;
    }
}

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

.brk-il__link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s, 2.2rem);
    border-top: 1px solid var(--brk-il-hairline);
    padding: var(--space-s, 2.2rem) 0;
    color: inherit;
    text-decoration: none;
}

.brk-il__links a.brk-il__link-row:last-child {
    border-bottom: 1px solid var(--brk-il-hairline);
}

.brk-il__link-title {
    display: block;
    font-size: var(--h4);
    font-family: "Saira Semi Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

.brk-il__link-sub {
    display: block;
    font-size: var(--text-m, 1.6rem);
    color: var(--brk-il-muted);
    margin-top: 3px;
}

.brk-il__link-row .brk-il__arrow {
    color: var(--primary, #ffcd00);
}

.brk-il__link-row:hover,
.brk-il__link-row:focus-visible {
    color: var(--secondary, #f1b204);
}

.brk-il__link-row:hover .brk-il__arrow,
.brk-il__link-row:focus-visible .brk-il__arrow {
    transform: translateX(3px);
}

.brk-il__related-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 1.6rem);
}

.brk-il__related-item {
    display: flex;
    gap: var(--space-s, 2.2rem);
    align-items: center;
    border: 1px solid var(--brk-il-hairline);
    padding: var(--space-xs, 1.6rem);
    color: inherit;
    text-decoration: none;
}

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

.brk-il__related-thumb {
    flex: none;
    width: 92px;
    height: 66px;
    overflow: hidden;
    background: var(--brk-il-plate);
}

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

.brk-il__related-body {
    display: flex;
    flex-direction: column;
}

.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);
    margin-bottom: 4px;
}

.brk-il__related-title {
    font-size: var(--h4);
    font-family: "Saira Semi Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

/* ── 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__link-row: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);
}

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

.brk-il__segment-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.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 table ───────────────────────────────────────
   A grid, not a <table>: below 900px it has to reflow into one card per
   version, and a real table cannot do that without losing the row labels.
   --brk-il-versions is set inline by the shortcode from the row count, so
   three versions and four both work. */
/* grid-auto-flow: column because the markup is emitted column by column —
   see the note in industry-lower.php. Both tracks have to be declared for
   that to work: the row count comes from --brk-il-rows so a spec that gets
   filtered out does not leave an empty band. */
.brk-il__versions {
    display: grid;
    grid-template-columns: 15rem repeat(var(--brk-il-versions, 3), 1fr);
    grid-template-rows: auto repeat(var(--brk-il-rows, 5), auto);
    grid-auto-flow: column;
    border: 1px solid var(--brk-il-line);
}

.brk-il__versions-corner,
.brk-il__versions-head {
    background: var(--base, #2d2d2d);
    color: var(--base-ultra-light, #f2f2f2);
}

/* --base-dark rather than --base-semi-dark: one step off the surface reads as
   a seam between columns, where #595959 draws a visible line across the black
   band and competes with the version names. */
.brk-il__versions-head {
    padding: var(--space-s, 2.25rem);
    border-left: 1px solid var(--base-dark, #404040);
}

.brk-il__versions-name {
    margin: 0;
    font-size: var(--h4, 2rem);
    color: var(--primary, #ffcd00);
}

.brk-il__versions-intro {
    margin: 0.6rem 0 0;
    font-size: var(--text-s, 1.4rem);
    line-height: 1.5;
    color: var(--text-light-muted);
}

.brk-il__versions-label,
.brk-il__versions-cell {
    padding: var(--space-s, 2.25rem);
    border-top: 1px solid var(--brk-il-hairline);
    background: var(--brk-il-surface);
    font-size: var(--text-s, 1.5rem);
    line-height: 1.5;
}

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

.brk-il__versions-cell {
    border-left: 1px solid var(--brk-il-hairline);
}

.brk-il__versions-cell--empty {
    color: var(--base-semi-light, #a6a6a6);
}

/* Only needed once the grid has collapsed and the label column is gone. */
.brk-il__versions-cell-label {
    display: none;
}

@media (max-width: 900px) {
    /* Back to row flow in a single column. Because the markup is already
       column-major, that yields each version followed by its own cells. */
    .brk-il__versions {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
        border: 0;
    }

    /* The label column has nothing to label once the columns are stacked. */
    .brk-il__versions-corner,
    .brk-il__versions-label {
        display: none;
    }

    .brk-il__versions-head {
        border-left: 0;
        margin-top: var(--space-s, 2.25rem);
    }

    .brk-il__versions-cell {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        border-left: 1px solid var(--brk-il-line);
        border-right: 1px solid var(--brk-il-line);
    }

    .brk-il__versions-cell-label {
        display: block;
        font-size: var(--text-xs, 1.2rem);
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--base-semi-light, #a6a6a6);
    }
}

/* ── Attachment chips ─────────────────────────────────────
   Renders only once product-attachments carry a brokk_industry term; none
   do today. Shape follows DESIGN.md > Shapes: fully round is --radius-circle,
   the single token for it. */
.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;
    padding: 1rem var(--space-s, 2.25rem);
    border: 1px solid var(--brk-il-line);
    border-radius: var(--radius-circle, 50vw);
    background: var(--brk-il-surface);
    color: inherit;
    font-size: var(--text-s, 1.5rem);
    font-weight: 600;
    text-decoration: none;
}

.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;
}