/* ============================================================================
   BANDS — the ampm structural system, paid for out of this building's palette.

   The study found ampm's real advantage is not colour choice, it is that colour
   does structural work: five sections, five full-bleed fields, one idea each, so
   the page has a rhythm you feel scrolling past at speed. Their homepage carries
   more than ours in less than half the height.

   So a band owns its field AND its ink. Every colour inside a band comes from
   the band's own token set, which is why .band--blue can invert the whole thing
   by redefining four variables instead of restating every rule. Nothing here is
   an ampm colour: the fields are the enamel cream, the Valero blue off the
   canopy, and the brush black of the sign lettering.

   Loaded after sign.css, which owns the tokens.
   ========================================================================== */

.band {
  /* Ink is band-local so a field change repaints its contents as a set. */
  --band-ink: var(--text-primary);
  --band-ink-soft: var(--text-secondary);
  --band-ink-faint: var(--text-muted);
  --band-rule: var(--border-glass);
  --band-action: var(--accent);
  --band-field: var(--bg-primary);
  --band-ok: var(--sign-green);

  background: var(--band-field);
  color: var(--band-ink);
  /* .reveal--left / --right slide in from +-28px, and until they fire the page
     can be dragged sideways by that much on a phone. clip contains it without
     creating a scroll container the way overflow:hidden would. The same latent
     overflow exists on the pages still using .ed-split; they get it when they
     are rebuilt. */
  overflow-x: clip;
  padding-block: clamp(2.25rem, 4.5vw, 3.25rem);
}

/* ampm alternates a coloured room with a white one. Ours alternates enamel
   cream with the white board stock the price tiles are already printed on. */
.band--paper { --band-field: var(--bg-card); }

.band--blue {
  --band-field: var(--accent);
  --band-ok: #7ee0a8;
  --band-ink: #ffffff;
  --band-ink-soft: rgba(255, 255, 255, 0.84);
  --band-ink-faint: rgba(255, 255, 255, 0.84);
  --band-rule: rgba(255, 255, 255, 0.26);
  --band-action: #ffffff;
}

.band--ink {
  --band-field: var(--text-primary);
  --band-ok: #7ee0a8;
  --band-ink: #ffffff;
  --band-ink-soft: rgba(255, 255, 255, 0.78);
  --band-ink-faint: rgba(255, 255, 255, 0.8);
  --band-rule: rgba(255, 255, 255, 0.2);
  --band-action: var(--sign-gold);
}

/* A board bolted to the wall: gold is structural here and nowhere else. */
.band--board { --band-field: var(--bg-primary); border-top: 3px solid var(--sign-gold); }

.band--tight { padding-block: clamp(1.5rem, 3vw, 2rem); }

.band__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

/* ---- band heading ------------------------------------------------------- */

.band__head { margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem); }

.band__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--band-ink-faint);
  margin-bottom: 0.55rem;
}

.band__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 5.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--band-ink);
  margin: 0;
}
.band__title em { font-style: normal; color: var(--sign-red); }
.band--blue .band__title em,
.band--ink .band__title em { color: var(--sign-gold); }

.band__lead {
  margin: 0.7rem 0 0;
  max-width: 46ch;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--band-ink-soft);
}

/* ---- the counter strip -------------------------------------------------- */
/* ampm welds a store-locator strip under the hero: the one job the site exists
   for, before anything else. Ours answers the three questions a driver on
   Highway 4 actually has, and every one is computed, not typed: the price comes
   from the owner's sheet, the open state from the hours engine, the ferry from
   the published timetable. No figure in this markup. */

.counter-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--band-rule);
  border: 1px solid var(--band-rule);
}

.counter-cell {
  background: var(--band-field);
  padding: 1rem 1.1rem 1.05rem;
  min-width: 0;
}

/* An odd number of content cells leaves the last one alone in its row, and the
   empty track is not empty to look at: the grid's 1px gap colour fills it, so a
   paler rectangle appears beside the final cell. Every page carrying this strip
   has three content cells plus the spanning actions cell, so every page had it.
   Let the odd one span instead. nth-last-child(2) is what makes this specific to
   the cell immediately before .counter-cell--actions, so a future four-cell
   strip fills both rows and is left alone. */
.counter-cell:nth-child(odd):nth-last-child(2) { grid-column: 1 / -1; }

.counter-cell__label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--band-ink-faint);
  margin-bottom: 0.4rem;
}

.counter-cell__value {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 4.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--band-ink);
  font-variant-numeric: tabular-nums;
}

/* The price cell carries no number until the feed supplies one. Its two states
   are swapped here rather than in script, so the markup can never ship a
   figure. Same contract as the utility bar: see LESSONS.md 2026-08-15. */
.counter-cell__value .util-bar__value { font-variant-numeric: tabular-nums; }
[data-util-price] .counter-cell__fallback { display: none; }
[data-util-price][data-price-state="unknown"] .counter-cell__figure { display: none; }
[data-util-price][data-price-state="unknown"] .counter-cell__fallback { display: inline; }
[data-util-price][data-price-state="pending"] .counter-cell__figure { opacity: 0.55; }

