/*
 * ============================================================
 * 04-responsiveness.css
 * Responsive / adaptive styles extracted from the Figma Make
 * "Design elegant landing page" export.
 * ============================================================
 *
 * CONTENTS
 *   0. Breakpoint reference (variables)
 *   1. Navigation — mobile / desktop
 *   2. Hero Section
 *   3. Stats Section
 *   4. About Section
 *   5. Events Section
 *   6. Rankings Section
 *   7. Benefits / Features Section
 *   8. Membership / Pricing Section
 *   9. Footer
 *  10. Typography responsive scale
 *  11. Utility overrides (md:, lg: equivalents)
 *  12. Reduced motion & accessibility
 * ============================================================
 *
 * Requires: 01-html-elements.css, 03-section-styles.css
 */


/* ============================================================
   0. Breakpoint Reference (read-only, for documentation)
   ============================================================

   sm  → 640 px  (40 rem)
   md  → 768 px  (48 rem)
   lg  → 1024 px (64 rem)
   xl  → 1280 px (80 rem)
   2xl → 1536 px (96 rem)

   The design uses a mobile-first approach:
   base styles → mobile, then overrides at md+ and lg+.
*/


/* ============================================================
   1. Navigation — mobile / desktop
   ============================================================ */

/* Mobile: hide desktop nav links, show hamburger */
.site-nav {
  display: none;
}

.site-header__contact {
  display: none;
}

.site-header__mobile-toggle {
  display:     flex;
  align-items: center;
  justify-content: center;
  width:        calc(var(--spacing) * 10);
  height:       calc(var(--spacing) * 10);
  border:       none;
  background:   transparent;
  color:        var(--foreground);
  cursor:       pointer;
}

/* Mobile drawer */
.mobile-menu {
  display:          none;
  flex-direction:   column;
  gap:              calc(var(--spacing) * 2);
  padding:          calc(var(--spacing) * 4) calc(var(--spacing) * 6);
  border-top:       1px solid var(--border);
  background-color: color-mix(in oklab, var(--background) 95%, transparent);
  backdrop-filter:  blur(var(--blur-sm));
}

.mobile-menu.is-open {
  display: flex;
}

.mobile-menu__link {
  padding:   calc(var(--spacing) * 3) 0;
  font-size: var(--text-base);
  color:     color-mix(in oklab, var(--foreground) 70%, transparent);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}

.mobile-menu__link:last-child {
  border-bottom: none;
}

.mobile-menu__contact {
  display: none;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
  padding-top: calc(var(--spacing) * 4);
}

.mobile-menu__contact-link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  color: color-mix(in oklab, var(--foreground) 80%, transparent);
  text-decoration: none;
  word-break: break-word;
}

.mobile-menu__contact-link .iconify {
  font-size: 18px;
}

@media (width >= 64rem) {
  /* lg: show desktop nav, hide mobile toggle */
  .site-nav                   { display: flex; }
  .site-header__contact       { display: flex; }
  .site-header__mobile-toggle { display: none; }
  .mobile-menu                { display: none !important; }

  /* Two-row desktop header */
  .site-header__inner {
    min-height: calc(var(--spacing) * 24);
  }

  .site-header__bottom {
    justify-content: center;
  }
}


/* ============================================================
   2. Hero Section
   ============================================================ */

/* Mobile */

.hero__headline {
  font-size: var(--text-4xl);                  /* 36 px on mobile */
}

.hero__subheadline {
  font-size: var(--text-lg);
}

.hero__actions {
  flex-direction: column;
  align-items:    stretch;
}

.hero__cta-primary,
.hero__cta-secondary {
  width:           100%;
  justify-content: center;
}

/* md: 768 px */
@media (width >= 48rem) {
  .hero__headline {
    font-size: var(--text-5xl);                /* 48 px */
  }

  .hero__subheadline {
    font-size: var(--text-xl);
  }

  .hero__actions {
    flex-direction: row;
    align-items:    center;
  }

  .hero__cta-primary,
  .hero__cta-secondary {
    width: auto;
  }
}

/* lg: 1024 px */
@media (width >= 64rem) {
  .hero__headline {
    font-size: var(--text-7xl);               /* 72 px */
  }
}


/* ============================================================
   3. Stats Section
   ============================================================ */

/* Mobile: 2 columns */
.stats-section__grid {
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--spacing) * 8);
}

/* md: 4 columns */
@media (width >= 48rem) {
  .stats-section__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--spacing) * 12);
  }
}

/* Stat numbers shrink on mobile */
.stat-card__number {
  font-size: var(--text-4xl);    /* 36 px */
}

@media (width >= 48rem) {
  .stat-card__number {
    font-size: var(--text-5xl);  /* 48 px */
  }
}


/* ============================================================
   4. About Section
   ============================================================ */

/* Mobile: single column, image below text */
.about-section__grid {
  grid-template-columns: 1fr;
}

.about-section__headline {
  font-size: var(--text-4xl);
}

/* md: 2 columns, side-by-side */
@media (width >= 48rem) {
  .about-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-section__headline {
    font-size: var(--text-5xl);
  }
}


/* ============================================================
   5. Events Section
   ============================================================ */

/* Mobile: single column */
.events-section__grid {
  grid-template-columns: 1fr;
}

/* Featured card (col-span-2) collapses to full-width on mobile */
.event-card--featured {
  grid-column: 1 / -1;
}

