/* ============================================================================
   EASTON · "For Members" collection page (/members/) — ADR-065.
   A light, on-brand collection page built on the theme's existing card/section/
   hero classes (assets/css/theme.css). This sheet adds only what those classes
   can't: the full-bleed breakout, the GeneratePress-chrome flush, the dark hero
   band, and the clickable member cards. Every rule is scoped under
   `.easton-members-page` (or a `.easton-members-*` class) so nothing leaks.
   ============================================================================ */

/* — Full-bleed: break the hero + card section OUT of GeneratePress's contained
     content area so the brand bands span edge-to-edge, like the location pages.
     `--eb-vw` is the scrollbar-excluded viewport width (set inline in the head by
     inc/members.php); falls back to 100vw with no JS. ------------------------- */
.easton-members-page .easton-members-hero,
.easton-members-page .easton-members-section {
  width: var(--eb-vw, 100vw);
  margin-left: calc(50% - var(--eb-vw, 100vw) / 2);
  margin-right: calc(50% - var(--eb-vw, 100vw) / 2);
}

/* Vertical flush: neutralise the GeneratePress content chrome (the .inside-article
   padding + .site-main margins that would box the bands vertically), so the hero
   sits flush under the header and the section flush above the pre-footer CTA. */
.easton-members-page .site-main { margin-top: 0; margin-bottom: 0; }
.easton-members-page .inside-article { padding-top: 0; padding-bottom: 0; }
@media (min-width: 769px) {
  .easton-members-page.easton-has-sticky-cta { padding-bottom: 0; }
}

/* — Hero: a dark band (matches the pre-footer CTA / hub trust bar), red eyebrow,
     white display H1, muted-white subhead. -------------------------------------*/
.easton-members-hero {
  background: var(--surface-dark);
  color: var(--text-on-dark);
}
.easton-members-hero .easton-eyebrow { color: var(--red); }
.easton-members-hero .easton-hero__title { color: var(--text-on-dark); }
.easton-members-hero .easton-hero__sub { color: var(--text-on-dark-muted); margin-bottom: 0; }

/* — Card section on the cream canvas. -------------------------------------------*/
.easton-members-section { background: var(--canvas); }

/* — Member cards: whole-card click target via a stretched CTA link (one real,
     crawlable <a href> per card), with a subtle hover lift.

     RAGGED HEIGHTS, FIXED (Brief 2026-08-14 §5). These cards used to be
     `align-items: start` — each as tall as what it holds — on the argument that a
     16:9 episode cover and three square product shots do not want the same box.
     True of the WELLS; not true of the CARDS, which measured 291/570/570 on row one
     and 505/434/346 on row two and read as broken rather than as varied. So:

       1. the grid STRETCHES, which is what actually makes a row's cards agree, at
          every breakpoint, with no magic number; and
       2. the wells get a floor (below) so the hairline that opens each one lands at
          the same height across a row, instead of wherever its contents happen to
          leave it.

     The slack a stretched card gains lands between the blurb and the well
     (`.easton-card__body` is the flex-grow child), so the well and the CTA stay
     anchored to the bottom edge and the CTAs line up too. -----------------------*/
.easton-members-grid {
  align-items: stretch;
  /* Query container for the well floor below: the well's height is driven by its
     16:9 media, whose width is a function of THIS element's width, and `cqw` is the
     only way to say that without hard-coding the container's own width. Declared
     here, consumed by a descendant — an element is never its own query container. */
  container-type: inline-size;
}
.easton-members-card {
  display: flex;
  flex-direction: column;
  position: relative;
  /* The grid tracks are `1fr` = `minmax(auto, 1fr)`, so a card's MIN-CONTENT width
     can widen its own column. A preview image that FAILS TO LOAD contributes its
     intrinsic 1280px through width:100%/height:100% inside the aspect-ratio box, and
     measured at 9070px per card — the whole grid blew out to a 15362px scroll width
     with images disabled. min-width:0 removes that floor, which is the fix rather
     than `overflow: hidden` (that would clip the focus ring below). */
  min-width: 0;
  transition: transform var(--dur-fast, .18s) var(--ease-standard, ease),
              box-shadow var(--dur-fast, .18s) var(--ease-standard, ease);
}
.easton-members-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(13, 13, 12, .14);
}
.easton-members-card .easton-card__body { flex: 1 1 auto; }
.easton-members-card__cta {
  margin: var(--space-5, 20px) 0 0;
  font-family: var(--font-label);
  font-weight: var(--fw-label, 600);
  font-size: var(--fs-caption, 13px);
  text-transform: uppercase;
  letter-spacing: var(--ls-caption, .06em);
}
.easton-members-card__link {
  color: var(--red);
  text-decoration: none;
}
/* Stretch the CTA link across the whole card so the entire card is clickable,
   while keeping a single crawlable <a>. */
