/* Legendary Flix — shared mobile layer.
   Every public page carries its own inline CSS, and those copies have drifted
   (nav logo 32 / 56 / 68px, nav fixed on some pages and relative on others,
   footers that overflow at 320px). This file is linked LAST in each page's
   <head>, so it wins ties, and it only speaks below the 1024px breakpoint where
   the hamburger takes over. Measured with tools/playwright/site-audit/mobile.cjs
   (iPhone SE 320, Pixel 7 412, iPhone 14 Pro Max 430). */

/* Lightbox arrows sat at 70% opacity over the page while the lightbox was
   closed (portfolio/events, portfolio/effects). Every width, not just phones. */
#lightbox:not(.open) #lightbox-prev,
#lightbox:not(.open) #lightbox-next { opacity: 0; visibility: hidden; }

/* JS galleries render after a short delay; while empty they were 0px tall,
   so the sections below jumped down when the photos arrived (CLS 0.11 on
   portfolio/events). Hold the space - and SHOW a designed loading state
   (skeleton shimmer), never a bare hole. */
.photo-grid:empty, .portfolio-grid:empty {
  min-height: 120vh;
  background-image:
    linear-gradient(110deg, rgba(245,242,236,0.045) 0%, rgba(245,242,236,0.09) 45%, rgba(245,242,236,0.045) 70%),
    repeating-linear-gradient(to bottom, rgba(245,242,236,0.05) 0, rgba(245,242,236,0.05) 320px, transparent 320px, transparent 336px);
  background-size: 220% 100%, 100% 100%;
  animation: lf-skeleton 1.6s var(--ease-out, ease-out) infinite;
}
@keyframes lf-skeleton {
  from { background-position: 120% 0, 0 0; }
  to   { background-position: -120% 0, 0 0; }
}

/* gallery empty / error states (inserted by the gallery scripts) */
.grid-state {
  grid-column: 1 / -1;
  column-span: all;
  padding: 72px 24px;
  text-align: center;
  color: #9a938a;
  font-size: 1rem;
  line-height: 1.6;
}
.grid-state a { color: #c24a2a; text-decoration: underline; }
/* a photo that failed to load keeps its tile, says so, and stays clickable-free */
.grid-item.img-failed picture { display: none; }
.grid-item.img-failed {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245,242,236,0.05);
  border: 1px solid rgba(245,242,236,0.1);
}
.grid-item.img-failed::after {
  content: "This photo didn't load - refresh to retry";
  color: #9a938a;
  font-size: 0.85rem;
  padding: 16px;
  text-align: center;
}

@media (max-width: 1024px) {
  /* ── Nav: one compact, always-reachable bar on every page ── */
  /* Clear at the top so the logo and menu float on the hero photo; the
     solid bar comes in once the page scrolls (.scrolled, set per page). */
  #site-nav,
  #site-nav.scrolled {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    min-height: 64px;
    padding: 10px 20px !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid transparent !important;
    transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  }
  #site-nav.scrolled {
    background: rgba(14, 14, 14, 0.9) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  }
  #site-nav:not(.scrolled) .nav-center img,
  #site-nav:not(.scrolled) .nav-hamburger span { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .55)); }
  #site-nav .nav-center img {
    height: 36px !important;
    width: auto !important;
    max-width: calc(100vw - 100px);
  }
  .nav-hamburger {
    width: 44px !important;
    height: 44px !important;
    right: 12px !important;
  }
  /* !important: mobile-nav.js injects its close-button CSS at runtime, after this file. */
  #mobile-menu .mobile-close { width: 44px !important; height: 44px !important; top: 10px !important; right: 12px !important; }
  #mobile-menu { overflow-y: auto; }

  /* Page tops: clear the 64px bar without the old 120–160px dead band. */
  .page-header { padding-top: 104px !important; }
  #page-hero { padding-top: 104px !important; }
  .article-hero { padding-top: 96px !important; }

  /* ── Footer: no column may push past the viewport ── */
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px 24px !important; }
  .footer-top > :first-child,
  .footer-top > :last-child:nth-child(even) { grid-column: 1 / -1; }
  .footer-col a { display: inline-block; padding: 10px 0; overflow-wrap: anywhere; }
  .footer-col li { margin-bottom: 0 !important; }
  .footer-socials a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .footer-bottom { flex-wrap: wrap; gap: 16px; }

  /* ── Touch targets ── */
  .filter-btn, .tab-btn { min-height: 44px; }
  a.tag { min-height: 36px; display: inline-flex; align-items: center; }
  .card-link, .read-more, .back-link, .btn-ghost, a[href$="blog/blog.html"][style*="inline-flex"] { display: inline-flex; align-items: center; min-height: 44px; }
  .breadcrumb a { display: inline-block; padding: 12px 0; }
  .lb-arrow { width: 44px !important; height: 44px !important; }

  /* iOS zooms the page on focus when an input is under 16px. */
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { font-size: 16px !important; }

  /* ── Legibility floor: eyebrows and badges were 8–10px ── */
  .ph-eyebrow, .section-eyebrow, .story-label, .pillars-eyebrow, .team-label,
  .process-num, .faq-category-label, .faq-label, .overlay-category, .featured-badge,
  .card-cat-badge, .bts-badge, .video-label, .gallery-eyebrow, .article-cat,
  .all-loaded, #sound-label, .tag-label, .trusted-label, .pcard-cat, .related-eyebrow,
  .related-card-meta, .gallery-caption-badge { font-size: 11px !important; }
  a.tag, .back-link, .gallery-caption-desc, .breadcrumb a, .breadcrumb span,
  nav[aria-label="Breadcrumb"] a, nav[aria-label="Breadcrumb"] span { font-size: 12px !important; }
}

