/**
 * Responsive Styles
 */

/* ==========================================
   MOBILE (up to 767px)
   ========================================== */

@media (max-width: 767px) {
  :root {
    --section-padding: var(--space-12);
    --text-5xl: 2.5rem;
    --text-6xl: 3rem;
    --text-7xl: 4rem;
    --text-hero: 5rem;
  }

  .container {
    padding: 0 var(--space-4);
  }

  /* Header adjustments */
  .header-container {
    padding: 0 var(--space-4);
  }

  /* Grid stack */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* --- Hero --- */
  .hero-content {
    padding: 0 1.25rem;
    justify-content: flex-start;
  }

  .hero-headline-box {
    padding: 0.75rem 0.85rem;
    width: fit-content;
    max-width: calc(100% - 2.5rem);
    margin-left: auto;
    margin-right: auto;
    /* Center between hero top and Learn More button top.
       Hero height = 100svh - 38px (ticker) - var(--mobile-header-total) — must
       match the formula in the (max-width: 1023px) block below or this drifts.
       Learn More sits at bottom: 1.5rem with ~3rem button height = 4.5rem total.
       .hero-content has padding: 0 here, so margin-top = (hero_height - 4.5rem)/2. */
    margin-top: calc((100svh - 38px - var(--mobile-header-total, 115px) - 4.5rem) / 2);
    transform: translateY(-50%);
  }

  .hero-headline {
    font-size: clamp(3.2rem, 13.65vw, 4rem);
  }

  .hero-actions {
    bottom: 1.5rem;
  }

  .hero-btn {
    font-size: 0.9rem;
    padding: 0.95rem 1.75rem;
  }

  .hero-bg-toggle {
    left: 1.25rem;
    width: 2.75rem;
    height: 2.75rem;
  }

  /* --- What Is It Cards + Mascots/Minigames --- */
  .whatisit-section {
    padding: 0.75rem;
  }

  .whatisit-card,
  .mascots-card {
    padding-left: 0;
    padding-right: 0;
  }

  .whatisit-card .whatisit-headline,
  .whatisit-card .whatisit-sub,
  .mascots-card .whatisit-headline,
  .mascots-card .whatisit-sub {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .whatisit-image-wrap {
    margin-left: 0;
    margin-right: 0;
  }

  /* --- Reviews Carousel --- */
  .reviews-section {
    --side-mask: 2rem;
    --card-size: min(600px, 78vw);
  }

  .reviews-nav-btn img {
    height: 160px;
  }

  .reviews-nav-btn {
    width: var(--side-mask);
  }

  .reviews-nav-btn--prev {
    padding-right: 0;
    justify-content: flex-end;
  }

  .reviews-nav-btn--next {
    padding-left: 0;
    justify-content: flex-start;
  }

  .review-card {
    padding: 1.5rem;
    border-radius: var(--radius-xl);
  }

  .review-stars {
    font-size: 2rem;
  }

  .review-source,
  .review-name {
    font-size: 0.8rem;
  }

  .review-quote p {
    font-size: 2rem;
  }

  .review-quote {
    padding: 0.5rem 0;
  }

  .review-glyph {
    font-size: 8rem;
  }

  /* --- Bento Grid (Lounge + Shop) --- */
  .lounge-section {
    padding: 0 0.75rem;
  }

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

  .bento-card {
    padding: 2.5rem 1.5rem 0;
  }

  /* --- FAQ --- */
  .faq-card {
    padding: 1.5rem 1rem 1.5rem;
  }

  .accordion .accordion-trigger {
    font-size: clamp(1.1rem, 3.5vw, 1.3rem);
    padding: 1.15rem 0;
    gap: 0.75rem;
  }

  .accordion .accordion-icon {
    width: 34px;
    height: 34px;
  }

  .accordion .accordion-icon::before {
    width: 14px;
  }

  .accordion .accordion-icon::after {
    height: 14px;
  }

  .accordion .accordion-content {
    font-size: clamp(1.1rem, 3.5vw, 1.3rem);
  }

  .accordion .accordion-content p {
    padding: 0 0 1rem;
    max-width: 100%;
  }

  /* --- Location --- */
  .location-info p {
    font-size: 1.1rem;
  }

  .location-text {
    padding: 2rem 1.5rem 1.25rem;
  }

  /* --- Newsletter --- */
  .footer-newsletter-copy {
    text-align: center;
  }

  /* --- Footer --- */
  .footer-newsletter-form {
    flex: none;
  }

  .footer-newsletter-sub {
    font-size: 1.1rem;
  }

  .footer-newsletter-pill {
    padding-left: 1.25rem;
  }

  .footer-newsletter-pill input {
    font-size: 0.9rem;
    letter-spacing: 0;
    padding: 0.65rem 0;
  }

  .footer-newsletter-btn {
    padding: 0 1rem;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 2rem 0 1.5rem;
  }

  .footer-address-col,
  .footer-mini-newsletter {
    grid-column: 1 / -1;
  }

  /* Mobile: address on two lines */
  .footer-addr-break {
    display: inline;
  }
  .footer-addr-comma {
    display: none;
  }

  .footer-top > .footer-nav-col:nth-child(3) {
    margin-left: 0;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-bottom: 2rem;
  }

  .footer-bottom p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
  }

  .footer-legal {
    order: -1;
    margin: 0;
    font-size: 0.95rem;
  }

  .footer-legal a {
    font-size: 0.95rem;
    text-decoration: underline;
    padding: 0;
  }

  /* --- Subpages (Corporate, Celebrate, Contact) --- */
  .content-card {
    padding: 2.5rem 1.25rem 2rem;
  }

  .corp-hero-card {
    padding: 2.5rem 1.25rem 0;
  }

  .corp-hero-card .whatisit-headline {
    font-size: clamp(4rem, 12vw, 5rem);
    padding: 0 0.5rem;
  }

  .corp-hero-card .whatisit-sub {
    font-size: 1.1rem;
  }

  .corp-hero-image-wrap {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xl) var(--radius-xl);
  }

  .content-card .whatisit-sub {
    font-size: 1.1rem;
  }

  .corp-included {
    padding: 1.5rem 1.25rem 1rem;
  }

  .corp-included-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1.5rem 0;
  }

  .corp-included-label {
    font-size: 1.5rem;
  }

  .corp-included-list li {
    font-size: 1.1rem;
  }

  .corp-logos-card {
    padding: 1.25rem 0 1.5rem;
  }

  .corp-partner-banner {
    padding: 2rem 1.5rem 1.5rem;
  }

  .corp-bento {
    padding: 1.75rem 1.25rem;
  }

  /* Form rows stack to 1-col at 600px (in sections.css).
     Zero the grid gap so only form-group margin-bottom controls spacing. */
  .form-row {
    gap: 0;
  }

  /* --- Touch Target Fixes (minimum 44px tap area) --- */

  /* Bento buttons: 37.6px → 45.6px */
  .bento-btn {
    padding: 0.75rem 1.25rem;
  }

  /* Footer legal links: 26.4px → 44px */
  .footer-legal a {
    padding: 0.55rem 0;
  }

  /* Waitlist close button: 32px → 44px */
  .waitlist-close {
    width: 44px;
    height: 44px;
  }

  /* Location social icons: 28px SVG → 44px tap area */
  .location-social a {
    min-width: 44px;
    min-height: 44px;
  }

  /* Faster marquee on mobile — less content visible, needs quicker scroll */
  .teams-marquee-track--left {
    animation-duration: 65s;
  }

  .teams-marquee-track--right {
    animation-duration: 65s;
  }
}

