/* =========================================================
   Office — details / people / forms
   Namespace: .brk-office*

   Rendered by components/office/office.php into a Bricks
   Shortcode element. Outer spacing, width and background are
   the section/container's job, not this component's.

   This file declares no font-family anywhere. Headings
   inherit their type from the design system (ACSS / Bricks
   theme style), which already defines how h3/h4 should look.
   ========================================================= */

.brk-office {
    --brk-office-gap: var(--space-m, 1.5rem);
    --brk-office-gap-s: var(--space-s, 1rem);
    --brk-office-ink: var(--text-dark, #0A0A0A);
    --brk-office-muted: var(--text-dark-muted, #555);
    --brk-office-line: var(--neutral-trans-20, rgba(0, 0, 0, 0.12));
    --brk-office-accent: var(--brk-yellow, var(--primary, #FFC600));
    --brk-office-radius: var(--radius-s, 2px);

    color: var(--brk-office-ink);
    width: 100%;
}

.brk-office + .brk-office {
    margin-top: var(--brk-office-gap);
}

/* Bricks styles every <section> on the page as a centred flex column (that is
   how its own Section element works). This component uses <section> for its
   semantics, not for layout, so opt out — otherwise group headings shrink-wrap
   and float to the middle of the page. */
.brk-office section {
    display: block;
    align-items: initial;
    justify-content: initial;
    flex-direction: initial;
    row-gap: initial;
    width: 100%;
    max-width: none;
    padding: 0;
}

/* ── Shared label/value line ─────────────────────────────── */

.brk-office__label {
    display: inline-block;
    color: var(--brk-office-muted);
    font-size: var(--text-s, 1.4rem);
    letter-spacing: 0.02em;
}

.brk-office__line {
    margin: 0 0 0.65em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15em 0.6em;
    line-height: 1.55;
}

.brk-office__line .brk-office__label {
    min-width: 6.5em;
    flex: 0 0 auto;
}

.brk-office__line a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--brk-office-line);
    transition: text-decoration-color 0.15s ease;
}

.brk-office__line a:hover,
.brk-office__line a:focus-visible {
    text-decoration-color: currentColor;
}

/* ── Rich text from the editor ────────────────────────────────
   The address, opening hours and form intro are WYSIWYG fields:
   arbitrary paragraphs, lists, headings and (on some offices) an
   image. The site's reset zeroes margin-block on everything, so
   vertical rhythm has to be restored here or the block renders as
   one solid slab of text.
   ─────────────────────────────────────────────────────────── */

.brk-office__address-body,
.brk-office__hours-body,
.brk-office__form-intro {
    display: flow-root; /* contains the floated image below */
    line-height: 1.65;
}

.brk-office__address-body > * + *,
.brk-office__hours-body > * + *,
.brk-office__form-intro > * + * {
    margin-top: 0.85em;
}

.brk-office__address-body :is(h1, h2, h3, h4, h5, h6),
.brk-office__hours-body :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 1.8em;
    margin-bottom: 0.5em;
}

.brk-office__address-body :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

.brk-office__address-body ul,
.brk-office__address-body ol {
    padding-left: 1.6em;
}

.brk-office__address-body li + li {
    margin-top: 0.35em;
}

/* An image pasted into the address text.
   The office's map now lives in its own field and renders through
   [brokk_office_map], so this is only a fallback for an editor who drops a
   picture into the address WYSIWYG.

   It does NOT float. The details column is half the container, so floating at
   40% left the image at ~209px with ~289px of text beside it — both unreadable.
   Full column width and stacked is the only thing that works at this measure.

   The width is !important because imported markup carries inline layout hints
   from the old site's editor (a table with style="width: 70%"), which would
   otherwise win. */
.brk-office__address-body > table,
.brk-office__address-body > img,
.brk-office__address-body > p:has(> img:only-child),
.brk-office__address-body > figure {
    float: none;
    width: 100% !important;
    margin: 0 0 var(--brk-office-gap);
}

.brk-office__address-body :is(table, figure) img,
.brk-office__address-body > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Without table-layout: fixed an auto table is sized by its image's intrinsic
   width and ignores the width above — the map then takes 764px instead of 40%. */
.brk-office__address-body table {
    border-collapse: collapse;
    table-layout: fixed;
}

.brk-office__address-body :is(td, th) {
    padding: 0;
}

/* ── Details ─────────────────────────────────────────────── */

.brk-office__entity {
    margin: 0 0 var(--brk-office-gap-s);
    font-weight: 600;
}

.brk-office__address + .brk-office__address,
.brk-office__address {
    margin-bottom: var(--brk-office-gap);
}

.brk-office__address-body p:last-child,
.brk-office__hours-body p:last-child {
    margin-bottom: 0;
}

.brk-office__address--secondary {
    padding-top: var(--brk-office-gap-s);
    border-top: 1px solid var(--brk-office-line);
}

/* Structured lines follow the free-text address block, so they need a clear
   break from it rather than sitting flush against the last paragraph. */
.brk-office__address + .brk-office__line,
.brk-office__address-body + .brk-office__line {
    margin-top: var(--brk-office-gap);
}

.brk-office__hours {
    margin-top: var(--brk-office-gap);
}

.brk-office__hours .brk-office__label {
    display: block;
    margin-bottom: 0.35em;
}

.brk-office__directions {
    margin: var(--brk-office-gap) 0 0;
}

/* ── Map image ───────────────────────────────────────────────
   Its own field, rendered by [brokk_office_map] below the
   address text in the left column.

   Capped by HEIGHT, not width, and never cropped: the source
   maps are near-square (977x992), so at full column width they
   ran 529px tall and dominated the column. width:auto lets the
   image shrink proportionally off max-height, so nothing is cut
   off — every pin stays in frame.

   max-width keeps the cap from being the binding constraint on
   narrow screens: at 390px the column is already narrower than
   the height cap allows, so mobile is unaffected.
   ─────────────────────────────────────────────────────────── */

.brk-office__map-image {
    margin: 0;
}

.brk-office__map-image-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 36rem;
    /* The box always matches the image's own ratio here, so this changes
       nothing today — but a global `object-fit: cover` is inherited from the
       theme, and that would silently crop the pins off the map if the box ever
       stopped matching. Say it out loud instead. */
    object-fit: contain;
}

