/* =========================================================
   SMALL TOWN MAHJ — DESKTOP HERO POLISH
   Desktop only. The approved <=980px experience is untouched.
   Simplifies the photo shuffle into one dominant tabletop photograph with
   restrained back layers and removes the ivory copy wash over photography.
   ========================================================= */

@media (min-width: 981px) {
  /* The previous gradient extended far into the photo field and appeared as
     a translucent white rectangle across the photographs. Desktop no longer
     needs that masking device. */
  body:has(.home-photo-hero) .home-photo-hero__copy::before {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  body:has(.home-photo-hero) .home-photo-hero {
    width: min(1500px, calc(100% - clamp(52px, 5vw, 88px))) !important;
    padding: clamp(2.5rem, 3.4vh, 3rem) 0 clamp(2.2rem, 3.2vh, 2.8rem) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__grid {
    min-height: clamp(520px, calc(100vh - 165px), 610px) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    grid-column: 1 / 6 !important;
    padding-left: clamp(2.5rem, 4vw, 4.75rem) !important;
    padding-right: clamp(1.4rem, 2vw, 2.4rem) !important;
    transform: none !important;
  }

  body:has(.home-photo-hero) .home-photo-hero h1 {
    max-width: 7.1em !important;
    font-size: clamp(4rem, 5vw, 5.95rem) !important;
    line-height: .91 !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero {
    grid-column: 5 / 13 !important;
    max-width: 930px !important;
    height: clamp(500px, 64vh, 620px) !important;
    overflow: visible !important;
  }

  /* One photograph is the hero. The next two merely suggest a tabletop stack;
     the remaining cards stay hidden until rotation brings them forward. */
  body:has(.home-photo-hero) .shuffle-photo {
    top: 50% !important;
    left: 55% !important;
    width: min(86%, 760px) !important;
    height: clamp(500px, 61vh, 585px) !important;
    aspect-ratio: auto !important;
    border-width: 7px !important;
    border-bottom-width: 32px !important;
    border-radius: 9px !important;
    box-shadow:
      0 22px 46px rgba(15,45,83,.17),
      0 3px 0 rgba(23,75,143,.07) !important;
  }

  body:has(.home-photo-hero) .shuffle-photo[data-position="0"] {
    --photo-rotation: -.6deg !important;
    --photo-x: 0px !important;
    --photo-y: 0px !important;
    z-index: 6 !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body:has(.home-photo-hero) .shuffle-photo[data-position="1"] {
    --photo-rotation: 2.1deg !important;
    --photo-x: 22px !important;
    --photo-y: 13px !important;
    z-index: 4 !important;
    opacity: .38 !important;
    filter: saturate(.86) !important;
  }

  body:has(.home-photo-hero) .shuffle-photo[data-position="2"] {
    --photo-rotation: -1.9deg !important;
    --photo-x: -18px !important;
    --photo-y: 17px !important;
    z-index: 3 !important;
    opacity: .18 !important;
    filter: saturate(.8) !important;
  }

  body:has(.home-photo-hero) .shuffle-photo[data-position="3"],
  body:has(.home-photo-hero) .shuffle-photo[data-position="4"],
  body:has(.home-photo-hero) .shuffle-photo[data-position="5"] {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__image {
    bottom: 23px !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__hint {
    bottom: 7px !important;
    font-size: .54rem !important;
    letter-spacing: .13em !important;
  }
}

/* Compact desktop/laptop: keep the same calmer concept without crowding the
   headline or forcing the photo stack into the decorative rails. */
@media (min-width: 981px) and (max-width: 1180px) {
  body:has(.home-photo-hero) .home-photo-hero {
    width: calc(100% - 36px) !important;
    padding-top: 2rem !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__grid {
    min-height: 500px !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    grid-column: 1 / 7 !important;
    padding-left: 1.7rem !important;
    padding-right: 1.4rem !important;
  }

  body:has(.home-photo-hero) .home-photo-hero h1 {
    font-size: clamp(3.45rem, 5.5vw, 4.3rem) !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero {
    grid-column: 6 / 13 !important;
    height: 475px !important;
  }

  body:has(.home-photo-hero) .shuffle-photo {
    left: 52% !important;
    width: min(94%, 560px) !important;
    height: 455px !important;
  }
}

/* Wide desktop: let the photograph matter more without returning to the giant
   loose stack. The lead image grows modestly and moves toward the copy field. */
@media (min-width: 1500px) {
  body:has(.home-photo-hero) .home-photo-hero {
    width: min(1580px, calc(100% - 64px)) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    grid-column: 1 / 6 !important;
    padding-left: clamp(5rem, 5vw, 6.2rem) !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero {
    grid-column: 5 / 13 !important;
    max-width: 1010px !important;
  }

  body:has(.home-photo-hero) .shuffle-photo {
    left: 53% !important;
    width: min(88%, 820px) !important;
    height: clamp(540px, 60vh, 610px) !important;
  }
}