/* ═══════════════════════════════════════════════════════════════
   VISION STUDIO — MOBILE PERFORMANCE + UX FIXES
   Surgical additions only. Appended to main.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. MOBILE STICKY CTA BAR ──────────────────────────────────
   Fixed bottom bar on mobile only.
   Black background with gold accents — matches design system.
   ─────────────────────────────────────────────────────────────── */
#vs-mobile-cta {
  display: none; /* hidden by default; media query below sets display:flex on mobile */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8990; /* below mobile nav (8999) but above content */
  background: rgba(3, 3, 3, 0.97);
  border-top: 1px solid rgba(200, 168, 90, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  height: 60px;
  align-items: stretch;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.5s cubic-bezier(0.76, 0, 0.24, 1),
              transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  /* Safe area for iOS notch/home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  will-change: transform, opacity;
}

#vs-mobile-cta.vs-mcta-visible {
  opacity: 1;
  transform: translateY(0);
}

.vs-mcta-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ff-mono, 'Space Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  -webkit-tap-highlight-color: transparent;
  min-height: 60px;
}

.vs-mcta-btn:active {
  background: rgba(200, 168, 90, 0.08);
}

.vs-mcta-call {
  color: rgba(255, 255, 255, 0.85);
}

.vs-mcta-quote {
  background: rgba(200, 168, 90, 0.12);
  color: var(--c-gold, #c8a85a);
  font-weight: 600;
}

.vs-mcta-quote:active {
  background: rgba(200, 168, 90, 0.22);
}

.vs-mcta-divider {
  width: 1px;
  background: rgba(200, 168, 90, 0.2);
  align-self: stretch;
  margin: 12px 0;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  #vs-mobile-cta {
    display: flex;
  }

  /* Prevent content from hiding behind CTA bar */
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── 2. MOBILE SPACING + OVERFLOW FIXES ────────────────────────
   ─────────────────────────────────────────────────────────────── */

/* Prevent horizontal overflow on all sections */
@media (max-width: 767px) {
  .sec,
  section,
  .stats-section,
  .discipline-block,
  .featured-case,
  .showreel-sec,
  .hs-section,
  .cta-band {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* logos-section: iOS Safari kills CSS transform animations when
     overflow:hidden is on a parent element. Use clip-path instead —
     same visual clipping, no animation interference. */
  .logos-section {
    overflow: visible !important;
    max-width: 100vw;
    clip-path: inset(0);   /* clips without creating new stacking/overflow ctx */
  }

  /* Consistent mobile padding */
  .sec {
    padding-top: clamp(60px, 10vw, 100px) !important;
    padding-bottom: clamp(60px, 10vw, 100px) !important;
  }

  /* Service grid — single column on small mobile */
  .srv-grid {
    grid-template-columns: 1fr !important;
    gap: 2px;
  }

  .srv-card {
    padding: 36px 24px !important;
  }

  /* About grid — stack */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }

  .about-visual {
    height: 280px !important;
    position: relative !important;
  }

  /* Stats — 2 columns on mobile */
  .stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }

  .stat-divider:nth-child(4) {
    display: none !important; /* hide middle vertical dividers on 2-col layout */
  }

  /* Testimonials — single column */
  .testi-grid {
    grid-template-columns: 1fr !important;
  }

  /* Blog grid — single column */
  .blog-grid {
    grid-template-columns: 1fr !important;
  }

  /* CTA band text size fix */
  .cta-title {
    font-size: clamp(26px, 7vw, 44px) !important;
  }

  /* Featured case study */
  .fc-inner {
    padding: 40px 24px !important;
  }

  .fc-results {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Discipline grid */
  .discipline-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Why VS boxes */
  .diff-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Hero stats — 2×2 grid */
  .hero-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 0 !important;
  }

  /* Showreel section */
  .showreel-inner {
    padding: 0 16px !important;
  }

  /* Footer mobile */
  .ft-main {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }
}