.counter-cell--actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.counter-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.72rem 1.1rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.counter-btn--solid { background: #ffffff; color: var(--accent); border: 1px solid #ffffff; }
.counter-btn--solid:hover { background: var(--bg-secondary); color: var(--accent); }
.counter-btn--ghost { background: transparent; color: #ffffff; border: 1px solid var(--band-rule); }
.counter-btn--ghost:hover { color: #ffffff; border-color: #ffffff; background: rgba(255, 255, 255, 0.14); }

@media (min-width: 760px) {
  .counter-strip { grid-template-columns: repeat(3, 1fr) auto; }
  .counter-cell { padding: 1.2rem 1.5rem; }
  .counter-cell--actions { grid-column: auto; flex-wrap: nowrap; }
  .counter-cell:nth-child(odd):nth-last-child(2) { grid-column: auto; }
  .counter-btn { flex: 0 0 auto; }
}

/* ---- buttons on a band ---------------------------------------------------
   .btn-secondary is an outline button whose ink is the page's dark text, and
   sign.css only lightens it inside .page-hero and .ed-hero. bands.css added
   .band--ink and .band--blue afterwards and never extended that, so a secondary
   button on a dark band rendered rgb(20,23,26) on rgb(20,23,26): a 1:1 contrast
   ratio, a completely invisible control. It shipped that way on the 21+ page's
   DoorDash button.

   Rather than naming the two dark fields, take the ink from the band itself, so
   this stays correct for any field added later. Border is currentColor for the
   same reason. */
.band .btn-secondary {
  color: var(--band-ink);
  border-color: currentColor;
}
.band .btn-secondary:hover {
  background: var(--band-ink);
  color: var(--band-field);
  border-color: var(--band-ink);
}

/* ---- photo tiles -------------------------------------------------------- */
/* ampm's card is the photograph. No border, no panel, no rounded box: an image
   and a caption in condensed capitals. Ours can do this honestly because every
   photograph is of this store. */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.8rem, 2.4vw, 1.5rem);
}

.tile {
  display: block;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.tile__media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  aspect-ratio: 3 / 2;
}
.tile__media img,
.tile__media picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}
.tile:hover .tile__media img { transform: scale(1.03); }

.tile__title {
  display: block;
  margin: 0.7rem 0 0.15rem;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.6vw, 1.12rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  color: var(--band-ink);
}

.tile__line {
  display: block;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--band-ink-soft);
}

@media (min-width: 700px) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- feature band: a photograph with the copy beside it ----------------- */

.feature {
  display: grid;
  gap: clamp(1.25rem, 3.5vw, 2.5rem);
  align-items: center;
}
.feature__media {
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 3 / 2;
}
.feature__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature__body { min-width: 0; }

/* 760, not 860: at 768 a stacked feature gives a 512px-tall photograph and made
   the tablet layout taller than the phone one. */
@media (min-width: 760px) {
  .feature { grid-template-columns: 1.05fr 1fr; }
  .feature--flip .feature__media { order: 2; }
}

/* A live line inside a feature: the next ferry, computed from the timetable. */
.feature__live {
  margin-top: 1.1rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--sign-gold);
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--band-ink);
}
.band--paper .feature__live,
.band--board .feature__live { background: var(--bg-secondary); }

/* ---- proof ------------------------------------------------------------- */

.proof {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--band-rule);
  border: 1px solid var(--band-rule);
}
.proof__item { background: var(--bg-card); padding: 1.1rem 1.15rem; }
.proof__value {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.proof__label {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--band-ink-soft);
}
.proof__source { display: block; font-size: 0.72rem; color: var(--band-ink-faint); margin-top: 0.2rem; }

@media (min-width: 760px) { .proof { grid-template-columns: repeat(4, 1fr); } }

/* ---- closing action band ----------------------------------------------- */
/* ampm repeats its locator band at the foot of every page, so anyone who reads
   to the bottom of anything is handed the same next step. */

.closing { display: grid; gap: 1.4rem; align-items: end; }
.closing__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.closing__hours {
  margin: 0.8rem 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--band-ink-soft);
}
@media (min-width: 760px) {
  .closing { grid-template-columns: 1.2fr auto; }
}

@media (prefers-reduced-motion: reduce) {
  .tile__media img, .counter-btn { transition: none; }
  .tile:hover .tile__media img { transform: none; }
}

/* ---- live status elements ----------------------------------------------
   js/main.js (hours) and js/age-gate.js (alcohol sales window) own these spans
   and rewrite their class attribute on every tick, so they cannot carry a
   layout class of ours: it would be wiped a minute later. They are styled by
   context instead, and the dot takes its colour from the band. */

.counter-cell .status-bar,
.feature__live .status-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.counter-cell .status-dot,
.feature__live .status-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--band-ink-faint);
}
.counter-cell .status-bar--open .status-dot,
.feature__live .status-bar--open .status-dot { background: var(--band-ok); }

.counter-cell__unit {
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--band-ink-faint);
}
.counter-cell__fallback {
  color: var(--band-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}