/* aag — at-a-glance strip.
   AUTHORED, NOT PORTED. This block has no CSS in either source property — the
   selector does not exist in Baseball's bundles or Flag's stylesheet — so it
   renders unstyled on Baseball's live sub-property pages today, including the
   SFP page this build's pilot slice was derived from. See PLAN.md, "What Phase
   4 changed". Written here in the system's own idiom: eyebrow labels,
   display-face values, hairline dividers between items. */
.aag { --section-bg: var(--color-white); background: var(--section-bg); border-bottom: 1px solid var(--rule); }

.aag__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 28px var(--margin);
  display: grid;
  /* Explicit column counts, not auto-fit. Values here are set in the display
     face and run long ("APRIL TO OCTOBER"); with auto-fit the content forces
     the track width, so the same strip silently rendered 4-up, 3-up or 2-up
     depending on the words an editor typed. Fixed counts make the layout a
     property of the design rather than of the copy.

     The count is carried in a custom property so the breakpoints below can
     lower it in one place. It comes from how many items the block was given
     (see render.php) - a known integer, not a measurement of the copy, so the
     objection above does not apply to it. */
  --aag-cols: 4;
  grid-template-columns: repeat(var(--aag-cols), minmax(0, 1fr));
  gap: 24px 40px;
}

/* Pastel #124. A strip of two is a contact panel, not a four-up with two holes
   in it: it takes the full width and the values grow into it. */
.aag--1up .aag__inner { --aag-cols: 1; }
.aag--2up .aag__inner { --aag-cols: 2; }
.aag--3up .aag__inner { --aag-cols: 3; }

/* Wider columns carry a larger value, and on /getting-here/ these are the two
   things a visitor opened the page for. */
.aag--1up .aag__value,
.aag--2up .aag__value { font-size: var(--fs-h1); }
.aag--1up .aag__inner,
.aag--2up .aag__inner { padding-block: 36px; }

.aag__item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 20px;
  border-left: 1px solid var(--rule);
}
/* The divider separates items within a row, so the first item of each row has
   none - otherwise a wrapped row opens with a rule against the page margin.
   Which child that is depends on the column count, hence one rule per count.
   Every selector here is (0,2,0) so the breakpoints below can override them on
   source order rather than needing to be more specific again. */
.aag--4up .aag__item:nth-child(4n + 1),
.aag--3up .aag__item:nth-child(3n + 1),
.aag--2up .aag__item:nth-child(2n + 1),
.aag--1up .aag__item:nth-child(1n + 1) { padding-left: 0; border-left: 0; }

.aag__label { color: var(--text-subtle); margin: 0; }
.aag__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-poster-heavy);
  text-transform: uppercase;
  font-size: var(--fs-h2);
  line-height: 1.05;
  color: inherit;
  overflow-wrap: break-word;
}

/* The value is display weight and uppercase, so a permanent underline across a
   whole email address reads as a mistake rather than a link. The label above it
   ("Email Us", "Call Us") already says what it is, so the underline is held
   back for hover and focus. Colour is inherited either way: a browser-blue
   mailto in the middle of a navy panel is the one outcome worth preventing. */
/* An email is the one value here with no spaces to wrap at, so it overruns a
   column the other two sit inside comfortably. Measured in a 206px column, at
   the 185px of usable width that leaves:

     18px uppercase (the default)  longest run 201px  breaks mid-word
     18px lowercase               longest run 165px  breaks at the @ only

   Hence both changes. Dropping the capitals is not only what makes it fit: an
   email set in caps implies a case sensitivity it does not have, and reads
   worse than the lowercase people actually type. The <wbr> points in the
   markup put the break at the @, and break-word stays as a last resort for a
   phone narrower than anything measured here. */
/* The email USED to span two columns. That rule was written when every strip
   was four columns wide whatever it held, so a three item row genuinely had a
   spare column beside the address and the span cost nothing.

   Pastel #124 removed that premise: the column count now comes from the number
   of items (see render.php, $cols = min(4, $filled)), so a strip of three is
   three columns wide and there is no spare anywhere. The span then had to take
   a sibling's column, which pushed the item after the email onto a row of its
   own - Pastel #132, on a contact strip of three.

   Nothing replaces it. Fitting a long address was never the span's job alone:
   the lowercase treatment and the <wbr> break points below do that, and the
   measurement in the note above was taken in a 206px column, narrower than any
   column this strip now produces. */

.aag__value--email {
  font-size: var(--fs-h3);
  text-transform: none;
  overflow-wrap: break-word;
}

.aag__value a {
  color: inherit;
  text-decoration: none;
}
.aag__value a:hover,
.aag__value a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Below the desktop breakpoint the strip steps down to two columns and then to
   one, whatever it was asked for. Each selector list repeats the modifiers so
   it ties on specificity with the rules above and wins on source order. */
@media (max-width: 1023px) {
  .aag__inner,
  .aag--4up .aag__inner,
  .aag--3up .aag__inner { --aag-cols: 2; }

  .aag--4up .aag__item,
  .aag--3up .aag__item { padding-left: 20px; border-left: 1px solid var(--rule); }
  .aag--4up .aag__item:nth-child(2n + 1),
  .aag--3up .aag__item:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 599px) {
  .aag__inner,
  .aag--4up .aag__inner,
  .aag--3up .aag__inner,
  .aag--2up .aag__inner { --aag-cols: 1; gap: 18px; }

  .aag--4up .aag__item,
  .aag--3up .aag__item,
  .aag--2up .aag__item,
  .aag--1up .aag__item { padding-left: 0; border-left: 0; }

  /* The lift above is for a wide column; on one narrow column it would set the
     address four lines deep. */
  .aag--1up .aag__value,
  .aag--2up .aag__value { font-size: var(--fs-h2); }
}