/* Mobile-first enhancements. Everything is scoped to mobile/coarse-pointer to avoid desktop impact. */

/* Global mobile type scale and readability */
@media (max-width: 768px) {
  body {
    font-size: 16.5px;
    line-height: 1.55;
  }
  
  /* Ensure consistent safe area padding for all fixed elements */
  .site-header {
    top: env(safe-area-inset-top, 0);
  }
  
  /* Tighter section head margins to reduce scroll */
  .section-head {
    margin-bottom: clamp(20px, 5vh, 36px);
  }
  .section-head__title {
    margin-bottom: 0.3em;
  }
}

/* Touch device class added by JavaScript */
body.touch-device .cardx {
  --spot-r: 0% !important;
  --spot-dur: 0ms !important;
  --mx: 50% !important;
  --my: 50% !important;
  --tiltX: 0deg !important;
  --tiltY: 0deg !important;
  --lift: 0px !important;
}
body.touch-device .cardx.is-hover,
body.touch-device .cardx:hover {
  transform: none !important;
}
body.touch-device .cards .section-head__title,
body.touch-device .cards .section-head__desc,
body.touch-device .cards .section-head__credits {
  pointer-events: none !important;
}

/* Coarse pointer (most touch devices) helpers */
@media (pointer: coarse) {
  /* Always show the CTA arrow on cards for tap affordance */
  .cardx__arrow { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
  
  /* Disable About rays interaction to save battery and prevent reflows */
  #about::before {
    transition: none !important;
    pointer-events: none !important;
  }
  
  /* Keep reel volume slider visible when unmuted (no auto-hide) */
  .reel__controls.is-idle:not(.is-muted) {
    gap: 10px !important;
    padding: 8px 10px !important;
  }
  .reel__controls.is-idle:not(.is-muted) .vol-slider {
    width: var(--slider-w) !important;
    opacity: 1 !important;
    transform: scaleX(1) !important;
    pointer-events: auto !important;
  }
  
  /* Ensure galleries are visible on touch devices regardless of width */
  .masonry__item,
  .gallery-item,
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* PERFORMANCE: simplify cards section on touch devices */
  /* 1) Remove heavy animated background and overlays behind the cards */
  .cards > .work-bg { display: none !important; }

  /* 2) Flatten card visuals: no backdrop-filter, smaller shadows, no 3D transforms */
  .cardx { 
    transform: none !important; 
    opacity: 1 !important; 
    perspective: none !important; 
    will-change: auto !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.22) !important;
    content-visibility: auto; /* allow browser to skip off-screen rendering */
    contain-intrinsic-size: 360px; /* reserve space to reduce layout thrash */
  }
  .cardx__link, .cardx__media { transform: none !important; }
  .cardx::before { 
    background: rgba(255,255,255,.04) !important; 
    border: 1px solid var(--line) !important; 
    box-shadow: none !important; 
    backdrop-filter: none !important; 
  }

  /* 3) Reduce transitions on mobile to avoid long composites during scroll */
  .cardx,
  .cardx__meta,
  .cardx__media,
  .cards .section-head__title,
  .cards .section-head__desc {
    transition: none !important;
  }
  
  /* 4) CRITICAL: Completely disable all hover effects and pointer events on cards */
  .cardx:hover,
  .cardx.is-hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.22) !important;
  }
  .cardx:hover .cardx__media,
  .cardx.is-hover .cardx__media {
    transform: none !important;
  }
  .cardx:hover::before,
  .cardx.is-hover::before {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Disable spotlight effect completely */
  .cardx::after,
  .cardx__media::after {
    display: none !important;
  }
  /* Prevent any CSS variable updates from JavaScript */
  .cardx {
    --spot-r: 0% !important;
    --spot-dur: 0ms !important;
    --mx: 50% !important;
    --my: 50% !important;
    --tiltX: 0deg !important;
    --tiltY: 0deg !important;
    --lift: 0px !important;
  }
}