/* ── 3. TOUCH DEVICE: hide heavy animations ─────────────────────
   Reduce parallax + particle effects on mobile to save battery.
   ─────────────────────────────────────────────────────────────── */
@media (hover: none) {
  .wf3-particles {
    display: none !important; /* save GPU on touch devices */
  }

  /* Disable 3D tilt on touch */
  .szv-cine-card {
    transform: none !important;
  }

  /* Disable spotlight sweep on touch */
  .spotlight-sweep-el {
    display: none !important;
  }
}

/* ── 4. REDUCED MOTION: respect OS setting ──────────────────────
   ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .logo-track,
  .logo-row,
  .marquee-track,
  .ct-track {
    animation: none !important;
    transform: none !important;
  }

  .hero-scroll {
    animation: none !important;
    opacity: 0.6 !important;
  }

  .wf3-particles {
    display: none !important;
  }

  /* Still show elements, just without motion */
  [data-reveal]:not(.in),
  .wf3-step {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── 5. IMAGE LAZY LOAD FADE-IN ─────────────────────────────────
   Smooth fade-in when images finish loading.
   ─────────────────────────────────────────────────────────────── */
img[loading="lazy"] {
  transition: opacity 0.4s ease;
}

img.img-loaded {
  opacity: 1 !important;
}

/* ── 6. VIMEO PREVIEW IFRAME BASE STYLE ─────────────────────────
   z-index: 5 puts the iframe above the dark veil (z:2) and the
   ::after gradient (z:4), but below UI overlays (z:6-8).
   ─────────────────────────────────────────────────────────────── */
.pf-vimeo-preview {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: none;
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

.pf-vimeo-preview.playing {
  opacity: 1;
}

/* ── 7. MOBILE NAV SAFE AREA ────────────────────────────────────
   Ensure nav doesn't overlap notch on iPhone.
   ─────────────────────────────────────────────────────────────── */
@supports (padding-top: env(safe-area-inset-top)) {
  #nav {
    padding-top: max(16px, env(safe-area-inset-top));
  }
}

/* ── 8. FONT DISPLAY: prevent FOUT ─────────────────────────────
   ─────────────────────────────────────────────────────────────── */
@font-face {
  font-display: swap; /* ensures text visible during font load */
}

/* ── 9. HORIZONTAL FILMSTRIP: mobile fallback ───────────────────
   On mobile, show as vertical scrollable list (GSAP pin disabled).
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hs-section {
    overflow: visible !important;
  }

  .hs-pin-wrap {
    height: auto !important;
    overflow: visible !important;
  }

  .hs-track {
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    width: 100% !important;
    gap: 2px;
  }

  .hs-slide {
    width: calc(100vw - 32px) !important;
    height: 65vw !important;
    min-height: 220px;
    max-height: 360px;
    flex-shrink: 0;
    margin: 0 auto;
  }

  .hs-counter,
  .hs-progress,
  .hs-hint {
    display: none !important; /* UI chrome unnecessary on vertical scroll */
  }
}


/* ── 10. LOGO IMAGE STYLES ──────────────────────────────────────
   Replace the text + gem nav logo with the actual logo image.
   White logo on dark nav — natural fit.
   ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   CINEMATIC VIEWFINDER LOGO
   ─────────────────────────────────────────────────────────────────
   Kamera-viewfinder sarkok a logo körül: ez egy videós stúdió
   tökéletes vizuális szignálja. A 4 sarokjel mindig finoman látható
   (rest state), hover-re "fókuszál" — a sarkok összehúzódnak és
   bearanyozódnak, a logo shimmer-t kap. Minden HTML változtatás
   nélkül, csak CSS.
   ═══════════════════════════════════════════════════════════════════ */

/* Hide old gem — replaced by viewfinder */
.nav-logo--img .nav-gem {
  display: none !important;
}

/* Wrapper: padding tér a sarokjeleknek */
.nav-logo--img {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  padding: 8px 10px;
  margin: -8px -10px;  /* negate padding so nav layout stays intact */
}

