/* ==========================================================================
   CAMP YALA — css/responsive.css
   --------------------------------------------------------------------------
   Purpose: min-width breakpoint overrides for style.css (mobile-first).
   Breakpoints: 480px (large phones), 768px (tablet), 1024px (desktop),
   1440px (wide). Load after style.css.
   ========================================================================== */


/* ---------- 480px: large phones ------------------------------------------ */
@media (min-width: 480px) {
  :root { --gutter: 20px; }

  .field-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .gallery { grid-auto-rows: 180px; }
}


/* ---------- 768px: tablet ------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --panel-gap: 10px;
    --slant: 26px;
    --outline: 3px;
  }

  .deco--hide-sm { display: block; }

  /* graffiti tag hangs just under the title, clear of the letters */
  .section-tag {
    position: absolute;
    left: .3em;
    top: calc(100% + 4px);
    margin: 0;
    white-space: nowrap;
    transform: rotate(-3deg);
  }
  .section-head { row-gap: 40px; }

  /* hero: text left, art right from tablet up */
  .slider { min-height: 580px; }
  .slide { justify-content: center; padding: 56px 40px calc(var(--slant) + 100px); }
  .slide__content { max-width: 56%; }
  .slide__title { font-size: clamp(3.4rem, 6.4vw, 6rem); }
  .slide__art {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 54%;
    min-height: 0;
    margin: 0;
  }
  .slider__controls { left: 40px; bottom: calc(var(--slant) + 22px); }
  .art--speed { display: none; }
  .art--bus { right: -4%; bottom: 30%; width: 112%; max-width: 760px; }
  .art--sun { width: 88px; height: 88px; top: 8%; right: 8%; }
  .slide--dark { --ground: calc(var(--slant) + 100px); }
  .slide--dark .slide__art { bottom: var(--ground); }
  .art--tent { width: 54%; max-width: 320px; }
  .art--fire { left: 50%; width: 26%; }
  .art--rocket { right: 12%; bottom: 30%; width: 56%; max-width: 340px; }
  .art--mountain { width: 96%; max-width: 560px; }
  .art--canoe { display: block; left: 58%; width: 34%; }
  .slider__dots { margin: 0 6px; }
  .hud__stars svg { width: 26px; height: 26px; }
  .hero__hud { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hud--tag { grid-column: auto; min-height: 170px; }

  /* inner page hero */
  .page-hero { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .page-hero__main {
    padding: 72px 40px 72px;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  }
  .page-hero__art {
    min-height: 320px;
    clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
  }
  .page-hero__art .art--main { width: 170px; height: 170px; bottom: 16%; }
  .page-hero__art .art--side { width: 90px; height: 90px; left: 12%; }
  .page-hero__art .art--img { width: 84%; bottom: 14%; }

  /* grids */
  .missions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wanted-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wanted-grid > li:nth-child(3) { grid-column: 1 / -1; max-width: 50%; justify-self: center; width: 100%; }
  .crew { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 18px; }

  .cta-band { padding-block: 104px 96px; }
  .after-cta { height: 110px; }
  .cta-band__rocket { width: 150px; height: 150px; top: -40px; right: 6%; }

  .briefing__body { padding: 40px 36px 44px; }
  .panel__body { padding: 28px 28px 30px; }
  .field-group { padding: 22px 22px 6px; }

  .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }

  .modal__foot { padding: 14px 18px; }
}


/* ---------- 1024px: desktop ---------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --header-h: 76px;
    --slant: 34px;
  }

  /* desktop nav on, hamburger off */
  .main-nav { display: block; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none; }
  .logo__text { font-size: 1.9rem; }

  /* hero: slider + HUD column, joined by a diagonal gutter */
  .hero { grid-template-columns: minmax(0, 1fr) 290px; }
  .hero__main { clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
  .hero__hud {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
  }
  .hud { min-height: 0; padding: 26px 22px 22px calc(var(--slant) + 22px); }
  .hud--stars { padding-top: 34px; }
  .hud--bus { padding-left: calc(var(--slant) * .6 + 22px); }
  .hud--tag { padding-left: 22px; }
  .hud__big { font-size: 3rem; }
  .hud__road {
    display: block;
    position: relative;
    margin-bottom: auto;
    padding-top: 18px;
  }
  .hud__road svg { width: 150px; height: 93px; filter: drop-shadow(4px 4px 0 var(--black)); transition: transform .6s var(--ease-pop); }
  .hud__road::after {
    content: '';
    display: block;
    height: 6px;
    margin-top: 6px;
    background: repeating-linear-gradient(90deg, var(--black) 0 18px, transparent 18px 30px);
  }
  .hud--bus:hover .hud__road svg { transform: translateX(40px); }

  .slider { min-height: 660px; }
  .slide { padding: 60px 56px 120px; }
  .slide__title { font-size: clamp(3.4rem, 5.4vw, 6rem); }
  .slide__art { right: var(--slant); left: 54%; }
  .slider__controls { left: 56px; bottom: 44px; }
  .art--bus { right: -2%; bottom: 20%; width: 108%; }
  .art--sun { width: 96px; height: 96px; }
  .slide--dark { --ground: 96px; }
  .btn--lg { font-size: clamp(1.3rem, 1.9vw, 2rem); }

  /* sections */
  .section-head { flex-wrap: nowrap; }

  .missions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .wanted-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wanted-grid > li:nth-child(3) { grid-column: auto; max-width: none; }
  .crew { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
  .cta-band__copy { display: grid; gap: 18px; }
  .cta-band__rocket { position: relative; top: auto; right: auto; flex: none; order: 3; width: 170px; height: 170px; }

  .story { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; }
  .briefing__body { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; padding: 48px 48px 52px; }

  .faq-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; }
  .faq-aside { position: sticky; top: calc(var(--header-h) + 48px); }

  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 20px; }

  .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }

  .register { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; }
  .register__preview { order: 0; position: sticky; top: calc(var(--header-h) + 32px); }

  .site-footer__grid { padding-block: 64px 52px; }
}


/* ---------- 1280px ------------------------------------------------------- */
@media (min-width: 1280px) {
  .hero { grid-template-columns: minmax(0, 1fr) 340px; }
}


/* ---------- 1440px: wide -------------------------------------------------- */
@media (min-width: 1440px) {
  :root { --container: 1320px; }

  .hero { grid-template-columns: minmax(0, 1fr) 380px; }
  .slider { min-height: 700px; }
  .slide__art { left: 46%; }
  .art--bus { width: 118%; bottom: 18%; }
  .slide { padding-left: 80px; }
  .slider__controls { left: 80px; }
  .hud__big { font-size: 3.4rem; }
}