/* ==========================================================================
   INSOMNIA — Responsive breakpoints
   Mobile is the base (style.css). This file layers on tablet + desktop.
   ========================================================================== */

/* ---------- Tablet: 600px+ ---------- */
@media (min-width: 600px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .details-grid { grid-template-columns: repeat(4, 1fr); }
  .pillars { grid-template-columns: repeat(4, 1fr); }
  .check-list, .badge-list { grid-template-columns: repeat(2, 1fr); }
  .masonry { columns: 3 200px; }
  .hero__cta { gap: 16px; }
}

/* ---------- Tablet/small-desktop: 768px+ ---------- */
@media (min-width: 768px) {
  :root { --gutter: 32px; }

  .steps { flex-direction: row; gap: 0; counter-reset: none; }
  .steps__item {
    flex: 1;
    border-left: none;
    border-top: 2px dashed var(--line-gold);
    padding: 50px 20px 0;
    margin-left: 0;
    text-align: center;
  }
  .steps__item:last-child { border-top-color: var(--line-gold); }
  .steps__number { left: 50%; top: -25px; transform: translateX(-50%); }

  .video-player { max-width: 340px; }
}

/* ---------- Desktop: 1024px+ ---------- */
@media (min-width: 1024px) {
  section { padding-block: 120px; }

  /* Navbar */
  .navbar__nav { display: block; }
  .navbar__links { display: flex; align-items: center; gap: 30px; }
  .navbar__links a {
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    position: relative;
    padding-block: 6px;
  }
  .navbar__links a::after {
    content: '';
    position: absolute; left: 0; right: 100%; bottom: 0;
    height: 2px; background: var(--gold-highlight);
    transition: right var(--dur-fast) var(--ease);
  }
  .navbar__links a:hover::after { right: 0; }
  .navbar__cta { display: inline-flex; }
  .navbar__burger { display: none; }

  /* Hero */
  .hero__content { padding-inline: 48px; }
  .hero__content > * { max-width: 640px; }
  .hero__meta, .hero__cta { max-width: none; }

  /* Recognition */
  .recognition__list { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 40px; }
  .recognition__list li { padding-bottom: 0; border-bottom: none !important; width: auto; }
  .recognition__list li:not(:last-child)::after {
    content: '';
    position: absolute; right: -20px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold);
  }

  /* Experience */
  .cards-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }

  /* Artist */
  .artist__grid { grid-template-columns: 0.9fr 1.1fr; gap: 80px; }
  .artist__media { max-width: none; }
  .why-attend__inner { max-width: 900px; }

  /* Gallery */
  .masonry { columns: 4 220px; }

  /* Details */
  .map-card { height: 420px; }

  /* Partner */
  .partner__grid { grid-template-columns: 0.8fr 1.2fr; gap: 90px; }

  /* Footer */
  .footer__grid { grid-template-columns: 1.4fr 0.8fr 1fr 1fr; gap: 30px; }

  /* Floating CTA becomes a compact anchored widget on desktop */
  .floating-cta {
    left: auto;
    right: 28px;
    bottom: 28px;
    width: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    padding: 14px;
    box-shadow: var(--shadow-soft);
  }
  .floating-cta__btn { padding-inline: 22px; }
  .back-to-top { bottom: 28px; right: 320px; }
}

/* ---------- Large desktop: 1280px+ ---------- */
@media (min-width: 1280px) {
  .hero__title { font-size: 5.6rem; }
  .final-cta { padding-block: 150px; }
}

/* ---------- Fine pointer (mouse) only: enable hover-driven parallax hooks ---------- */
@media (hover: hover) and (pointer: fine) {
  .feature-card, .masonry__item, .pillar { will-change: transform; }
}