/* ══════════════════════════════════════════════════
   PIZZABOT — Responsive System
   Breakpoints: 1024px · 767px · 479px
   ══════════════════════════════════════════════════ */

/* ─── Tablet (≤ 1024px) ────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --text-hero:     88px;
    --text-section:  68px;
    --text-tagline:  58px;
    --text-stats:    22px;
    --space-8:       64px;
  }

  .container { padding-inline: var(--space-5); }

  /* ── Nav ── */
  .nav__cta { padding: 6px 14px 6px 6px; font-size: 13px; }

  /* ── Hero ── */
  .hero__layout {
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
    gap: var(--space-5);
  }

  /* ── About ── */
  .about__top  { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .about__stats { grid-template-columns: repeat(2, 1fr); }

  /* ── Menu ── */
  .menu__header { grid-template-columns: 1fr; }
  .menu__grid   { grid-template-columns: repeat(2, 1fr); }

  /* ── Pizza Caliente ── */
  .pizza-caliente__inner { max-width: 460px; }

  /* ── Process ── */
  .process__header { max-width: 580px; }

  /* ── Kiosk steps ── */
  .kstep-slide { grid-template-columns: 55fr 45fr; }

  /* ── Locations ── */
  .locations__inner { grid-template-columns: 1fr 1fr; gap: var(--space-6); }

  /* ── Footer ── */
  .footer__meta  { flex-direction: column; gap: var(--space-4); text-align: center; }
  .footer__links { justify-content: center; }
}

