/* ============================================================
   SECTION SYSTEM — shared patterns across the site
   ============================================================
   One source of truth for the things every page section needs:
   container, padding, surface variants, headings, lede.

   Sections never style bare semantic elements (h2, p, etc.).
   Everything is a class so:
     - cascade is predictable
     - sections can be reordered without copy bleeding into eyebrows
     - the same CSS works whether the markup uses <h2>, <p>, <div>

   Usage:

     <section class="section section--soft">
       <div class="section__inner">

         <header class="section__head">
           <p class="eyebrow">About ACOCI</p>
           <h2 class="section__title">Heading goes here.</h2>
         </header>

         <div class="section__split section__split--3-2">
           <div class="section__copy">
             <p class="section__lede">Body lede text...</p>
             <a class="btn btn--secondary" href="#">Action</a>
           </div>
           <div class="section__media">
             <!-- photo / triangle / chart -->
           </div>
         </div>

       </div>
     </section>

   ============================================================ */


/* ── 1. SECTION SHELL ──────────────────────────────────────── */

.section {
  background: var(--color-surface-page);
  padding-block: calc(var(--space-2xl) * 1.5);
  position: relative;
  overflow: hidden;
}

.section__inner {
  max-width: var(--container-inner);
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  position: relative;
  z-index: 1;
}

/* Surface variants — pick one per section */
.section--page { background: var(--color-surface-page); }
.section--soft { background: var(--color-surface-aqua-soft); }
.section--aqua { background: var(--brand-aqua); }
.section--mission {
  background: var(--gradient-mission);
  color: var(--color-text-on-dark);
}

/* Apply to the section immediately after the hero. Adds top padding
   equal to --hero-photo-bleed so the section's content clears the
   hero image's overhang from above. The base section padding-block
   still applies — this is in addition to it. */
.section--after-hero {
  padding-top: calc(var(--space-2xl) * 1.5 + var(--hero-photo-bleed));
}

/* Apply to the second of any two adjacent sections that share a
   background color, to prevent the doubled gap from reading as
   excessive whitespace. Manual application in markup. */
.section--continues,
section.section--continues { padding-top: 0; }


/* ── 2. SECTION HEAD ───────────────────────────────────────── */
/*
   Eyebrow + title pair. Lives in a flex container with a small
   gap (no margin-bottom on the eyebrow). Optional .section__lede
   sits below the title.
*/

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
/* When .section__head sits at the top of an .section__inner
   (not inside a copy block), it gets bottom margin to space the
   following content. When inside a flex .section__copy, the
   parent's gap handles spacing — no margin needed. */
.section__inner > .section__head { margin-bottom: var(--space-xl); }

/* Variant: head as a horizontal split (title left, link right).
   Used by News, Events, etc. where the head shows "Latest news"
   on the left and "All news →" on the right. */
.section__head--split {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.section__head--split .section__head-title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* The title — a class, not h2-bound, so the markup can use any
   semantically appropriate heading level (h1 on a sub-page hero,
   h2 in a section, h3 in a card). */
.section__title {
  font-family: var(--font-heading);
  font-size: var(--heading-1);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  margin: 0;
  max-width: 18ch;
}
.section__title--md  { font-size: var(--heading-2); max-width: 22ch; }
.section__title--sm  { font-size: var(--heading-3); max-width: 26ch; }
.section__title--wide { max-width: none; }
.section__title--narrow { max-width: 14ch; }

/* Optional supporting copy below the title — body-lg, muted. */
.section__lede {
  font-family: var(--font-body);
  font-size: var(--body-lg);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 50ch;
  margin: 0;
}


/* ── 3. SPLIT LAYOUT ───────────────────────────────────────── */
/*
   The two-column section layout used everywhere — About,
   President's Note, Members, the various pillar pages.

   Default = 1:1. Modifiers shift the ratio.
*/

.section__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}
@media (max-width: 880px) {
  .section__split { grid-template-columns: 1fr; gap: var(--space-xl); }
}

.section__split--3-2 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.section__split--2-3 { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.section__split--6-5 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.section__split--5-6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.section__split--7-5 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.section__split--5-7 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }

/* Align columns to the top of the row (default is center). Use when the
   two columns have very different content lengths and centering would
   visually orphan the shorter one. */
.section__split--top { align-items: start; }


