/* ==========================================================================
   Jukebox To Go — responsive layer (mobile-first, min-width queries)
   Tested widths: 360 · 390 · 768 · 1024 · 1440 · 1920
   ========================================================================== */

/* Small phones */
@media (max-width: 380px) {
  :root { --gutter: 1rem; }
  .logo img { width: 120px; }
  .btn { padding-inline: 1.25rem; }
  .hero-visual .tagline-chip { font-size: var(--fs-xs); padding: 0.5rem 0.9rem; }
}

/* Large phones / small tablets */
@media (min-width: 560px) {
  .hero-points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-grid,
  .post-grid,
  .equip-grid,
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid--2 .field--full { grid-column: 1 / -1; }
}

/* Tablets */
@media (min-width: 768px) {
  :root { --gutter: 2rem; }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--media-right > :first-child { order: 0; }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jump-nav { flex-wrap: wrap; overflow: visible; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .service-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; }
  .service-detail:nth-of-type(even) .service-detail__media { order: 2; }
}

/* Desktop navigation */
@media (min-width: 1024px) {
  :root { --header-h: 80px; }
  .logo img { width: 146px; }
  .nav-toggle { display: none; }
  .site-nav {
    position: static;
    inset: auto;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    padding: 0;
    background: none;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nav-list { display: flex; gap: 0.25rem; }
  .nav-list a {
    position: relative;
    padding: 0.6rem 0.9rem;
    border: 0;
    font-size: 0.9875rem;
    font-weight: 500;
    color: var(--c-gray);
    border-radius: var(--r-sm);
    transition: color 0.2s;
  }
  .nav-list a::after {
    content: "";
    position: absolute;
    left: 0.9rem; right: 0.9rem; bottom: 0.25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-neon);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }
  .nav-list a:hover { color: var(--c-white); }
  .nav-list a:hover::after,
  .nav-list a[aria-current]::after { transform: scaleX(1); }
  .nav-list a[aria-current] { color: var(--c-white); }
  .nav-cta { flex: none; }

  .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 4rem; }
  .hero-visual { width: 100%; max-width: 30rem; margin-right: 0; }

  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .equip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .event-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .step { padding: 4.5rem 1.4rem 1.6rem; }
  .step::before { top: 1.4rem; }
  .steps .step:not(:last-child)::after {
    /* connector line between steps */
    content: "";
    position: absolute;
    top: 2.6rem;
    left: 4.3rem;
    right: -1rem;
    height: 2px;
    background: linear-gradient(90deg, rgba(25, 191, 255, 0.7), rgba(195, 66, 255, 0.15));
  }
  .contact-layout { grid-template-columns: 1.6fr 1fr; gap: 3rem; }
  .contact-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
  .footer-brand { grid-column: auto; }
  .gallery { gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Mobile drawer CTA spacing */
@media (max-width: 1023.98px) {
  .nav-cta { align-self: stretch; width: 100%; --btn-h: 3.5rem; font-size: 1.0625rem; }
  .site-nav.is-open { padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
}

/* Short phones (e.g. 360x640, landscape): keep every menu item on screen without scrolling */
@media (max-width: 1023.98px) and (max-height: 640px) {
  .site-nav { gap: 1.25rem; padding-top: 1rem; }
  .nav-list a { font-size: 1.375rem; padding: 0.65rem 0; }
}

/* Phones turned sideways: menu links in two columns so everything fits on one screen */
@media (max-width: 1023.98px) and (max-height: 500px) and (orientation: landscape) {
  .site-nav { gap: 1rem; padding-top: 0.75rem; }
  .nav-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .nav-list a { font-size: 1.25rem; padding: 0.55rem 0; }
  .nav-cta { --btn-h: 3rem; }
}

/* Wide desktop */
@media (min-width: 1440px) {
  :root { --container: 80rem; }
  .hero-visual { max-width: 30rem; }
}

@media (min-width: 1920px) {
  :root { --container: 86rem; }
  html { font-size: 106.25%; }
}

/* Landscape phones: keep the hero compact */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-block: 2rem 3rem; }
  .hero-visual { width: min(60%, 18rem); }
}

/* Phones: compact celebration tiles (icon beside the text) */
@media (max-width: 559.98px) {
  .event-tile { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: 0.35rem; padding: 1.25rem; }
  .event-tile .icon-badge { grid-row: span 3; margin-bottom: 0; width: 2.6rem; height: 2.6rem; }
  .event-tile--both .text-link { padding-top: 0.25rem; }
}