/* Main mobile overrides */
@media (max-width: 768px) {
  :root {
    --gutter: 16px;
  }

  /* General layout tweaks */
  .container { width: calc(100% - var(--gutter) * 2); }
  .btn { width: 100%; justify-content: center; }
  
  /* Improved tap targets (44x44 minimum) */
  .micro-dock .md-toggle {
    width: 44px;
    height: 44px;
  }
  .micro-dock .md-list a {
    padding: 12px 10px;
    min-height: 44px;
  }

  /* Hero: ensure ample spacing on small screens */
  .hero__inner { padding-block: clamp(24px, 14vh, 120px); }
  /* Center-align landing (hero) text and buttons on mobile */
  .hero__inner { justify-items: center; text-align: center; }
  .hero .cta { justify-content: center; }
  
  /* Improved hero readability */
  .hero__inner h1 {
    font-size: clamp(2rem, 9vw, 3.2rem);
    margin-bottom: 0.5em;
  }
  .hero__film {
    opacity: 0.85; /* Slightly stronger overlay for better text contrast */
  }

  /* Reel: reduce scroll height and improve control tap targets */
  .reel { height: 180svh; } /* Shorter scroll for better mobile experience */
  .reel__controls { 
    right: calc(12px + env(safe-area-inset-right, 0));
    bottom: calc(12px + env(safe-area-inset-bottom, 0));
    gap: 10px;
  }
  .reel__controls .vol-btn { width: 44px; height: 44px; }
  .reel__controls .vol-slider { 
    --slider-w: 160px; 
    height: 8px;
    padding: 8px 0; /* Extra touch padding */
  }
  .reel__controls .vol-slider::-webkit-slider-thumb { width: 20px; height: 20px; }
  .reel__controls .vol-slider::-moz-range-thumb { width: 20px; height: 20px; }

  /* Work: single column and low-noise background on text */
  .cards .work-split { grid-template-columns: 1fr; }
  .cards > .work-bg { mask-image: none; -webkit-mask-image: none; opacity: .14; }
  .cards > .work-bg::before { opacity: .12; background-size: 22px 22px; }
  .cards .section-head { margin-bottom: clamp(18px, 5vh, 40px); }
  .cards .section-head__credits { display: none; }
  .cards[data-card-style="minimal"] .cards__grid { 
    grid-template-columns: 1fr;
    gap: 14px; /* Tighter gap for more cards above fold */
  }
  
  /* Always show card descriptions on mobile */
  .cards .cardx__meta .cardx__description {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    opacity: 0.9;
  }

  /* Mobile type scale for cards */
  .cardx__meta h3 { font-size: clamp(1rem, 4.2vw, 1.4rem); }
  .cardx__tagsline { font-size: .88rem; font-weight: 600; }
  .cards .cardx__meta .cardx__description { font-size: .88rem; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

  /* Ensure the card CTA is visible without hover on touch */
  .cardx__arrow { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
  /* Simplify hover effect for touch: show static color image, remove spotlight */
  .cardx__media::before { filter: none; }
  .cardx__media::after { display: none; }

  /* Gallery teaser (CTA ribbons): keep upright and compact */
  .cta-bg { 
    transform: rotate(0deg) scale(1); 
    padding: 8px;
    overscroll-behavior: contain; /* Prevent pull-to-refresh conflicts */
  }

  /* Gallery page (gallery.html): Pinterest-style layout on mobile */
  :root {
    --gal-gap: 8px;      /* tighter gutters on mobile */
    --tile-radius: 10px; /* slightly smaller radius */
  }
  .gallery-section > .container,
  .gallery-hero > .container { width: calc(100% - var(--gal-gap) * 2); }
  .gallery-masonry { column-count: 2; column-gap: var(--gal-gap); }
  .gallery-item { margin: 0 0 var(--gal-gap) 0; border-radius: var(--tile-radius); }
  .gallery-item video { max-height: 42vh; }
  .cta-bg .lane {
    height: clamp(180px, 25svh, 220px); /* Slightly smaller lanes */
  }
  
  /* Add swipe hint for ribbon galleries */
  .cta-gallery::after {
    content: "Swipe to explore →";
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: rgba(0,0,0,0.7);
    border-radius: 999px;
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
    pointer-events: none;
    animation: fadeOut 3s ease-out 2s forwards;
    z-index: 15;
  }
  @keyframes fadeOut {
    to { opacity: 0; }
  }

  /* Events stage and Next panel: shorter stage; overlays visible by default */
  .xf-stage { height: 160svh; }
  #post-event .nbg-overlay { opacity: 1; }
  #post-event .next-bg__col { filter: grayscale(0.2) contrast(1.02) saturate(0.9); }

  /* Safety: ensure gallery items and project masonry items are visible even if IO timing misses on some mobile browsers */
  .gallery-item,
  .masonry__item,
  [data-animate] { opacity: 1 !important; transform: none !important; }

  /* Next panel: convert to horizontal scroll-snap carousel */
  #post-event .next-bg { 
    overflow-x: auto; 
    gap: 8px; 
    padding: 0 10px calc(60px + env(safe-area-inset-bottom, 0)); /* Space for dots */
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
  #post-event .next-bg__col { min-width: 72%; flex: 0 0 auto; scroll-snap-align: center; }
  
  /* Carousel indicator dots */
  #post-event .nbg-dots {
    position: absolute;
    bottom: calc(20px + env(safe-area-inset-bottom, 0));
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    gap: 8px;
    z-index: 10;
  }
  #post-event .nbg-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.35);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.25);
    transition: transform .2s ease, background .2s ease;
  }
  #post-event .nbg-dots .dot.is-active {
    background: #fff;
    transform: scale(1.25);
  }

  /* About: stack columns and ensure good spacing, center align on mobile */
  .aboutv2__wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .about__photo { margin-inline: auto; }
  
  /* Ensure About photo always renders and fills its container on mobile */
  #about .aboutv2__photo { max-width: 320px; width: 100%; }
  #about .aboutv2__photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
  .aboutv2__chips { justify-content: center; }
  .about-v2 .cta, .about .cta { justify-content: center; }
  /* Legacy About: ensure centered as well */
  .about__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .about__left .section-head { justify-items: center; text-align: center; }
  .about__photo { margin-inline: auto; }

  /* Gallery page: larger back button touch target */
  .floating-back { padding: 12px 14px; font-size: 1rem; }

  /* Full-height home Gallery teaser tweaks on mobile */
  #cta-gallery { height: 100svh; }
  #cta-gallery .cta-body { min-height: 100%; align-content: start; padding-top: calc(var(--header-h, 56px) + 8px); padding-top: calc(var(--header-h, 56px) + env(safe-area-inset-top) + 8px); }
  #cta-gallery .section-head__title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  #cta-gallery .section-head__desc { font-size: 0.95rem; }
  #cta-gallery .cta .btn { font-size: 1rem; padding: 0.9rem 1.1rem; }

  /* Event render showcase: mirror Gallery section on mobile */
  #event-viewport .cta-gallery { height: 100svh; }
  #event-viewport .cta-gallery .cta-body { min-height: 100%; align-content: start; padding-top: calc(var(--header-h, 56px) + 8px); padding-top: calc(var(--header-h, 56px) + env(safe-area-inset-top) + 8px); }
  #event-viewport .cta-gallery .section-head__title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  #event-viewport .cta-gallery .section-head__desc { font-size: 0.95rem; }
  #event-viewport .cta-gallery .cta .btn { font-size: 1rem; padding: 0.9rem 1.1rem; }

  /* Footer links: comfortable tap targets */
  .min-footer__nav a { display: inline-block; padding: 10px 6px; line-height: 1.2; }

  /* Card overlay stronger for readability on phones */
  .cardx__scrim { background:
    linear-gradient(to top, rgba(0,0,0,.70) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.20) 60%, rgba(0,0,0,0) 80%),
    linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,0) 30%); }

  /* Chat sticker: larger touch target; preserve show/hide behavior */
  .chat-sticker { 
    width: 56px; 
    height: 56px;
    left: calc(env(safe-area-inset-left, 0px) + 16px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }
  
  /* Prevent micro-dock and chat-sticker collision */
  .micro-dock {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); /* Offset when chat visible */
  }
  .chat-sticker.is-hidden ~ .micro-dock {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); /* Normal position */
  }

  /* Brand logos strip: mobile alignment/spacing fixes */
  .brand-logos { gap: clamp(14px, 5vw, 28px); justify-content: center; }
  .brand-logos li { flex: 0 1 auto; }
  .brand-logos li + li { border-left: 0; margin-left: 0; padding-left: 0; }
