/* ── MOBILE OVERRIDES (max 768px) ───────────────────────────
   Loaded after style.css — !important rules here win the cascade
──────────────────────────────────────────────────────────── */

/* ── iOS ROTATION OVERFLOW GUARD (global, no media query) ───
   Problem: iOS Safari can leave grid / flex children holding their stale
   LANDSCAPE width after rotating back to portrait, making content appear
   clipped at the right edge.
   Fix: min-width: 0 forces each child to shrink to its grid/flex track;
   max-width: 100% prevents any child from painting beyond its container.
   overflow-wrap stops long text from busting out of its column.
   This does NOT set overflow on any container, so position:sticky is safe.
──────────────────────────────────────────────────────────── */
.services-grid > *,
.blog-grid     > *,
.work-panels   > *,
.project-grid  > *,
.testimonial-grid > * {
  min-width: 0;
  max-width: 100%;
}

p, h1, h2, h3, h4, h5 {
  max-width: 100%;
  overflow-wrap: break-word;
}

@media (max-width: 768px) {

  /* ── DEDICATED HERO: push text up so it clears the fold ────
     justify-content: flex-end means padding-bottom = distance
     between content and the section's bottom edge. Larger value
     = text sits higher. On short viewports (iPhone 8, SE) the
     default 56px left the cycling word below the visible fold.
  ──────────────────────────────────────────────────────────── */
  .dedicated--hero {
    padding-bottom: clamp(96px, 20vh, 160px) !important;
    min-height: 80vh !important;
  }

  /* ── VIDEO SECTION: portrait scroll-reveal ───────────────
     Restores the sticky-expand animation with portrait proportions.
  ──────────────────────────────────────────────────────────── */
  .video-scroll-section {
    height: 200vh !important;
    padding: 0 !important;
    background: var(--white) !important;
  }
  .video-scroll-sticky {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    min-height: unset !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .video-frame {
    position: relative !important;
    inset: auto !important;
    width: 80% !important;       /* was 80vw — vw is stale on iOS rotation; % reflows correctly */
    height: 82vh !important;
    border-radius: 20px !important;
    /* transform: scale() is driven by JS scroll — do NOT override here */
  }

  /* ── TESTIMONIALS: force Adobe logo left-align ───────────── */
  .t-company-logo {
    margin-left: 0 !important;
    align-self: flex-start !important;
  }

  /* ── BLOG SECTION: tighten bottom padding on mobile ─────────
     var(--section) = 72px at mobile width — too much white space
     before the AIGA section. Pull it back to a tighter gap.
  ──────────────────────────────────────────────────────────── */
  .blog-section {
    padding-bottom: 32px !important;
  }

  /* ── AIGA SECTION: remove extra top-padding on carousel col
     so the photo butts up flush against the section border,
     matching the consistent padding rhythm of the other sections.
  ──────────────────────────────────────────────────────────── */
  .aiga-carousel-col {
    padding: 20px clamp(16px, 4vw, 28px) 0 !important; /* top: breathing room from section border, sides: inset, bottom: 0 */
  }

  /* ── AIGA Conference labels — stacked above the frame ──────
     Two separate spans (.video-label--left / --right) that sit
     side-by-side on desktop are stacked vertically on mobile.
     Give each a distinct top so they don't overlap.
  ──────────────────────────────────────────────────────────── */
  .video-label {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    text-align: center !important;
    transform: translateX(-50%) !important;
    font-family: var(--display) !important;  /* Cormorant Garamond */
    font-size: clamp(22px, 5.5vw, 30px) !important;
    font-weight: 300 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    color: var(--navy) !important;
    /* opacity is driven by JS scroll — do NOT lock it with !important */
    opacity: 1;
    pointer-events: none;
  }
  /* "AIGA Conference" — top line */
  .video-label--left {
    top: 4vh !important;
  }
  /* "Welcome Remarks" — second line, just below */
  .video-label--right {
    top: calc(4vh + clamp(28px, 7vw, 40px)) !important;
  }

}