/* =========================================================
   Contact hub — the office card(s) and the form's wrapper
   Namespace: .brk-hub*

   Rendered by components/contact-hub/contact-hub.php into Bricks
   Shortcode elements, one per part. The people directory and the
   form row inside are the office component's own markup
   (office.css) — this sheet draws the office cards and places
   the form. Outer spacing is the Bricks sections' job.

   Every var() fallback equals the token's rendered value.
   ========================================================= */

/* The form wrapper is its own part outside .brk-hub, so it needs the tokens too. */
.brk-hub,
.brk-hub__form {
    --brk-hub-gap: var(--space-m, 2.4rem);
    --brk-hub-gap-s: var(--space-s, 1.92rem);
    --brk-hub-ink: var(--text-dark, #000);
    --brk-hub-muted: var(--text-dark-muted, rgba(0,0,0,0.8));
    --brk-hub-faint: var(--base-semi-light, #a6a6a6);
    --brk-hub-hairline: var(--neutral-light, #d9d9d9);
    --brk-hub-tint: var(--tertiary-ultra-light, #f6f3ef);
    --brk-hub-radius: var(--radius, 5px);

    position: relative;
    width: 100%;
    color: var(--brk-hub-ink);
}

/* ── One office: card beside the photo ───────────────────── */

.brk-hub__office {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-l, 3rem);
    align-items: stretch;
}

.brk-hub__aside {
    display: flex;
    flex-direction: column;
    gap: var(--brk-hub-gap-s);
    min-width: 0;
}

/* One format for every market, whatever the photo (Anders 2026-09-14):
   the office photos run from 4:3 (Canada, Italy) to 2.34:1 (Sweden, the
   head office) and five markets have a square placeholder. 16:9 is the
   median of the real photos — a tall one no longer stretches the card, a
   placeholder no longer turns into a square. The image is taken out of the
   flow so its own height cannot push the box; the box still grows if the
   card beside it is taller. */
.brk-hub__photo {
    position: relative;
    flex: 1 1 auto;
    margin: 0;
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--brk-hub-radius);
    overflow: hidden;
    background: var(--brk-hub-tint);
}

.brk-hub__photo-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── "Find dealers and service": the yellow band ──────────────
   A block link with a title, a line and an arrow, the full width
   of its column: under the photo, under the row of cards, or —
   when the cards lie in different countries — at the foot of
   each card. Yellow ground, dark ink on it, as every yellow
   surface on the site. ─────────────────────────────────────── */

.brk-hub__dealers {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--brk-hub-gap);
    padding: var(--brk-hub-gap) var(--space-l, 3rem);
    background: var(--primary, #ffcd00);
    color: var(--primary-ultra-dark, #332900);
    border-radius: var(--radius-xs, 2.222px);
    text-decoration: none;
    transition: background-color 0.18s ease;
}

.brk-hub__dealers:hover,
.brk-hub__dealers:focus-visible {
    color: var(--primary-ultra-dark, #332900);
    background: var(--primary-hover, #ffd324);
}

.brk-hub__dealers:focus-visible {
    outline: 2px solid var(--brk-hub-ink);
    outline-offset: 2px;
}

.brk-hub__dealers-text {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.brk-hub__dealers-title {
    margin: 0;
    font-size: var(--h4, 2rem);
    line-height: 1.1;
    text-transform: uppercase;
}

.brk-hub__dealers-sub {
    font-size: var(--text-s, 1.4rem);
    font-weight: 400; /* the link would otherwise set it in the link weight */
    line-height: 1.4;
    color: var(--text-dark-muted, rgba(0,0,0,0.8));
}

.brk-hub__dealers-arrow {
    flex: 0 0 auto; /* pilknuffen: style.css (plan 079) */
}

/* At the foot of a card: tighter, and pushed to the bottom whatever the
   card's height. The site's button padding, not a banner
   (Anders 2026-10-21: "ta ner storleken"). */
.brk-hub__dealers--card {
    margin-top: auto;
    padding: var(--btn-padding-block) var(--btn-padding-inline);
    gap: var(--space-xs);
}

.brk-hub__dealers--card .brk-hub__dealers-title {
    font-size: var(--text-s);
}

.brk-hub__dealers--card .brk-hub__dealers-sub {
    font-size: var(--text-xs, 1.2rem);
}

.brk-hub__dealers--card .brk-hub__dealers-arrow {
    width: 1.6rem;
    height: 1.6rem;
}

/* ── "Want to contact the head office in Skellefteå?" ────────
   A text link under the band, Swedish market only — the same
   link-with-arrow as "All machines" on the industry pages. ──── */

.brk-hub__hq {
    margin: 0;
}

.brk-hub__hq-link {
    /* Inline, not flex: on a phone the question wraps, and the arrow
       should follow the last word, not stand alone at the far edge. */
    display: inline;
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--brk-hub-ink);
    text-decoration: none;
}

.brk-hub__hq-link:hover {
    color: var(--brk-hub-ink);
}

.brk-hub__hq-arrow {
    width: 1.6rem;
    height: 1.6rem;
    margin-left: 0.6rem;
    vertical-align: -0.2em;
    transition: translate var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .brk-hub__hq-link:hover .brk-hub__hq-arrow {
        translate: 0.3rem 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brk-hub__hq-arrow {
        transition: none;
    }

    .brk-hub__hq-link:hover .brk-hub__hq-arrow {
        translate: none;
    }
}

/* ── The card ────────────────────────────────────────────────
   Same surface as the machine and case cards further down the
   site: white, a hairline, --radius. ────────────────────────── */

.brk-hub__cell {
    display: flex;
    flex-direction: column;
    gap: var(--brk-hub-gap-s);
    min-width: 0;
    padding: var(--space-l, 3rem);
    border: 1px solid var(--brk-hub-hairline);
    border-radius: var(--brk-hub-radius);
    background: var(--white, #fff);
    /* A deep link (#head-office) lands under the fixed header otherwise. */
    scroll-margin-top: calc(12rem + var(--brk-hub-gap-s));
}

.brk-hub__name {
    margin: 0;
    font-size: var(--h3, 2.6rem);
    line-height: 1.05;
    text-transform: uppercase;
}

.brk-hub--many .brk-hub__name {
    font-size: var(--h4, 2rem);
}

.brk-hub__address,
.brk-hub__reach {
    font-size: var(--text-s, 1.4rem);
    line-height: 1.6;
}

.brk-hub__address .brk-office__label {
    display: block;
    margin-bottom: 0.3em;
}

.brk-hub__address--secondary {
    padding-top: var(--brk-hub-gap-s);
    border-top: 1px solid var(--brk-hub-hairline);
}

.brk-hub__reach {
    padding-top: var(--brk-hub-gap-s);
    border-top: 1px solid var(--brk-hub-hairline);
}

.brk-hub__reach .brk-office__line {
    margin: 0 0 0.3em;
}

.brk-hub__reach .brk-office__line:last-child {
    margin-bottom: 0;
}

/* No underlines on the card's phone and e-mail links for now (Anders
   2026-09-14): they rendered in different weights. The label beside each
   value already says what it is; hover brings the line back. */
.brk-hub__cell .brk-office__line a,
.brk-hub__cell .brk-office__directions-link {
    text-decoration: none;
}

.brk-hub__cell .brk-office__line a:hover,
.brk-hub__cell .brk-office__line a:focus-visible,
.brk-hub__cell .brk-office__directions-link:hover,
.brk-hub__cell .brk-office__directions-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

.brk-hub__cell .brk-office__directions {
    margin: 0;
    font-size: var(--text-s, 1.4rem);
}

/* ── Several offices: a row of cards ─────────────────────── */

.brk-hub__grid {
    display: grid;
    grid-template-columns: repeat(var(--brk-hub-cols, 3), minmax(0, 1fr));
    gap: var(--brk-hub-gap-s);
}

/* The photo on top of a card, bleeding to the card's edges. */
.brk-hub__cell-photo {
    margin: calc(-1 * var(--space-l, 3rem)) calc(-1 * var(--space-l, 3rem)) 0;
    height: 22rem;
    overflow: hidden;
    border-bottom: 1px solid var(--brk-hub-hairline);
    border-radius: var(--brk-hub-radius) var(--brk-hub-radius) 0 0;
    background: var(--brk-hub-tint);
}

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

/* Four cards (US) leave little room for text: less padding keeps a long
   address like service@brokkinc.com on the same line as its label. */
.brk-hub__grid:has(> :nth-child(4)) .brk-hub__cell {
    padding: var(--brk-hub-gap);
}

.brk-hub__grid:has(> :nth-child(4)) .brk-hub__cell-photo {
    margin: calc(-1 * var(--brk-hub-gap)) calc(-1 * var(--brk-hub-gap)) 0;
}

/* The button under the row of cards. */
.brk-hub__actions {
    margin-top: var(--brk-hub-gap-s);
}

/* ── The form ────────────────────────────────────────────────
   Shown outright (static="1"): the heading, the intro and the
   fields — no collapsed row, no +/− (Anders 2026-09-14). ────── */

.brk-hub__form .brk-office--forms {
    margin: 0;
}

/* A section heading like "Offices" above, no rule under it (Anders
   2026-09-14): the heading is an h2 and takes the theme's h2 size. The air
   to the intro under it is the site's heading-to-text gap (--content-gap),
   as on every other page. */
.brk-hub__form .brk-office__form-title--static {
    padding: 0;
    margin-bottom: var(--content-gap, 1.6rem);
    font-size: var(--h2, 3.1rem);
}

.brk-hub__form .brk-office__form-panel {
    grid-template-columns: minmax(0, 1fr);
    border-top: 0; /* the collapsed row's rule under its header — there is no header here */
}

.brk-hub__form .brk-office__form-notes {
    padding: 0;
    border-right: 0;
}

.brk-hub__form .brk-office__form-notes:empty {
    display: none;
}

/* The fields line up with the header above them. */
.brk-hub__form .brk-office__form-body {
    padding: var(--space-l, 3rem) 0 0;
}

/* In line with the people to the right (Anders 2026-09-14): the people
   list's 1fr | 3fr split and the gutter after its column's rule
   (office.css, --brk-people-gutter = --brk-office-gap). Only when the list
   has that column — no list (one department) or no people section at all
   (it, china) leaves the form full width, as does the stacked layout. */
@media (min-width: 992px) {
    body:has(.brk-people:not(.brk-people--no-depts)) .brk-hub__form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    }

    body:has(.brk-people:not(.brk-people--no-depts)) .brk-hub__form > .brk-office--forms {
        grid-column: 2;
        padding-left: var(--brk-office-gap);
    }
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1279px) {
    .brk-hub__cell {
        padding: var(--brk-hub-gap);
    }

    .brk-hub__cell-photo {
        margin: calc(-1 * var(--brk-hub-gap)) calc(-1 * var(--brk-hub-gap)) 0;
        height: 18rem;
    }

    /* Four across is too narrow here: two by two. */
    .brk-hub__grid:has(> :nth-child(4)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    /* Photo on top of the card, the button under the photo still. */
    .brk-hub__office {
        grid-template-columns: minmax(0, 1fr);
    }

    .brk-hub__aside {
        order: -1;
    }

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

@media (max-width: 767px) {
    .brk-hub__grid,
    .brk-hub__grid:has(> :nth-child(4)) {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The band under a row of cards; the one in a card keeps its own size. */
    .brk-hub__dealers:not(.brk-hub__dealers--card) {
        padding: var(--brk-hub-gap-s);
    }
}