/* ZS Royals V42 — professional hero polish
   Goals:
   - keep Sultan visible
   - stop the children's heads from being cropped
   - make the left side feel brighter and less muddy
   - give the copy block a cleaner luxury look
*/

@media (min-width: 901px){
  .zsr-v39-hero{
    min-height: clamp(600px, 45vw, 760px) !important;
  }

  .zsr-v39-hero picture img{
    object-position: center 20% !important;
    filter: brightness(1.08) contrast(1.04) saturate(1.03) !important;
  }

  /* Lighter overall image, with darkness concentrated only on the far-right
     so the left artwork and both faces stay clear. */
  .zsr-v39-hero::before{
    background: linear-gradient(90deg,
      rgba(7,26,49,0.00) 0%,
      rgba(7,26,49,0.00) 48%,
      rgba(7,26,49,0.08) 60%,
      rgba(7,26,49,0.22) 70%,
      rgba(7,26,49,0.46) 81%,
      rgba(7,26,49,0.68) 90%,
      rgba(7,26,49,0.78) 100%) !important;
  }

  /* Put the copy block lower-right so the printed "Sultan" signature remains visible. */
  .zsr-v39-copy{
    top: auto !important;
    bottom: 54px !important;
    right: clamp(22px, 3.5vw, 62px) !important;
    transform: none !important;
    width: min(360px, 24.5vw) !important;
    max-width: 360px !important;
  }

  .zsr-v39-panel{
    padding: 22px 22px 20px !important;
    background: linear-gradient(180deg,
      rgba(8,22,40,0.48) 0%,
      rgba(8,22,40,0.64) 100%) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,0.14) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }

  .zsr-v39-copy .eyebrow{
    margin-bottom: 10px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    letter-spacing: .18em !important;
  }

  .zsr-v39-copy h1{
    font-size: clamp(32px, 2.85vw, 52px) !important;
    line-height: .96 !important;
    max-width: 7.1ch !important;
    letter-spacing: -.03em !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.16) !important;
  }

  .zsr-v39-copy p{
    margin-top: 14px !important;
    font-size: clamp(13px, 0.90vw, 15px) !important;
    line-height: 1.48 !important;
    max-width: 32ch !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.14) !important;
  }

  .zsr-v39-actions{
    margin-top: 16px !important;
    gap: 14px !important;
  }

  .zsr-v39-actions .primary{
    padding: 13px 16px !important;
  }

  .zsr-v39-actions .secondary{
    padding-bottom: 2px !important;
  }
}

@media (min-width: 1400px){
  .zsr-v39-copy{
    width: 350px !important;
    bottom: 56px !important;
    right: 3.6vw !important;
  }

  .zsr-v39-copy h1{
    font-size: 50px !important;
  }
}

/* Keep the working mobile/tablet structure, but make the image slightly clearer there too. */
@media (max-width: 900px){
  .zsr-v39-hero picture img{
    object-position: center 24% !important;
    filter: brightness(1.05) contrast(1.03) !important;
  }

  .zsr-v39-hero::before{
    background: linear-gradient(0deg,
      rgba(7,26,49,.92) 0%,
      rgba(7,26,49,.72) 34%,
      rgba(7,26,49,.10) 72%,
      rgba(7,26,49,0) 100%) !important;
  }
}