/* =============================================================
   Responsive styles
   Breakpoints: 1440+ (base) · 1280 laptop · 992 nav collapse ·
                768 tablet · 390 mobile
   Typography scales fluidly; layouts reflow without breaking.
   ============================================================= */

/* Fluid section title across the whole range */
.section-title { font-size: clamp(28px, 3.4vw, 50px); }
.cta-title     { font-size: clamp(28px, 3.4vw, 50px); }

/* ---------- Laptop ≤ 1280 ---------- */
@media (max-width: 1280px) {
  :root { --content-max: 1080px; }
  .section { padding: 64px; }
  .nav-wrap { padding-inline: 24px; gap: 16px; }
  .nav-list { gap: 2px; }
  .nav-link-item { font-size: 15px; padding: 8px; }
  .hero { padding-top: 150px; }
  .about-grid { gap: 64px; }
  .count-num { font-size: 44px; }
}

/* ---------- Below 1120: nav gets tight → allow wrap of hero actions ---------- */
@media (max-width: 1120px) {
  .eac-points { gap: 24px; }
  .mission-grid { gap: 32px; }
  .assam-top { gap: 32px; }
  .goodie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Collapse nav to hamburger ≤ 992 ---------- */
@media (max-width: 992px) {
  .main-nav, .nav-wrap > .btn-register-pill, .nav-wrap > .brand-iaf { display: none; }
  .hamburger { display: flex; }
  .nav-wrap { justify-content: space-between; }
  .brand { margin-right: auto; }

  .section { padding: 56px 40px; }

  /* Hero */
  .hero { min-height: auto; padding: 130px 40px 48px; }
  .hero-content { max-width: 640px; }
  .hero-emblem { opacity: .9; }
  .emblem-iaf { left: auto; right: 90px; top: 120px; width: 110px; height: 120px; }
  .emblem-eac { left: auto; right: 20px; top: 118px; width: 76px; height: 120px; }

  /* Countdown stacks nicely */
  .countdown-inner { gap: 32px; }
  .event-facts { width: 100%; }

  /* About */
  .about-grid { flex-direction: column; gap: 40px; }
  .about-media, .about-copy { width: 100%; }
  .about-media img { max-width: 460px; margin-inline: auto; }

  /* EAC — stacked: cards must size to their content, otherwise flex-basis:0
     (from the desktop equal-width row layout) collapses their height on the
     vertical axis and the icon/text overflow and overlap. */
  .eac-points { flex-direction: column; }
  .eac-card { flex: none; }

  /* Mission */
  .mission-grid { flex-direction: column; align-items: stretch; }
  .mission-left { width: 100%; }

  /* Discover Assam */
  .assam-top { flex-direction: column; align-items: stretch; }
  .assam-left { width: 100%; }
  .assam-cta { flex-direction: column; align-items: flex-start; gap: 28px; }
  .assam-cta-sep { display: none; }
  .assam-cta-desc { max-width: none; }

  /* Race categories */
  .race-cat { padding: 56px 40px; }
  .race-cat-grid { flex-wrap: wrap; }
  .race-cat-card { flex: 1 1 280px; }

  /* Goodie bag & kit (2 × 2 from ≤ 1120) */
  .goodie-section { padding: 56px 40px; }

  /* Info update */
  .info-update-grid { flex-wrap: wrap; }
  .info-update-card { flex: 1 1 280px; }

  /* Race experience */
  .race-cards { flex-wrap: wrap; }
  .race-card { flex: 1 1 260px; }

  /* Footer — 3 columns become 2 (contact drops full-width below) */
  .footer-cols { flex-wrap: wrap; gap: 40px 32px; }
  .footer-col { flex: 1 1 240px; }
  .footer-brand { flex-basis: 100%; }
}

/* ---------- Tablet ≤ 768 ---------- */
@media (max-width: 768px) {
  :root { --header-h: 76px; }
  .section { padding: 48px 24px; }
  .kit-section { padding: 48px 24px; }
  .why-guwahati .wrap { padding: 48px 24px; }

  /* The two brand logos live at the top-left of the hero on mobile
     (Figma 8299:255), so hide the duplicate fixed-header brand logo;
     keep the hamburger anchored right. */
  .site-header .brand { display: none; }
  .nav-wrap { justify-content: flex-end; }

  /* ===== Hero — mobile design (Figma 8299:253) ===== */
  .hero {
    min-height: auto;
    display: block;
    padding: 30px 20px 40px;
    background: url("../images/hero-bg-mobile.jpg") top center / cover no-repeat;
  }
  .hero-inner { max-width: 100%; }
  .hero-content { max-width: 100%; gap: 18px; margin-top: 0; align-items: flex-start; }

  /* Top logo row: event logo + IAF emblem — equal width, side by side.
     The event logo carries transparent padding, so it is scaled up to
     visually match the tightly-cropped IAF crest (mirrors Figma 133%). */
  .hero-logos-mobile { display: flex; align-items: center; gap: 32px; margin-bottom: 30px; }
  .hero-logos-mobile img { display: block; object-fit: contain; }
  .hero-logos-mobile .hlm-event { width: 80px; height: 80px; transform: scale(1.37); }
  .hero-logos-mobile .hlm-iaf { width: 80px; height: auto; }

  /* Desktop absolute emblems (if any) stay hidden on mobile */
  .hero-emblem { display: none; }

  .hero-title { width: 60%; max-width: 254px; height: auto; }

  .hero-taglines { gap: 20px; }
  .hero-taglines p { margin: 0; }
  .hero-tagline { font-size: 16px; line-height: 1.35; width: auto; }
  .accent-bars { gap: 8px; }
  .accent-bars .bar { width: 64px; }
  .hero-subtag { font-size: 16px; }

  .hero-actions { flex-direction: column; align-items: center; gap: 24px; margin-top: 0; width: 100%; }
  .btn-primary-solid, .btn-primary-outline { width: auto; font-size: 16px; padding: 14px 32px; letter-spacing: .64px; }

  /* Countdown */
  .count-blocks { min-width: 0; width: 100%; gap: 12px; }
  .count-num { font-size: 34px; }
  .count-label { font-size: 14px; }
  .event-facts { flex-direction: column; align-items: flex-start; gap: 16px; }
  .fact-sep { width: 100%; height: 1px; }

  .eac-card { flex-direction: column; text-align: center; padding: 32px 24px; min-height: 0; }
  .eac-card p { text-align: center; }

  .assam-places { gap: 20px; }
  .race-cat { padding: 48px 24px; }
  .race-cat-km { font-size: 40px; }
  .race-cat-desc { font-size: 16px; }
  .goodie-section { padding: 48px 24px; }
  .goodie-grid { gap: 16px; }
  .goodie-media { height: 150px; }
  .goodie-title { font-size: 18px; }
  .goodie-desc { font-size: 15px; }
  .info-update-card { height: 220px; }
  .info-update-card p { font-size: 30px; }
  .race-banner p { font-size: 17px; }
  .faq-q { font-size: 16px; padding: 20px; }
  .cta-slogan { font-size: 20px; }

  /* Footer — all columns stack full-width */
  .site-footer { padding: 40px 24px 24px; }
  .footer-cols { flex-direction: column; gap: 32px; }
  .footer-col { flex: none; width: 100%; }
}

/* ---------- Mobile ≤ 480 ---------- */
@media (max-width: 480px) {
  .section { padding: 40px 20px; }
  .kit-section, .why-guwahati .wrap { padding: 40px 20px; }

  .hero { padding: 26px 18px 32px; }
  .hero-title { width: 62%; max-width: 240px; }

  .eyebrow { gap: 12px; }
  .eyebrow .line { width: 32px; }
  .eyebrow-text { font-size: 13px; letter-spacing: 1.6px; }

  .count-blocks { flex-wrap: wrap; gap: 8px; }
  .count-block { flex: 1 1 40%; }
  .count-num { font-size: 30px; }
  .count-sep { display: none; }

  .assam-places { grid-template-columns: repeat(2, 1fr); }
  .kit-card { flex: 1 1 140px; width: auto; }
  .goodie-section { padding: 40px 20px; }
  .sponsor-card { flex-basis: 100%; }
  .sponsor-tier-title { gap: 12px; font-size: 13px; }
  .sponsor-grid.is-featured .sponsor-card img { width: 200px; height: 98px; }  .goodie-grid { grid-template-columns: 1fr; }
  .goodie-note { font-size: 15px; }

  .section-lead { font-size: 15px; }
  .footer-copy { font-size: 12px; }
  .to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

/* ---------- Very small ≤ 360 ---------- */
@media (max-width: 360px) {
  .hero-tagline { font-size: 15px; }
  .count-num { font-size: 26px; }
  .kit-card { flex: 1 1 100%; }
}

/* =============================================================
   REGISTRATION OFFERS POPUP — responsive
   ============================================================= */
@media (max-width: 768px) {
  .promo-dialog { padding: 48px 32px; gap: 24px; }
  .promo-close { top: 12px; right: 12px; }
  .promo-title { font-size: 34px; line-height: 1.1; }
  .promo-offers { padding-inline: 0; }
}

@media (max-width: 480px) {
  .promo-modal { padding: 16px; }
  .promo-dialog { padding: 40px 20px 32px; gap: 20px; }
  .promo-title { font-size: 28px; }
  .promo-lead, .promo-note { font-size: 15px; }
  .promo-offers { flex-direction: column; gap: 14px; }
  .promo-offer-pct { font-size: 40px; }
  .promo-cta { width: 100%; }
}

/* =============================================================
   CASH PRIZES — responsive
   ============================================================= */
@media (max-width: 992px) {
  .prize-table th, .prize-table td { padding: 14px 16px; }
  .prize-table thead th { font-size: 13px; letter-spacing: 1.2px; }
  .prize-table thead .pt-group { background-size: calc(100% - 32px) 1px; }
  .prize-table tbody td { font-size: 18px; }
  .prize-table tbody td.pt-total,
  .prize-table tr.is-open td { font-size: 19px; }
  .prize-table tr.is-open td.pt-total { font-size: 21px; }
  .pt-age-tag { font-size: 13px; padding: 5px 12px; }
  .prize-grand-amount { font-size: 52px; }
}

@media (max-width: 768px) {
  .cash-prizes .wrap { gap: 28px; }
  .prize-list { gap: 24px; }
  .prize-card-title { font-size: 20px; padding: 16px; }
  .prize-table th, .prize-table td { padding: 12px; }
  .prize-table thead th { font-size: 12px; letter-spacing: 1px; }
  .prize-table thead .pt-group { background-size: calc(100% - 24px) 1px; }
  .prize-table tbody td { font-size: 16px; }
  .prize-table tbody td.pt-total,
  .prize-table tr.is-open td { font-size: 17px; }
  .prize-table tr.is-open td.pt-total { font-size: 18px; }
  .prize-grand { padding: 32px 20px; }
  .prize-grand-amount { font-size: 44px; }
}

/* Phones — each prize row becomes a compact card */
@media (max-width: 600px) {
  .prize-card:hover { transform: none; }

  .prize-table, .prize-table tbody, .prize-table tr,
  .prize-table th, .prize-table td { display: block; }
  .prize-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }

  .prize-table tbody { display: grid; gap: 12px; padding: 12px; }
  .prize-table tbody tr {
    border: 1px solid var(--border-card); border-radius: var(--radius-md); overflow: hidden;
  }
  .prize-table tbody tr > * { border-top: 0; background: transparent; }
  .prize-table tbody tr:hover > * { background-color: transparent; }
  .prize-table tbody th { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); background: var(--bg-soft); }
  .prize-table tr.is-open { border-color: var(--orange); }
  .prize-table tr.is-open > th { box-shadow: none; }

  .prize-table tbody td {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 10px 14px; font-size: 17px; text-align: right;
  }
  .prize-table tbody td::before {
    content: attr(data-label);
    font-weight: 700; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--text-body);
  }
  /* rank marker in front of the label, same tints as desktop */
  .prize-table tbody td.pt-r1::before,
  .prize-table tbody td.pt-r2::before,
  .prize-table tbody td.pt-r3::before {
    padding-left: 20px;
    background:
      radial-gradient(circle at 6px 50%, var(--rank-fill) 0 3.5px, transparent 4px),
      radial-gradient(circle at 6px 50%, transparent 0 4px, var(--orange) 4.5px 6px, transparent 6.5px);
  }
  .prize-table tbody td.pt-total {
    border-top: 1px solid var(--border-soft); background: var(--bg-soft);
    font-size: 18px;
  }
  .prize-table tbody td.pt-total::before { color: var(--navy-550); }
  .prize-table tr.is-open td { font-size: 18px; }
  .prize-table tr.is-open td.pt-total { font-size: 20px; }

  .prize-grand .eyebrow .line { display: none; }
  .prize-grand .eyebrow-text { font-size: 14px; letter-spacing: 1.6px; text-align: center; }
  .prize-grand-amount { font-size: 40px; }
}