/**
 * SKIN CANCER LASER CENTRE — V3.0 Light Edition
 * Responsive overrides
 * Version: 3.0.0
 */

/* ============================================
   TABLET (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
  /* Nav collapses to burger */
  .nav-left, .nav-right { gap: 18px; }
  .nav-link { font-size: 0.68rem; letter-spacing: 0.12em; }
  .nav-logo-pill { padding: 5px 10px; }
  .nav-logo-img { width: 90px; }
  .nav-cta { padding: 9px 16px; font-size: 0.68rem; }

  /* Hero */
  .hero { min-height: 88vh; padding: 100px 16px 60px; }
  .hero-card { padding: 32px 28px; }

  /* About */
  .about-grid { gap: 50px; }

  /* Value strip — 2 columns */
  .value-strip-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px 0;
  }
  .value-strip-item {
    text-align: center;
  }
  .value-strip-item:nth-child(2) { border-right: 0; padding-right: 0; }
  .value-strip-item:not(:last-child) { border-right: 0; }

  /* Services carousel — 2 cards visible on tablet */
  .services-carousel { padding: 0 50px; }
  .service-card-img { flex: 0 0 calc((100% - 18px) / 2); }

  /* SKIN THAT GLOWS thumbs */
  .skin-glows-thumbs { grid-template-columns: repeat(3, 1fr); }
  .skin-glows-thumbs .skin-glows-thumb:nth-child(4),
  .skin-glows-thumbs .skin-glows-thumb:nth-child(5) { display: none; }

  /* Membership */
  .membership-grid { grid-template-columns: 1fr; min-height: auto; }
  .membership-image { aspect-ratio: 16 / 9; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; gap: 30px; }
  .testimonial-image { aspect-ratio: 16 / 9; }

  /* Schedule */
  .schedule-grid { grid-template-columns: 1fr; gap: 30px; }
  .schedule-image { aspect-ratio: 16 / 9; }

  /* Footer */
  .footer-info { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-info-col:nth-child(3) { grid-column: 1 / -1; text-align: center; }
  .footer-info-col:nth-child(3) .footer-social { justify-content: center; }
}

/* ============================================
   MOBILE (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
  /* Hero background: static Sydney Harbour Bridge image on all viewports
     (video element removed in V3.4.0 — no separate mobile downgrade needed) */
  .hero-bg-static { display: block; }

  /* V3.4.0 — About stats: 2x2 on mobile */
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .hero-stats { gap: 18px; }

  /* Journey stack on mobile */
  .journey-grid { grid-template-columns: 1fr; gap: 32px; }
  .journey-image { aspect-ratio: 16 / 10; }

  /* Nav: only logo + burger + version pill */
  .nav-left, .nav-right > .nav-link, .nav-right > .nav-lang, .nav-right > .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .nav-version-pill { margin-right: 0; font-size: 0.55rem; padding: 2px 7px; }
  .nav-container { height: 64px; }
  .nav-logo { margin: 0 auto; }
  .nav-right { justify-content: flex-end; }
  .nav-logo-pill { padding: 4px 8px; }
  .nav-logo-img { width: 80px; }

  /* Hero */
  .hero { min-height: 80vh; padding: 90px 16px 40px; }
  .hero-card { padding: 26px 20px; }
  .hero-ctas { flex-direction: column; gap: 10px; }
  .hero-ctas .btn { width: 100%; }
  .hero-desc { font-size: 0.88rem; }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 30px; }
  .about-image { aspect-ratio: 4 / 3; }

  /* Value strip — single column */
  .value-strip-grid { grid-template-columns: 1fr; gap: 8px; }
  .value-strip-item { padding: 6px 0; }

  /* Services carousel — 1.2 cards on mobile (peek of next) */
  .services-carousel { padding: 0 16px; }
  .service-card-img { flex: 0 0 78%; }

  /* Italic quote */
  .italic-quote { font-size: 1.4rem; }

  /* SKIN THAT GLOWS thumbs */
  .skin-glows-thumbs { grid-template-columns: repeat(2, 1fr); }
  .skin-glows-thumbs .skin-glows-thumb:nth-child(n+5) { display: none; }

  /* Membership */
  .membership-text { padding: 36px 28px; }

  /* Team cards */
  .team-grid { grid-template-columns: 1fr; }

  /* Summary quote */
  .summary-text { font-size: 1.4rem; }

  /* FAQ */
  .faq-question { font-size: 1.0rem; padding: 18px 0; }
  .faq-answer p { font-size: 0.88rem; }

  /* Instagram */
  .insta-controls { margin-top: 24px; }

  /* Schedule */
  .schedule-title { font-size: 1.8rem; }
  .schedule-phone { font-size: 1rem; }

  /* Footer */
  .footer-nav { gap: 18px; padding-bottom: 30px; }
  .footer-nav a { font-size: 0.65rem; }
  .footer-info { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; text-align: center; }
  .footer-info-col { text-align: center !important; }
  .footer-info-col .footer-social { justify-content: center !important; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-bottom-right { justify-content: center; }

  /* Back to top */
  .back-to-top { right: 16px; bottom: 16px; width: 40px; height: 40px; }

  /* Services list page */
  .svc-cat-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .svc-cat-nav { gap: 6px; margin-bottom: 32px; }
  .svc-cat-pill { padding: 8px 14px; font-size: 0.65rem; }
}

/* ============================================
   SMALL MOBILE (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
  :root {
    --container-pad: 16px;
  }
  .hero-title { font-size: 1.8rem; }
  .section-title { font-size: 1.6rem; }
  .italic-quote { font-size: 1.2rem; }
  .summary-text { font-size: 1.2rem; }
  .schedule-title { font-size: 1.5rem; }

  /* Services list page — single column */
  .svc-cat-grid { grid-template-columns: 1fr; gap: 14px; }
  .svc-cat-pill { padding: 7px 10px; font-size: 0.6rem; letter-spacing: 0.1em; }
}