/* ── 4. SECTION COPY BLOCK ────────────────────────────────── */
/*
   The text-side of a split layout. Rules ONLY target the explicit
   sub-classes — no bleed into other <p>s (eyebrows, attribution,
   meta, etc.) that might live in the same column.
*/

.section__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.section__copy > .btn { align-self: flex-start; }

/* The narrow opening lede inside a copy block (paragraph-sized). */
.section__copy-lede {
  font-family: var(--font-body);
  font-size: var(--body-lg);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 50ch;
  margin: 0;
}


/* ── 5. SECTION MEDIA WRAP ────────────────────────────────── */
/*
   Generic frame for the media side of a split section. Photos
   use --media--photo (with aspect-ratio + radius); triangles use
   --media--figure (square frame for an aspect-1 graphic).
*/

.section__media {
  width: 100%;
}
.section__media--photo {
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-aqua-mid);
}
.section__media--photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.section__media--portrait {
  aspect-ratio: 4 / 5;
  max-width: 22rem;
  margin-inline: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-aqua-mid);
}
.section__media--portrait img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.section__media--figure {
  aspect-ratio: 1 / 1;
  max-width: 28rem;
  margin-inline: auto;
  position: relative;
}


/* ── 6. SECTION HEAD-LINK ─────────────────────────────────── */
/*
   The "All news →" / "All events →" arrow link that sits opposite
   the section title in a head--split. */

.section__head-link {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-cta);
  font-size: var(--body-base);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  white-space: nowrap;
}
.section__head-link::after {
  content: "\2192";
  font-size: 1.1em;
  transition: transform var(--transition-base);
}
.section__head-link:hover { color: var(--color-cta-hover); }
.section__head-link:hover::after { transform: translateX(3px); }


/* ── 7. TRIANGLE FIGURE ───────────────────────────────────── */
/*
   Decorative composition of overlapping brand triangles. Used
   as the media side of any split section that doesn't have a
   photo (e.g. About, Mission, abstract pillar features).

   Geometry: three triangles, anchored to the figure's frame.
   Colors are picked from the existing palette via tokens — no
   need to override per-section.
*/

.tri-figure {
  position: relative;
}
.tri-figure__tri {
  position: absolute;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: url("../images/triangles/Triangles-02.svg");
  mask-image: url("../images/triangles/Triangles-02.svg");
  aspect-ratio: 675.86 / 1514.8;
}

/* Big back triangle — pillar primary or teal-deep by default. */
.tri-figure__tri--1 {
  color: var(--brand-teal-deep);
  height: 100%;
  left: 8%;
  top: 0;
  opacity: 0.92;
}
/* Mid triangle — sail blue, rotated 180 for visual rhythm. */
.tri-figure__tri--2 {
  color: var(--brand-sail);
  height: 80%;
  left: 32%;
  top: 12%;
  opacity: 0.78;
  transform: rotate(180deg);
}
/* Small foreground accent — uses the prow SVG. */
.tri-figure__tri--3 {
  -webkit-mask-image: url("../images/triangles/Triangles-03.svg");
  mask-image: url("../images/triangles/Triangles-03.svg");
  aspect-ratio: 271.09 / 930.91;
  color: var(--brand-aqua-light);
  height: 55%;
  right: 12%;
  bottom: 4%;
}


/* ── 7. MARK FIGURE ────────────────────────────────────────
   The ACOCI roundel as a quiet brand watermark, used in the
   right column of a .section__split. Renders the multi-color
   mark as a flat white silhouette at 60% opacity so it sits
   on the aqua section background as decoration, not a focal
   element.
   ──────────────────────────────────────────────────────── */

.mark-figure {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.mark-figure__img {
  width: 100%;
  height: auto;
  max-width: 28rem;
  opacity: 0.6;
}


/* ── 8. FEATURED CARD ────────────────────────────────────────
   A photo-on-top news/article card with category eyebrow, title,
   lede, and a link. Used in the "featured" position of news /
   article listings (homepage News section, news pillar page).
   ──────────────────────────────────────────────────────── */

.featured-card {
  display: flex;
  flex-direction: column;
}
.featured-card__media {
  aspect-ratio: 16 / 9;
  background: var(--color-surface-aqua-mid);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}
.featured-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.featured-card__cat {
  font-family: var(--font-heading);
  font-size: var(--body-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary-deep);
  margin: 0 0 var(--space-sm);
}
.featured-card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--heading-2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-md);
}
.featured-card__title a { color: inherit; }
.featured-card__body {
  font-size: var(--body-lg);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 50ch;
  margin: 0 0 var(--space-md);
}
.featured-card__link {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-link);
  font-size: var(--body-base);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  align-self: flex-start;
}
.featured-card__link::after {
  content: "\2192";
  transition: transform var(--transition-base);
}
.featured-card__link:hover { color: var(--color-link-hover); }
.featured-card__link:hover::after { transform: translateX(3px); }