.easton-members-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}
.easton-members-card__link:hover { color: var(--red-shadow); }
/* Keyboard focus is shown on the card, not the (invisible) stretched hit-area. */
.easton-members-card:focus-within {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
.easton-members-card__link:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .easton-members-card { transition: none; }
  .easton-members-card:hover { transform: none; }
}

/* ============================================================================
   "What's new here" previews (Brief 2026-08-10 §3)
   Everything below is ADDITIVE and sits between the blurb and the CTA. If a
   destination has nothing to show, none of it renders and the card is exactly the
   card that shipped in ADR-065 — the enhancement is never the structure.
   ============================================================================ */
.easton-members-preview {
  margin-top: var(--space-5, 20px);
  padding-top: var(--space-5, 20px);
  border-top: 1px solid var(--line, rgba(13, 13, 12, .12));
}

/* — The well floor (Brief §5). A MIN-height, never a fixed one: it lifts the short
     wells (the honest empty line, three squares, the logo cluster) up to the tall
     one so they agree, and a well that ever exceeds it simply doesn't bind — there
     is no height a surprise can be clipped by.

     The floor is the tallest well the card can build, computed rather than guessed:

       21px  padding-top (20) + border-top (1)
     + media  the 16:9 frame — 0.5625 x the card's CONTENT width
     + 14px  media margin-bottom
     + 20px  "Latest" label   (14px line-box + 6px margin)
     + 42px  title, clamped to 2 lines (15px x 1.4)
     + 20px  meta line        (14px line-box + 6px margin), reserved whether or not
             a given card has one, so the ones that do still fit
     = 117px + media

     The label/meta line-heights and the 2-line clamp below are what make those
     numbers true rather than approximate. Card content width comes from the grid's
     own width (`100cqw`) minus the gaps, divided by the track count, minus the
     card's 24px padding on each side — so it stays correct if the container max
     ever changes. Below 561px every card is alone in its row, so nothing needs to
     agree and the floor is dropped entirely. --------------------------------------*/
@media (min-width: 901px) {
  .easton-members-preview { min-height: calc(117px + ((100cqw - 48px) / 3 - 48px) * .5625); }
}
@media (min-width: 561px) and (max-width: 900px) {
  .easton-members-preview { min-height: calc(117px + ((100cqw - 24px) / 2 - 48px) * .5625); }
}

/* Short wells centre their contents in the floor they've been given, so the space
   reads as deliberate rather than as something that failed to load. Each modifier
   keeps its own layout mode — the well is a grid for the gallery and a wrapping
   flex row for the logos, and neither may be flattened into the other. */
.easton-members-preview--empty { display: flex; flex-direction: column; justify-content: center; }
.easton-members-preview--gallery { align-content: center; }
.easton-members-preview--logos { align-content: center; }

/* — Latest item: 16:9 media over a two-line caption. --------------------------*/
.easton-members-preview__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-chip, 6px);
  /* A light neutral, not the dark surface: with a real image loaded the fill is
     invisible either way (object-fit: cover), but on a slow or failed request the
     dark version painted a black slab in the middle of the card. */
  background: rgba(13, 13, 12, .06);
  margin-bottom: 14px;
}
.easton-members-preview__img { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; }
/* The three caption line-boxes are pinned (14 / 21x2 / 14) rather than left to the
   font's default leading, because the well floor above is computed FROM them — an
   approximate line-height would make the floor approximate too. */
