/* ==========================================================================
   Areas We Serve — the locations grid, for any number of service columns

   assets/css/areas-we-serve.css:49-76 builds that grid for exactly two: the columns are
   `width: 50%`, the divider between them is a single ::before absolutely positioned at
   `left: 50%`, and the outer padding is asymmetric (`:first-child` 40px right,
   `:last-child` 93px left, retuned at 1439.98px and 1199.98px).

   A third column — Home Brewing Supplies, added 2026-09-10 — breaks all three. Measured on the
   page at 1600px before this file existed: columns came out 420/406/439 instead of equal, the
   divider landed at 826px which is *inside* the second column, and the pins, still three across
   in a third-width column, squeezed to 127px and wrapped every label onto three lines (78px tall
   against today's 52px).

   This is a separate file, not an edit to theirs: assets/css/ is the UI team's working directory
   and is add-only. Same arrangement as suburb-search-clear.css, which likewise has to load after
   areas-we-serve.css and wins on load order rather than on specificity. Registered in the
   'areas-we-serve' bucket in includes/assets.php, immediately after 'areas-we-serve'.

   Written against the column *count* rather than against three, so a fourth service would need
   nothing here: `flex: 1 1 0` shares the row equally however many there are, and the divider is a
   border on every column but the first rather than one line pinned to the middle.
   ========================================================================== */

/* Desktop only. At 991.98px and below, areas-we-serve.css already stacks the grid
   (`flex-direction: column`, `::before` hidden, columns `width: 100%`), which needs no help with a
   third column — so the two media queries deliberately do not overlap and mobile is untouched. */
@media (min-width: 992px) {
  /* The columns carry their own inner padding now, so the row is pulled back out to the container
     edges to keep the first and last columns flush with everything above them. This negative margin
     and the two padding-inline rules below must stay the same value: the moment they diverge the pin
     text stops lining up with the section heading above it. */
  .areas-locations__grid {
    margin-inline: calc(var(--space-16) * -1);
  }

  /* Replaced by a border on each column below; one line at 50% only ever suits two columns. */
  .areas-locations__grid::before {
    display: none;
  }

  .areas-locations__grid .areas-locations__category {
    width: auto;
    flex: 1 1 0;
    padding-inline: var(--space-16);
    border-left: 1px solid #dbdbdb;
  }

  .areas-locations__grid .areas-locations__category:first-child {
    border-left: 0;
  }

  /* Restated rather than left to the rule above: areas-we-serve.css sets the first and last
     column's padding at (0,2,0) and re-tunes it at two breakpoints, so an unqualified
     `.areas-locations__grid .areas-locations__category` would lose to it below 1440px. At (0,3,0)
     these win at every desktop width whatever the load order. */
  .areas-locations__grid .areas-locations__category:first-child,
  .areas-locations__grid .areas-locations__category:last-child {
    padding-inline: var(--space-16);
  }

  /* As many pins across as genuinely fit — two on a wide screen, one otherwise.
     `.areas-locations__pin strong` is display:block, so a pin is always two lines: the service name
     on top, the suburb bold under it. The service line sets the floor, measured on the page at 18px:

         Home Brew Shop         148px      Home Distilling Kit    156px
         Home Brewing Supplies  203px   <- the longest, and what 232px below is derived from

     232px is that 203px plus the pin's own 29px left gutter for its icon. Any narrower and the
     label wraps to a third line and that column's rows jump 52px -> 78px, which is what the
     inherited `repeat(3, 1fr)` did at every desktop width once there were three columns.

     `auto-fit` rather than a breakpoint: it lays down as many 232px tracks as the column can hold
     and stretches them to fill, so the browser decides one or two and a fourth service would need
     nothing re-tuned here. No column-gap — each pin's 29px icon gutter is the separation.

     **The 232px is only correct while "Home Brewing Supplies" is the longest service name.** A
     longer one added to Areas We Serve wraps until this number is raised to match it.

     The column padding above is the other half of this: it is var(--space-16) rather than the 30px
     it started at precisely to buy back the width that lets two tracks fit from ~1791px rather than
     ~1847px. The two are tuned together; raising the padding pushes two-across onto wider screens.

     Scoped to the grid on purpose. templates/areas-detail.php reuses `.areas-locations__pins` for
     its nearby-locations lists under `.bayswater-areas-map__pins`, with no grid wrapper around
     them, and those are not to be touched. Mobile is not touched either: below 992px the columns
     are already full width, where three pins across still fits. */
  .areas-locations__grid .areas-locations__pins {
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  }
}