/* Mobile corrections for the existing Vera Elma Vacek website.
   Load after the existing main stylesheet and seo-fixes.css. */
@media (max-width: 980px) {
  .site-header {
    /* A backdrop filter makes fixed children use the header as their viewport. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--off-white, #fcfaf7);
    grid-template-columns: 1fr auto;
    z-index: 1000;
  }

  .mobile-menu {
    visibility: hidden;
    height: 100vh;
    height: 100dvh;
    background: var(--off-white, #fcfaf7);
    overscroll-behavior: contain;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }

  .mobile-menu[data-open="true"] {
    visibility: visible;
  }

  .menu-button { position: relative; }
  .mobile-menu a { overflow-wrap: anywhere; }

  /* The old minimum height + aspect ratio forced each tablet grid cell to 525px. */
  .visible-identity-board.image-placeholder-real {
    min-width: 0;
    min-height: 0;
    width: 100%;
    aspect-ratio: auto;
  }
  .visible-identity-board.image-placeholder-real img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

@media (max-width: 720px) {
  .site-header { gap: 16px; }

  .hero-video-hero { min-height: min(760px, calc(100svh - 74px)); }
  .hero-video-content {
    display: flex;
    min-height: min(760px, calc(100svh - 74px));
    padding: 80px 22px 42px;
    align-items: flex-end;
  }

  .hero-video-layer::after {
    display: block;
    background: linear-gradient(180deg, rgba(0,0,0,.08) 20%, rgba(0,0,0,.74) 100%);
  }

  .hero-video-slides { min-height: 0; display: grid; gap: 24px; }
  .hero-video-slide {
    display: none;
    position: static;
    animation: none;
    opacity: 1;
    transform: none;
  }
  .hero-video-slide-1, .hero-video-slide-2 { display: grid; }
  .hero-video-title { font-size: clamp(2.6rem, 12vw, 4.6rem); line-height: .92; }
  .hero-video-subtitle { font-size: .85rem; line-height: 1.5; }
  .hero-video-byline { font-size: .75rem; }
  .hero-video-statement { font-size: clamp(1.7rem, 7.2vw, 2.5rem); line-height: 1.08; }

  /* Preserve the photographer's full compositions instead of cropping portraits. */
  .offer-path .image-placeholder-real,
  .page-hero .image-placeholder-real,
  .contact-hero .image-placeholder-real,
  .offer-hero .image-placeholder-real,
  .offer-image-duo .image-placeholder-real:first-child,
  .offer-image-duo .image-placeholder-real:last-child,
  .offer-gallery .image-placeholder-real,
  .gallery-item .image-placeholder-real,
  .about-preview .image-placeholder-real,
  .face-section .image-placeholder-real,
  .story-detail .image-placeholder-real,
  .final-cta .final-cta-image.image-placeholder-real {
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
  }

  .offer-path .image-placeholder-real img,
  .page-hero .image-placeholder-real img,
  .contact-hero .image-placeholder-real img,
  .offer-hero .image-placeholder-real img,
  .offer-image-duo .image-placeholder-real img,
  .offer-gallery .image-placeholder-real img,
  .gallery-item .image-placeholder-real img,
  .about-preview .image-placeholder-real img,
  .face-section .image-placeholder-real img,
  .story-detail .image-placeholder-real img,
  .final-cta .final-cta-image.image-placeholder-real img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .portfolio-stories-intro h1 {
    font-size: clamp(1.65rem, 7vw, 2.3rem);
    line-height: 1.12;
  }
  .portfolio-stories-page { padding-top: 36px; }
  .portfolio-stories-gallery { margin-top: 28px; }
  .portfolio-stories-image:nth-child(n) { width: 100%; margin-inline: 0; }
  .portfolio-stories-image.image-placeholder-real img { width: 100%; height: auto; }

  :is(h1, h2, h3, .quote-section p) { overflow-wrap: anywhere; }
  .section-heading, .text-column, .offer-panel { min-width: 0; }
}