.easton-members-preview__label {
  margin: 0 0 6px;
  font-family: var(--font-label);
  font-weight: var(--fw-label, 600);
  font-size: 10.5px;
  line-height: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
}
.easton-members-preview__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink, #0d0d0c);
  text-wrap: pretty;
  /* Two lines, then ellipsis. A three-line episode title was the single largest
     source of well variance (322px vs 280px) — and a card preview's job is to
     identify the newest item, which the destination then states in full. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.easton-members-preview__meta {
  margin: 6px 0 0;
  font-family: var(--font-label);
  font-size: 11.5px;
  line-height: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint, rgba(13, 13, 12, .5));
}

/* — Shop: three square thumbnails on one row. The TILE owns the square, not the
     <img>: an aspect-ratio on an image is a hint that the intrinsic size a broken
     image still reports can beat, which is how three blocked product shots measured
     99px wide by 1500px TALL and took the card to 1747px — and, under the stretched
     grid, its two row-mates with it. A wrapper's height is settled by the layout
     before the image is ever fetched, so the row measures the same loaded, loading
     or failed. This is the same wrapper the item preview's media has always used;
     the gallery was the one preview kind without it. --------------------------*/
.easton-members-preview--gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.easton-members-preview__tile {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* The `1fr` tracks are `minmax(auto, 1fr)`, so the tile's min-content width is a
     floor under its own column — the horizontal half of the same failure, which
     measured 3000px per thumbnail before it was guarded. */
  min-width: 0;
  border-radius: var(--radius-chip, 6px);
  background: #fff;
}
.easton-members-preview--gallery .easton-members-preview__img {
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: cover;
}

/* — Partners: the sponsor logos as a cluster. The logos are dark-on-transparent
     PNGs of wildly different proportions, so they are capped on BOTH axes and left
     to find their own width — a fixed grid would blow the wide wordmarks up and
     shrink the square marks to nothing. ---------------------------------------*/
.easton-members-preview--logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}
.easton-members-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 40px;   /* fallback only — the real per-logo cap arrives inline */
  max-width: 128px;
  object-fit: contain;
  opacity: .78;
}

/* — Events: the honest line. Reads as a deliberate statement, not a failed load. */
.easton-members-preview__note {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-faint, rgba(13, 13, 12, .5));
  font-style: italic;
}

@media (max-width: 640px) {
  .easton-members-logo { max-width: 104px; }
}

/* ============================================================================
   "For Easton Parents" (Brief 2026-08-14) — the kids/parents section below the
   member grid. Built entirely on atoms this page already owns (.easton-section,
   .easton-container, .easton-grid--3, .easton-card, the stretched-link card), and
   given its OWN modifier throughout so it can diverge later without reaching into
   the member cards. Nothing here restyles a `.easton-members-*` rule.
   ============================================================================ */

/* The section is full-bleed for the same reason the one above it is — it is a brand
   band, and a boxed band under an edge-to-edge one reads as a mistake.

   It stays on the SAME cream as the member grid rather than taking a second
   surface: --surface-sunken is a cool 3.5% black that goes grey against this warm
   cream, and inventing a third band colour for one section is not a decision this
   page should be making. The seam is drawn instead — a hairline, and a shortened
   top pad so two 104px bands don't leave 208px of empty cream between the grids. */
.easton-members-page .easton-parents-section {
  width: var(--eb-vw, 100vw);
  margin-left: calc(50% - var(--eb-vw, 100vw) / 2);
  margin-right: calc(50% - var(--eb-vw, 100vw) / 2);
}
.easton-parents-section {
  background: var(--canvas);
  border-top: 1px solid var(--line);
  padding-top: var(--space-20, 80px);
}
@media (max-width: 768px) {
  .easton-parents-section { padding-top: var(--space-12, 48px); }
}

.easton-parents-head { max-width: 62ch; margin-bottom: var(--space-10, 40px); }
.easton-parents-head h2 { margin: 0; }
.easton-parents-head__sub {
  margin: var(--space-4, 16px) 0 0;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text-muted);
}

/* Same stretch treatment as the member grid, applied from the start: cards in a row
   agree, and the CTA is pinned to the card's bottom edge by the blurb's flex-grow.
   Seven cards over three columns leaves one alone on the last row — it fills its
   own cell at the column width, which is what a grid item should do. */
