/* =========================================================
   Product page — lower section
   [brokk_product_attachments] / [brokk_product_industries] /
   [brokk_product_cases], rendered by components/product-lower/.

   Namespace: .brk-pl*. 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, but the
   Bricks section around it still renders — and still applies its section
   padding. Measured on Brokk 70⁺, which has no cases: 135px of empty page
   between the industries and the CTA. The three sections carry
   .brk-pl-section so this can collapse them without naming element IDs. */
.brk-pl-section:not(:has(.brk-pl)) {
    display: none;
}

.brk-pl {
    --brk-pl-line: var(--neutral-light, #d9d9d9);
    --brk-pl-hairline: var(--neutral-trans-10, rgba(0, 0, 0, 0.1));
    --brk-pl-muted: var(--accent, #575E62);
    --brk-pl-surface: var(--white, #fff);
    --brk-pl-plate: #eee;   /* see .brk-pl__media — matches the source artwork */

    width: 100%;
}

/* ── Section head: heading left, link right, on one baseline ── */
.brk-pl__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-pl__title {
    margin: 0;
}

.brk-pl__head-link {
    color: var(--brk-pl-muted);
    font-size: var(--text-s, 1.5rem);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    /* The link sits on the heading's baseline, so it must not stretch the row. */
    flex: 0 0 auto;
}

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

/* ── Grids ────────────────────────────────────────────────
   auto-fill rather than a fixed column count: attachment
   counts run from 2 (Brokk 900 Rotoboom) to 16 (Brokk 300⁺),
   and a fixed five-column grid leaves three grey holes on the
   short ones. */
.brk-pl__grid {
    display: grid;
    gap: var(--space-m, 3rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* auto-FILL for attachments: the tile keeps one size whether a machine has 2 or
   16, and a short row simply ends early. auto-fit would stretch two attachments
   across the full width and make them read as something more important. */
.brk-pl__grid--attachments {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* auto-FIT for the two sections whose counts are low and uneven — 1 to 4
   industries, 1 to 6 cases. auto-fill left empty tracks behind, so a product
   with one case got a quarter-width card stranded on the left.
   The cap belongs on the TRACK, not on the card: capping the card left each
   cell oversized and pushed the slack between the cards, so two cases sat at
   opposite ends of the row. Capped tracks plus justify-content: start pack
   them from the left and put the leftover space after the last one. */
/* Industries fill the row: 2, 3 or 4 boxes all share the width evenly, which is
   what the design shows. Capping the track at 520 instead pushed four boxes onto
   two rows at 1400. */
.brk-pl__grid--industries {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-s, 2.2rem);
}

/* Except when there is only one — Brokk 200/300/500/900 Pedestal Boom each carry
   a single industry, and one box stretched across 1400px reads as a banner. */
.brk-pl__grid--industries:not(:has(li:nth-child(2))) {
    grid-template-columns: minmax(240px, 520px);
}

.brk-pl__grid--cases {
    grid-template-columns: repeat(auto-fit, minmax(320px, 460px));
    justify-content: start;
}

/* On a 390px phone a 200px minimum leaves room for exactly one tile, so a
   machine with 16 attachments became a 16-screen scroll. 140px puts two
   side by side without shrinking the label below readable. */
@media (max-width: 767px) {
    .brk-pl__grid--attachments {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: var(--space-s, 2.2rem);
    }
}



/* ── Card shell ───────────────────────────────────────────
   The link is the flex column, not a wrapper inside it, so
   the foot's margin-top: auto has something to push against
   and every card in a row ends at the same height. */
.brk-pl__card {
    display: flex;
    border: 1px solid var(--brk-pl-line);
    background: var(--brk-pl-surface);
}

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

/* Cards in a row stretch to the tallest, and with a fixed-ratio media box the
   surplus landed as a white band above the foot — obvious next to a two-line
   name like "Sorting & Demolition Grapple". Painting the link with the plate
   colour turns that surplus into more plate; the foot paints white on top.
   Attachment tiles only: a case card is a photo on a white body. */
.brk-pl__grid--attachments .brk-pl__card-link {
    background: var(--brk-pl-plate);
}

.brk-pl__media {
    overflow: hidden;
    /* Sampled from the attachment photography itself: every source file bakes in
       a #eee plate. The token --neutral-ultra-light is #f2f2f2, four steps
       lighter, which drew a visible rectangle around each product. Matching the
       artwork is the honest fix until transparent, consistently-cropped product
       shots exist — swap this back to the token the day they land. */
    background: var(--brk-pl-plate);
}

.brk-pl__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.35s ease;
}

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

/* DESIGN.md, Cards: hover picks ONE effect. Image zoom here, so the
   title deliberately does not shift colour as well. */
.brk-pl__card-link:hover .brk-pl__media img {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .brk-pl__media img {
        transition: none;
    }
    .brk-pl__card-link:hover .brk-pl__media img {
        transform: none;
    }
}

/* ── Attachment card ─────────────────────────────────────── */
/* The source files are 600x257 strips (ratio 2.34) with generous whitespace
   already baked in, so 4/3 plus padding letterboxed them twice and shrank the
   product to a stamp. 16/9 leaves a thin band that the matching plate colour
   hides, and the padding is gone because the artwork supplies its own. */
.brk-pl__grid--attachments .brk-pl__media {
    aspect-ratio: 16 / 9;
}

.brk-pl__card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs, 1.6rem);
    /* Pushes the foot to the bottom regardless of how tall the media is. */
    margin-top: auto;
    padding: var(--space-xs, 1.6rem) var(--space-s, 2.2rem);
    border-top: 1px solid var(--brk-pl-hairline);
    background: var(--brk-pl-surface);
}

.brk-pl__card-name {
    margin: 0;
    font-size: var(--text-s, 1.5rem);
}

.brk-pl__arrow {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    color: var(--brk-pl-muted);
    transition: transform 0.2s ease;
}

.brk-pl__card-link:hover .brk-pl__arrow {
    transform: translateX(3px);
}

/* ── Industry box ─────────────────────────────────────────
   Reason on top, name anchored to the bottom edge, so a
   one-line and a two-line reason still align their names. */
.brk-pl__industry {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-m, 3rem);
    height: 100%;
    min-height: 150px;
    padding: var(--space-m, 3rem);
    background: var(--brk-pl-surface);
    border: 1px solid var(--neutral-trans-10, rgba(0, 0, 0, 0.1));
    color: inherit;
    text-decoration: none;
}

.brk-pl__industry-reason {
    font-weight: 400;
    margin: 0;
    color: var(--brk-pl-muted);
    font-size: var(--text-s, 1.5rem);
    line-height: 1.5;
}

.brk-pl__industry-name {
    margin: 0;
    font-size: var(--h4, 2rem);
}

/* Hover stays on the same token ramp as the resting border rather than
   jumping to solid black: 10% -> 30% opacity reads as the box waking up,
   where --text-dark drew a hard frame that outweighed the card itself.
   focus-visible is deliberately not included — it gets the yellow outline
   further down, and a border shift on top of it competes with that ring. */
a.brk-pl__industry:hover {
    border-color: var(--neutral-trans-30, rgba(0, 0, 0, 0.3));
}

/* ── Case card ───────────────────────────────────────────── */
.brk-pl__case-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-s, 2.2rem) var(--space-m, 3rem) var(--space-xs, 3rem);
}

