/* ============================================================
   SECTIONS — hero + per-section specifics
============================================================ */

/* ---------- Hero ----------
   Split layout: type on the left, a framed photo on the right. A contained
   photo needs to be good, not perfect — unlike a full-bleed one, which has to
   carry the whole screen and fights the text for attention.
*/
/* ---------- Hero ----------
   Full-bleed photo, type on the left. The photograph carries its own negative
   space on that side, so the text needs almost no scrim to stay readable —
   which is exactly why this image works where the old group shot didn't.
*/
.hero {
  position: relative;
  min-height: 78svh;
  display: grid;
  align-items: center;
  padding: calc(var(--header-h) + var(--space-3)) var(--space-3) var(--space-4);
  margin-block-start: calc(var(--header-h) * -1);
  max-width: none;
  overflow: hidden;
  background: var(--ink);
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 82% center;   /* keep the hands in frame as it narrows */
}

/* A light touch only — the photo is already black where the text sits. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      var(--ink) 0%,
      rgb(15 13 9 / 0.55) 42%,
      transparent 72%
    ),
    linear-gradient(
      to bottom,
      transparent 65%,
      var(--ink) 100%
    );
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
  animation: rise 800ms var(--ease) both;
}

.hero h1 {
  max-width: 14ch;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.hero h1::after {
  content: "";
  display: block;
  width: 4rem;
  height: 2px;
  margin-block-start: var(--space-2);
  background: linear-gradient(to right, var(--gold), transparent);
}

.hero .tagline { max-width: 42ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (min-width: 56rem) {
  .hero-content > * { max-width: 46%; }
  .hero-actions { max-width: 46%; }
}

/* Portrait phones crop hard — drop the hands low and darken the top. */
@media (max-width: 40rem) {
  .hero {
    min-height: 88svh;
    align-items: start;
  }
  .hero-img { object-position: 72% 82%; }
  .hero::after {
    background: linear-gradient(
      180deg,
      var(--ink) 0%,
      rgb(15 13 9 / 0.7) 38%,
      transparent 78%
    );
  }

  /* FIX: buttons were wrapping onto two lines and touching.
     Stack them full-width with a guaranteed gap between them. */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    max-width: 22rem;
  }
  .hero-actions .btn {
    width: 100%;
    text-align: center;
    margin: 0;                /* gap owns the spacing inside the flex column */
  }
  /* Fallback for buttons placed directly in the hero without a .hero-actions wrapper */
  .hero-content > a.btn {
    display: block;
    width: 100%;
    max-width: 22rem;
    text-align: center;
    margin-block-end: var(--space-2);
  }
}

/* ---------- 2. About ---------- */
.credibility {
  max-width: none;
  color: var(--muted);
  font-size: var(--text-xs);
  border-inline-start: 2px solid var(--gold-deep);
  padding-inline-start: var(--space-2);
  margin-block-start: var(--space-3);
}

/* ---------- 4. Impact ---------- */
#impact {
  background: var(--surface);
  border-radius: var(--radius);
  margin-block: var(--space-4);
}

.impact-photos img { border-radius: var(--radius); }

/* ---------- 4b. How We Work ---------- */
.section-sub {
  color: var(--muted);
  font-size: var(--step-1);
  font-family: var(--font-display);
  max-width: 40ch;
  margin-block-end: var(--space-3);
}

.work-cycle {
  list-style: none;
  counter-reset: step;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .work-cycle { grid-template-columns: repeat(3, 1fr); }
}

.work-cycle li {
  counter-increment: step;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.work-cycle li:hover { border-color: var(--gold-deep); transform: translateY(-3px); }

.work-cycle li::before {
  content: counter(step);
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.work-cycle h3 { margin-block-start: 0; }
.work-cycle p { margin-block-end: var(--space-1); font-size: var(--text-sm); }

.step-value {
  color: var(--gold);
  font-size: var(--text-xs) !important;
  font-weight: 600;
  margin: 0 !important;
}

/* ---------- 5. Talent Fest ---------- */
.fest-sub {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--cream);
  margin-block-start: calc(var(--space-3) * -0.5);
}

#talent-fest > img {
  width: 100%;
  max-height: 24rem;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--radius);
}

.fest-details {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  display: inline-block;
}

/* ---------- 6. Donate ---------- */
#donate h3 { color: var(--cream); }

/* ---------- 7. Partner ---------- */


.partner-points {
  list-style: none;
  padding: 0;
  max-width: 55ch;
}
.partner-points li {
  padding-inline-start: 1.6rem;
  position: relative;
  margin-block-end: var(--space-1);
}
.partner-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}