.easton-parents-grid { align-items: stretch; }
.easton-parents-card {
  display: flex;
  flex-direction: column;
  position: relative;
  /* The `1fr` tracks are `minmax(auto, 1fr)`, so a card's min-content width is a
     floor under its own column — this is the guard that kept a failed image from
     blowing this page's grid to 15,362px, and it applies here whether or not a row
     currently carries an image. */
  min-width: 0;
  transition: transform var(--dur-fast, .18s) var(--ease-standard, ease),
              box-shadow var(--dur-fast, .18s) var(--ease-standard, ease);
}
.easton-parents-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(13, 13, 12, .14);
}
.easton-parents-card .easton-card__body { flex: 1 1 auto; }

/* Optional media. Absent from every row today — the registry ships text cards — but
   the frame is fixed-aspect so a future image drop changes what the card SHOWS, not
   how tall it is, and a failed request leaves a neutral panel rather than a hole. */
.easton-parents-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-chip, 2px);
  background: rgba(13, 13, 12, .06);
  margin-bottom: var(--space-5, 20px);
}
.easton-parents-card__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: cover;
}

.easton-parents-card__cta {
  margin: var(--space-5, 20px) 0 0;
  font-family: var(--font-label);
  font-weight: var(--fw-label, 600);
  font-size: var(--fs-caption, 13px);
  text-transform: uppercase;
  letter-spacing: var(--ls-caption, .06em);
}
.easton-parents-card__link {
  color: var(--red);
  text-decoration: none;
}
/* One crawlable <a> per card, stretched over the whole card as the hit area. */
.easton-parents-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}
.easton-parents-card__link:hover { color: var(--red-shadow); }
.easton-parents-card:focus-within {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
.easton-parents-card__link:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .easton-parents-card { transition: none; }
  .easton-parents-card:hover { transform: none; }
}

/* ============================================================================
   "On this page" jump menu (brief 2026-09-28 §D). The parents' guide's `.c7-jump`
   component, reused: same markup and the same assets/js/comp-guide.js (sticky
   parking under the site header + active-link highlight). comp-guide.css is not
   loaded on /members/, so the component's rules are ported here from it — values
   unchanged (desktop underline tabs; <=900px a scrollable row of pills).
   ============================================================================ */
.easton-members-page .c7 {
  --c7-px: clamp(20px, 8.34vw, 120px);
  --c7-top: 83px; /* comp-guide.js measures the real header height. */
}
@media (max-width: 980px) { .easton-members-page .c7 { --c7-top: 69px; } }
.easton-members-page .easton-members-jump {
  position: sticky; top: var(--c7-top); z-index: 50;
  width: var(--eb-vw, 100vw);
  margin-left: calc(50% - var(--eb-vw, 100vw) / 2);
  margin-right: calc(50% - var(--eb-vw, 100vw) / 2);
  background: rgba(244,241,234,0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.easton-members-page .c7-jump__in {
  display: flex; align-items: center; gap: 4px; max-width: 1440px; margin: 0 auto; padding: 0 var(--c7-px);
  overflow-x: auto; scrollbar-width: none;
}
.easton-members-page .c7-jump__in::-webkit-scrollbar { display: none; }
.easton-members-page .c7-jump__head {
  font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 20px 0 0; white-space: nowrap;
}
.easton-members-page .c7-jump__link {
  padding: 20px 16px 18px; border-bottom: 2px solid transparent; color: var(--text-muted); text-decoration: none;
  font-family: var(--font-label); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.easton-members-page .c7-jump__link:hover { color: var(--ink); }
.easton-members-page .c7-jump__link.is-active { color: var(--ink); border-bottom-color: var(--red); }
.easton-members-page .c7-jump__link:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
/* Targets land with their heading clear of the sticky header + this menu. */
.easton-members-page .easton-members-card,
.easton-members-page .easton-parents-section { scroll-margin-top: calc(var(--c7-top) + 72px); }
@media (max-width: 900px) {
  .easton-members-page .c7-jump__in { gap: 8px; padding: 10px 16px; }
  .easton-members-page .c7-jump__head { display: none; }
  .easton-members-page .c7-jump__link {
    flex: 0 0 auto; min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border: 0;
    border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 12.5px; letter-spacing: 0.1em;
  }
  .easton-members-page .c7-jump__link.is-active { background: var(--ink); color: #fff; }
}