/* ─── Mobile (≤ 767px) ─────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --text-hero:       52px;
    --text-section:    42px;
    --text-tagline:    38px;
    --text-pizza-name: 20px;
    --text-marquee-lg: 18px;
    --text-marquee:    15px;
    --text-body-xl:    15px;
    --text-body-lg:    14px;
    --space-8:         48px;
    --nav-height:      64px;
  }

  /* ── Nav ── */
  .nav__links         { display: none; }
  .nav__cta           { display: none; }
  .nav__mobile-toggle { display: flex; }
  .nav__backdrop      { display: block; pointer-events: none; }
  .nav__backdrop.is-open { pointer-events: all; }

  /* ── Hero ── */
  .hero__layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: auto;
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
    padding-inline: max(20px, calc((100vw - var(--container-width)) / 2 + 20px));
    gap: var(--space-4);
  }

  /* Image shown above content, fully rounded card */
  .hero__visual {
    display: block;
    order: -1;
    height: 260px;
    min-height: 0;
    border-radius: var(--radius-xl);
    align-self: auto;
  }

  /* Center all content on mobile */
  .hero__content {
    align-items: center;
    text-align: center;
  }
  .hero__headline {
    max-width: 300px;
    width: 100%;
  }
  .hero__body {
    font-size: var(--text-body-lg);
    white-space: normal;
    text-align: center;
  }
  .hero__ctas {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
  }
  .hero__ctas .btn { width: 100%; max-width: 280px; justify-content: center; }
  .hero__pagination { width: 100%; justify-content: center; }

  /* ── About ── */
  .about__top   { grid-template-columns: 1fr; }
  .about__right { display: none; }
  .about__stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

  /* ── Menu ── */
  .menu__header { grid-template-columns: 1fr; }
  .menu__grid   { grid-template-columns: 1fr; gap: var(--space-4); }

  /* ── Pizza Caliente ── */
  .pizza-caliente {
    min-height: 320px;
    align-items: center;
  }
  .pizza-caliente__heading { font-size: clamp(36px, 11vw, 56px); }
  .pizza-caliente__inner {
    max-width: 100%;
    margin-left: 0;
    padding-inline: 0;
  }
  .pizza-caliente__overlay {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.75) 100%
    );
  }

  /* ── Process ── */
  .process__header   { max-width: 100%; text-align: left; }
  .process__subtext  { margin-inline: 0; max-width: 100%; }

  /* ── Kiosk steps ── */
  .kstep-slider {
    max-height: none; /* remove height cap so image + content both show */
    overflow: visible;
  }
  .kstep-slide {
    grid-template-columns: 1fr;
    grid-template-rows: 220px auto auto;
  }
  /* Image goes first (top) */
  .kstep-slide__right {
    display: block;
    order: 0;
    height: 220px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
  }
  /* Left column (badge + body) stacks below */
  .kstep-slide__left {
    order: 1;
    grid-column: 1;
    padding-top: 0;
  }
  .kstep-slide__badge {
    margin-right: 0;
    border-radius: 0;
    padding-block: var(--space-3);
  }
  .kstep-slide__num { font-size: clamp(36px, 10vw, 64px); }

  /* ── Reels ── */
  .reels__header { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .reel-card     { width: 180px; height: 300px; }
  /* Remove mask on mobile — it can block touch events on iOS */
  .reels__track-wrap {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* ── Reel modal ── */
  .reel-modal__inner { width: 92vw; max-width: 360px; }

  /* ── Locations ── */
  .locations__inner { grid-template-columns: 1fr; }
  .location-card__map-wrap { aspect-ratio: 4/3; }
  .location-card__info { padding: var(--space-4) var(--space-5); }

  /* ── Contact ── */
  .contact__inner   { gap: var(--space-4); padding-block: var(--space-6); }
  .contact__heading { font-size: var(--text-section); line-height: 1.05; }
  .contact__body    { font-size: var(--text-body); max-width: 26ch; line-height: 1.6; }
  .contact__email   { font-size: var(--text-body-lg); word-break: break-all; }

  /* ── Footer ── */
  .footer__links    { gap: var(--space-4); flex-wrap: wrap; justify-content: center; }
  .footer__copy     { font-size: 11px; }

  /* ── Motion simplification on touch ── */
  .stat-card:hover,
  .pizza-card:hover,
  .reel-card:hover,
  .location-card:hover    { transform: none; filter: none; }
  .btn:hover              { transform: none; }
  .btn--red::before,
  .btn--dark::before      { display: none; }
  .reveal                 { transform: translateY(24px); }
  .reveal-left            { transform: translateX(-16px); }
  .reveal-right           { transform: translateX(16px); }
  .kstep-slide[data-active="true"] { animation-duration: 0.3s; }
}

/* ─── Small mobile (≤ 479px) ───────────────────────── */
@media (max-width: 479px) {
  :root {
    --text-hero:     40px;
    --text-section:  34px;
    --text-tagline:  32px;
    --space-8:       40px;
  }

  .container { padding-inline: var(--space-3); }

  /* ── Hero ── */
  .hero__layout { padding-top: var(--space-5); gap: var(--space-3); }
  .hero__visual { height: 220px; }
  .hero__headline { max-width: 260px; }
  .hero__ctas .btn { font-size: 14px; padding: 14px 20px; }

  /* ── About ── */
  .about__stats { grid-template-columns: 1fr; }
  .stat-card    { padding: var(--space-4) var(--space-4); }

  /* ── Menu ── */
  .pizza-card__info { padding: var(--space-3) var(--space-4); }

  /* ── Pizza Caliente ── */
  .pizza-caliente__heading { font-size: clamp(30px, 10vw, 44px); }
  .pizza-caliente__body    { font-size: var(--text-body); }

  /* ── Process ── */
  .process__heading { font-size: var(--text-section); }

  /* ── Kiosk steps ── */
  .kstep-slide__right { height: 180px; }
  .kstep-slide__title { font-size: 18px; }
  .kstep-slide__link  { font-size: 13px; padding: 10px 18px; }

  /* ── Reels ── */
  .reel-card { width: 160px; height: 270px; }

  /* ── Locations ── */
  .location-card__name     { font-size: 22px; }
  .location-card__map-wrap { aspect-ratio: 16/10; }

  /* ── Contact ── */
  .contact__inner { gap: var(--space-4); }

  /* ── Footer ── */
  .footer__links { flex-direction: column; align-items: center; gap: var(--space-3); }
  .footer__copy  { font-size: 10px; }
}

/* ─── Reduce motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .marquee-track,
  .marquee-track--reverse   { animation: none; }
  .reveal, .reveal-scale,
  .reveal-clip, .reveal-left,
  .reveal-right             { opacity: 1; transform: none; transition: none; }
  .site-nav,
  .hero__visual,
  .hero__headline,
  .hero__body,
  .hero__ctas .btn,
  .hero__pagination         { animation: none; opacity: 1; transform: none; }
  .kstep-slide              { transition: none; }
  .btn--red::before,
  .btn--dark::before        { display: none; }
  .about__robot             { animation: none; }
}