/* Matches the small label the product card already uses for WEIGHT / POWER /
   PRODUCTIVITY — 700, 1px tracking, --base-semi-light. It read as bold before
   because it was larger and in the much darker --accent.
   The card hardcodes 1.1rem inline in Bricks; --text-xs lands within a pixel of
   it and is on the documented ramp, so the new file does not inherit that drift. */
.brk-pl__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;
}

/* --h4 is 18-20px, which is where the design canvas put the case title (19px).
   Using an h4 size on an h3 element breaks nothing: DESIGN.md says hierarchy
   comes from weight and case more than from size steps. */
.brk-pl__case-title {
    margin: 0 0 var(--space-xs, 1.6rem);
    font-size: var(--h4, 2rem);
}

.brk-pl__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-pl__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-pl-hairline);
    color: var(--brk-pl-muted);
    font-size: var(--text-xs, 1.2rem);
}

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

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

.brk-pl__case-cta .brk-pl__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-pl__card-link:focus-visible,
a.brk-pl__industry:focus-visible {
    outline: 2px solid var(--primary, #ffcd00);
    outline-offset: 2px;
}

/* ── PDF ──────────────────────────────────────────────────
   pdf-export.js clones the page and rewrites inline grid
   declarations, but these live in a stylesheet, so they are
   pinned here instead. Five 200px attachment columns do not
   survive A4; three do. The case section carries .pdf-hide in
   the Bricks template and never reaches the clone. */
@media print {
    .brk-pl__grid--attachments {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .brk-pl__grid--industries {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .brk-pl__card,
    .brk-pl__industry {
        break-inside: avoid;
    }

    .brk-pl__arrow,
    .brk-pl__head-link {
        display: none;
    }
}