/* ==========================================================================
   Talent de Demain FC — inner pages (Squads / Academy / Events / Community)
   Extends css/styles.css: same tokens, nav, buttons, load-in choreography.
   Rating cards take inspiration from football-game team ratings (stars,
   ATT/DEF/OVR) but are drawn entirely in the club's own design language.
   ========================================================================== */

/* ---------- Page scaffolding ---------------------------------------------- */
.page {
  padding-top: calc(var(--nav-h) + 24px);
}

.page-hero {
  padding: clamp(28px, 6vh, 72px) var(--gutter) clamp(20px, 4vh, 44px);
  max-width: 1400px;
  margin: 0 auto;
}

.page-hero__kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--red);
}

.page-hero__title {
  display: block;
  overflow: hidden;               /* mask for the per-letter rise */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(52px, 9vw, 128px);
  line-height: .92;
  text-transform: uppercase;
  margin-top: 10px;
  /* words wrap as blocks (.word) — a nowrap here would overflow instead */
  white-space: normal;
}

/* each word is one unbreakable box: without it the browser wraps between
   two letters, which split "EVENEMENTS" as "EVENEMEN / TS" on a phone */
.page-hero__title .word {
  display: inline-block;
  white-space: nowrap;
}

/* per-letter entrance — same motion grammar as the landing headline */
.page-hero__title .char {
  display: inline-block;
  transform: translateY(118%);
  transition: transform .9s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 30ms);
  will-change: transform;
}
.page-hero__title.is-in .char { transform: none; }

.page-hero__lead {
  margin-top: 18px;
  max-width: 560px;
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- Sections ------------------------------------------------------- */
.section {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(36px, 7vh, 84px) var(--gutter);
}
.section + .section { padding-top: 0; }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(20px, 3.5vh, 40px);
}

.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 42px);
  text-transform: uppercase;
  letter-spacing: .01em;
}

.section__note {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ---------- Reveal on scroll (driven by js/pages.js) ----------------------- */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease-out-expo) var(--rd, 0s),
              transform .9s var(--ease-out-expo) var(--rd, 0s);
}
.js-anim .reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
  .page-hero__title .char { transform: none; transition: none; }
}

/* ---------- Squad block: gallery + rating card ----------------------------- */
.squad {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: stretch;
}
.squad + .squad { margin-top: clamp(36px, 6vh, 72px); }
.squad--flip { direction: rtl; }        /* alternate layout */
.squad--flip > * { direction: ltr; }

/* Scroll-snap photo strip */
.gallery {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(16,16,16,.35) transparent;
}
.gallery::-webkit-scrollbar { height: 6px; }
.gallery::-webkit-scrollbar-thumb { background: rgba(16,16,16,.28); border-radius: 3px; }

.gallery figure {
  position: relative;
  flex: 0 0 min(88%, 640px);
  scroll-snap-align: start;
  border-radius: 18px;
  overflow: hidden;
  /* 16:9 keeps the full width of the squad line-up photos — at 16:10 the
     players at each end of the row got cropped off. */
  aspect-ratio: 16 / 9;
  background: #ddd;
}
.gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out-expo);
}
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption {
  position: absolute;
  left: 14px; bottom: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(13,13,13,.72);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Rating card — dark panel, chamfered corner, club colors */
.rating-card {
  position: relative;
  background: var(--card);
  color: var(--white);
  border-radius: 18px;
  padding: clamp(22px, 2.4vw, 34px);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rating-card::before {           /* red chamfer accent */
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 34px; height: 34px;
  background: var(--red);
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  opacity: 0; /* covered by the main clip — kept for potential accent use */
}

.rating-card__kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--red);
}

.rating-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 34px);
  text-transform: uppercase;
  line-height: 1;
  margin-top: 2px;
}

.rating-card__text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255,255,255,.72);
}

/* Overall badge */
.rating-card__ovr {
  position: absolute;
  top: clamp(18px, 2vw, 26px);
  right: clamp(18px, 2vw, 26px);
  text-align: right;
}
.rating-card__ovr b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 4vw, 56px);
  line-height: .9;
}
.rating-card__ovr span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--red);
}

/* Stat rows: label + stars + value */
.stat { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px; }
.stat + .stat { margin-top: 12px; }

.stat__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .18em;
}

.stat__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  min-width: 34px;
  text-align: right;
}

/* Stars: gray outline row + red filled row clipped to --fill.
   The element must shrink-wrap the glyphs — stretched to the grid column,
   --fill would be a share of the column and every star would read as full. */
