/* V16:
   Dedicated iPad portrait / medium-tablet hero tuning.
   Problem in V15: text block sits too deep inside the curved video area.
   Fix: for iPad Mini / Air / Pro portrait widths, return the rotating copy to the left white zone,
   enlarge it, and keep the video framing separate.
*/

/* iPad Mini / Air / Pro portrait-ish widths */
@media (min-width: 768px) and (max-width: 1180px){
  .home-page .reference-home-hero{
    min-height: 520px !important;
    overflow: hidden !important;
  }

  /* Keep the hero media framed for the traced curve without pushing text into it */
  .home-page .reference-home-hero .hero-video-clip video{
    left: 24% !important;
    width: 76% !important;
    object-position: 58% center !important;
    transform: scale(1.03) !important;
    filter: brightness(.93) contrast(1.02) !important;
  }

  /* Remove the heavy dark overlay used for phones so text does not get lost */
  .home-page .reference-home-hero .hero-video-clip:after{
    background:
      linear-gradient(90deg,
        rgba(3,19,43,0.00) 0%,
        rgba(3,19,43,0.04) 25%,
        rgba(3,19,43,0.08) 42%,
        rgba(3,19,43,0.06) 58%,
        rgba(3,19,43,0.00) 100%) !important;
  }

  /* Put the rotating text back into the white left area */
  .home-page .reference-home-hero .hero-copy{
    left: 5.5% !important;
    top: 116px !important;
    width: 31% !important;
    max-width: 255px !important;
    z-index: 10 !important;
    color: #123b7a !important;
    text-shadow: none !important;
  }
  .home-page .reference-home-hero .hero-copy .eyebrow{
    color: #0a4ea3 !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    margin: 0 0 10px !important;
    letter-spacing: .02em !important;
  }
  .home-page .reference-home-hero .hero-copy h1{
    color: #103b79 !important;
    font-size: clamp(34px, 4.2vw, 48px) !important;
    line-height: .98 !important;
    margin: 0 0 12px !important;
    max-width: 100% !important;
    letter-spacing: -.02em !important;
    font-weight: 800 !important;
  }
  /* If an accent span exists, keep it gold */
  .home-page .reference-home-hero .hero-copy h1 .accent,
  .home-page .reference-home-hero .hero-copy h1 .gold,
  .home-page .reference-home-hero .hero-copy .accent{
    color: #c9962f !important;
  }
  .home-page .reference-home-hero .hero-copy > p:not(.eyebrow){
    color: #183f78 !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
    margin: 0 !important;
    max-width: 96% !important;
  }
  .home-page .reference-home-hero .actions{
    display: none !important;
  }

  /* Keep blueprint subtle behind the copy */
  .home-page .reference-home-hero .blueprint{
    display: block !important;
    opacity: .40 !important;
  }

  /* Keep golden cards above the quick links across iPad sizes */
  .home-page .reference-home-hero .stock-cards{
    left: 3.5% !important;
    right: 30% !important;
    bottom: 58px !important;
    gap: 10px !important;
    z-index: 11 !important;
  }
  .home-page .reference-home-hero .stock-cards > div{
    height: 66px !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }
  .home-page .reference-home-hero .stock-cards strong{
    font-size: clamp(18px, 2.4vw, 24px) !important;
  }
  .home-page .reference-home-hero .stock-cards span{
    font-size: 10px !important;
    line-height: 1.18 !important;
  }
  .home-page .reference-home-hero .video-toggle{
    left: 40% !important;
    bottom: 120px !important;
  }
}

/* Slightly narrower 768-860 widths need even more room for copy */
@media (min-width: 768px) and (max-width: 860px){
  .home-page .reference-home-hero .hero-copy{
    width: 33% !important;
    max-width: 235px !important;
    left: 4.5% !important;
    top: 118px !important;
  }
  .home-page .reference-home-hero .hero-copy h1{
    font-size: clamp(30px, 4.9vw, 40px) !important;
  }
  .home-page .reference-home-hero .hero-copy > p:not(.eyebrow){
    font-size: 12px !important;
  }
  .home-page .reference-home-hero .stock-cards{
    right: 27% !important;
    bottom: 62px !important;
  }
}