.partner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* ---------- Programme detail pages ---------- */
.programme-page { padding-block-start: var(--space-4); }

.breadcrumb { margin-block-end: var(--space-3); }
.breadcrumb a { text-decoration: none; }

#programme-photo {
  width: 100%;
  max-height: 22rem;
  object-fit: cover;
  border-radius: var(--radius);
  margin-block: var(--space-2) var(--space-3);
}

.intervention-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  max-width: var(--content-narrow);
}
.intervention-list li {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}

.stories-grid, .gallery-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
  margin-block-end: var(--space-4);
}
@media (min-width: 48rem) {
  .stories-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

.story-card {
  background: var(--surface);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius);
  padding: var(--space-2);
}
.story-card img {
  width: 100%;
  border-radius: var(--radius-sm);
  margin-block-end: var(--space-1);
}

.gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.placeholder-note { color: var(--muted); font-style: italic; }

.programme-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  border-block-start: 1px solid var(--surface-2);
  padding-block-start: var(--space-3);
}

@media (max-width: 40rem) {
  .programme-cta,
  .partner-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .programme-cta .btn,
  .partner-actions .btn { width: 100%; text-align: center; }
}

/* ---------- Prose pages (privacy, terms) ---------- */
.prose {
  padding-block-start: var(--space-4);
  max-width: 46rem;
}
.prose h2 {
  margin-block: var(--space-4) var(--space-1);
  font-size: var(--step-1);
}
.prose p, .prose li { color: var(--cream); }
.prose ul { padding-inline-start: 1.2rem; display: grid; gap: 0.5rem; }
.prose hr { border: none; border-block-start: 1px solid var(--surface-2); margin-block: var(--space-4); }
.prose-meta { color: var(--muted); font-size: var(--text-sm); }

/* Unresolved items — deliberately loud so they can't ship unnoticed. */
.todo {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border-inline-start: 3px solid var(--gold);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

/* ---------- Talent Fest: participant registration ---------- */
.fest-register {
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--surface-2);
}

.register-lead { max-width: 52ch; }

.age-categories {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
  margin-block: var(--space-3);
}
@media (min-width: 36rem) {
  .age-categories { grid-template-columns: repeat(3, 1fr); }
}

.age-categories li {
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius);
  padding: var(--space-2);
  text-align: center;
}
.age-name {
  font-family: var(--font-display);
  color: var(--gold);
  font-weight: 700;
  margin: 0;
}
.age-range { color: var(--muted); font-size: var(--text-sm); margin: 0; }

.prize-line {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--gold);
  margin-block-end: 0;
}
.prize-line strong { color: var(--gold); }
.prize-extras { color: var(--muted); font-size: var(--text-sm); }

.register-benefits {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-block: var(--space-3);
  font-size: var(--text-sm);
}
.register-benefits li {
  position: relative;
  padding-inline-start: 1rem;
}
.register-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.register-note { color: var(--muted); font-size: var(--text-sm); }

.fest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
}

@media (max-width: 40rem) {
  /* stack the Register / Categories buttons full-width with even spacing */
  .fest-actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 22rem;
  }
  .fest-actions .btn { width: 100%; text-align: center; }

  /* the date/venue panel was an inline-block that could clip — let it breathe */
  .fest-details {
    display: block;
    width: 100%;
    padding: var(--space-2);
  }
}

.fest-register { scroll-margin-block-start: calc(var(--header-h) + var(--space-2)); }

/* ---------- Section photos ----------
   These source images are tall portraits (1200x1600). At full container width
   they render ~1000px tall and dominate the section. Constrain the height and
   let object-fit crop instead.
*/
#talent-fest > img,
#partner > img {
  width: 100%;
  max-height: 24rem;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--radius);
}

.impact-photos img {
  max-height: 22rem;
  object-fit: cover;
}

/* ---------- Section rhythm ----------
   Sections carry padding on both block edges, so every boundary between two of
   them renders double the intended gap. The preceding section's bottom padding
   is enough on its own — drop the top padding where one section follows another.
*/
main > section + section { padding-block-start: 0; }

/* Exception: the hero's padding sits inside its photo, so whatever follows it
   still needs its own top spacing. */
main > .hero + section { padding-block-start: var(--space-4); }

/* Anchor targets need clearance once the top padding is gone, or the fixed
   header covers the heading you just jumped to. */
main > section { scroll-margin-block-start: calc(var(--header-h) + var(--space-2)); }

/* .fest-register stacked its own margin on top of the section rhythm. */
.fest-register { margin-block-start: var(--space-4); }