.stars {
  position: relative;
  display: inline-block;
  justify-self: start;
  font-size: 18px;
  letter-spacing: 3px;
  line-height: 1;
  color: rgba(255,255,255,.22);
  user-select: none;
}
.stars::before { content: "★★★★★"; }
.stars i {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: var(--fill, 0%);
  color: var(--red);
  font-style: normal;
  white-space: nowrap;
}
.stars i::before { content: "★★★★★"; letter-spacing: 3px; }

.rating-card__divider { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 4px 0; }

/* ---------- Kits -----------------------------------------------------------
   The renders are cut out of their white studio backdrop (alpha WebP), so the
   shirts float straight on the page — same idea as the jersey on the landing
   hero — instead of sitting inside a visible white box.
   -------------------------------------------------------------------------- */
.kits {
  display: grid;
  /* 250px min + a tighter gap so all four shirts fit on one desktop row;
     at 300px/64px the fourth wrapped alone onto a second line. */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  /* align on the TOP: the captions differ by a line, so bottom-aligning
     pushed the shorter columns down and staggered the headings. */
  align-items: start;
}

.kit { text-align: center; }

/* Fixed box + contain: the two renders have different intrinsic ratios
   (824×1000 vs 661×1000), so sizing by width made the away shirt render
   larger and pushed the two caption blocks out of line. */
.kit__shirt {
  display: block;
  width: 100%;
  max-width: 420px;
  height: clamp(280px, 36vh, 440px);
  object-fit: contain;
  margin: 0 auto;
  transition: transform .5s var(--ease-out-expo);
  will-change: transform;
}
.kit:hover .kit__shirt { transform: translateY(-10px) scale(1.02); }

.kit__kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--red);
}

.kit__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 32px);
  text-transform: uppercase;
  line-height: 1;
  margin-top: 6px;
}

.kit__text {
  margin: 10px auto 0;
  max-width: 340px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-soft);
}

.kits__sponsor {
  margin-top: clamp(22px, 3vh, 38px);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.kits__sponsor strong { color: var(--ink); }

/* ---------- Staff / president panels --------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: stretch;
}
.duo--flip { direction: rtl; }
.duo--flip > * { direction: ltr; }

.duo__media {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #ddd;
}
.duo__media img { width: 100%; height: 100%; object-fit: cover; }

.panel {
  background: var(--card);
  color: var(--white);
  border-radius: 18px;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
  padding: clamp(22px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.panel .rating-card__text { color: rgba(255,255,255,.72); }

.panel__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.panel__badges span {
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- Media / match cards -------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.match-card {
  background: var(--card);
  color: var(--white);
  border-radius: 18px;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  display: flex;
  flex-direction: column;
}

.match-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #222;
}
.match-card__media img,
.match-card__media iframe {
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}

.match-card__tag {
  position: absolute;
  top: 12px; left: 12px;
  padding: 6px 11px;
  background: var(--red);
  color: var(--white);
  border-radius: 7px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.match-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,13,13,.25);
  border: 0;
  cursor: pointer;
  transition: background .25s ease;
}
.match-card__play:hover { background: rgba(13,13,13,.45); }
.match-card__play svg { width: 58px; height: 58px; filter: drop-shadow(0 4px 14px rgba(0,0,0,.4)); }
.match-card__play[disabled] { cursor: default; }
.match-card__play[disabled] svg { opacity: .45; }

.match-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.match-card__title { font-weight: 800; font-size: 16px; letter-spacing: .03em; text-transform: uppercase; }
.match-card__meta { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.62); letter-spacing: .04em; }

/* ---------- Cinematic event film (portrait footage, dark stage) ------------ */
.film {
  position: relative;
  margin: clamp(36px, 7vh, 84px) 0;
  padding: clamp(44px, 8vh, 96px) var(--gutter);
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}
.film::before {                 /* blurred still of the footage as the stage */
  content: "";
  position: absolute;
  inset: 0;
  /* each .film section supplies its own still via --film-bg */
  background: var(--film-bg, none) center / cover no-repeat;
  opacity: .5;
}
.film::after {                  /* legibility scrim */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(13,13,13,.92) 30%, rgba(13,13,13,.45) 70%, rgba(13,13,13,.75));
}

.film__inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

.film__copy .section__title { color: var(--white); }
.film__copy p { margin-top: 14px; max-width: 420px; font-size: 15px; font-weight: 500; line-height: 1.6; color: rgba(255,255,255,.72); }

.film__frame {
  position: relative;
  height: min(74vh, 640px);
  aspect-ratio: 9 / 16;
  background: var(--card);
  border-radius: 28px;
  padding: 10px;                 /* phone-style bezel, same motif as the
                                    landing media card */
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  justify-self: center;
}
.film__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  cursor: pointer;
}