@media (max-width: 767px) {
  /* Homepage hero: size to the SMALL viewport so the Book button is never
     under Safari's toolbar, and let the fixed bar overlay the photo. */
  #hero { min-height: 100vh; min-height: 100svh; }
  #hero .hero-content { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  /* The ticker's -100px pull-up (set at ≤1024 in index.html) slid it over the
     hero's Book Now button on phones. */
  #ticker { margin-top: 0 !important; }

  /* Homepage stats row: three 1fr columns of letter-spaced labels forced the
     whole page to 385px, so any phone narrower than that was zoomed out and
     could be dragged sideways. minmax(0) lets the columns shrink. */
  .about-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .about-stat { padding-right: 12px !important; margin-right: 12px !important; min-width: 0; }
  .about-stat:last-child { padding-right: 0 !important; margin-right: 0 !important; }
  .about-stat-num { font-size: clamp(1.6rem, 8vw, 2.5rem) !important; }
  .about-stat-label { font-size: 11px !important; letter-spacing: 0.12em !important; overflow-wrap: break-word; }

  /* Page titles: 41–45px headlines filled a 320px screen edge to edge. */
  .ph-title, #page-hero .section-heading { font-size: clamp(2rem, 9.5vw, 2.6rem) !important; overflow-wrap: break-word; }
  .article-hero h1 { overflow-wrap: break-word; }
  /* blog-consultation-tips pushed the page 3px wide at 320px; clip (unlike
     hidden) keeps position:sticky working inside. */
  .article-wrap { overflow-x: clip; }
}

/* ── Balance pass (2026-10-04, benchmarked against Two Mann, Callaway Gable,
   KT Merry, Jose Villa, Shootday, Adrian Shelby on an iPhone 14 Pro Max).
   Every one of them keeps galleries dense, the blog index scannable, and a
   way to book within reach; ours ran single-column galleries 20+ screens long. */
@media (max-width: 767px) {
  /* Galleries: two columns on phones (portfolio pages use CSS columns, the
     hub uses grid; each property is ignored by the other layout). */
  .photo-grid { columns: 2 !important; column-gap: 4px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-item { margin-bottom: 4px; }
  .grid-overlay { display: none; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px !important; }
  .gallery-item.tall { grid-row: span 1 !important; }
  .gallery-caption-desc, .gallery-caption-badge { display: none !important; }
  .gallery-caption { padding: 10px !important; }

  /* Homepage gallery: capped to one batch on phones (index.html), then this. */
  .pcard-more { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; margin-top: 16px;
    border: 1px solid var(--line, rgba(255,255,255,.08)); border-radius: 9999px; color: var(--white, #e5e2e1);
    font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

  /* Homepage services: four stacked cards ran four screens; swipe instead. */
  .services-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px !important;
    margin: 40px -24px 0 !important; padding: 0 24px 8px; scrollbar-width: none; }
  .services-grid::-webkit-scrollbar { display: none; }
  .svc-card { flex: 0 0 84%; scroll-snap-align: start; padding: 32px 24px !important; border-radius: 12px; }

  /* Homepage "From the Blog": three squeezed columns broke titles into slivers. */
  .blog-teaser-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .blog-teaser-grid > a { flex-direction: row !important; align-items: stretch; }
  .blog-teaser-grid > a > div:first-child { flex: 0 0 104px; aspect-ratio: auto !important; }
  .blog-teaser-grid > a > div:last-child { padding: 14px 16px !important; }
  .blog-teaser-grid > a > div:last-child > p:not(:first-child),
  .blog-teaser-grid > a > div:last-child > span { display: none; }
  .blog-teaser-grid h3 { font-size: .95rem !important; margin-bottom: 0 !important; }
  #blog-teaser { padding: 72px 24px !important; }

  /* Blog index: one swipeable filter row, shorter cards. */
  .filter-bar { display: flex; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 8px; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-bar .filter-btn { flex: 0 0 auto; }
  .featured-img { min-height: 0 !important; aspect-ratio: 4 / 3; }
  .featured-body > p[itemprop="description"], .card-body > p[itemprop="description"] {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .card-cat-badge { display: none; }
  .card-img { aspect-ratio: 16 / 10; }

  /* Sticky Book bar (built by mobile-nav.js). */
  .lf-bookbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90;
    display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 9999px;
    background: var(--gold, #c24a2a); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
    box-shadow: 0 8px 28px rgba(0,0,0,.45); transform: translateY(140%); transition: transform var(--dur-2) var(--ease-out); }
  .lf-bookbar.show { transform: none; }
}