/* ---------- About ----------
   Prose left, credentials right. The registration number and governance were
   previously a grey strip at the bottom — but they're what a sponsor scans for
   to decide the organisation is real, so they get a panel of their own.
*/
.about-grid {
  display: flex;
  gap: var(--space-4);
  align-items: stretch;
}

.about-text,
.about-quote {
  flex: 1;
  min-width: 0;
}

.about-text {
  max-width: none;
}

.about-text p {
  margin-block: 0;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--cream);
}

.about-text p + p {
  margin-block-start: var(--space-3);
}

.about-quote {
  position: relative;
  margin: 0 auto;  /* ← ADDED: centers the container */
  padding: var(--space-4) var(--space-3) var(--space-3);
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--surface-2);
  border-radius: var(--radius);
  overflow: hidden;
  height: auto;
  max-width: 40%;  /* ← ADDED: reduces width to 70% of parent */
}

.about-quote::after {
  content: "";
  position: absolute;
  right: -3rem;
  bottom: -3rem;
  width: 12rem;
  aspect-ratio: 1;
  background: url("../images/logos/logo-icon-only.webp") center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}

.about-quote blockquote {
  position: relative;
  z-index: 1;
  margin: 0;
}

/* Decorative quote marks */
.about-quote blockquote::before {
  content: "\201C";
  position: absolute;
  top: -2.4rem;
  left: -0.5rem;
  font-family: var(--font-display);
  font-size: 5.5rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.4;
}

.about-quote blockquote::after {
  content: "\201D";
  position: absolute;
  bottom: -1.8rem;
  right: -0.3rem;
  font-family: var(--font-display);
  font-size: 5.5rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.4;
}

.about-quote blockquote p {
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: 1.45;
  color: var(--gold-light);
  max-width: none;
  margin: 0;
  font-style: italic;
  padding: 0 var(--space-2);
  text-align: center;  /* ← ADDED: centers the text */
}

/* Alternative decorative style - subtle left border */
.about-quote blockquote p::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  opacity: 0.4;
}

.about-quote figcaption {
  position: relative;
  z-index: 1;
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--surface-2);
  color: var(--gold);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: right;
  font-style: normal;
}

.about-quote figcaption::before {
  content: "— ";
  color: var(--gold);
  opacity: 0.6;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .about-grid {
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .about-text,
  .about-quote {
    flex: none;
    width: 100%;
  }
  
  .about-quote {
    height: auto;
    max-width: 100%;          /* FIX: 40% desktop cap was squeezing the card to a sliver on phones */
    padding: var(--space-3) var(--space-2) var(--space-2);
  }

  .about-quote blockquote p {
    font-size: var(--step-0);
    line-height: 1.55;
    padding: 0 var(--space-1);
  }

  .about-text p {
    font-size: var(--step-0); /* the 1.25rem lead size wraps awkwardly on narrow screens */
  }
  
  .about-quote blockquote::before {
    font-size: 4rem;
    top: -1.8rem;
    left: -0.3rem;
  }
  
  .about-quote blockquote::after {
    font-size: 4rem;
    bottom: -1.5rem;
    right: -0.2rem;
  }
}

/* ---------- Section break ----------
   Talent Fest shifts register: from who the organisation is, to its flagship
   event. A fading gold hairline plus extra air marks the transition.
   Reusable — add another ID here if any other section needs the same break.
*/
#talent-fest { padding-block-start: var(--space-4); }

#talent-fest::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-deep), transparent);
  margin-block-end: var(--space-4);
}

/* ---------- Partner ---------- */
.partner-lead { max-width: 62ch; }

.partner-points strong {
  color: var(--gold);
  font-weight: 700;
}

/* ---------- Partner ----------
   Image and text share the width rather than stacking. The photo is a 3:4
   portrait — wrong shape for a full-width band, right shape for a column.
*/
.partner-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .partner-grid {
    grid-template-columns: 0.8fr 1fr;
    gap: var(--space-4);
    align-items: stretch;   /* photo fills its column's full height */
  }
}

.partner-figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 100%;
}

.partner-figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 20rem;
  max-height: 34rem;
  object-fit: cover;
  object-position: center 25%;
}

/* thin gold edge — a frame, not a border */
.partner-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius: inherit;
  pointer-events: none;
}

.partner-text > *:first-child { margin-block-start: 0; }
.partner-lead { max-width: 60ch; }

.partner-points strong { color: var(--gold); font-weight: 700; }

