/* ============================================================
   Responsive — Mobile First Breakpoints
   360px / 768px / 1024px / 1440px
   ============================================================ */

/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {
  /* Header */
  .header__top-bar { display: none; }
  .nav__menu { display: none; }
  .header__auth { display: none; }
  .header__hamburger { display: flex; }
  .header__nav { padding: var(--space-sm) 0; }
  .header__logo img { height: 32px; }

  /* Hero */
  .hero {
    height: 60vh;
    min-height: 400px;
  }
  .hero__title {
    font-size: 1.75rem;
    line-height: 1.3;
  }
  .hero__subtitle {
    font-size: 0.9rem;
  }
  .hero__actions {
    flex-direction: column;
    gap: var(--space-sm);
  }
  .hero__actions .btn { width: 100%; }
  .hero__arrow { display: none; }

  /* Quick Menu — hero 내부 absolute floating 유지, 컬럼만 조정 */
  .quick-menu__grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding: 14px var(--space-md) !important;
  }
  .quick-menu__icon {
    width: 40px;
    height: 40px;
  }
  .quick-menu__icon .material-symbols-outlined { font-size: 22px; }
  .quick-menu__label { font-size: 11px; }

  /* News */
  .news__item {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  .news__date { min-width: auto; }
  .news__title {
    white-space: normal;
    order: -1;
    width: 100%;
  }

  /* Competitions */
  .competitions__grid.grid--3 {
    grid-template-columns: 1fr;
  }

  /* Stats */
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats__number { font-size: 2rem; }
  .stats__unit { font-size: 1rem; }

  /* Gallery */
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
  }
  .gallery__item--wide { grid-column: span 2; }

  /* Sponsors wall — 모바일 컬럼 압축 */
  .sponsors-wall__grid--gold,
  .sponsors-wall__grid--silver,
  .sponsors-wall__grid--partner { grid-template-columns: repeat(2, 1fr) !important; }
  .sponsors-wall__grid--in-kind { grid-template-columns: repeat(3, 1fr) !important; }

  /* SNS */
  .sns__grid {
    grid-template-columns: 1fr;
  }
  .sns__card {
    flex-direction: row;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /* Sections */
  .section { padding: var(--space-2xl) 0; }
  .section__title { font-size: 1.5rem; }

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

  /* Body padding for fixed header */
  body { padding-top: var(--header-height-mobile); }
}

/* ── Tablet (768px - 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .header__top-bar { display: none; }
  .nav__menu { display: none; }
  .header__auth { display: none; }
  .header__hamburger { display: flex; }

  .hero { height: 65vh; }
  .hero__title { font-size: 2.5rem; }

  .quick-menu__grid {
    flex-wrap: wrap;
    gap: var(--space-lg);
    padding: var(--space-xl);
  }

  .competitions__grid.grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .sponsors-wall__grid--gold,
  .sponsors-wall__grid--silver,
  .sponsors-wall__grid--partner { grid-template-columns: repeat(3, 1fr); }
  .sponsors-wall__grid--in-kind { grid-template-columns: repeat(4, 1fr); }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  body { padding-top: var(--header-height-mobile); }
}

/* ── Desktop (>= 1024px) ── */
@media (min-width: 1024px) {
  body { padding-top: calc(var(--header-height) + 32px); }
  /* 32px accounts for top bar height */

  .header__hamburger { display: none; }
  .header__mobile-menu { display: none; }
  .header__overlay { display: none; }
}

/* ── Wide (>= 1440px) ── */
@media (min-width: 1440px) {
  .container { padding: 0 var(--space-xl); }
  .hero__title { font-size: 4rem; }
}

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