/* ============================================================
   KRIYAATMAK — Responsive + Performance Overhaul
   Append to css/style.css OR link as separate perf.css
   ============================================================ */

/* ── GPU acceleration for animated elements ─────────────── */
.film-card, .service-card, .workshop-card, .exp-card,
.portfolio-item, .gal-cell, .testimonial-card,
.about-stat, .stat-card, .reveal, .reveal-left, .reveal-right {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ── Prevent layout shifts ───────────────────────────────── */
img, video, iframe {
  max-width: 100%;
  height: auto;
}
img { display: block; }

/* ── Reduce motion for battery/performance ───────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .testimonials-track { animation: none; }
  body::before, body::after { animation: none; }
  .hero-bg-grid { animation: none; }
}

/* ── Content visibility optimization ─────────────────────── */
#portfolio, #gallery, #testimonials, #contact, #experiences {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

/* ============================================================
   MOBILE FIRST — Base overrides (applies to all screens,
   desktop exceptions below via min-width queries)
   ============================================================ */

/* ── Navigation mobile ───────────────────────────────────── */
@media (max-width: 768px) {
  :root { --nav-h: 60px; }

  #navbar {
    padding: 0 4%;
    height: var(--nav-h);
  }
  .nav-logo img { height: 36px; }

  .nav-links {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    background: rgba(249,245,238,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    gap: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 8px 24px rgba(42,34,24,0.12);
    display: flex;
  }
  .nav-links.open { max-height: 100vh; overflow-y: auto; }
  .nav-links a {
    padding: 0.9rem 5%;
    border-bottom: 1px solid rgba(184,148,58,0.1);
    font-size: 0.88rem;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
  }
  .nav-links a:last-child { border-bottom: none; }
  .btn-nav {
    margin: 0.8rem 5% 1rem;
    display: block;
    text-align: center;
    width: calc(100% - 10%);
    padding: 0.8rem 1rem !important;
  }
  .nav-toggle { display: flex; }
}

/* ── Section padding mobile ──────────────────────────────── */
@media (max-width: 768px) {
  .section-pad     { padding: 60px 0; }
  .section-pad-sm  { padding: 48px 0; }
  .section-inner   { padding: 0 4%; }
  .section-title   { font-size: clamp(1.9rem, 7vw, 2.8rem); }
  .section-lead    { font-size: 0.92rem; }
}

/* ── Hero mobile ─────────────────────────────────────────── */
@media (max-width: 768px) {
  #home {
    min-height: 100svh; /* small viewport height — avoids browser chrome overlap */
    padding-top: var(--nav-h);
  }
  /* Hero video — reduce quality hint for mobile */
  #heroVideo { object-position: center center; }

  /* Hide scroll hint on small screens */
  .hero-scroll-hint { display: none; }

  /* Hero stats row — wrap neatly */
  #home .hero-stats-row {
    flex-wrap: wrap;
    gap: 1.2rem;
  }
}
@media (max-width: 480px) {
  #home { min-height: 100svh; }
}

