/* ============================================
   MOONSTRUCK VIDEOS — Mobile Optimization v2
   Comprehensive mobile-first responsive fixes
   ============================================ */

/* ---------- BASE RESPONSIVE RESETS ---------- */
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; }

/* ---------- GLOBAL OVERFLOW PROTECTION ---------- */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ---------- FLUID TYPOGRAPHY ---------- */
html { font-size: clamp(15px, 1vw + 12px, 18px); }
h1, .hero-title { font-size: clamp(1.8rem, 5vw + 1rem, 4rem); }
h2 { font-size: clamp(1.4rem, 3vw + 0.8rem, 2.5rem); }
h3 { font-size: clamp(1.1rem, 2vw + 0.7rem, 1.8rem); }

/* ---------- FIX LAZY LOAD INVISIBLE IMAGES ---------- */
img[loading="lazy"] {
  opacity: 1 !important;
}

img[loading="lazy"]:not(.loaded) {
  opacity: 0.01;
  transition: opacity 0.4s ease;
}

img[loading="lazy"].loaded {
  opacity: 1 !important;
}

/* ---------- LAZY LOADING HINT ---------- */
img[loading="lazy"] {
  content-visibility: auto;
}

/* ---------- RESPONSIVE IMAGES (catch-all) ---------- */
img {
  max-width: 100%;
  height: auto;
}

/* ---------- TOUCH TARGETS — minimum 44px ---------- */
a, button, input[type="submit"], .nav-link, .btn, .cta-button {
  min-height: 44px;
  min-width: 44px;
}

/* ---------- MOBILE NAV: TOUCH TARGET FIX ---------- */
.nav-mobile a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 12px 0;
}

/* Hamburger touch target */
.nav-hamburger {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Theme toggle touch target */
.theme-toggle {
  min-width: 44px;
  min-height: 44px;
}

/* ---------- MOBILE NAV DRAWER (< 768px) ---------- */
@media (max-width: 768px) {
  .nav-toggle, .menu-toggle, .hamburger {
    display: flex !important;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
}

/* ---------- MOBILE BREAKPOINT (< 640px) ---------- */
@media (max-width: 640px) {

  /* Container padding */
  .container,
  .container--narrow,
  .container--default {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Hero section mobile */
  .hero--home {
    min-height: 70vh;
    padding: 60px 16px 40px;
  }

  .hero-title {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    line-height: 1.2;
  }

  .hero-subtitle {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    line-height: 1.5;
  }

  .hero-content {
    padding: var(--space-6) var(--space-4);
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }

  .hero-actions .btn {
    display: block;
    width: 100%;
    max-width: 320px;
    text-align: center;
    justify-content: center;
    min-height: 52px;
    font-size: var(--text-sm);
    border-radius: 8px;
    padding: 16px 24px;
  }

  /* Page hero */
  .page-hero {
    padding-block: clamp(var(--space-10), 8vw, var(--space-20));
  }

  .page-hero-title {
    font-size: clamp(1.75rem, 1rem + 4vw, 2.5rem);
  }

  /* Section spacing tighter on mobile */
  .section {
    padding-block: clamp(var(--space-8), 6vw, var(--space-16));
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ===== HOMEPAGE PACKAGES GRID FIX ===== */
  [aria-labelledby="packages-heading"] > .container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
  }

  [aria-labelledby="packages-heading"] .card-body {
    padding: var(--space-6) !important;
  }

  /* Stats row */
  .stats-row {
    gap: var(--space-4);
  }

  .stat-number {
    font-size: var(--text-xl);
  }

  /* Film cards grid — stack on mobile */
  .films-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-4);
  }

  .film-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .film-card-body {
    padding: var(--space-4);
  }

  /* Testimonials */
  .testimonials-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-4);
  }

  .testimonial-card {
    padding: var(--space-6);
  }

  .testimonial-text {
    font-size: var(--text-base);
  }

  /* CTA section */
  .cta-section .display-heading {
    font-size: clamp(1.5rem, 1rem + 3vw, 2.25rem);
  }

  .cta-section .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .cta-section .hero-actions .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Intro section */
  .intro-layout {
    grid-template-columns: 1fr !important;
  }

  .intro-image-frame {
    aspect-ratio: 4/3;
  }

  .intro-quote {
    font-size: var(--text-base);
  }

  /* Section headings */
  .section-heading {
    font-size: clamp(1.25rem, 0.8rem + 2.5vw, 1.75rem);
  }

  .display-heading {
    font-size: clamp(1.5rem, 1rem + 3vw, 2.25rem);
  }

  /* Footer */
  .site-footer {
    padding: 40px 16px;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .footer-bottom {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    flex-direction: column;
    text-align: center;
    gap: var(--space-2);
  }

  /* All buttons minimum touch target */
  .btn {
    min-height: 48px;
    padding: var(--space-3) var(--space-6);
  }

  .btn-nav-cta {
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
  }

  /* CTA buttons — large and thumb-friendly */
  .btn, .cta-button, .cta-btn, a.btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px 24px;
    font-size: 1rem;
    min-height: 52px;
    border-radius: 8px;
  }

  /* Contact form inputs */
  .form-input,
  .form-select,
  .form-textarea {
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    font-size: 16px;
  }

  .form-submit {
    min-height: 52px;
    font-size: var(--text-base);
  }

  /* Packages page specific */
  .packages-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-6);
  }

  .package-header {
    padding: var(--space-6);
  }

  .package-body {
    padding: var(--space-6);
  }

  .package-name {
    font-size: clamp(1.5rem, 1rem + 2vw, 2rem);
  }

  .package-price {
    font-size: clamp(1.75rem, 1rem + 3vw, 2.5rem);
  }

  /* Portfolio grid — stack on mobile */
  .portfolio-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }

  .portfolio-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .portfolio-card-body {
    padding: var(--space-4);
  }

  /* Blog grid — stack on mobile */
  .blog-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px;
    padding: 0;
  }

  .blog-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .blog-card-body {
    padding: var(--space-4);
  }

  /* Services grid — stack on mobile */
  .services-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }

  .service-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Use cases grid — stack on mobile */
  .use-cases {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }

  /* About page */
  .about-layout {
    grid-template-columns: 1fr !important;
  }

  .about-body {
    padding-top: 0 !important;
  }

  /* Values grid */
  .values-grid {
    grid-template-columns: 1fr !important;
  }

  /* Favourites grid */
  .favourites-grid {
    grid-template-columns: 1fr !important;
  }

  /* Blog article sidebar */
  .article-layout {
    grid-template-columns: 1fr !important;
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
    gap: var(--space-6) !important;
  }

  .article-sidebar {
    position: static;
    margin-top: var(--space-6);
  }

  .article-body h2 {
    font-size: clamp(1.25rem, 0.8rem + 2vw, 1.5rem);
    margin-top: var(--space-6);
  }

  .article-pullquote {
    padding: var(--space-3) var(--space-4);
    margin: var(--space-6) 0;
  }

  .article-pullquote p {
    font-size: var(--text-lg) !important;
  }

  .article-hero-thumb {
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
  }

  .sidebar-card {
    padding: var(--space-4);
  }

  .venue-num {
    font-size: var(--text-xl);
  }

  /* Contact layout */
  .contact-layout {
    grid-template-columns: 1fr !important;
  }

  .contact-aside {
    position: static;
  }

  .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* FAQ items */
  .faq-question {
    min-height: 48px;
    padding: var(--space-4) 0;
    font-size: var(--text-base);
  }

  /* Breadcrumb */
  .breadcrumb {
    padding: var(--space-3) 0;
  }

  /* Footer link touch targets */
  .footer-col ul a {
    display: inline-block;
    padding: var(--space-1) 0;
    min-height: 36px;
    line-height: 36px;
  }

  .footer-social a {
    min-width: 44px;
    min-height: 44px;
  }

  /* Images responsive in cards */
  .film-card-thumb img, .blog-card-thumb img, .service-card-thumb img,
  .portfolio-card-thumb img, .intro-image-frame img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
  }
}

