/* ---------------------------------------------------------------------------
 * contact-locations — the office address row on the Contact page (CCD-59).
 *
 * The client asked for five columns, "and if 5 column is not enough space,
 * let's do 2 rows (1st row with three addresses, 2nd row with 2 addresses, all
 * centered)". Both arrangements come out of ONE flex row: the column basis is a
 * fraction of the row, so a width that only fits three drops the remaining two
 * onto a second line, and `justify-content: center` centers that short line on
 * its own. Nothing has to know how many addresses there are.
 *
 * Why a fraction and not a fixed px basis: a fixed basis wraps at whatever
 * width it happens to run out of room, which lands the 5 -> 3 switch on an
 * arbitrary viewport. Declaring the count per breakpoint keeps the switch where
 * it was approved — five across only above the Figma-ish desktop widths, three
 * plus two at the 1440 this client reviews at (see memory/sites/crushsc.md).
 *
 * `--locations-gap` feeds both the `gap` and the basis calc so the two can
 * never drift: n columns need (n - 1) gaps taken out of the row first.
 * ------------------------------------------------------------------------- */

.contact-locations {
  /* No top padding, on purpose. The contact panel above this section already
     pads below itself (client round 23) and the map band below carries no
     spacing at all, so the block's own top padding was stacking onto a gap that
     already existed: 185px above the addresses against 58px below them, which
     is the imbalance the client reported. The bottom value mirrors the panel's
     instead, which makes the band symmetric without changing its height much.

     This does couple the section to sitting directly under the contact panel.
     Placed anywhere else it will sit flush against whatever precedes it — give
     it a top padding again if that ever happens. */
  padding-block: 0 127px;
  background: var(--bg, #ffffff);
  /* The home page links here as `/contact/#locations`. `.site-header` is
     `position: fixed`, so without this offset the anchor puts the first address
     row underneath it — and this section has no top padding of its own to
     absorb it. */
  scroll-margin-top: var(--header-h, 174px);
}

.contact-locations .locations {
  --locations-gap: 32px;
  --locations-col: calc((100% - 4 * var(--locations-gap)) / 5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Row gap is larger than the column gap: a wrapped second row reads as its
     own line of addresses instead of a continuation of the first. */
  gap: 48px var(--locations-gap);
  /* Block axis only. The inline margin belongs to `.container`, which centers
     the row with `margin-inline: auto`. Restating it here as `margin: 0` is
     more specific than the container's own rule, so it silently cancelled that
     centering and left the whole row hugging the left edge on any viewport
     wider than the container's 1850px cap (client round 26). Below that cap the
     container has no slack, which is why it looked fine at every width anyone
     had checked. */
  margin-block: 0;
  list-style: none;
}

.contact-locations .locations > li {
  /* flex-shrink 0 is the whole mechanism — a shrinkable item would squeeze all
     five onto one line forever instead of wrapping to the 3 + 2 the client
     asked for. max-width keeps that from overflowing the narrowest phones. */
  flex: 0 0 var(--locations-col);
  max-width: 100%;
  text-align: center;
}

/* Bold and blue, per the ticket. 900 is the weight the staff names directly
   above this section use (.contact-panel .staff .name), so the two lists read
   as the same kind of label.

   20px rather than the 18px body size the address keeps: at equal size the bold
   label gave the pair no hierarchy and read as the weaker of the two (client
   round 25). 20px is the floor of the theme's own h4 step, and it is the
   largest size that still holds "Summerville (Main Office)" on one line inside
   a 324px column, which is what the five-across layout gives each address at
   1920. A larger step wraps that one name and drops its address below the
   others. */
.contact-locations .name {
  display: inline-block;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.4444;
  color: var(--brand, #008AF7);
}

.contact-locations .name:hover,
.contact-locations .name:focus-visible {
  color: var(--brand-dark, #0070ca);
}

/* --ink, not --muted: this is the same content as the .lines address on the
   contact panel, which is --ink. The muted grey is for the staff captions. */
.contact-locations .address {
  margin: 8px 0 0;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--ink, #212529);
}

/* --- Responsive ---------------------------------------------------------- */

/* Three per row, so the remaining two center on a second line. Five columns
   need 1628px of row at this basis, which the 1750px container only has on a
   genuinely wide desktop; at the client's 1440 they would be ~250px each. */
@media (max-width: 1599px) {
  .contact-locations .locations {
    --locations-col: calc((100% - 2 * var(--locations-gap)) / 3);
  }
}

@media (max-width: 991px) {
  /* 32px a side on a phone, and the panel above trims its own bottom padding to
     the same value (blocks/contact/info/contact-info.css) so the pair stays
     symmetric. Its 64px reads as a gap rather than rhythm above a three-line
     address at phone width (client round 26). */
  .contact-locations {
    padding-block: 0 32px;
  }

  .contact-locations .locations {
    --locations-col: calc((100% - var(--locations-gap)) / 2);
  }
}

@media (max-width: 575px) {
  .contact-locations .locations {
    --locations-col: 100%;
    gap: 32px;
  }
}

/* --- Editor mirrors ------------------------------------------------------ *
 * See blocks/theme/hero/theme-hero.css for why these exist. Inert on the front
 * end; the `crush-block` container is declared only in assets/css/editor.css.
 * Without them the ~840px preview pane keeps measuring the browser window and
 * draws all five columns at ~130px each.
 *
 * The missing top padding is corrected in assets/css/editor.css instead: it is
 * not a breakpoint mirror but a consequence of there being no contact panel
 * above the block inside a preview pane.
 * ------------------------------------------------------------------------- */

@container crush-block (max-width: 1599px) {
  .contact-locations .locations {
    --locations-col: calc((100% - 2 * var(--locations-gap)) / 3);
  }
}

@container crush-block (max-width: 991px) {
  .contact-locations {
    padding-block: 0 32px;
  }

  .contact-locations .locations {
    --locations-col: calc((100% - var(--locations-gap)) / 2);
  }
}

@container crush-block (max-width: 575px) {
  .contact-locations .locations {
    --locations-col: 100%;
    gap: 32px;
  }
}