/* ===========================================
   VHS Now — Responsive Breakpoints
   768px (tablet), 600px (small), 480px (phone)
   =========================================== */

/* ── Tablet (768px) ── */
@media (max-width: 768px) {
  /* ── Standard Nav (lab/contact) → hamburger ── */
  .nav__links {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    flex-direction: column;
    background: rgba(26, 23, 32, 0.98);
    border-bottom: 1px solid rgba(0, 255, 65, 0.1);
    padding: var(--space-md) 0;
    gap: 0;
  }

  .nav__links.open {
    display: flex;
  }

  .nav__link {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  }

  .nav__hamburger {
    display: flex;
  }

  /* ── Cassette Nav → hamburger ── */
  .vhs-cassette__nav-links {
    display: none;
    position: absolute;
    top: 100%;
    right: 5%;
    flex-direction: column;
    background: rgba(20, 20, 28, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 0 4px 4px;
    padding: var(--space-sm) 0;
    min-width: 140px;
  }

  .vhs-cassette__nav-links.open {
    display: flex;
  }

  .vhs-cassette__nav-link {
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.7rem;
  }

  .vhs-cassette__nav-hamburger {
    display: flex;
  }

  /* ── Cassette nav ── */
  .vhs-cassette__nav {
    top: 6%;
    height: 7.15%;
  }

  /* ── Label text — scale down for tablet ── */
  .vhs-cassette__title {
    font-size: clamp(1.21rem, 3.85vw, 2.75rem);
    letter-spacing: 5px;
  }

  .vhs-label__tagline {
    font-size: clamp(0.495rem, 1.43vw, 0.935rem);
    letter-spacing: 3px;
    margin-bottom: clamp(3px, 0.8vw, 8px);
  }

  .vhs-label__step-num {
    font-size: clamp(1.1rem, 3.52vw, 2.42rem);
  }

  .vhs-label__step-word {
    font-size: clamp(0.44rem, 1.21vw, 0.88rem);
    letter-spacing: 2px;
  }

  .vhs-label__bar--top {
    margin-bottom: clamp(4px, 1vw, 10px);
  }

  .vhs-label__accent-line {
    margin-bottom: clamp(4px, 1vw, 10px);
  }

  /* ── Service Areas → 2 columns ── */
  .service-areas__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Pricing back cover → stack ── */
  .vhs-back__content {
    grid-template-columns: 1fr;
  }

  .vhs-back__synopsis {
    border-right: none;
    border-bottom: 1px solid #2a2a3e;
  }

  .vhs-back__specs {
    grid-template-columns: 1fr;
  }

  .vhs-back__spec-group {
    border-right: none;
    border-bottom: 1px solid #2a2a3e;
  }

  .vhs-back__spec-group:last-child {
    border-bottom: none;
  }

  /* ── Footer → 1 column ── */
  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    text-align: center;
  }

  /* ── Lab page → stack text + image ── */
  .lab-content {
    grid-template-columns: 1fr;
  }

  .lab-content--reverse {
    direction: ltr;
  }

  /* ── Typography ── */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }

  .section-title {
    font-size: 1.6rem;
    letter-spacing: 2px;
  }
}

/* ── Small (600px) ── */
@media (max-width: 600px) {
  /* ── Cassette full-bleed for more label space ── */
  .hero {
    padding: var(--space-sm) 0 var(--space-lg);
  }

  .vhs-cassette {
    max-width: 100%;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Nav bar */
  .vhs-cassette__nav {
    top: 5.5%;
    height: 7%;
  }

  /* Label text — tuned to fit label at this size */
  .vhs-cassette__title {
    font-size: clamp(0.99rem, 3.3vw, 1.76rem);
    letter-spacing: 3px;
  }

  .vhs-label__tagline {
    font-size: clamp(0.385rem, 1.21vw, 0.66rem);
    letter-spacing: 2px;
    margin-bottom: 2px;
  }

  .vhs-label__step-num {
    font-size: clamp(0.935rem, 3.08vw, 1.76rem);
  }

  .vhs-label__step-word {
    font-size: clamp(0.352rem, 1.045vw, 0.66rem);
    letter-spacing: 1px;
  }

  .vhs-label__bar {
    height: clamp(2px, 0.5vw, 4px);
  }

  .vhs-label__bar--top {
    margin-bottom: 2px;
  }

  .vhs-label__accent-line {
    margin-bottom: 2px;
  }

  .vhs-label__step {
    padding: 0 clamp(4px, 1.5vw, 14px);
  }

  .vhs-label__step--divider {
    height: clamp(12px, 2.5vw, 22px);
  }

  .vhs-cassette__label-overlay {
    padding: 2.5% 4% 2%;
  }

  .vhs-label__formats {
    display: none;
  }

  /* Service Areas → 1 column */
  .service-areas__grid {
    grid-template-columns: 1fr;
  }

  /* Hero CTAs stack */
  .hero__ctas {
    flex-direction: column;
    align-items: center;
  }

  .hero__ctas .btn {
    width: 100%;
    max-width: 280px;
  }

  /* Studio bar stack */
  .vhs-back__studio-bar {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }

  .vhs-back__top-bar {
    flex-direction: column;
    gap: var(--space-xs);
    text-align: center;
  }

  /* Section padding */
  section {
    padding: var(--space-xl) 0;
  }
}

/* ── Phone (480px) ── */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-md);
  }

  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }

  .section-title {
    font-size: 1.3rem;
    letter-spacing: 1px;
  }

  /* Cassette nav */
  .vhs-cassette__nav-logo {
    font-size: 0.7rem;
    letter-spacing: 4px;
  }

  .vhs-cassette__nav {
    top: 5%;
    height: 7%;
    padding: 0 3%;
  }

  /* Label text — smallest readable sizes */
  .vhs-cassette__title {
    font-size: clamp(0.825rem, 3.08vw, 1.32rem);
    letter-spacing: 2px;
  }

  .vhs-label__tagline {
    font-size: 0.44rem;
    letter-spacing: 1px;
    margin-bottom: 1px;
  }

  .vhs-label__step-num {
    font-size: clamp(0.77rem, 2.75vw, 1.32rem);
  }

  .vhs-label__step-word {
    font-size: 0.385rem;
    letter-spacing: 1px;
  }

  .vhs-label__bar {
    height: 1px;
  }

  .vhs-label__bar--top {
    margin-bottom: 1px;
  }

  .vhs-label__accent-line {
    height: 1px;
    margin-bottom: 1px;
  }

  .vhs-cassette__label-overlay {
    padding: 2% 3% 1%;
  }

  .vhs-label__easter-egg {
    display: none;
  }

  /* Pricing */
  .vhs-back__rating-box {
    padding: var(--space-md);
  }

  .vhs-back__price-free {
    font-size: 1.3rem;
  }

  .vhs-back__price-additional {
    font-size: 1.4rem;
  }

  /* Contact card */
  .contact-card {
    padding: var(--space-lg);
  }

  .contact-card__item {
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* Equipment */
  .equipment__grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer__col h4 {
    font-size: 0.8rem;
  }

  .footer__col p,
  .footer__col a {
    font-size: 0.8rem;
  }

  /* Button sizing */
  .btn {
    padding: 0.7rem 1.5rem;
    font-size: 0.85rem;
    letter-spacing: 1px;
  }
}