/* ZS Royals V41 — brighter + clearer desktop hero while keeping Sultan visible */

/* This layer is designed to sit on top of V39/V40.
   Goals:
   1) brighten the image so the children and printed right-side graphics feel clearer,
   2) keep the printed "Sultan" signature visible,
   3) reduce the visual heaviness of the dark copy panel,
   4) preserve text readability. */

@media (min-width: 901px){
  .zsr-v39-hero picture img{
    filter: brightness(1.12) contrast(1.06) saturate(1.04) !important;
    object-position: center 33% !important;
  }

  .zsr-v39-hero::before{
    background: linear-gradient(90deg,
      rgba(7,26,49,0.00) 0%,
      rgba(7,26,49,0.015) 46%,
      rgba(7,26,49,0.16) 60%,
      rgba(7,26,49,0.42) 73%,
      rgba(7,26,49,0.72) 86%,
      rgba(7,26,49,0.84) 100%) !important;
  }

  .zsr-v39-copy{
    top: 58% !important;
    right: clamp(24px, 3.6vw, 68px) !important;
    width: min(390px, 27vw) !important;
    transform: translateY(-50%) !important;
  }

  .zsr-v39-panel{
    padding: 22px 24px 22px !important;
    background: linear-gradient(180deg, rgba(5,17,33,0.50) 0%, rgba(5,17,33,0.68) 100%) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,0.12) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }

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

  .zsr-v39-copy h1{
    font-size: clamp(36px, 3.05vw, 54px) !important;
    line-height: 0.98 !important;
    max-width: 8.4ch !important;
    letter-spacing: -0.025em !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
  }

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

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

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

  .zsr-v39-actions .secondary{
    border-bottom-color: rgba(255,255,255,.68) !important;
  }
}

@media (min-width: 1500px){
  .zsr-v39-copy{
    width: 380px !important;
    right: 4vw !important;
    top: 57% !important;
  }
  .zsr-v39-copy h1{ font-size: 52px !important; }
}

/* Keep mobile/tablet behaviour stable so earlier working responsive layout is not disturbed. */
@media (max-width: 900px){
  .zsr-v39-hero picture img{
    filter: brightness(1.06) contrast(1.03) saturate(1.02) !important;
  }
}