.film__sound {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(240,239,237,.92);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease;
}
.film__sound:hover { transform: scale(1.08); }
.film__sound svg { width: 20px; height: 20px; }
.film__sound .icon-sound-on { display: none; }
.film__sound.is-on .icon-sound-on { display: block; }
.film__sound.is-on .icon-sound-off { display: none; }

@media (max-width: 900px) {
  .film__inner { grid-template-columns: 1fr; }
  .film__frame { height: 68vh; }
}

/* ---------- Next event: cinematic announcement banner ---------------------- */
.next-event {
  position: relative;
  margin-bottom: clamp(20px, 3vh, 34px);
  /* Keep the 16:9 trailer uncropped on desktop; the min-height only kicks
     in on narrow screens, where the centered subject survives the crop. */
  aspect-ratio: 16 / 9;
  min-height: clamp(340px, 46vh, 520px);
  max-height: 76vh;
  border-radius: 18px;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%);
  background: var(--card);
  color: var(--white);
  display: flex;
  align-items: flex-end;
}

.next-event video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

/* Scrim: keeps the copy legible over the footage without flattening it */
.next-event::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(13,13,13,.92) 0%, rgba(13,13,13,.45) 42%, rgba(13,13,13,.15) 70%),
    linear-gradient(to right, rgba(13,13,13,.6), transparent 60%);
}

/* Info bar pinned to the bottom: the trailer carries its own title, so the
   overlay only adds the practical details — no competing typography. */
.next-event__body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(20px, 2.6vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;   /* clicks fall through to the video…            */
}
.next-event__body .btn { pointer-events: auto; margin-top: 0; }  /* …except the CTA */

.next-event__meta {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.next-event__meta span {
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.next-event__text {
  margin-top: 12px;
  max-width: 460px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255,255,255,.78);
}

/* Sound sits top-right here — the bottom-right belongs to the CTA */
.next-event .film__sound {
  z-index: 2;
  pointer-events: auto;
  top: clamp(16px, 1.8vw, 26px);
  right: clamp(16px, 1.8vw, 26px);
  bottom: auto;
}

@media (max-width: 900px) {
  /* aspect-ratio + min-height is a trap: the ratio turns the min-height into
     a MINIMUM WIDTH (62vh × 16/9 = 930px on a 390px phone), which blew the
     page 540px wide. Drop the ratio and let the height rule instead. */
  .next-event {
    aspect-ratio: auto;
    height: 62vh;
    min-height: 0;
    max-height: none;
  }
  .next-event__body { padding: 18px; }
  .next-event__body .btn { width: 100%; text-align: center; }
}

/* ---------- Event cards ----------------------------------------------------- */
.event-card {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: 20px;
  align-items: center;
  /* the CTA carries the shared .btn top margin — cancel it so the three
     columns share one centre line */
  background: var(--white);
  border: 1px solid rgba(16,16,16,.1);
  border-radius: 16px;
  padding: 18px 22px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.event-card .btn { margin-top: 0; }
.event-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(16,16,16,.1); }
.event-card + .event-card { margin-top: 14px; }

.event-card__date {
  text-align: center;
  background: var(--ink);
  color: var(--white);
  border-radius: 12px;
  padding: 10px 8px;
}
.event-card__date b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
}
.event-card__date span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
}

.event-card__title { font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .03em; }
.event-card__meta  { margin-top: 4px; font-size: 13px; color: var(--ink-soft); font-weight: 500; }

/* past-events media grid */
/* auto-fit, not auto-fill: with three items auto-fill reserved an empty
   fourth column on wide screens. */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.media-grid figure {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #ddd;
}
.media-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out-expo); }
.media-grid figure:hover img { transform: scale(1.05); }
.media-grid figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(transparent, rgba(13,13,13,.78));
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- Poster wall ----------------------------------------------------
   Event posters are designed artwork, not photographs: cropping them to a
   fixed ratio would cut their typography. A masonry column layout lets each
   poster keep its own aspect ratio (square / portrait / landscape).
   -------------------------------------------------------------------------- */
/* Grid, not columns: posters of very different heights left a ragged
   300px edge and a hole under the shortest one. Rows now align. */
.poster-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  align-items: start;
}

