/* SURIN • visual corrections 2026-10-27
   Keep the banner itself sharp. Only the separate background photograph is blurred. */
body.public-site.page-index{
  background-color:#f5f8fa!important;
}
body.public-site.page-index .page-content{
  position:relative!important;
  isolation:isolate!important;
  background:linear-gradient(180deg,rgba(246,250,252,.85) 0%,rgba(247,249,251,.88) 470px,#f6f8fa 780px,#f6f8fa 100%)!important;
}
body.public-site.page-index .page-content::before{
  content:"";position:absolute;top:0;left:0;right:0;height:690px;z-index:-1;pointer-events:none;
  background:url('../images/surin-field-ambient.webp') center 28%/cover no-repeat;
  opacity:.44;filter:blur(18px);transform:scale(1.03);transform-origin:top center;
  -webkit-mask-image:linear-gradient(#000 0%,rgba(0,0,0,.85) 37%,transparent 100%);
  mask-image:linear-gradient(#000 0%,rgba(0,0,0,.85) 37%,transparent 100%);
}
/* A small matching grass-photo haze shows through the floating header. */
body.public-site.page-index::before{
  content:""!important;position:fixed!important;top:-45px!important;left:-2%!important;
  width:104%!important;height:260px!important;border-radius:0!important;z-index:0!important;
  background:url('../images/surin-field-ambient.webp') center 34%/cover no-repeat!important;
  filter:blur(24px)!important;opacity:.24!important;pointer-events:none!important;
}
body.public-site.page-index::after{display:none!important}
body.public-site.hybrid-navigation.page-index .topbar.public-premium-topbar{
  background:rgba(255,255,255,.88)!important;
  backdrop-filter:blur(17px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(17px) saturate(135%)!important;
  border-color:rgba(215,228,227,.86)!important;
}
/* Keep banner in its real 1916:821 ratio, scaled down rather than cropped and stretched. */
body.public-site.page-index .premium-home-hero.home-image-hero{
  max-width:min(1360px,calc(100% - 36px))!important;
  margin:18px auto 0!important;
  border-radius:20px!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:#e9f1f4!important;
  border:1px solid rgba(206,224,228,.90)!important;
  box-shadow:0 16px 38px rgba(17,53,60,.10)!important;
  filter:none!important;backdrop-filter:none!important;
}
body.public-site.page-index .premium-home-hero::before{display:none!important}
body.public-site.page-index .premium-home-hero .hero-slides{
  display:block!important;height:auto!important;aspect-ratio:1916 / 821!important;
  min-height:0!important;max-height:none!important;
  background:#eaf1f4!important;filter:none!important;backdrop-filter:none!important;
}
body.public-site.page-index .premium-home-hero .hero-slide,
body.public-site.page-index .premium-home-hero .hero-slide.is-active{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  filter:none!important;backdrop-filter:none!important;
  background:#eaf1f4!important;
}
body.public-site.page-index .premium-home-hero .hero-slide picture,
body.public-site.page-index .premium-home-hero .hero-slide a{
  width:100%!important;height:100%!important;display:block!important;
  filter:none!important;
}
body.public-site.page-index .premium-home-hero .hero-slide img,
body.public-site.page-index .home-image-hero .hero-slide.is-active img{
  display:block!important;width:100%!important;height:100%!important;
  max-width:100%!important;max-height:none!important;
  object-fit:contain!important;object-position:center center!important;
  filter:none!important;backdrop-filter:none!important;
  image-rendering:auto!important;transform:none!important;
}
body.public-site.page-index .hero-carousel-arrow{
  background:rgba(255,255,255,.93)!important;color:#125b51!important;
  box-shadow:0 4px 16px rgba(14,59,61,.13)!important;
}
/* Desktop menu: remove duplicate green parent highlight + raised green summary layer. */
@media(min-width:1181px){
  body.public-site.hybrid-navigation .hybrid-main-nav>details,
  body.public-site.hybrid-navigation .hybrid-main-nav>details:hover,
  body.public-site.hybrid-navigation .hybrid-main-nav>details[open],
  body.public-site.hybrid-navigation .hybrid-main-nav>details.active{
    background:transparent!important;background-image:none!important;
    border:0!important;outline:0!important;box-shadow:none!important;
  }
  body.public-site.hybrid-navigation .hybrid-main-nav>a,
  body.public-site.hybrid-navigation .hybrid-main-nav>details>summary{
    min-height:42px!important;padding:10px 11px!important;
    border:1px solid transparent!important;border-radius:12px!important;
    box-shadow:none!important;transform:none!important;
    background:#fff0!important;color:#2a4250!important;
    -webkit-text-fill-color:#2a4250!important;
    transition:background .16s ease,color .16s ease!important;
  }
  body.public-site.hybrid-navigation .hybrid-main-nav>a:hover,
  body.public-site.hybrid-navigation .hybrid-main-nav>details>summary:hover{
    background:#edf4f2!important;border-color:transparent!important;
    color:#0b6350!important;-webkit-text-fill-color:#0b6350!important;
  }
  body.public-site.hybrid-navigation .hybrid-main-nav>a.active,
  body.public-site.hybrid-navigation .hybrid-main-nav>details.active>summary,
  body.public-site.hybrid-navigation .hybrid-main-nav>details[open]>summary{
    background:#e9f3ef!important;border:1px solid #d1e5dc!important;
    color:#09654f!important;-webkit-text-fill-color:#09654f!important;
    box-shadow:none!important;
  }
  body.public-site.hybrid-navigation .hybrid-main-nav>details[open]>summary{
    background:#e9f3ef!important;
  }
}
body.public-site.hybrid-navigation .hybrid-dropdown{
  top:calc(100% - 2px)!important;min-width:235px!important;
  border:1px solid #dce8e7!important;background:rgba(255,255,255,.98)!important;
  box-shadow:0 20px 50px rgba(24,56,62,.13)!important;
  padding:9px!important;border-radius:16px!important;
}
body.public-site.hybrid-navigation .hybrid-dropdown>a{
  min-height:39px!important;padding:9px 12px!important;
  background:transparent!important;box-shadow:none!important;
  border:0!important;border-radius:10px!important;
  color:#294c4a!important;-webkit-text-fill-color:#294c4a!important;
}
body.public-site.hybrid-navigation .hybrid-dropdown>a:hover,
body.public-site.hybrid-navigation .hybrid-dropdown>a:focus-visible{
  padding-left:12px!important;
  background:#eef5f4!important;color:#086653!important;
  -webkit-text-fill-color:#086653!important;box-shadow:none!important;
}
/* Compact, less cluttered cards, especially before results/video data arrives. */
body.public-site.page-index .home-discovery-section{
  padding:16px 16px 24px!important;background:transparent!important;
}
body.public-site.page-index .home-discovery-grid{gap:15px!important}
body.public-site.page-index .home-discovery-card,
body.public-site.page-index .home-youtube-card{
  border-radius:20px!important;border-color:#e0e9e9!important;
  box-shadow:0 9px 27px rgba(23,57,67,.065)!important;
}
body.public-site.page-index .home-discovery-head,
body.public-site.page-index .home-youtube-head{
  padding:15px 18px!important;background:#fff!important;
  gap:12px!important;border-bottom:1px solid #e7eef0!important;
}
body.public-site.page-index .home-discovery-head h2,
body.public-site.page-index .home-youtube-head h2{
  font-size:16px!important;line-height:1.35!important;color:#183b45!important;
}
body.public-site.page-index .home-discovery-head p,
body.public-site.page-index .home-youtube-head p{
  font-size:11px!important;line-height:1.5!important;color:#647988!important;
}
body.public-site.page-index .home-discovery-kicker{color:#c7653b!important;font-size:10px!important}
body.public-site.page-index .home-discovery-empty,
body.public-site.page-index .home-discovery-empty.compact{
  min-height:142px!important;max-height:none!important;
  margin:12px!important;padding:18px!important;
  border:1px solid #e3ecee!important;border-radius:15px!important;
  background:linear-gradient(125deg,#f7fafb,#f3f8f8)!important;
  grid-template-columns:48px minmax(0,360px)!important;
  gap:12px!important;justify-content:center!important;
}
body.public-site.page-index .home-discovery-empty-icon{
  width:45px!important;height:45px!important;font-size:22px!important;
  background:#fff!important;box-shadow:none!important;border:1px solid #e3ecee!important;
  border-radius:13px!important;
}
body.public-site.page-index .home-discovery-empty strong,
body.public-site.page-index .home-youtube-empty strong,
body.public-site.page-index .home-youtube-links-empty strong{
  font-size:13px!important;color:#254351!important;-webkit-text-fill-color:#254351!important;
}
body.public-site.page-index .home-discovery-empty p,
body.public-site.page-index .home-youtube-empty p,
body.public-site.page-index .home-youtube-links-empty p{
  font-size:11px!important;line-height:1.55!important;color:#6b8190!important;
}
body.public-site.page-index .home-youtube-section{padding:5px 16px 25px!important}
body.public-site.page-index .home-youtube-card.split-layout{
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
}
body.public-site.page-index .home-youtube-split-left,
body.public-site.page-index .home-youtube-split-right{
  min-width:0!important;background:#fff!important;
}
body.public-site.page-index .home-youtube-split-right{
  border-left:1px solid #e8efef!important;
}
body.public-site.page-index .home-youtube-split-left .home-youtube-head,
body.public-site.page-index .home-youtube-split-right .home-youtube-head,
body.public-site.page-index .home-youtube-split-right .home-youtube-head.alt-side{
  min-height:88px!important;
}
body.public-site.page-index .home-youtube-frame-wrap{
  padding:12px!important;background:#fff!important;
  min-height:0!important;
}
body.public-site.page-index .home-youtube-frame-wrap:has(.home-youtube-empty){flex:0 0 auto!important}
body.public-site.page-index .home-youtube-empty,
body.public-site.page-index .home-youtube-links-empty{
  min-height:150px!important;max-height:none!important;height:auto!important;
  margin:0!important;padding:19px 16px!important;
  border:1px solid #e2ebed!important;border-radius:14px!important;
  background:linear-gradient(130deg,#f7fafb,#f4f8f9)!important;
  grid-template-columns:46px minmax(0,1fr)!important;
  gap:12px!important;justify-content:center!important;
  align-content:center!important;
}
body.public-site.page-index .home-youtube-links-empty{margin:12px!important;min-height:150px!important}
body.public-site.page-index .home-youtube-empty-icon,
body.public-site.page-index .home-youtube-links-empty>span{
  width:44px!important;height:44px!important;font-size:21px!important;
  border-radius:12px!important;box-shadow:none!important;border:1px solid #e1eaeb!important;
}
body.public-site.page-index .home-youtube-frame-wrap iframe{
  width:100%!important;min-height:0!important;aspect-ratio:16/9!important;height:auto!important;
}
/* Positive / blue action buttons must have legible white text (old CSS overrides colors). */
body.public-site.page-index .home-latest-result-card .home-discovery-head>a,
body.public-site.page-index .home-latest-result-card .home-discovery-head>a *,
body.public-site.page-index .home-upcoming-card .home-discovery-head>a,
body.public-site.page-index .home-upcoming-card .home-discovery-head>a *{
  color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:none!important;
}
body.public-site.page-index .home-latest-result-card .home-discovery-head>a{
  background:#117a61!important;border:1px solid #117a61!important;
  box-shadow:0 5px 15px rgba(20,100,83,.14)!important;
}
body.public-site.page-index .home-upcoming-card .home-discovery-head>a{
  background:#2466ad!important;border:1px solid #2466ad!important;
  box-shadow:0 5px 15px rgba(30,94,176,.14)!important;
}
body.public-site.page-index .home-latest-result-card .home-discovery-head>a:hover,
body.public-site.page-index .home-upcoming-card .home-discovery-head>a:hover{filter:brightness(.92)!important}
body.public-site.page-index .home-discovery-head>a{
  min-height:35px!important;display:inline-flex!important;align-items:center!important;
  justify-content:center!important;padding:8px 13px!important;font-size:12px!important;
  text-decoration:none!important;line-height:1.25!important;
}
@media(max-width:1180px){
  body.public-site.page-index .premium-home-hero.home-image-hero{max-width:calc(100% - 24px)!important;margin-top:12px!important;border-radius:15px!important}
  body.public-site.page-index .home-youtube-card.split-layout{grid-template-columns:1fr!important}
  body.public-site.page-index .home-youtube-split-right{border-left:0!important;border-top:1px solid #e7eef0!important}
  body.public-site.page-index .home-discovery-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:750px){
  body.public-site.page-index .page-content::before{height:410px!important;filter:blur(16px)!important;opacity:.38!important}
  body.public-site.page-index .premium-home-hero.home-image-hero{max-width:calc(100% - 16px)!important;margin-top:8px!important;border-radius:12px!important}
  body.public-site.page-index .premium-home-hero .hero-slides{height:auto!important;aspect-ratio:1130/484!important}
  body.public-site.page-index .home-discovery-grid{grid-template-columns:1fr!important;gap:12px!important}
  body.public-site.page-index .home-discovery-section{padding:10px 10px 18px!important}
  body.public-site.page-index .home-youtube-section{padding:6px 10px 18px!important}
  body.public-site.page-index .home-discovery-head,
  body.public-site.page-index .home-youtube-head{padding:13px 14px!important}
  body.public-site.page-index .home-discovery-head h2,
  body.public-site.page-index .home-youtube-head h2{font-size:15px!important}
  body.public-site.page-index .home-discovery-head p,
  body.public-site.page-index .home-youtube-head p{font-size:10px!important}
  body.public-site.page-index .home-discovery-empty,
  body.public-site.page-index .home-discovery-empty.compact,
  body.public-site.page-index .home-youtube-empty,
  body.public-site.page-index .home-youtube-links-empty{
    min-height:115px!important;margin:9px!important;padding:13px 12px!important;
    grid-template-columns:38px minmax(0,1fr)!important;gap:10px!important;
    justify-content:start!important;
  }
  body.public-site.page-index .home-youtube-frame-wrap{padding:0!important}
  body.public-site.page-index .home-discovery-empty-icon,
  body.public-site.page-index .home-youtube-empty-icon,
  body.public-site.page-index .home-youtube-links-empty>span{
    width:38px!important;height:38px!important;font-size:18px!important;border-radius:11px!important;
  }
  body.public-site.page-index .home-discovery-empty strong,
  body.public-site.page-index .home-youtube-empty strong,
  body.public-site.page-index .home-youtube-links-empty strong{font-size:12px!important}
  body.public-site.page-index .home-discovery-empty p,
  body.public-site.page-index .home-youtube-empty p,
  body.public-site.page-index .home-youtube-links-empty p{font-size:10px!important}
  body.public-site.page-index .home-discovery-head>a{font-size:11px!important;padding:7px 10px!important}
}
@media(max-width:390px){
  body.public-site.page-index .home-discovery-head{gap:7px!important}
  body.public-site.page-index .home-discovery-head>a{font-size:10px!important;padding:7px 8px!important}
}

/* Final proportions: panoramic banner, without magnification or image blur. */
@media (min-width:751px){
  body.public-site.page-index .premium-home-hero .hero-slides{
    height:clamp(285px,30vw,410px)!important;
    aspect-ratio:auto!important;
  }
  body.public-site.page-index .premium-home-hero .hero-slide img,
  body.public-site.page-index .home-image-hero .hero-slide.is-active img{
    object-fit:cover!important;object-position:center 55%!important;
  }
}
body.public-site.page-index .home-primary-dashboard-grid>.premium-dashboard-card{
  height:264px!important;min-height:264px!important;max-height:264px!important;
}
body.public-site.page-index .home-primary-dashboard-grid .home-dashboard-empty{
  padding:13px!important;
}
body.public-site.page-index .home-primary-dashboard-grid .home-dashboard-empty>strong{
  font-size:13px!important;color:#20464a!important;
}
body.public-site.page-index .home-primary-dashboard-grid .home-dashboard-empty>p{
  font-size:10.5px!important;color:#607883!important;
}
body.public-site.page-index .home-primary-dashboard-grid .home-dashboard-empty>span{
  width:43px!important;height:43px!important;font-size:21px!important;
}
@media (max-width:820px){
  body.public-site.page-index .home-primary-dashboard-grid>.premium-dashboard-card{
    height:236px!important;min-height:236px!important;max-height:236px!important;
  }
}
/* Keep the complete artwork, including the elephant and athletes, visible on desktop.
   A narrower centered frame provides a deliberately smaller banner rather than clipping it. */
@media (min-width:751px){
  body.public-site.page-index .premium-home-hero.home-image-hero{
    max-width:min(1100px,calc(100% - 36px))!important;
  }
  body.public-site.page-index .premium-home-hero .hero-slides{
    height:auto!important;aspect-ratio:1916/821!important;
  }
  body.public-site.page-index .premium-home-hero .hero-slide img,
  body.public-site.page-index .home-image-hero .hero-slide.is-active img{
    object-fit:contain!important;object-position:center center!important;
  }
}