.brand-logos img { height: clamp(28px, 8vw, 44px); }
  
  /* R&D articles: tighter spacing for better density */
  .rnda-article {
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.3);
  }
  .rnda-list {
    gap: clamp(10px, 1.8vw, 14px);
  }
  .rnda-media::before {
    filter: grayscale(0.6) contrast(1.02) saturate(0.8); /* Less desaturation on mobile */
  }
  
  /* Gallery page: ensure back button is accessible */
  .floating-back {
    top: calc(var(--gal-gap) + env(safe-area-inset-top, 0px) + 8px);
    left: calc(var(--gal-gap) + env(safe-area-inset-left, 0px) + 8px);
    min-width: 44px;
    min-height: 44px;
  }
}

/* About photo fallback height on mobile (in case aspect-ratio support is limited) */
@media (max-width: 768px) {
  #about .aboutv2__photo { min-height: 240px; aspect-ratio: 1 / 1; }
  #about .aboutv2__photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
}

/* Additional mobile enhancements for project pages */
@media (max-width: 768px) {
  /* Project cover: stronger overlay for readability */
  .project-cover__overlay {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.1) 0%,
      rgba(0,0,0,.25) 30%,
      rgba(0,0,0,.55) 65%,
      rgba(0,0,0,.85) 100%
    );
  }
  
  /* Add "Jump to details" link on mobile */
  .entry::before {
    content: "↓ Jump to details";
    display: block;
    text-align: center;
    padding: 8px;
    margin-bottom: 16px;
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    cursor: pointer;
  }
  
  /* YouTube lazy load hint */
  .youtube-embed::before {
    content: "Tap to load video";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 20px;
    background: rgba(0,0,0,0.8);
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    pointer-events: none;
    z-index: 1;
    display: none; /* Will be shown via JS */
  }
}

/* Performance improvements for low-end mobile */
@media (max-width: 768px) and (max-resolution: 2dppx) {
  /* Reduce shadows and effects on low-res devices */
  .cardx,
  .rnda-article,
  figure img,
  figure video {
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
  }
  
  /* Simpler transitions */
  * {
    transition-duration: 0.2s !important;
  }
}