/* Focused overrides for reliable touch, media, and modal behavior. */
.experience,
.experience main,
.experience footer {
  max-width: 100%;
  overflow-x: clip;
}

.experience .hero-mosaic,
.experience .case-deck {
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

.experience .hero-mosaic video,
.experience .impact-bar video,
.ads-video-panel video {
  display: block;
  max-width: 100%;
}

.experience .hero-mosaic video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.experience .hero-mosaic figure {
  contain: layout paint;
}

.experience .hero-mosaic-lane,
.experience .hero-mosaic-track {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.experience .ads-slider-viewport {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}

.experience .ads-slider-viewport::-webkit-scrollbar {
  display: none;
}

.ads-video-panel video {
  width: 100%;
  max-height: 78svh;
  object-fit: contain;
}

.experience .nav-actions :is(.language-button, .theme-button, .menu-button) {
  box-sizing: border-box;
  flex: 0 0 44px;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border: 1px solid var(--nav-line) !important;
  background: var(--nav-soft) !important;
  color: var(--nav-ink) !important;
  -webkit-tap-highlight-color: transparent;
}

.experience .nav-actions :is(.language-button, .theme-button, .menu-button):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.experience :where(
  .ads-gallery-control,
  .case-nav,
  .ads-video-close,
  .ads-sound-toggle,
  .poster-viewer-close,
  .poster-viewer-nav,
  .photo-lightbox-close,
  .photo-lightbox-nav
) {
  min-width: 44px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

html:where(.menu-open, .ads-video-open, .poster-viewer-open, .photo-lightbox-open),
html:where(.menu-open, .ads-video-open, .poster-viewer-open, .photo-lightbox-open) body {
  overscroll-behavior: none;
}

body.menu-open,
html.ads-video-open body,
html.poster-viewer-open body,
html.photo-lightbox-open body {
  overflow: hidden;
}

.experience .mobile-nav,
.experience .ads-video-modal,
.experience .poster-viewer,
.experience .photo-lightbox {
  box-sizing: border-box;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 680px) {
  body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: break-word;
  }

  .experience main > section[id] {
    scroll-margin-top: 0 !important;
  }

  .experience .floating-header {
    box-sizing: border-box;
    top: max(8px, env(safe-area-inset-top)) !important;
    inset-inline-start: max(8px, env(safe-area-inset-left)) !important;
    inset-inline-end: max(8px, env(safe-area-inset-right)) !important;
  }

  .experience .nav-actions {
    min-width: 0;
    gap: 4px;
  }

  .experience .mobile-nav {
    max-width: calc(100vw - 16px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    touch-action: pan-y;
  }

  .experience .hero-mosaic {
    min-height: 62svh;
  }

  .experience .case-deck {
    user-select: none;
    -webkit-user-select: none;
  }

  .experience :is(.ads-video-modal, .poster-viewer, .photo-lightbox) {
    max-height: 100dvh;
    min-height: 100svh;
    padding-top: max(72px, calc(16px + env(safe-area-inset-top)));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    touch-action: pan-y;
  }

  .experience .ads-video-modal {
    overflow-y: auto;
    padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
  }

  .experience .ads-video-panel video {
    max-height: 70svh;
  }

  .experience .poster-viewer,
  .experience .photo-lightbox {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .experience .hero-mosaic-lane,
  .experience .hero-mosaic-track {
    transform: none !important;
    transition: none !important;
  }

  .reveal-local {
    opacity: 1 !important;
    transform: none !important;
  }
}