/* md: 2 columns */
@media (width >= 48rem) {
  .events-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* lg: 4 columns, featured spans 2 */
@media (width >= 64rem) {
  .events-section__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .event-card--featured {
    grid-column: span 2 / span 2;
  }
}

/* Section headline */
.events-section__headline {
  font-size: var(--text-4xl);
}

@media (width >= 48rem) {
  .events-section__headline {
    font-size: var(--text-5xl);
  }
}


/* ============================================================
   6. Rankings Section
   ============================================================ */

/* Mobile: stacked */
.rankings-section__layout {
  flex-direction: column;
}

.rankings-section__sidebar {
  position: static;
}

/* Rankings table: hide some columns on small screens */
.rankings-col--state {
  display: none;
}

@media (width >= 48rem) {
  .rankings-col--state {
    display: flex;
  }
}

/* lg: side-by-side with sticky sidebar */
@media (width >= 64rem) {
  .rankings-section__layout {
    flex-direction: row;
    align-items:    flex-start;
  }

  .rankings-section__sidebar {
    flex:     0 0 320px;
    position: sticky;
    top:      calc(var(--spacing) * 28);
  }

  .rankings-section__main {
    flex: 1;
  }
}

.rankings-section__headline {
  font-size: var(--text-4xl);
}

@media (width >= 48rem) {
  .rankings-section__headline {
    font-size: var(--text-5xl);
  }
}


/* ============================================================
   7. Benefits / Features Section
   ============================================================ */

/* Mobile: single column */
.benefits-section__grid {
  grid-template-columns: 1fr;
}

/* md: 2 columns */
@media (width >= 48rem) {
  .benefits-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* lg: 3 columns */
@media (width >= 64rem) {
  .benefits-section__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.benefits-section__headline {
  font-size: var(--text-4xl);
}

@media (width >= 48rem) {
  .benefits-section__headline {
    font-size: var(--text-5xl);
  }
}


/* ============================================================
   8. Membership / Pricing Section
   ============================================================ */

/* Mobile: single column */
.membership-section__grid {
  grid-template-columns: 1fr;
}

/* md: 2 columns */
@media (width >= 48rem) {
  .membership-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* lg: 3 columns */
@media (width >= 64rem) {
  .membership-section__grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}

.membership-section__headline {
  font-size: var(--text-4xl);
}

@media (width >= 48rem) {
  .membership-section__headline {
    font-size: var(--text-5xl);
  }
}


/* ============================================================
   9. Footer
   ============================================================ */

/* Mobile: single column */
.site-footer__grid {
  grid-template-columns: 1fr;
  gap: calc(var(--spacing) * 10);
}

.site-footer__mobile-contact {
  display: flex;
}

/* md: brand + 3 link columns */
@media (width >= 48rem) {
  .site-footer__grid {
    grid-template-columns: 1fr repeat(3, auto);
    gap: calc(var(--spacing) * 16);
  }

  .site-footer__mobile-contact {
    display: none;
  }
}

/* Bottom bar: stacked on mobile, row on md */
.site-footer__bottom {
  flex-direction: column;
  align-items:    center;
  text-align:     center;
}

@media (width >= 48rem) {
  .site-footer__bottom {
    flex-direction:  row;
    justify-content: space-between;
    text-align:      left;
  }
}


/* ============================================================
  10. Typography Responsive Scale
   ============================================================ */

/*
 * Headlines used across all sections follow this pattern:
 *   mobile  → text-4xl (36 px)
 *   md+     → text-5xl (48 px)
 *
 * Hero headline:
 *   mobile  → text-4xl (36 px)
 *   md+     → text-5xl (48 px)
 *   lg+     → text-7xl (72 px)
 *
 * Body copy:
 *   always  → text-base (16 px) / text-lg (18 px)
 *
 * These scale helpers can be applied as utility classes:
 */

.responsive-headline {
  font-size: var(--text-4xl);
}

@media (width >= 48rem) {
  .responsive-headline {
    font-size: var(--text-5xl);
  }
}

.responsive-hero-headline {
  font-size: var(--text-4xl);
}

@media (width >= 48rem) {
  .responsive-hero-headline {
    font-size: var(--text-5xl);
  }
}

@media (width >= 64rem) {
  .responsive-hero-headline {
    font-size: var(--text-7xl);
  }
}


/* ============================================================
  11. Utility Overrides (md: / lg: equivalents as classes)
   ============================================================ */

/* Grid helpers that mirror Tailwind's md:grid-cols-* */

.grid-1 { grid-template-columns: 1fr; }

@media (width >= 48rem) {
  .md\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (width >= 64rem) {
  .lg\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Padding that scales with viewport */
.section-py {
  padding-block: calc(var(--spacing) * 12);      /* 3 rem mobile */
}

@media (width >= 48rem) {
  .section-py {
    padding-block: calc(var(--spacing) * 20);    /* 5 rem */
  }
}

@media (width >= 64rem) {
  .section-py {
    padding-block: calc(var(--spacing) * 24);    /* 6 rem desktop */
  }
}

/* Figma banner-aware height helpers */
.wrapper-with-banner .min-h-screen {
  min-height: var(--full-height-with-banner);
}

.wrapper-with-banner .h-screen {
  height: var(--full-height-with-banner);
}

@media (max-width: 600px) {
  .banner-v2-container {
    left:   0 !important;
    right:  0 !important;
    margin: 0 auto !important;
  }
}


/* ============================================================
  12. Reduced Motion & Accessibility
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Kill CSS transitions */
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior:      auto !important;
  }

  /* Keep image scale neutral */
  .img-hover-scale,
  .event-card:hover .event-card__image {
    transform: none !important;
  }

  /* Kill hero pulse animation */
  .hero__pill-dot {
    animation: none;
  }
}

/* Focus-visible ring for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Screen-reader only utility */
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}