/* ---------- TABLET ADJUSTMENTS (641px - 900px) ---------- */
@media (min-width: 641px) and (max-width: 900px) {
  .hero-title {
    font-size: clamp(2.5rem, 1rem + 5vw, 4rem);
  }

  [aria-labelledby="packages-heading"] > .container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    max-width: 560px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .films-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-5);
  }

  .blog-grid,
  .portfolio-grid {
    grid-template-columns: 1fr 1fr !important;
  }

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

/* ---------- TABLET MID (769px-1024px) ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .film-grid, .films-grid, .blog-grid, .portfolio-grid,
  .film-cards, .blog-cards, .portfolio-cards {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ---------- SMALL PHONE (< 375px) ---------- */
@media (max-width: 374px) {
  .container,
  .container--narrow,
  .container--default {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .hero-title {
    font-size: clamp(1.75rem, 0.5rem + 7vw, 2.5rem);
  }

  .nav-logo-text {
    font-size: var(--text-base);
  }

  .stats-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
}

/* ---------- HOMEPAGE PACKAGES GRID (class target) ---------- */
@media (max-width: 700px) {
  .home-packages-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  .home-packages-grid {
    grid-template-columns: 1fr !important;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- TOUCH TARGETS (all interactive elements) ---------- */
@media (pointer: coarse) {
  a, button, [role="button"],
  input[type="submit"], input[type="button"],
  .film-card, .testimonial-card a {
    min-height: 44px;
  }

  .nav-mobile a {
    min-height: 48px;
    padding: 14px 0;
  }

  .footer-col ul li {
    min-height: 40px;
    display: flex;
    align-items: center;
  }

  .faq-question {
    min-height: 48px;
  }

  .form-submit {
    min-height: 52px;
  }
}

/* ---------- LANDSCAPE PHONE FIXES ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-block: var(--space-12);
  }

  .hero--home {
    min-height: auto;
  }
}

/* ---------- PREVENT IOS TEXT SIZE INFLATION ---------- */
@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ---------- SAFE AREA INSETS (iPhone X+) ---------- */
@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: calc(var(--space-12) + env(safe-area-inset-bottom));
  }

  .nav-mobile {
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  }
}

/* ---------- PRINT (minimal) ---------- */
@media print {
  .site-header,
  .nav-hamburger,
  .theme-toggle,
  .hero-scroll-hint,
  .hero-grain,
  .hero-vignette {
    display: none !important;
  }
}