/* S4 — sections of the home page (src/index.njk).
   Future pages (events/, standings/) get their own stylesheet; shared pieces live
   in components.css. */

/* Wide screens: full-bleed two-column sections keep their text aligned with the container. */
:root { --edge: max(var(--gutter), calc((100vw - var(--max-width)) / 2 + var(--gutter))); }

/* Shared heading block */
.section-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.section-head__main { display: flex; flex-direction: column; gap: 18px; }
.section-head__intro { max-width: 420px; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
@media (min-width: 700px) {
  .section-head { margin-bottom: 48px; }
  .section-head__intro { font-size: 17px; }
}
@media (min-width: 1100px) {
  .section-head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; }
}

/* ================= Hero ================= */
.hero { background: var(--hero-glow-sm), var(--black); }
.hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding-block: 56px 48px;
}
.hero__title { font-size: var(--fs-hero); }
/* The eyebrow is part of the <h1> (brand + city in the page's one heading). As a block with
   the hero's gap under it, it sits where the separate eyebrow line used to; .eyebrow sets its type.
   Below about 367px wide the line would wrap, so there its letter-spacing eases down from .16em
   just enough to stay on one line: 255px of letters + 40 gaps have to fit between the two 20px
   gutters. Those numbers belong to this exact text; re-measure if the eyebrow copy changes. */
.hero__eyebrow { display: block; margin-bottom: 20px; letter-spacing: min(0.16em, (100vw - 296px) / 40); }
.lead { max-width: 620px; font-size: var(--fs-lead); line-height: 1.5; color: var(--text-muted); }
.hero__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

/* Ghost slashes: the logo's slash shape, huge and faint, behind the hero text.
   isolation keeps their z-index -1 above the hero background; overflow: clip stops them
   widening the page. Positions from texture-b-slash-cut (1440 × 700 hero). */
.hero { position: relative; isolation: isolate; overflow: clip; }
.hero__slash {
  position: absolute;
  z-index: -1;
  max-width: none;
  height: auto;
  aspect-ratio: 1000 / 236;   /* keeps the ~13° angle at any width */
  pointer-events: none;
}
.hero__slash--red { fill: var(--red); opacity: var(--ghost-slash-red-opacity); }
.hero__slash--light { fill: var(--text); opacity: var(--ghost-slash-light-opacity); }
/* phones: the red one only, low in the hero, behind the buttons rather than the paragraph */
.hero__slash--red { width: 140%; left: -12%; bottom: 3%; }
.hero__slash--light { display: none; }
@media (min-width: 700px) {
  .hero__slash--red { width: 90%; left: 26%; top: 10.5%; bottom: auto; }
  .hero__slash--light { display: block; width: 69.5%; left: 41.7%; top: 36.3%; }
}

@media (min-width: 700px) {
  .hero { background: var(--hero-glow), var(--black); }
  .hero__inner { gap: 28px; min-height: clamp(560px, 48.6vw, 700px); padding-block: 64px; }
  .hero__eyebrow { margin-bottom: 28px; }
  .hero__actions { flex-direction: row; gap: 12px; margin-top: 8px; }
}

/* ================= Next event ================= */
.next-event {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
  /* the one angled cut on the page: the top edge rises to the right, over the hero */
  position: relative;
  margin-top: calc(-1 * var(--section-cut));
  clip-path: polygon(0 var(--section-cut), 100% 0, 100% 100%, 0 100%);
}
/* red tapered sliver riding the cut (sits just under the clip line, so nothing is lost) */
.next-event__cut {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: var(--section-cut-sliver);
  fill: var(--red);
  pointer-events: none;
}
.photo--event { order: -1; aspect-ratio: 390 / 240; --card-cut: var(--section-cut); } /* first in the section: under the angled cut */
.next-event__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px var(--gutter) 48px;
}
.next-event__title { font-size: var(--fs-h2-sm); }
.next-event__register { display: flex; flex-direction: column; }

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}
.facts__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--line-strong);
}
.facts__item:nth-child(even) { padding: 14px 0 14px 12px; border-left: 1px solid var(--line-strong); }
.facts dt {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.facts dd { font-size: 15px; font-weight: 700; line-height: 1.35; }

@media (min-width: 700px) {
  .photo--event { aspect-ratio: 16 / 9; }
  .next-event__copy { gap: 26px; padding-block: 64px 72px; }
  .next-event__register { flex-direction: row; }
  /* Date, Venue, Rules, Divisions: the venue's name is the longest ("K.O.P. Sports & Entertainment
     Center"), and no column can get narrower than its longest word, so none spills into the next. */
  .facts { grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 1.7fr) minmax(min-content, 0.6fr) minmax(min-content, 1.2fr); border-bottom: 1px solid var(--line-strong); }
  .facts__item,
  .facts__item:nth-child(even) { gap: 6px; padding: 16px; border-bottom: 0; border-left: 1px solid var(--line-strong); }
  .facts__item:first-child { padding-left: 0; border-left: 0; }
  .facts dt { font-size: 12px; }
  .facts dd { font-size: 17px; }
}
@media (min-width: 900px) {
  .photo--event { aspect-ratio: 2 / 1; }
}
@media (min-width: 1100px) {
  .next-event { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo--event { order: 0; aspect-ratio: auto; min-height: 100%; --card-cut: 0px; }
  .photo--event .photo__caption { left: 32px; right: 32px; bottom: 32px; font-size: 12px; }
  .next-event__copy { padding: 88px var(--gutter) 88px var(--edge); }
}

/* ================= Upcoming events ================= */
.event-list { border-top: 1px solid var(--line-strong); }
.event-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-strong);
}
.event-row__text { display: flex; flex-direction: column; gap: 10px; }
.event-row__title { font-size: var(--fs-row); letter-spacing: -0.03em; }
.event-row__title a { text-decoration: none; } /* the event's name links to its page */
.event-row__title a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.events__all { margin-top: 20px; }
.next-event__more { margin-top: -8px; }
.event-row__text p { font-size: 15px; line-height: 1.5; color: var(--text-muted); }

