/* ── Locations buttons (Home – Locations) — row when they fit, a narrow stack when they don't ──
   Builder owns the row state: group flex row, justify space-between, 1.75rem minimum gap,
   and two empty "Locations – Divider" groups (1px wide) that space-between centres between
   the buttons (7.125rem tall = Figma's 114px rule beside an 88px button). Builder also owns the ≤980px colours/sizes of those dividers.

   This file owns the STACKED state, which applies whenever the column is narrower than
   the row's minimum fit — including ≤980px — so all three always switch together
   (never 2+1):
     • one shared width for every button = the widest button's natural width,
       capped at 100% on narrow screens (grid track fit-content(100%));
     • all aligned to the same left edge;
     • the dividers become 1px horizontal rules exactly as wide as the buttons.

   Compact buttons (design audit 2026-11-06, "all in one line"): 0.1em tracking and a 1rem
   inset/gap instead of the global .btn-arrow 0.2em / 1.75rem, so the row fits a 1440 screen.

   Switch point: 1100px column width = 355 + 289 + 342px buttons + 2 dividers + 4 × 1.75rem gaps.
   (Was 1364px before the compact buttons: (≈1705px viewport, 1720px with a classic
   scrollbar) = the three .btn-arrow--box.btn-arrow--lg buttons at their natural
   width (448 + 369 + 433px) + 2 dividers (1px) + 4 minimum gaps (1.75rem).
   Re-measured 2026-11-04 after --lg (88px): height only, widths unchanged.)
   Re-measure if a label, the button size or the gap changes.

   Hooks (module custom attributes): .home-loc-col (column), .home-loc-buttons (group),
   .home-loc-item (each button's group), .home-loc-sep (each divider group). */

.home-loc-col {
  container: home-locations / inline-size;
}

.home-loc-buttons .home-loc-item a.btn-arrow {
  --btn-pad: 1rem;
  letter-spacing: 0.1em;
}

@container home-locations (width < 1100px) {
  .home-loc-col .home-loc-buttons {
    display: grid !important;
    grid-template-columns: fit-content(100%);
    justify-content: start !important;
    justify-items: stretch;
    row-gap: 1.75rem;
  }

  /* each button fills the shared track, so all three match the widest */
  .home-loc-buttons .home-loc-item,
  .home-loc-buttons .home-loc-item .et_pb_code,
  .home-loc-buttons .home-loc-item .et_pb_code_inner,
  .home-loc-buttons .home-loc-item a {
    width: 100% !important;
  }
  .home-loc-buttons .home-loc-item a {
    display: flex;
    justify-content: space-between;
  }

  /* vertical divider → horizontal rule, same width as the buttons */
  .home-loc-buttons .home-loc-sep {
    width: 100% !important;
    height: 1px !important;
    background-color: var(--dark-red) !important;
  }
}