/* ---------- Prize panel ----------
   The prize is the reason a parent reads this section — it shouldn't sit in
   the left margin like a footnote. Panel spans the full width, prize left,
   action right.
*/
.prize-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius);
  background: linear-gradient(110deg, var(--surface-2), var(--surface) 60%);
  margin-block: var(--space-3);
}

.prize-panel-text { max-width: 44ch; }
.prize-panel .prize-line { margin: 0; }
.prize-panel .prize-extras { margin: 0.35rem 0 0; }
.prize-panel .register-actions { margin: 0; }

@media (max-width: 40rem) {
  .prize-panel {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-2);
  }
  .prize-panel-text { max-width: none; }
  .prize-panel .register-actions { display: grid; gap: var(--space-1); }
  .prize-panel .btn { width: 100%; text-align: center; }

  .prize-line { font-size: var(--step-1); }
}


/* ---------- Donate band ----------
   Full-bleed and centred so it reads as a deliberate pause in the page,
   not a thin section someone forgot to finish.
*/
#donate {
  max-width: none;
  padding-inline: 0;
}

.donate-band {
  padding: var(--space-5) var(--space-2);
  text-align: center;
  background:
    radial-gradient(60% 100% at 50% 50%,
      color-mix(in srgb, var(--gold) 9%, transparent) 0%,
      transparent 70%),
    var(--surface);
  border-block: 1px solid var(--surface-2);
}

.donate-band h2 {
  max-width: 22ch;
  margin-inline: auto;
}
.donate-band h2::after { margin-inline: auto; }

.donate-band > p {
  max-width: 46ch;
  margin-inline: auto;
}

.donate-actions { margin-block: var(--space-3); }

@media (max-width: 40rem) {
  .donate-actions {
    display: grid;
    gap: var(--space-2);
    max-width: 22rem;
    margin-inline: auto;
  }
  .donate-actions .btn { width: 100%; text-align: center; }
}

/* Needs to beat `.donate-band > p` on specificity — that 46ch cap is right for
   the tagline above, but this line is one scannable fact and must stay whole. */
.donate-band > .donate-quick {
  max-width: none;
  color: var(--muted);
  font-size: var(--text-sm);
}
.donate-quick strong {
  color: var(--gold);
  letter-spacing: 0.04em;
}

/* ---------- Registration Modal ---------- */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.3s ease;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  z-index: 9998;
}

.modal-content {
  position: relative;
  z-index: 10000;
  background: var(--surface);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius);
  padding: var(--space-4);
  max-width: 720px;
  width: 95%;
  max-height: 95vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: modalSlideUp 0.3s ease;
}

.modal-large {
  max-width: 800px;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: none;
  border: none;
  color: var(--cream);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  opacity: 0.6;
  z-index: 10001;
}

.modal-close:hover {
  background: var(--surface-2);
  opacity: 1;
}

.modal-header {
  margin-block-end: var(--space-3);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--surface-2);
}

.modal-header h3 {
  margin: 0;
  color: var(--gold);
  font-size: var(--step-2);
}

.modal-sub {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0 0;
}

/* ---------- Google Form Wrapper ---------- */
.google-form-wrapper {
  width: 100%;
  min-height: 500px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.google-form-wrapper iframe {
  display: block;
  width: 100%;
  height: 650px;
  border: none;
  background: white;
}

/* Loading state for iframe */
.google-form-wrapper::before {
  content: "Loading registration form...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-muted);
  font-size: var(--text-base);
  z-index: 0;
}

.google-form-wrapper iframe {
  position: relative;
  z-index: 1;
}

/* ---------- Secure Badge ---------- */
.secure-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
}

.modal-footer {
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--surface-2);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.modal-footer a {
  color: var(--gold);
  text-decoration: none;
}

.modal-footer a:hover {
  text-decoration: underline;
}

/* ---------- Alternative Registration Options ---------- */
.register-alternatives {
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--surface-2);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.register-alternatives a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
}

.register-alternatives a:hover {
  text-decoration: underline;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .modal-content {
    padding: var(--space-3);
    width: 98%;
    max-height: 98vh;
  }
  
  .modal-header h3 {
    font-size: var(--step-1);
  }
  
  .modal-close {
    top: var(--space-1);
    right: var(--space-1);
    font-size: 1.5rem;
  }
  
  .google-form-wrapper iframe {
    height: 550px;
  }
}

@media (max-width: 480px) {
  .modal-content {
    padding: var(--space-2);
    border-radius: var(--radius-sm);
  }
  
  .google-form-wrapper {
    min-height: 400px;
  }
  
  .google-form-wrapper iframe {
    height: 500px;
  }
  
  .register-alternatives {
    font-size: var(--text-xs);
  }
}