/* Homepage hero composition refinement.
   Mobile/tablet remain approved and unchanged.
   Desktop uses a full-width framed photo composition inside the ivory tabletop,
   with the message kept separate from the photography for clean readability. */

/* Remove the divider between the photo hero and the About teaser. */
.home-about-brief {
  border-top: 0 !important;
}

@media (max-width: 680px) {
  .home-photo-hero {
    min-height: 570px !important;
    padding-bottom: 0 !important;
  }

  .home-photo-hero__copy {
    min-height: 570px !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding: 34px 34px 72px 10% !important;
    text-align: left !important;
  }

  /* Keep the photograph completely clean behind the headline. */
  .home-photo-hero__copy::after,
  .home-photo-hero__copy::before,
  .photo-shuffle-hero::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  .home-photo-hero h1 {
    max-width: 7.6em !important;
    color: #fffaf1 !important;
    -webkit-text-stroke: 1px rgba(8,47,103,.96) !important;
    paint-order: stroke fill !important;
    text-shadow: 0 1px 2px rgba(3,24,58,.16) !important;
  }

  .home-photo-hero__actions {
    justify-content: flex-start !important;
    margin-top: 1rem !important;
  }
}

@media (min-width: 681px) and (max-width: 980px) {
  .home-photo-hero {
    padding-bottom: 0 !important;
  }

  .home-photo-hero__copy {
    align-items: flex-start !important;
    justify-content: flex-end !important;
    text-align: left !important;
  }

  .home-photo-hero__copy::before,
  .home-photo-hero__copy::after,
  .photo-shuffle-hero::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  .home-photo-hero h1 {
    color: #fffaf1 !important;
    -webkit-text-stroke: 1px rgba(8,47,103,.96) !important;
    paint-order: stroke fill !important;
    text-shadow: 0 1px 2px rgba(3,24,58,.16) !important;
  }
}

/* =========================================================
   DESKTOP — FULL-WIDTH FRAMED TABLETOP HERO
   The Polaroid spans essentially the entire central ivory field between the
   floral rails. It remains framed by the tabletop and is not browser-edge
   full bleed. Mobile/tablet are untouched.
   ========================================================= */
@media (min-width: 981px) {
  body:has(.home-photo-hero) .home-photo-hero {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding: clamp(1.8rem, 2.8vh, 2.5rem) clamp(10px, 1vw, 18px) clamp(2.4rem, 3.5vh, 3rem) !important;
    box-sizing: border-box !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__grid {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    gap: clamp(1.4rem, 2.3vh, 2rem) 0 !important;
    min-height: 0 !important;
  }

  /* Keep the message on ivory above the photograph rather than laying any
     wash, card, or translucent panel over the image. */
  body:has(.home-photo-hero) .home-photo-hero__copy {
    position: relative !important;
    z-index: 8 !important;
    grid-column: 1 / 13 !important;
    grid-row: 1 !important;
    align-self: start !important;
    width: 100% !important;
    max-width: none !important;
    padding: .6rem clamp(2rem, 4vw, 5rem) .35rem !important;
    transform: none !important;
    text-align: left !important;
    pointer-events: auto !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy::before,
  body:has(.home-photo-hero) .home-photo-hero__copy::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  body:has(.home-photo-hero) .home-photo-hero h1 {
    max-width: 7.1em !important;
    margin: 0 !important;
    color: #082f67 !important;
    font-size: clamp(4rem, 5vw, 6rem) !important;
    line-height: .91 !important;
    letter-spacing: -.041em !important;
    -webkit-text-stroke: 0 !important;
    paint-order: normal !important;
    text-shadow: none !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__actions {
    justify-content: flex-start !important;
    margin-top: clamp(1.45rem, 1.8vw, 2rem) !important;
    pointer-events: auto !important;
  }

  /* The photo object now owns the full width of the central tabletop field. */
  body:has(.home-photo-hero) .photo-shuffle-hero {
    position: relative !important;
    z-index: 3 !important;
    grid-column: 1 / 13 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(500px, 40vw, 620px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero__stack {
    position: absolute !important;
    inset: 0 !important;
  }

  /* Full-width Polaroid with only a narrow ivory margin from the rails. */
  body:has(.home-photo-hero) .shuffle-photo {
    top: 50% !important;
    left: 50% !important;
    width: calc(100% - clamp(12px, 1.2vw, 22px)) !important;
    max-width: none !important;
    height: clamp(470px, 37vw, 580px) !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border: 7px solid #fffdf7 !important;
    border-radius: 9px !important;
    background: #fffdf7 !important;
    box-shadow:
      0 22px 48px rgba(15,45,83,.15),
      0 3px 0 rgba(23,75,143,.06) !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__image {
    position: absolute !important;
    inset: 0 0 48px 0 !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  /* Caption belongs to the physical white Polaroid footer, never the image. */
  body:has(.home-photo-hero) .shuffle-photo__hint {
    position: absolute !important;
    z-index: 5 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: flex !important;
    height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    background: #fffdf7 !important;
    color: #174b8f !important;
    padding: 0 1rem !important;
    font-size: .58rem !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: none !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
  }

  /* Calm stack: one lead image, two quiet backing prints. */
  body:has(.home-photo-hero) .shuffle-photo[data-position="0"] {
    --photo-rotation: -.18deg !important;
    --photo-x: 0px !important;
    --photo-y: -2px !important;
    z-index: 7 !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body:has(.home-photo-hero) .shuffle-photo[data-position="1"] {
    --photo-rotation: .7deg !important;
    --photo-x: 10px !important;
    --photo-y: 11px !important;
    z-index: 5 !important;
    opacity: .22 !important;
    filter: saturate(.9) !important;
  }

  body:has(.home-photo-hero) .shuffle-photo[data-position="2"] {
    --photo-rotation: -.65deg !important;
    --photo-x: -9px !important;
    --photo-y: 15px !important;
    z-index: 4 !important;
    opacity: .11 !important;
    filter: saturate(.84) !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;
  }
}

/* Compact desktop/laptop keeps the same full-width photo treatment with
   reduced vertical scale. This begins above the approved 980px boundary. */
@media (min-width: 981px) and (max-width: 1180px) {
  body:has(.home-photo-hero) .home-photo-hero {
    width: 100% !important;
    max-width: none !important;
    padding: 1.55rem 8px 2rem !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    grid-column: 1 / 13 !important;
    max-width: none !important;
    padding: .5rem 1.5rem .25rem !important;
  }

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

  body:has(.home-photo-hero) .photo-shuffle-hero {
    grid-column: 1 / 13 !important;
    max-width: none !important;
    height: 455px !important;
  }

  body:has(.home-photo-hero) .shuffle-photo {
    width: calc(100% - 16px) !important;
    max-width: none !important;
    height: 425px !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__image {
    inset: 0 0 44px 0 !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__hint {
    height: 44px !important;
    font-size: .54rem !important;
  }
}

/* Wide desktop has no artificial max width. The photograph continues to use
   the available tabletop field rather than stopping at 1160/1280px. */
@media (min-width: 1500px) {
  body:has(.home-photo-hero) .home-photo-hero {
    width: 100% !important;
    max-width: none !important;
    padding-inline: clamp(12px, 1vw, 20px) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    max-width: none !important;
    padding-left: clamp(3.5rem, 4.5vw, 5.8rem) !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero {
    grid-column: 1 / 13 !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(540px, 36vw, 650px) !important;
  }

  body:has(.home-photo-hero) .shuffle-photo {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    height: clamp(500px, 33vw, 610px) !important;
  }
}