/* ── 9. LIST FEED ────────────────────────────────────────────
   Compact list of items separated by hairlines. Each item:
   a meta line (date · category) above a title. Reused in the
   news compact list (homepage + pillar) and anywhere else we
   need a tightly-stacked feed of dated content.
   ──────────────────────────────────────────────────────── */

.list-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.list-feed__item {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
  display: grid;
  gap: 4px;
}
.list-feed__item a {
  color: inherit;
  display: block;
}
.list-feed__item:hover .list-feed__title {
  color: var(--color-primary-deep);
}
.list-feed__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--body-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin: 0;
}
.list-feed__cat { color: var(--color-primary-deep); }
.list-feed__meta-sep {
  display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
.list-feed__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--body-lg);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text);
  transition: color var(--transition-fast);
}


/* ── 10. PULL QUOTE CARD ────────────────────────────────────
   Soft tinted card containing a portrait left + quote right.
   Used for the President's Note. Drop-in replacement anywhere
   we want to feature a single voice (board chair, member, etc.).
   ──────────────────────────────────────────────────────── */

.pull-quote {
  background: var(--color-surface-aqua-soft);
  border-radius: var(--radius-md);
  padding: calc(var(--space-2xl) * 1.25) clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: var(--space-2xl);
  align-items: center;
}
@media (max-width: 880px) {
  .pull-quote {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

.pull-quote__portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  max-width: 22rem;
  margin-inline: auto;
  width: 100%;
  background: var(--color-surface-aqua-mid);
}
.pull-quote__portrait img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.pull-quote__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-inline: var(--space-md);
}

.pull-quote__body {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--heading-3);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-text);
  max-width: 36ch;
}
.pull-quote__body::before {
  content: "\201C";
  display: inline;
  margin-right: 0.05em;
  color: var(--brand-teal-deep);
}
.pull-quote__body::after {
  content: "\201D";
  display: inline;
}

.pull-quote__attribution {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  margin: 0;
  flex-wrap: wrap;
}
.pull-quote__name {
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--body-base);
}
.pull-quote__title {
  color: var(--color-text-muted);
  font-size: var(--body-sm);
}


/* ── 11. LINK ARROW ─────────────────────────────────────────
   Generic inline link with a trailing right-arrow that nudges
   on hover. Used wherever a section has a "read more" / "open
   the directory" type tertiary link inside copy.
   ──────────────────────────────────────────────────────── */

.link-arrow {
  align-self: flex-start;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-link);
  font-size: var(--body-base);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
}
.link-arrow::after {
  content: "\2192";
  transition: transform var(--transition-base);
}
.link-arrow:hover { color: var(--color-link-hover); }
.link-arrow:hover::after { transform: translateX(3px); }

/* Aqua-accent variant — used inside copy blocks where the link is
   meant to read as a tertiary/quiet pointer, not a primary action. */
.link-arrow--accent { color: var(--brand-aqua-mid); }
.link-arrow--accent:hover { color: var(--brand-teal); }


/* ── 12. SECTION SAILS ──────────────────────────────────────
   Large Triangles-01 watermark emerging from the bottom-right
   of a section, sitting behind the foreground content as soft
   tonal texture. Opt-in via .section--with-sails on the section
   element + an empty <span class="section__sails"> as the first
   child of the section.
   ──────────────────────────────────────────────────────── */

.section--with-sails { position: relative; overflow: hidden; }

.section__sails {
  position: absolute;
  right: -4%;
  bottom: -22%;
  width: min(86vw, 1180px);
  aspect-ratio: 1029.57 / 1514.8;
  background-color: var(--brand-teal);
  -webkit-mask: url("../images/triangles/Triangles-01.svg") no-repeat bottom right / contain;
          mask: url("../images/triangles/Triangles-01.svg") no-repeat bottom right / contain;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 980px) {
  .section__sails {
    width: 140vw;
    right: -42%;
    bottom: -6%;
    opacity: 0.12;
  }
}