.poster-wall figure {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  /* uniform card height; the poster is letterboxed inside, never cropped */
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.poster-wall img {
  width: 100%;
  height: 100%;
  object-fit: contain;           /* whole artwork visible, typography intact */
  display: block;
  transition: transform .6s var(--ease-out-expo);
}
.poster-wall figure:hover img { transform: scale(1.03); }

.poster-wall figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 16px 14px;
  background: linear-gradient(transparent, rgba(13, 13, 13, .85));
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- Community ------------------------------------------------------- */
.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.social-card {
  background: var(--card);
  color: var(--white);
  border-radius: 16px;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .3s ease;
}
.social-card:hover { transform: translateY(-4px); }
.social-card svg { width: 26px; height: 26px; }
.social-card b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.social-card span { font-size: 13px; color: rgba(255,255,255,.62); font-weight: 500; }

.link-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border: 1px solid rgba(16,16,16,.12);
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  transition: border-color .25s ease, transform .25s ease;
}
.link-list a:hover { border-color: var(--ink); transform: translateX(4px); }
.link-list a::after { content: "→"; color: var(--red); padding-left: 16px; }

.contact-panel {
  background: var(--card);
  color: var(--white);
  border-radius: 18px;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
  padding: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}
.contact-panel h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.contact-panel p, .contact-panel a { font-size: 15px; font-weight: 600; color: var(--white); line-height: 1.5; }
/* inline links were 19px tall — too small to tap reliably */
.contact-panel a { display: inline-block; padding: 6px 0; }
.contact-panel a:hover { color: var(--red); }

/* ---------- Join / newsletter form ------------------------------------------
   One form serves three jobs: trial sign-ups, newsletter opt-ins and a
   segmented supporter list — the "I am a…" field is what turns raw
   submissions into a usable database.
   -------------------------------------------------------------------------- */
.join {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}

.join__form {
  background: var(--card);
  color: var(--white);
  border-radius: 18px;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
  padding: clamp(24px, 3vw, 40px);
}

.field { margin-bottom: 16px; }
.field--split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  margin-bottom: 7px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  transition: border-color .2s ease, background .2s ease;
}
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
  background: rgba(255, 255, 255, .1);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.35); }
/* native dropdown list is drawn by the OS — keep its text readable */
.field select option { color: #101010; background: #fff; }

.field--check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 20px 0;
}
.field--check input { width: 24px; height: 24px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--red); }
.field--check label {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
}

.join__submit {
  display: inline-block;
  padding: 16px 30px;
  background: var(--red);
  color: var(--white);
  border: 0;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.join__submit:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(193, 51, 39, .35); }
.join__submit[disabled] { opacity: .55; cursor: wait; transform: none; box-shadow: none; }

.join__status {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  display: none;
}
.join__status.is-ok   { display: block; color: #7ee29a; }
.join__status.is-error{ display: block; color: #ff9a90; }

/* Side panel: why join + the WhatsApp shortcut */
.join__aside { display: flex; flex-direction: column; gap: 14px; }

.join__list { list-style: none; display: grid; gap: 10px; }
.join__list li {
  display: flex;
  gap: 11px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
}
.join__list li::before {
  content: "→";
  color: var(--red);
  font-weight: 700;
  flex: 0 0 auto;
}

.whatsapp {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 20px;
  border-radius: 14px;
  background: #1f9d55;
  color: var(--white);
  transition: transform .25s ease;
}
.whatsapp:hover { transform: translateY(-3px); }
.whatsapp svg { width: 26px; height: 26px; flex: 0 0 auto; }
.whatsapp b { display: block; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.whatsapp span { font-size: 12.5px; opacity: .85; }

@media (max-width: 900px) {
  .join { grid-template-columns: 1fr; }
}

/* ---------- Compact footer -------------------------------------------------- */
.page-footer {
  background: var(--ink);
  color: var(--white);
  margin-top: clamp(36px, 7vh, 84px);
  padding: 42px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.page-footer__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.page-footer__note { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .5; }

/* Official sponsor line — its own row across the foot of the page */
.page-footer__sponsor {
  flex: 1 0 100%;
  order: 3;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.page-footer__sponsor strong { color: var(--white); letter-spacing: .16em; }
/* wrap: five links on one forced line were 411px wide and pushed a 390px
   phone into horizontal scroll */
.page-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
}
.page-footer nav a {
  padding: 11px 4px;          /* ≥ 40px tap target on touch */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
  transition: opacity .2s ease;
}
.page-footer nav a:hover { opacity: 1; }

/* ---------- Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
  .squad, .duo { grid-template-columns: 1fr; }
  .squad--flip, .duo--flip { direction: ltr; }
  .section__head { flex-direction: column; gap: 6px; }
  .section__note { white-space: normal; }
  .page-hero__title { white-space: normal; }
  .event-card { grid-template-columns: 64px 1fr; }
  .event-card .btn { grid-column: 2; justify-self: start; }
}