/* ── About section mobile ────────────────────────────────── */
@media (max-width: 968px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .about-visual { display: none; } /* heavy video — hide on mobile */
  .about-stats { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 480px) {
  .about-stats { grid-template-columns: 1fr 1fr; }
  .about-stat { padding: 1rem 0.7rem; }
  .about-stat .num { font-size: 1.9rem; }
}

/* ── Portfolio mobile ────────────────────────────────────── */
@media (max-width: 768px) {
  .portfolio-tabs {
    gap: 0.4rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .portfolio-tabs::-webkit-scrollbar { display: none; }
  .tab-btn {
    white-space: nowrap;
    font-size: 0.68rem;
    padding: 0.45rem 1rem;
    flex-shrink: 0;
  }
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
}
@media (max-width: 380px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

/* ── Films mobile ────────────────────────────────────────── */
@media (max-width: 768px) {
  .films-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .film-card { aspect-ratio: 16/9; }
  /* Always show play btn on mobile (no hover) */
  .film-play-btn {
    opacity: 1 !important;
    transform: translate(-50%,-50%) scale(0.85) !important;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  .films-grid { grid-template-columns: repeat(2,1fr); }
}

/* ── Experiences mobile ──────────────────────────────────── */
@media (max-width: 768px) {
  .exp-grid {
    grid-template-columns: repeat(2,1fr);
    gap: 1rem;
  }
  .exp-card-body { padding: 1rem; }
  .exp-card-body h3 { font-size: 1.1rem; }
  .exp-card-body p  { font-size: 0.82rem; }
}
@media (max-width: 480px) {
  .exp-grid { grid-template-columns: 1fr; }
}

/* ── Services mobile ─────────────────────────────────────── */
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .service-card { padding: 1.4rem; }
  .service-card h3 { font-size: 1.25rem; }
  .service-price { font-size: 1.4rem; }
}
@media (min-width: 480px) and (max-width: 768px) {
  .services-grid { grid-template-columns: repeat(2,1fr); }
}

/* ── Workshops mobile ────────────────────────────────────── */
@media (max-width: 768px) {
  .workshops-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .workshop-body { padding: 1.2rem; }
  .workshop-body h3 { font-size: 1.2rem; }
}

/* ── Gallery mobile ──────────────────────────────────────── */
@media (max-width: 900px) {
  .gal-row {
    flex-wrap: wrap;
    height: auto !important;
  }
  .gal-cell {
    flex: 0 0 calc(50% - 0.35rem) !important;
    height: 180px !important;
    min-width: 0 !important;
  }
  .gal-cell img { position: absolute; inset: 0; width: 100%; height: 100%; }
}
@media (max-width: 480px) {
  .gal-cell {
    flex: 0 0 100% !important;
    height: 200px !important;
  }
}
/* Gallery lightbox mobile */
@media (max-width: 768px) {
  #lightbox img { max-width: 96vw; max-height: 80vh; }
  #lightbox button[onclick="lightboxNav(-1)"] { left: 0.5rem; }
  #lightbox button[onclick="lightboxNav(1)"]  { right: 0.5rem; }
}

/* ── Testimonials mobile ─────────────────────────────────── */
@media (max-width: 968px) {
  .testi-map-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .testi-map-iframe { min-height: 260px; }
}
@media (max-width: 768px) {
  .testimonial-card { width: 290px; padding: 1.4rem; }
  .testi-text { font-size: 0.95rem; }
  .testi-map-iframe { min-height: 220px; }
}
@media (max-width: 480px) {
  .testimonial-card { width: 260px; padding: 1.2rem; }
  /* Rating card compact */
  .testi-map-grid > div:first-child { padding: 1.2rem; }
}

/* ── Contact mobile ──────────────────────────────────────── */
@media (max-width: 968px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form { gap: 0.9rem; }
  .contact-info { gap: 1.4rem; }
  .contact-info-item { gap: 0.8rem; }
  .contact-info-icon { width: 38px; height: 38px; font-size: 0.88rem; }
  .contact-social { gap: 0.7rem; }
  .contact-social a { width: 38px; height: 38px; }
}

/* ── Footer mobile ───────────────────────────────────────── */
@media (max-width: 968px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
  .footer-top { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer-brand p { max-width: 100%; }
  .footer-bottom { flex-direction: column; gap: 0.8rem; text-align: center; }
}

/* ── Modal mobile ────────────────────────────────────────── */
@media (max-width: 600px) {
  .modal {
    padding: 1.6rem;
    max-height: 95vh;
    border-radius: 12px 12px 0 0;
    position: fixed;
    bottom: 0;
    left: 0; right: 0;
    margin: 0;
    max-width: 100%;
    transform: translateY(100%) !important;
  }
  .modal-backdrop.active .modal { transform: translateY(0) !important; }
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .modal h2 { font-size: 1.5rem; }
  /* Workshop modal grid → single col on mobile */
  .modal [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Button touch targets ────────────────────────────────── */
@media (max-width: 768px) {
  .btn, .btn-sm, .btn-nav, .tab-btn, .btn-primary, .btn-outline {
    min-height: 44px; /* Apple HIG minimum touch target */
    -webkit-tap-highlight-color: transparent;
  }
  button, a { -webkit-tap-highlight-color: transparent; }
}

/* ── Toast mobile ────────────────────────────────────────── */
@media (max-width: 600px) {
  #toast-container {
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    align-items: stretch;
  }
  .toast {
    min-width: 0;
    max-width: 100%;
  }
}

/* ── Workshop modal price row ────────────────────────────── */
@media (max-width: 480px) {
  .workshop-price-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .workshop-price-row .btn,
  .workshop-price-row button {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   PERFORMANCE — Critical optimizations
   ============================================================ */

/* Lazy-load image placeholder style (prevents layout shift) */
img[loading="lazy"] {
  background: var(--parchment);
}

/* Prevent repaint on scroll for fixed elements */
#navbar, #scroll-progress, #toast-container {
  transform: translateZ(0);
  will-change: transform;
}

/* Testimonials track — use transform for smooth animation (not margin) */
.testimonials-track {
  transform: translateX(0);
  -webkit-overflow-scrolling: touch;
}

/* Remove expensive box-shadows on mobile for perf */
@media (max-width: 768px) {
  .service-card,
  .workshop-card,
  .exp-card,
  .testimonial-card {
    box-shadow: 0 2px 12px rgba(42,34,24,0.08);
  }
  /* Disable hover transforms on touch devices */
  .service-card:hover,
  .workshop-card:hover,
  .exp-card:hover { transform: none; }
}

/* Contain paint for heavy sections */
#films, #gallery, #testimonials {
  contain: layout style;
}

/* ── Fix iOS scroll bounce ────────────────────────────────── */
html { -webkit-overflow-scrolling: touch; }
body { overflow-x: hidden; }

/* ── Fix iOS input zoom ───────────────────────────────────── */
@media (max-width: 768px) {
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px !important; /* iOS auto-zoom prevention */
  }
}

/* ── Fix 100vh on mobile browsers ────────────────────────── */
@supports (height: 100svh) {
  #home { min-height: 100svh; }
}

/* ── Fix sticky nav on iOS ────────────────────────────────── */
#navbar {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}