/* ── Viewfinder corner marks via background-image gradients ──────
   8 thin gold lines = 4 sarokban 2-2 (horizontal + vertical).
   No extra elements, no JS, no HTML change.
   ──────────────────────────────────────────────────────────────── */
.nav-logo--img::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 2px;
  background-image:
    /* top-left  — horizontal */ linear-gradient(#c8a85a, #c8a85a),
    /* top-left  — vertical   */ linear-gradient(#c8a85a, #c8a85a),
    /* top-right — horizontal */ linear-gradient(#c8a85a, #c8a85a),
    /* top-right — vertical   */ linear-gradient(#c8a85a, #c8a85a),
    /* btm-left  — horizontal */ linear-gradient(#c8a85a, #c8a85a),
    /* btm-left  — vertical   */ linear-gradient(#c8a85a, #c8a85a),
    /* btm-right — horizontal */ linear-gradient(#c8a85a, #c8a85a),
    /* btm-right — vertical   */ linear-gradient(#c8a85a, #c8a85a);
  background-size:
    16px 1.5px, 1.5px 16px,   /* top-left  */
    16px 1.5px, 1.5px 16px,   /* top-right */
    16px 1.5px, 1.5px 16px,   /* btm-left  */
    16px 1.5px, 1.5px 16px;   /* btm-right */
  background-position:
    0 0,         0 0,          /* top-left  */
    100% 0,      100% 0,       /* top-right */
    0 100%,      0 100%,       /* btm-left  */
    100% 100%,   100% 100%;    /* btm-right */
  background-repeat: no-repeat;
  opacity: 0.3;
  transition:
    opacity   0.45s cubic-bezier(0.22, 1, 0.36, 1),
    inset     0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover: brackets glow gold, slightly shrink inward = "focus lock" */
.nav-logo--img:hover::before {
  opacity: 1;
  inset: 3px;                  /* brackets tighten — camera focus */
  background-image:
    linear-gradient(#e4c878, #e4c878),
    linear-gradient(#e4c878, #e4c878),
    linear-gradient(#e4c878, #e4c878),
    linear-gradient(#e4c878, #e4c878),
    linear-gradient(#e4c878, #e4c878),
    linear-gradient(#e4c878, #e4c878),
    linear-gradient(#e4c878, #e4c878),
    linear-gradient(#e4c878, #e4c878);
  background-size:
    20px 1.5px, 1.5px 20px,
    20px 1.5px, 1.5px 20px,
    20px 1.5px, 1.5px 20px,
    20px 1.5px, 1.5px 20px;
}

/* ── Shimmer sweep REMOVED — replaced with gold glow + scale ─── */
/* ::after no longer used for shimmer; disabled cleanly */
.nav-logo--img::after {
  display: none;
}

/* ── Subtle periodic breathe at rest ── */
@keyframes vf-breathe {
  0%, 85%, 100% { opacity: 0.28; }
  92%            { opacity: 0.5; }
}
.nav-logo--img:not(:hover)::before {
  animation: vf-breathe 5s ease-in-out infinite;
}

/* ── Logo image itself ────────────────────────────────────────── */
.nav-logo-img {
  display: block;
  height: 88px;
  width: auto;
  max-width: 400px;
  object-fit: contain;
  object-position: left center;
  opacity: 0.92;
  filter: brightness(1);
  /* Smooth gold glow + scale on hover */
  transition:
    opacity   0.35s ease,
    filter    0.35s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-logo--img:hover .nav-logo-img {
  opacity: 1;
  /* Richer gold glow — no sweep, just soft radial halo */
  filter: brightness(1.08)
          drop-shadow(0 0 10px rgba(200, 168, 90, 0.65))
          drop-shadow(0 0 24px rgba(200, 168, 90, 0.28));
  transform: scale(1.045);
}

/* ── Footer logo ──────────────────────────────────────────────── */
.nav-logo-img--ft {
  height: 68px;
  max-width: 360px;
  opacity: 0.85;
}

footer .nav-logo--img:hover .nav-logo-img--ft {
  opacity: 1;
  filter: brightness(1.05) drop-shadow(0 0 12px rgba(200, 168, 90, 0.35));
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav-logo-img {
    height: 74px;
    max-width: 340px;
  }
  .nav-logo--img::before {
    background-size:
      13px 1.5px, 1.5px 13px,
      13px 1.5px, 1.5px 13px,
      13px 1.5px, 1.5px 13px,
      13px 1.5px, 1.5px 13px;
  }
}

@media (max-width: 480px) {
  .nav-logo-img {
    height: 58px;
    max-width: 260px;
  }
  .nav-logo--img {
    padding: 6px 7px;
    margin: -6px -7px;
  }
  .nav-logo--img::before {
    background-size:
      10px 1px, 1px 10px,
      10px 1px, 1px 10px,
      10px 1px, 1px 10px,
      10px 1px, 1px 10px;
  }
}


/* ════════════════════════════════════════════════════════════════
   MOBILE LAYOUT & SPACING — v2
   RULE: no visual effects removed, no animations disabled,
   no colours changed. Only spacing, sizing, and touch targets.
   ════════════════════════════════════════════════════════════════ */

/* ── iOS input zoom prevention ──────────────────────────────────
   iOS Safari zooms in on any input with font-size < 16px.
   Setting 16px prevents that without changing the look (rem/em
   scaling means 16px looks the same as the design expects).
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  input,
  textarea,
  select {
    font-size: 16px !important; /* prevent iOS zoom */
  }
}

/* ── Minimum touch target size (44×44px) ────────────────────────
   Per Apple HIG and WCAG 2.5.5 — interactive elements must be
   at least 44px in the tap dimension. We only increase min-height
   (and padding where needed) — never reduce visual size.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Nav burger */
  .nav-burger {
    min-width:  44px !important;
    min-height: 44px !important;
  }

  /* FAQ items */
  .faq-q {
    min-height: 52px !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Footer links */
  .ft-links a,
  .ft-contact-v a {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* CTA buttons */
  .btn-gold,
  .nav-btn,
  a[class*="btn"],
  button[class*="btn"] {
    min-height: 48px !important;
  }

  /* Mobile CTA bar buttons already 60px — no change needed */
}

/* ── Safe area insets (iPhone notch / Dynamic Island / home bar) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  footer {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }

  #nav {
    padding-left:  max(var(--gutter, 24px), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter, 24px), env(safe-area-inset-right, 0px));
  }
}

/* ── Hero: use svh on iOS so height = visible area, not full URL-bar height */
@media (max-width: 767px) {
  #hero {
    min-height: 100svh !important;
  }
}

/* ── Contact form layout: stack on narrow screens ────────────── */
@media (max-width: 767px) {
  .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .budget-options {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .form-submit {
    width: 100% !important;
    min-height: 52px !important;
  }
}

/* ── Portfolio grid: single column on narrow mobile ─────────── */
@media (max-width: 480px) {
  #pf-grid {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }

  /* FIX: pf-item uses aspect-ratio:16/9 by default (~242px),
     but pf-card inside it was set to 64vw (~275px on iPhone 15 Pro Max).
     This mismatch caused cards to overflow into each other.
     Solution: remove aspect-ratio on pf-item and set explicit height
     so the grid row matches the card height exactly. */
  .pf-item {
    aspect-ratio: unset !important;
    height: 64vw !important;
    min-height: 200px !important;
  }

  .pf-card {
    height: 100% !important;
    min-height: 200px !important;
  }
}

/* ── Sections: consistent breathing room on mobile ───────────── */
@media (max-width: 767px) {
  section.sec,
  .sec {
    padding-top:    clamp(56px, 10vw, 88px) !important;
    padding-bottom: clamp(56px, 10vw, 88px) !important;
  }

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

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

  .diff-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .ft-main {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .ft-bottom {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ── Horizontal filmstrip: vertical stack on mobile ─────────── */
@media (max-width: 768px) {
  .hs-pin-wrap {
    height: auto !important;
    overflow: visible !important;
  }

  .hs-track {
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    width: 100% !important;
    gap: 2px !important;
  }

  .hs-slide {
    width: calc(100vw - 32px) !important;
    height: 60vw !important;
    min-height: 220px !important;
    max-height: 340px !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
  }

  .hs-counter,
  .hs-progress,
  .hs-hint {
    display: none !important;
  }
}

/* ── Service grid: single column on small mobile ─────────────── */
@media (max-width: 480px) {
  .srv-grid {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }

  .srv-card {
    padding: 32px 20px !important;
  }
}

/* ── About grid: stack ──────────────────────────────────────── */
@media (max-width: 767px) {
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .about-visual {
    height: 280px !important;
    position: relative !important;
  }
}

/* ── Featured case: full width info block ────────────────────── */
@media (max-width: 767px) {
  .fc-inner {
    padding: 36px 20px !important;
  }

  .fc-results {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
}

/* ── Discipline grid: 2 cols on mobile ───────────────────────── */
@media (max-width: 480px) {
  .discipline-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Hero stats: 2×2 on mobile ───────────────────────────────── */
@media (max-width: 767px) {
  .hero-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 0 !important;
  }
}

/* ── Page hero (interior pages) ──────────────────────────────── */
@media (max-width: 767px) {
  .page-hero {
    padding-top: clamp(90px, 20vw, 130px) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE NAV MENU OVERLAY REDESIGN
   Root cause fix: #nav gets inline transform:translateY(0) from
   the hide-on-scroll JS. Any transform on a parent creates a new
   containing block for position:fixed children, so the overlay
   only covered the nav height (~72px) instead of the full viewport.
   JS fix: burger click clears the inline transform before opening.
   CSS fix: ensure full-viewport coverage and readability.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Full-screen overlay */
  .nav-menu.nav-open {
    display:         flex !important;
    flex-direction:  column !important;
    position:        fixed !important;
    top:             0 !important;
    left:            0 !important;
    width:           100vw !important;
    height:          100dvh !important; /* fallback below */
    min-height:      100vh !important;
    background:      rgba(3, 3, 3, 0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    z-index:         9998 !important; /* above everything */
    justify-content: center !important;
    align-items:     center !important;
    gap:             0 !important;     /* use li padding instead */
    padding:         80px 40px 40px !important; /* clear top for burger */
    overflow-y:      auto !important;
    -webkit-overflow-scrolling: touch;
    /* Subtle gold top border for cinematic feel */
    border-top:      2px solid rgba(200, 168, 90, 0.4) !important;
  }

  /* Each menu item */
  .nav-menu.nav-open li {
    width:      100%;
    text-align: center;
    border-bottom: 1px solid rgba(200, 168, 90, 0.08);
    list-style: none;
  }

  .nav-menu.nav-open li:first-child {
    border-top: 1px solid rgba(200, 168, 90, 0.08);
  }

  /* Large, tappable links */
  .nav-menu.nav-open li a {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    min-height:      62px !important;
    width:           100% !important;
    font-family:     var(--ff-mono) !important;
    font-size:       13px !important;
    letter-spacing:  0.35em !important;
    text-transform:  uppercase !important;
    color:           var(--c-light) !important;
    text-decoration: none !important;
    transition:      color 0.25s, background 0.25s !important;
    padding:         0 24px !important;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-menu.nav-open li a:hover,
  .nav-menu.nav-open li a.active {
    color:      var(--c-gold) !important;
    background: rgba(200, 168, 90, 0.04) !important;
  }

  /* Active indicator dash */
  .nav-menu.nav-open li a.active::before {
    content:     '—';
    margin-right: 12px;
    color:        var(--c-gold);
    font-size:    10px;
  }

  /* Remove desktop underline pseudo-element */
  .nav-menu.nav-open li a::after {
    display: none !important;
  }

  /* Scanline texture for cinematic depth */
  .nav-menu.nav-open::before {
    content:         '' !important;
    position:        fixed !important;
    inset:           0 !important;
    background:      repeating-linear-gradient(
                       0deg,
                       transparent,
                       transparent 3px,
                       rgba(0,0,0,0.025) 3px,
                       rgba(0,0,0,0.025) 4px
                     ) !important;
    pointer-events:  none !important;
    z-index:         -1 !important;
  }

  /* Burger stays on top of overlay */
  .nav-burger {
    z-index: 9999 !important;
    position: relative !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   PORTFOLIO PAGE — MOBILE FIXES (3 bugs)
   ══════════════════════════════════════════════════════════════ */

/* ── 1. PROJECT TITLES INVISIBLE ON MOBILE ──────────────────────
   Root cause: @media(hover:none) { .pf-title-overlay { display:none } }
   hides the cinematic title overlay on touch devices, expecting
   .pf-info to show instead. But .pf-info uses gradient text
   (-webkit-text-fill-color: transparent) which can render invisible.
   Fix: show the title overlay on touch (it has a proper gradient
   background that makes it readable), and suppress the redundant
   pf-info which would overlap with it.
   ─────────────────────────────────────────────────────────────── */
@media (hover: none) {
  /* Restore the cinematic title overlay — it has the dark gradient
     background needed for readability on touch devices */
  .pf-title-overlay {
    display:  block !important;
    opacity:  1     !important;
  }

  /* Hide pf-info — title-overlay handles the title+client display.
     Avoids overlapping text at the bottom of the card. */
  .pf-info {
    opacity:         0     !important;
    pointer-events:  none  !important;
  }

  /* Ensure overlay-title text is solid white (no gradient-clip
     dependency that can fail on certain mobile WebKit builds) */
  .pf-overlay-title {
    -webkit-text-fill-color: #e8d49a !important;
    color:                   #e8d49a !important;
    background:              none    !important;
  }

  /* Overlay client label — keep the gold mono style */
  .pf-overlay-client {
    color: rgba(200, 168, 90, 0.75) !important;
  }
}

/* ── 2. PORTFOLIO CARDS OVERFLOWING RIGHT EDGE ───────────────────
   Root cause: no overflow-x guard on the grid / section wrapper.
   An absolutely-positioned child (sweep span, vimeo iframe inset:-2px)
   can escape the grid track and extend past the viewport edge.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Grid itself: clip any child overflow */
  .pf-grid {
    overflow-x: hidden !important;
    width:      100%   !important;
  }

  /* Section wrapper: prevent horizontal scroll on the whole page */
  .sec:has(.pf-grid),
  section:has(.pf-grid) {
    overflow-x: hidden !important;
  }

  /* pf-card clips its own content (already has overflow:hidden,
     this is a reinforcement for Vimeo inset:-2px iframe) */
  .pf-card {
    overflow: hidden !important;
  }

  /* pf-item: ensure it never exceeds grid track width */
  .pf-item {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ── 3. VIDEO MODAL APPEARING AT BOTTOM INSTEAD OF CENTER ────────
   Root cause: the responsive breakpoint sets
   .modal-box { align-items: flex-end } which pushes
   .modal-inner to the bottom of the fixed overlay.
   Fix: always center vertically; allow scrolling when content
   is taller than the viewport (tall phone, many metadata rows).
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .modal-box {
    align-items:    center      !important;
    padding:        8px         !important;
    overflow-y:     auto        !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Constrain the inner box so it never taller than the viewport */
  .modal-inner {
    max-height:  96dvh     !important;
    max-height:  96vh      !important; /* fallback */
    overflow-y:  auto      !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Metadata footer: 2-col on mobile is already set, keep it compact */
  .modal-foot {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Slightly smaller close button for compact layout */
  .modal-x {
    width:  40px !important;
    height: 40px !important;
  }
}