/* =========================================================
   Industry page — editorial body
   [brokk_industry_intro] / [brokk_industry_sections] /
   [brokk_industry_images], rendered by
   components/industry-content/.

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

   Colours and spacing are measured from the page itself, not
   read off the design file: --neutral is #000 and not grey,
   --h4 is 19px and not 34, and the "black" bands on this site
   are #1a1a1a rather than #000. See the handoff, section 2.3.
   ========================================================= */

.brk-ic {
    /* The site's black. Header, footer, hero and the "Reasons to choose Brokk"
       box all paint #1a1a1a — measured, not assumed. There is no token for it;
       those elements set it in their own Bricks settings. --black is #000 and
       would read as a different, harder surface right next to the box above. */
    --brk-ic-ink: #1a1a1a;
    --brk-ic-line: var(--neutral-light, #d9d9d9);
    --brk-ic-surface: var(--white, #fff);
    --brk-ic-accent: var(--primary, #ffcd00);

    /* Saira on a non-heading element. Permitted by the house rule as a
       deliberate display treatment — the closing line is set as display copy in
       the design, and a <p> carries no global heading style to inherit from.
       Nothing else in this file names a family. */
    --brk-ic-display: "Saira Semi Condensed", ui-sans-serif, system-ui, sans-serif;

    width: 100%;
}

/* Each shortcode returns an empty string on the six industries that have not
   opted into the split layout, but the Bricks section around it still renders
   and still applies its section padding. Same collapse as .brk-il-section. */
/* A band whose Post Content element carries the industry's own Bricks
   elements (the cards, since 2026-09-08) is not empty either. */
.brk-ic-section:not(:has(.brk-ic)):not(:has(.brxe-post-content > *)) {
    display: none;
}

/* ── Intro: the opening heading and its lead paragraph ──────
   Sits in the left column of the intro grid, under the H1 and the excerpt.

   No rule above it. The design file draws one, but on the built page the
   heading is already set in the condensed uppercase face at --h3 against Geist
   body copy above it — the type change separates the two on its own, and the
   line only added a second, heavier divider a few pixels from the H1. Space
   carries the break instead. */
.brk-ic-intro {
    padding-top: var(--space-s, 2.2rem);
}

/* The page spaces the rich-text element's own children — measured: 1em on every
   block after the first, 0 on the first. Wrapping the content in .brk-ic puts it
   one level deeper, so that selector stops matching and the paragraphs collapse
   against their heading. Restated here at the same value rather than left to
   chance. Applies to the card bodies for the same reason. */
.brk-ic-intro > * + * {
    margin-top: 1em;
}

.brk-ic-intro > :first-child {
    margin-top: 0;
}

.brk-ic-intro > :last-child {
    margin-bottom: 0;
}

/* ── Band heading, columns, feature block, benefit cards, afterword,
   galleries: since 2026-09-08 Cement is Bricks elements on the post too
   (_project-docs/scripts/industry-cement-bricks.php) and their styling lives
   in the global classes brk-ic__band-title / __cols / __col / __chapter /
   __feature-body / __benefits / __benefit / __benefit-title / __afterword /
   __gallery. Nothing here. */

/* ── The sections, as cards ─────────────────────────────────
   Since 2026-09-08 the cards are Bricks elements on the industry post itself
   (Post Content element in the template; _project-docs/scripts/
   industry-cards-bricks.php) and their styling lives in the global classes
   brk-ic__grid / __card / __card-title / __card-body. Nothing here. */

/* ── Closing line ───────────────────────────────────────────
   Also a Bricks element since 2026-09-08 — global classes brk-ic__closing and
   brk-ic__closing-text. */

/* ── Photos ─────────────────────────────────────────────────
   Two up on desktop, stacked below the tablet breakpoint. They arrive with the
   srcset and sizes wp_filter_content_tags gave them, so only the box changes. */
.brk-ic__figures {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-m, 3rem);
}

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

/* One column: --wide holds a gallery that brings its own grid, --stack is the
   feature chapter's side column. Neither wants a second track of its own. */
.brk-ic__figures--wide,
.brk-ic__figures--stack {
    grid-template-columns: 1fr;
}

.brk-ic__figures--stack {
    gap: var(--space-s, 2.2rem);
}

.brk-ic__figure {
    margin: 0;
}

.brk-ic__figure img {
    display: block;
    width: 100%;
    height: auto;
}

/* Set below the body scale and in the muted ink the page uses for meta lines
   (case dates, card labels), so the caption reads as a label on the photo
   rather than as another paragraph competing with the cards above. */
.brk-ic__caption {
    margin-top: var(--space-xs, 1.6rem);
    /* Something in the stack centres bare figcaptions. Everything else in this
       band is ranged left, and a centred line under a left-ranged photo reads as
       a mistake — so the caption is put back on the figure's own alignment. */
    text-align: start;
    font-size: var(--text-s, 1.4rem);
    line-height: 1.5;
    color: var(--accent, #575E62);
}