/* ── 13. SECTION HEAD --tight ───────────────────────────────
   Eyebrow + title with a tighter gap below the title than the
   default .section__head provides. For copy blocks where the
   title needs to read as a lockup with a following lede, not
   stand alone above its section. */

.section__head--tight {
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}


/* ── 14. SECTION SPLIT --sticky ─────────────────────────────
   Lets the first column stick while the second column scrolls
   past it. Pair .section__split--sticky on the grid with
   .section__copy--sticky on the column you want to pin. */

.section__split--sticky { align-items: start; }

.section__copy--sticky {
  position: sticky;
  top: var(--space-2xl);
  align-self: start;
}
@media (max-width: 980px) {
  .section__copy--sticky { position: static; }
}


/* ── 15. CARD GRID ──────────────────────────────────────────
   Responsive grid container for card patterns (.tinted-card,
   .featured-card-grid items, pillar sub-page cards, etc.).
   Variants choose the desktop column count; mobile collapses
   to 1 column. */

.card-grid {
  display: grid;
  gap: var(--space-md);
}
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 540px) {
  .card-grid--2,
  .card-grid--3,
  .card-grid--4 { grid-template-columns: 1fr; }
}
@media (min-width: 541px) and (max-width: 880px) {
  .card-grid--3,
  .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ── 16. TINTED CARD ────────────────────────────────────────
   A portrait-aspect card: background photo + colour tint overlay
   + white title + body + circular caret CTA at the bottom. Used
   for the Decision section, pillar sub-page cards, and anywhere
   we need a colour-coded route card.

   Tint colour is set by a modifier class (--teal-deep, --sail,
   --blue-deep, --mission, plus pillar-named modifiers).
   ──────────────────────────────────────────────────────── */

.tinted-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 5;
  color: var(--color-text-on-dark);
  text-decoration: none;
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base);
}
.tinted-card:hover {
  box-shadow: 0 18px 36px -18px rgba(0, 34, 68, 0.45);
  transform: translateY(-4px);
}
.tinted-card:hover .tinted-card__tint { opacity: 0.80; }
.tinted-card:hover .tinted-card__caret {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  transform: translateX(4px);
}

.tinted-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.tinted-card__tint {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.88;
  transition: opacity var(--transition-base);
}

/* Tint colour modifiers — pick the brand role for the card. */
.tinted-card--teal-deep .tinted-card__tint { background: var(--brand-teal-deep); }
.tinted-card--sail      .tinted-card__tint { background: var(--brand-sail); }
.tinted-card--blue-deep .tinted-card__tint { background: var(--brand-blue-deep); }
.tinted-card--mission   .tinted-card__tint { background: var(--gradient-mission); }

.tinted-card__title {
  font-family: var(--font-heading);
  font-size: var(--heading-3);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-sm);
  color: var(--color-text-on-dark);
}
.tinted-card__body {
  color: var(--color-text-on-dark-muted);
  line-height: 1.5;
  margin: 0 0 var(--space-lg);
}
.tinted-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.tinted-card__cta-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--body-base);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tinted-card__caret {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-base);
}
.tinted-card__caret svg {
  width: 0.85rem;
  height: 0.85rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ── 17. BENEFIT LIST ──────────────────────────────────────
   Mark-prefixed list of "this is what you get" items: an icon
   in the gutter, then a stacked title + body. Used for the
   homepage Members section and pillar feature listings.
   ──────────────────────────────────────────────────────── */

.benefit-list {
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
  display: grid;
  gap: var(--space-lg);
}
.benefit-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
}
.benefit-list__mark {
  grid-row: 1 / span 2;
  width: 1.4em;
  height: 1.4em;
  color: var(--color-primary);
  margin-top: 0.15em;
  flex: none;
}
.benefit-list__title {
  font-family: var(--font-heading);
  font-size: var(--heading-3);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}
.benefit-list__body {
  grid-column: 2;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 36ch;
}


/* ── 18. SECTION BAND ──────────────────────────────────────
   A tinted band that occupies the lower portion of a section,
   leaving the top (where the head lives) on the section's own
   surface. Opt-in via .section--with-band on the section + an
   empty <span class="section__band section__band--*"> as the
   first child of .section__inner's grandparent (the section).

   Used by the Events section so the head reads on white and
   the accordion cards "land" on a soft tinted backdrop.
   ──────────────────────────────────────────────────────── */