@media (min-width: 700px) {
  .event-row__text p { font-size: 17px; }
}
@media (min-width: 900px) {
  .event-row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    padding: 36px 0;
  }
}
@media (min-width: 1100px) {
  .event-row { grid-template-columns: 200px minmax(0, 1fr) 220px; gap: 40px; }
  .event-row__action { justify-self: end; }
}

/* ================= Standings + About (3-card rows) ================= */
.standings__title { font-size: var(--fs-h2-standings); }

.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 700px) {
  /* 2 + 1: the third card spans the row instead of sitting alone. */
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards > :last-child:nth-child(odd) { grid-column: auto; }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 20px;
  padding: 20px;
  border: 1px dashed var(--line-button);
}
.empty-state__text { display: flex; flex-direction: column; gap: 6px; }
.empty-state__title { font-size: 15px; font-weight: 700; line-height: 1.4; }
.empty-state__sub { font-size: 14px; line-height: 1.5; color: var(--text-subtle); }
@media (min-width: 700px) {
  .empty-state { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; margin-top: 48px; padding: 28px 32px; }
  .empty-state__title { font-size: 18px; }
  .empty-state__sub { font-size: 15px; }
  .empty-state .btn { flex: none; }
}

/* ================= Leadership ================= */
.leadership { padding-bottom: var(--section-y); }
.leadership__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 12px;
}
.leadership__head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 18px; }
.leadership__title { font-size: var(--fs-h2-lead); }
.founder { display: flex; flex-direction: column; min-width: 0; background: var(--panel); }
.photo--founder { aspect-ratio: 169 / 170; }
.photo--arnulfo { --photo-focus: 50% 0%; } /* top edge: his hair sits near the top of the photo, so anything lower clips it on desktop/tablet */
.photo--andrew { --photo-focus: 50% 15%; } /* a little below the top: room above his hair in andrew-v3, and the S4 logo starts to show in the wide slots */
.founder__body { display: flex; flex-direction: column; gap: 4px; padding: 14px; }
.founder__name { font-size: var(--fs-name); letter-spacing: -0.02em; }
.founder__role { font-size: 12px; line-height: 1.4; color: var(--text-subtle); }

@media (min-width: 700px) {
  .leadership__grid { gap: 32px 20px; }
  .photo--founder { aspect-ratio: 5 / 4; }
  .founder__body { gap: 6px; padding: 24px 28px 28px; }
  .founder__name { letter-spacing: -0.03em; }
  .founder__role { font-size: 15px; }
}
@media (min-width: 1100px) {
  .leadership__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .leadership__head { grid-column: auto; padding-right: 24px; }
  /* One-third column here: sized so the longest word ("COMMUNITY.", 6.35em) fits on a line instead of splitting. */
  .leadership__title { font-size: clamp(44px, 4.7vw - 7px, 61px); }
  .photo--founder { aspect-ratio: 424 / 300; }
}

/* ================= Sponsors + Contact (headline + red panel) ================= */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.split__main { display: flex; flex-direction: column; gap: 18px; }
.split__text { max-width: 600px; }
.sponsors__title { font-size: var(--fs-h2-sponsors); }

@media (min-width: 700px) {
  .split { gap: 40px; }
  .split__main { gap: 22px; }
  .split .red-panel { max-width: 560px; }
}
@media (min-width: 1100px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .split--top { align-items: start; }
  .split__main { grid-column: span 7; }
  .split .red-panel { grid-column: 9 / span 4; max-width: none; }
}

/* Contact card */
.contact-card { gap: 16px; padding: 24px; }
.contact-card__org { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.contact-card__name { font-size: 18px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; text-transform: uppercase; }
.contact-card__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.contact-card__label { font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; }
.contact-card__row a,
.contact-card__social { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; text-underline-offset: 3px; }
.contact-card__social { display: flex; flex-wrap: wrap; gap: 4px 20px; }
@media (min-width: 700px) {
  .contact-card { gap: 22px; padding: 36px; }
  .contact-card__org { font-size: 15px; }
  .contact-card__name { font-size: 22px; }
  .contact-card__row { padding-top: 18px; }
  .contact-card__label { font-size: 13px; }
  .contact-card__row a,
  .contact-card__social { font-size: 16px; }
}

/* ================= Footer ================= */
.site-footer { border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--text-subtle); }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 28px;
  padding-block: 28px;
}
.site-footer__links { display: flex; gap: 28px; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; opacity: 1; }
.site-footer__links .social-link { justify-content: center; min-width: 44px; margin-inline: -12px; } /* icon only: a 44px target around the 20px icon */
.site-footer__links .social-link:hover { color: var(--text); }
@media (min-width: 700px) {
  .site-footer { font-size: 14px; }
  .site-footer__inner { padding-block: 32px; }
}