/* ── Embedded map (iframe) ───────────────────────────────── */

.brk-office__map {
    margin-top: var(--brk-office-gap);
    border-radius: var(--brk-office-radius);
    overflow: hidden;
}

/* Keep the embed responsive whatever width/height the provider pasted in. */
.brk-office__map iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

.brk-office__legal {
    margin: var(--brk-office-gap) 0 0;
    padding-top: var(--brk-office-gap-s);
    border-top: 1px solid var(--brk-office-line);
    color: var(--brk-office-muted);
    font-size: var(--text-s, 1.4rem);
}

/* ── People ──────────────────────────────────────────────────
   Portrait cards: photo on top, details beneath, four across.
   Mirrors the live site's staff directory (4 / 2 / 1 columns),
   but on this site's breakpoints (991 / 478) rather than the
   old theme's (899 / 539).
   ─────────────────────────────────────────────────────────── */

.brk-office__group + .brk-office__group {
    margin-top: var(--space-xl, 4rem);
}

.brk-office__group-title {
    margin: 0 0 var(--brk-office-gap);
}

.brk-office__people-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--brk-office-gap);
    row-gap: var(--space-l, 3rem);
}

.brk-office__person {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.brk-office__photo {
    margin-bottom: var(--brk-office-gap-s);
}

/* 2:3 matches the source portraits (480×720), so nothing is cropped. */
.brk-office__photo-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: center top;
}

.brk-office__person-body {
    min-width: 0; /* let long emails wrap instead of blowing out the grid track */
}

.brk-office__person-name {
    margin: 0 0 0.25em;
    font-size: var(--h4);
    text-transform: uppercase;
}

.brk-office__person-role,
.brk-office__person-territory {
    margin: 0 0 0.25em;
    color: var(--brk-office-muted);
    font-size: var(--text-s, 1.4rem);
    line-height: 1.4;
}

.brk-office__person-note {
    margin: 0.5em 0 0;
    color: var(--brk-office-muted);
    font-size: var(--text-xs, 1.2rem);
}

/* Inside a person card the label column would waste most of the width. */
.brk-office__person .brk-office__line {
    display: block;
    margin-bottom: 0.15em;
    font-size: var(--text-s, 1.4rem);
    overflow-wrap: anywhere; /* long addresses must not widen the track */
}

.brk-office__person .brk-office__label {
    min-width: 0;
    margin-right: 0.35em;
    font-size: inherit;
}

@media (max-width: 991px) {
    .brk-office__people-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Forms ───────────────────────────────────────────────────
   A bordered panel that sits beside the address block, matching
   the "Contact Brokk" card on the live site.
   ─────────────────────────────────────────────────────────── */

.brk-office__form {
    padding: var(--brk-office-gap); /* overrides the section reset above */
}

.brk-office__form + .brk-office__form {
    margin-top: var(--brk-office-gap);
}

.brk-office__form-title {
    margin: 0 0 var(--brk-office-gap-s);
}

.brk-office__form-intro {
    margin-bottom: var(--brk-office-gap-s);
}

/* ── Small screens ───────────────────────────────────────── */

@media (max-width: 478px) {
    .brk-office__line {
        display: block;
    }

    .brk-office__line .brk-office__label {
        min-width: 0;
        margin-right: 0.4em;
    }

    .brk-office__people-list {
        grid-template-columns: minmax(0, 1fr);
    }
}