.section--with-band { /* no extra rules — .section already has overflow + position */ }

.section__band {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: calc(var(--space-2xl) * 2.5);
  z-index: 0;
}
.section__band--sail-soft { background: var(--color-surface-sail-soft); }
.section__band--aqua-soft { background: var(--color-surface-aqua-soft); }


/* ── 19. EVENTS ACCORDION ──────────────────────────────────
   A list of expandable event rows, each with a circular date
   bubble, title, meta line, and chevron. Uses native
   <details>/<summary>. Reused on the homepage and the news-events
   pillar page.
   ──────────────────────────────────────────────────────── */

.events-accordion {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.events-accordion__row {
  background: var(--color-surface-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(15, 30, 45, 0.04);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-base);
}
.events-accordion__row:hover { border-color: var(--brand-teal); }
.events-accordion__row[open] { box-shadow: 0 8px 20px rgba(15, 30, 45, 0.06); }

.events-accordion__summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg) var(--space-md);
  cursor: pointer;
  list-style: none;
}
.events-accordion__summary::-webkit-details-marker { display: none; }
.events-accordion__summary:hover .events-accordion__title { color: var(--color-primary-deep); }

/* Circle date bubble with thick semi-transparent outline. */
.events-accordion__date {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  border: 4px solid rgba(14, 139, 133, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--color-primary-deep);
  text-align: center;
  line-height: 1;
}
.events-accordion__date-day {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}
.events-accordion__date-month {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--body-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 2px;
}

.events-accordion__heading { display: block; }
.events-accordion__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--heading-4);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--color-text);
  transition: color var(--transition-fast);
}
.events-accordion__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--body-sm);
  font-family: var(--font-heading);
  font-weight: 600;
}
.events-accordion__meta-sep {
  display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
.events-accordion__chev {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: var(--color-text-muted);
  transition: transform var(--transition-base);
}
.events-accordion__row[open] .events-accordion__chev { transform: rotate(180deg); }

.events-accordion__detail {
  padding: 0 var(--space-md) var(--space-lg) calc(var(--space-md) + 4.25rem + var(--space-lg));
  color: var(--color-text);
  line-height: 1.6;
}
.events-accordion__detail-body { margin: 0 0 var(--space-md); max-width: 60ch; }
.events-accordion__detail-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: center;
}


/* ── 20. SECTION --bleed-footer ────────────────────────────
   For a section whose child card overlaps the following footer.
   Drops bottom padding, raises z-index above the footer, and
   allows the card's negative margin-bottom to escape the section
   (overriding .section's default overflow: hidden).
   ──────────────────────────────────────────────────────── */

.section--bleed-footer {
  padding-bottom: 0;
  z-index: 2;
  overflow: visible;
}


/* ── 21. CTA CARD ─────────────────────────────────────────
   Contained Mission-gradient card with a low-opacity white
   watermark behind the copy. Used for the homepage Join section
   and any future "become a member" / "register now" full-width
   call-to-action. Pair with .section--bleed-footer when the
   card needs to pierce the footer wave.
   ──────────────────────────────────────────────────────── */

.cta-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: var(--container-inner);
  margin: 0 auto;
  background: var(--gradient-mission);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-md);
  padding: calc(var(--space-2xl) * 1.5) var(--space-lg);
  text-align: center;
}

/* Pulls the card down into the next surface (typically the footer)
   so it visually overlaps. Pair with .section--bleed-footer on the
   parent section so the card's overflow isn't clipped. */
.cta-card--bleed-footer {
  margin-bottom: calc(-1 * var(--hero-wave-height) - var(--space-2xl));
}

.cta-card__watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: -1;
  pointer-events: none;
}
.cta-card__watermark img {
  width: auto;
  max-height: 22rem;
  opacity: 0.10;
}

.cta-card__inner {
  position: relative;
  max-width: 42rem;
  margin: 0 auto;
  display: grid;
  gap: var(--space-md);
}
.cta-card__title {
  font-family: var(--font-heading);
  font-size: var(--heading-1);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text-on-dark);
  margin: 0;
}
.cta-card__body {
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--body-lg);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 36rem;
}
.cta-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-md);
}