/**
 * Responsive Images CSS
 * Fixes for ultrawide screens, better responsive containers,
 * and utility classes for image handling.
 *
 * Include on every page: <link rel="stylesheet" href="responsive-images.css">
 */

/* ──────────────────────────────────────
   ULTRAWIDE COLLAGE FIX (.zl containers)
   Caps the spread of zoom-parallax images
   on screens wider than 1800px.
   Affects: about, corporate, nonprofit,
   private, weddings pages.
   ────────────────────────────────────── */

/* Cap the overall collage composition width */
@media (min-width: 1800px) {
  .zoom-sticky {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
    position: sticky;
    top: 0;
  }

  /* Override vw-based widths with clamped values */
  .zl > div {
    width: min(25vw, 450px) !important;
    height: min(25vh, 360px) !important;
  }

  .zl:nth-child(2) > div {
    width: min(35vw, 630px) !important;
    height: min(30vh, 432px) !important;
  }

  .zl:nth-child(3) > div {
    width: min(20vw, 360px) !important;
    height: min(45vh, 648px) !important;
  }

  .zl:nth-child(4) > div {
    width: min(25vw, 450px) !important;
    height: min(25vh, 360px) !important;
  }

  .zl:nth-child(5) > div {
    width: min(20vw, 360px) !important;
    height: min(25vh, 360px) !important;
  }

  .zl:nth-child(6) > div {
    width: min(30vw, 540px) !important;
    height: min(25vh, 360px) !important;
  }

  .zl:nth-child(7) > div {
    width: min(15vw, 270px) !important;
    height: min(15vh, 216px) !important;
  }

  /* Cap position offsets so images don't spread too far apart */
  .zl:nth-child(2) > div {
    left: min(calc(50% + 5vw), calc(50% + 90px)) !important;
    top: min(calc(50% - 30vh), calc(50% - 432px)) !important;
  }

  .zl:nth-child(3) > div {
    left: max(calc(50% - 25vw), calc(50% - 450px)) !important;
  }

  .zl:nth-child(4) > div {
    left: min(calc(50% + 27.5vw), calc(50% + 495px)) !important;
  }

  .zl:nth-child(5) > div {
    left: min(calc(50% + 5vw), calc(50% + 90px)) !important;
  }

  .zl:nth-child(6) > div {
    left: max(calc(50% - 22.5vw), calc(50% - 405px)) !important;
  }

  .zl:nth-child(7) > div {
    left: min(calc(50% + 25vw), calc(50% + 450px)) !important;
  }
}

/* Additional ultrawide clamp (4K+) */
@media (min-width: 2560px) {
  .zoom-sticky {
    max-width: 2000px;
  }
}


/* ──────────────────────────────────────
   MOBILE COLLAGE: Stack vertically
   On smaller screens, the parallax collage
   doesn't work well. Show a simple grid instead.
   ────────────────────────────────────── */

@media (max-width: 768px) {
  .zoom-wrap {
    height: auto !important;
  }

  .zoom-sticky {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
  }

  .zl {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    display: contents !important;
  }

  .zl > div {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }

  .zl > div > img {
    border-radius: 2px;
  }

  /* Hide the bottom fade gradient on mobile */
  .zoom-bottom-fade {
    display: none !important;
  }
}


/* ──────────────────────────────────────
   FULL-WIDTH IMAGE SECTIONS
   Better responsive heights for the
   full-bleed image sections on avatar pages.
   ────────────────────────────────────── */

@media (min-width: 1800px) {
  .full-image {
    height: 70vh;
  }
}

@media (max-width: 480px) {
  .full-image {
    height: 40vh;
  }
}


/* ──────────────────────────────────────
   EVENT DETAIL PAGES
   Replace fixed pixel heights with
   responsive aspect-ratio based sizing.
   ────────────────────────────────────── */

/* Full-bleed photos: smooth scaling instead of breakpoint jumps */
@media (min-width: 1800px) {
  .full-photo img {
    height: 500px;
  }

  .full-photo.tall img {
    height: 650px;
  }

  .photo-pair img {
    height: 380px;
  }
}


/* ──────────────────────────────────────
   EXPLORE CARDS
   Better mobile behavior for the
   "explore more" cards at page bottom.
   ────────────────────────────────────── */

@media (max-width: 640px) {
  .explore-card {
    aspect-ratio: 3 / 2;
  }
}


/* ──────────────────────────────────────
   OUR WORK PAGE
   Better image panel sizing on
   large and ultrawide screens.
   ────────────────────────────────────── */

@media (min-width: 1800px) {
  .image-panel .image-set {
    gap: 6px;
    padding: 6px;
  }
}


/* ──────────────────────────────────────
   SERVICES PAGE: INGREDIENTS GRID
   Better responsive behavior for
   the 3x2 ingredient photo grid.
   ────────────────────────────────────── */

@media (min-width: 1800px) {
  .ingredient-card {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 480px) {
  .ingredient-card {
    aspect-ratio: 4 / 3 !important;
  }
}


/* ──────────────────────────────────────
   HOMEPAGE: PROMISE CARDS
   Smoother aspect ratio transition
   ────────────────────────────────────── */

@media (min-width: 1800px) {
  .promise-card {
    aspect-ratio: 2 / 3;
  }
}


/* ──────────────────────────────────────
   HOMEPAGE: CREATE GALLERY
   Better ultrawide behavior for
   the entertainment styles section.
   ────────────────────────────────────── */

@media (min-width: 1800px) {
  .create-row {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ──────────────────────────────────────
   HOMEPAGE: SERVE CARDS
   Cap the full-screen card width on
   ultrawide so images don't stretch
   awkwardly across 3440px.
   ────────────────────────────────────── */

@media (min-width: 1800px) {
  .serve-sticky {
    max-width: 2400px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ──────────────────────────────────────
   HOMEPAGE: SILK PERFORMER VIDEO
   Better ultrawide behavior.
   ────────────────────────────────────── */

@media (min-width: 1800px) {
  .halo-section {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ──────────────────────────────────────
   PRESENTS PAGE: PRODUCTION CARDS
   ────────────────────────────────────── */

@media (max-width: 640px) {
  .production-card-hero {
    aspect-ratio: 16 / 9 !important;
  }

  .production-card-small {
    aspect-ratio: 4 / 3 !important;
  }
}


/* ──────────────────────────────────────
   GLOBAL: Image loading transitions
   Fade in images as they load to prevent
   layout jank from lazy-loaded images.
   ────────────────────────────────────── */

/* Fade-in handled by JS observer script on each page.
   No CSS opacity:0 rule here — if JS fails, images should still show.
   The observer adds .img-loaded class for a subtle fade effect. */
img.img-loaded {
  animation: imgFadeIn 0.4s ease forwards;
}

@keyframes imgFadeIn {
  from { opacity: 0.7; }
  to { opacity: 1; }
}


/* ──────────────────────────────────────
   GLOBAL: Prevent image overflow on
   very narrow viewports (< 360px).
   ────────────────────────────────────── */

@media (max-width: 360px) {
  img {
    max-width: 100%;
    height: auto;
  }
}