/* Narrow phones (375px and below) — scale down review quote */
@media (max-width: 390px) {
  .review-quote p {
    font-size: 1.6rem;
  }
}

/* ==========================================
   TABLET (768px - 1023px)
   ========================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --section-padding: var(--space-16);
  }

  /* Corp/Celebrate bento — 2-col at tablet, 3-col at desktop */
  .corp-bento-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================
   DESKTOP (1024px+)
   ========================================== */

@media (min-width: 1024px) {
  :root {
    --section-padding: var(--space-24);
  }
}

/* ==========================================
   LARGE DESKTOP (1440px+)
   ========================================== */

@media (min-width: 1440px) {
  :root {
    --container-max: 1600px;
  }
}

/* ==========================================
   MOBILE CTA BAR — hero height adjustment
   ========================================== */

@media (max-width: 1023px) {
  .hero {
    height: calc(100svh - 38px - var(--mobile-header-total, 115px));
  }

  /* Flex-center is disabled below 1024px because we manually center the headline
     via margin-top + translateY(-50%) on the box (lets us account for the
     mobile-CTA-bar height). Without flex-start, the centered margin-top stacks
     on top of flex centering and the headline gets shoved to the bottom of the
     hero (visible in the 769–1023px tablet range). */
  .hero-content {
    justify-content: flex-start;
  }

  .hero-headline-box {
    transform: translateY(-50%);
  }
}

/* TABLET-ONLY margin-top — at this range .hero-content has padding-top: 4rem
   (sections.css base) AND .hero-actions sits at bottom: 3rem with ~3rem of
   button height, so the offsets sum to 6rem at the bottom + 8rem worth of
   padding accounting on both sides. The 767px mobile block uses its own
   formula (0 content padding-top, 1.5rem actions bottom) — keep them scoped
   separately so this rule doesn't bleed into mobile via source order. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-headline-box {
    margin-top: calc((100svh - 38px - var(--mobile-header-total, 115px) - 14rem) / 2);
  }
}

/* ==========================================
   REDUCED MOTION
   ========================================== */

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

/* ==========================================
   HIGH CONTRAST MODE
   ========================================== */

@media (prefers-contrast: high) {
  :root {
    --border-color: var(--text-primary);
    --text-secondary: var(--text-primary);
  }
}

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
  .site-header,
  .mobile-menu,
  .footer,
  .btn {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .hero {
    min-height: auto;
    padding: var(--space-8) 0;
  }
}