/* jalsa-events-content.css
   ---------------------------------------------------------------------------
   Phase 4 — additive styling for the client-content sections.

   Scope (structure only; all copy/data is placeholder):
     REQ-09  .vision / .vision-copy    — vision & storytelling (homepage)
     REQ-16  .who-we-are / .founder-*  — "Who We Are" founder cards (about page)
     REQ-14  .partner-data / .stat-*   — "Where we gather" city stats (sponsorship)
     REQ-14  .sponsor-block / .sponsor-* — sponsors & partners slots (sponsorship)

   This file is purely additive: it introduces new class names only and does not
   override any existing component. It is linked only by the three pages that use
   the new sections. Every placeholder block carries data-placeholder="true" and a
   source comment; see docs/phase-4-content-sections.md for the placeholder inventory.
   --------------------------------------------------------------------------- */

/* Shared local tokens. Resolved against whichever token set the host page defines:
   about page (--about-*), sponsorship page (narrative-rebuild), homepage (inline style). */
.who-we-are,
.partner-data,
.sponsor-block {
  --content-gold: var(--about-gold, var(--gold, #d8a72e));
  --content-ink: var(--about-ink, var(--ink, #092032));
  --content-muted: var(--muted, #5e6570);
  --content-line: var(--border, var(--line, rgba(9, 32, 50, .18)));
}

/* ---------------------------------------------------------------------------
   REQ-09 — Vision / storytelling (homepage)
   Reuses the existing .story / .story-grid / .story-copy classes so the section
   keeps its original surface, borders and responsive collapse.
   --------------------------------------------------------------------------- */
.vision .vision-intro h2 { max-width: 14ch; margin-bottom: 0; }
.vision .vision-copy { max-width: 58ch; }
.vision .vision-copy p { max-width: 58ch; margin: 0; }
.vision .vision-copy p.story-copy { color: var(--fg, #092032); }
.vision .vision-copy p:not(.story-copy) {
  margin-top: 1.15rem;
  color: var(--muted, #5e6570);
  font-size: .95rem;
}

/* ---------------------------------------------------------------------------
   REQ-16 — "Who We Are" founder section (about page)
   Matches the about page's editorial card language (.rhythm-card uses a 2px gold
   top border on white) so the new section reads as part of the same story.
   --------------------------------------------------------------------------- */
.who-we-are__intro {
  max-width: 62ch;
  margin-top: 1.25rem;
  color: var(--content-muted);
}
.founder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.founder-card {
  display: flex;
  flex-direction: column;
  padding: 1.35rem;
  border-top: 2px solid var(--content-gold);
  background: #fff;
}
.founder-card__media {
  min-height: 12rem;
  margin-bottom: 1.1rem;
  border: 1px dashed rgba(9, 32, 50, .28);
  background-image: repeating-linear-gradient(135deg, rgba(9, 32, 50, .05) 0 12px, rgba(9, 32, 50, .09) 12px 24px);
}
.founder-card h3 { margin-bottom: .35rem; }
.founder-card__role {
  margin-bottom: .8rem;
  color: #75520b;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.founder-card__bio { color: #5c666e; }
.founder-card__contact {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(9, 32, 50, .14);
  font-size: .88rem;
}
.founder-card__contact a { font-weight: 700; }
.founder-card__flag {
  display: block;
  margin-top: .5rem;
  color: #75520b;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Visible focus states for the new interactive elements (the host pages also
   define a global :focus-visible outline; this keeps the new components explicit). */
.founder-card__contact a:focus-visible,
.sponsor-card__link a:focus-visible {
  outline: 3px solid var(--content-gold, #d8a72e);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   REQ-14 — Partnership data (sponsorship page)
   Repeated card patterns: city stat cards + sponsor/partner slots.
   --------------------------------------------------------------------------- */
.partner-data {
  background: var(--paper, var(--surface, #fffdf8));
  border-block: 1px solid var(--line, #d7cebd);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.stat-card {
  padding: 1.35rem;
  border: 1px dashed rgba(9, 32, 50, .28);
  background: #fff;
}
.stat-card__city {
  margin-bottom: .5rem;
  color: #8f6008;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.stat-card__value {
  margin: 0 0 .35rem;
  color: var(--content-ink);
  font: 600 clamp(2rem, 4vw, 3rem)/1 Georgia, 'Times New Roman', serif;
}
.stat-card__label { margin: 0; color: #5e6570; font-size: .86rem; }

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.sponsor-card {
  display: flex;
  flex-direction: column;
  padding: 1.1rem;
  border: 1px dashed rgba(9, 32, 50, .28);
  background: #fff;
}
.sponsor-card__logo {
  display: grid;
  place-items: center;
  min-height: 5.5rem;
  margin-bottom: .9rem;
  border: 1px dashed rgba(9, 32, 50, .24);
  background-image: repeating-linear-gradient(135deg, rgba(9, 32, 50, .04) 0 12px, rgba(9, 32, 50, .08) 12px 24px);
  color: #5e6570;
  font: 600 .62rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}
.sponsor-card__name { margin: 0 0 .45rem; font-weight: 700; }
.sponsor-card__link { margin: 0; color: #5e6570; font-size: .84rem; }
.sponsor-block__note {
  max-width: 62ch;
  margin-top: 1.5rem;
  padding: .85rem 1rem;
  border-left: 4px solid var(--content-gold);
  background: var(--ivory, #f8f4ec);
  color: #5e6570;
  font-size: .88rem;
}

/* ---------------------------------------------------------------------------
   Responsive — additive; the host pages keep their own breakpoints.
   --------------------------------------------------------------------------- */
@media (max-width: 60rem) {
  .sponsor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .founder-grid,
  .stat-grid,
  .sponsor-grid { grid-template-columns: 1fr; }
  .vision .vision-copy { max-width: none; }
}