/* ==========================================================================
   HOME HERO — four-slide sport showcase (owner, Oct 27 2026)
   Tennis → Padel → Golf → Scholarships, every 6 s. Each photo is shown whole
   at its own shape (never zoomed or cropped): phones — full width across the
   top of the screen; desktop — full height on the right. The rest of the
   screen is the same photo, softly blurred and darkened, so the hero is
   always full screen. Swipe, tap the bars, or hover to pause.
   ========================================================================== */
body.hm .hx-hero{position:relative;isolation:isolate;display:block!important;min-height:100svh!important;height:100svh;max-height:1100px;padding:0!important;margin:0;background:var(--v-ink);color:#fff;overflow:hidden}
body.hm .hx-hero::before{display:none!important}
.hx-slides{position:absolute;inset:0}
.hx-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s var(--v-ease-soft),visibility 0s .9s}
.hx-slide.is-on{opacity:1;visibility:visible;transition:opacity .9s var(--v-ease-soft),visibility 0s 0s;z-index:1}
/* the ambient fill: same photo, blurred and dark (it fills the screen; the real photo is never zoomed) */
.hx-amb{position:absolute;inset:-60px;background-size:cover;background-position:center;filter:blur(48px) saturate(1.25) brightness(.42);transform:translateZ(0)}
.hx-photo{position:absolute;margin:0;z-index:1}
.hx-photo img{display:block;width:auto;height:auto;max-width:100%;border-radius:0}
.hx-shade{position:absolute;inset:0;z-index:2;pointer-events:none}
.hx-text{position:absolute;z-index:3;left:0;right:0}
.hx-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;font:500 13px/1.2 var(--v-sans);color:#fff;
  background:rgb(11 18 32/.38);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border:1px solid rgb(255 255 255/.22);box-shadow:inset 0 1px 0 rgb(255 255 255/.14)}
.hx-chip .v-soon{margin-left:2px}
.hx-dot{width:8px;height:8px;border-radius:50%;flex:none}
.hx-dot.t{background:#d6e04a;box-shadow:0 0 10px rgb(214 224 74/.7)}.hx-dot.p{background:#2fbf7f;box-shadow:0 0 10px rgb(47 191 127/.7)}
.hx-dot.g{background:#8fc56a;box-shadow:0 0 10px rgb(143 197 106/.7)}.hx-dot.s{background:#e2c08f;box-shadow:0 0 10px rgb(226 192 143/.7)}
.hx-title{margin:18px 0 0;font:700 clamp(2.4rem,5.4vw,4.9rem)/1.0 var(--v-display);letter-spacing:-.045em;color:#fff;text-wrap:balance;max-width:14ch}
.hx-info{margin:16px 0 0;max-width:34rem;font:400 clamp(1rem,1.3vw,1.18rem)/1.55 var(--v-sans);color:rgb(255 255 255/.86);text-wrap:pretty}
.hx-live{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font:500 13.5px/1 var(--v-sans);color:rgb(255 255 255/.86)}
.hx-live b{font-weight:700;color:#fff}
.hx-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hx-actions .btn{min-height:3.25rem;padding:0 1.6rem}
/* text arrives a beat after the photo */
.hx-slide .hx-text > *{opacity:0;transform:translateY(14px);transition:opacity .6s var(--v-ease),transform .8s var(--v-ease)}
.hx-slide.is-on .hx-text > *{opacity:1;transform:none}
.hx-slide.is-on .hx-text > :nth-child(2){transition-delay:.08s}.hx-slide.is-on .hx-text > :nth-child(3){transition-delay:.16s}
.hx-slide.is-on .hx-text > :nth-child(4){transition-delay:.22s}.hx-slide.is-on .hx-text > :nth-child(5){transition-delay:.28s}
/* progress bars with labels */
.hx-bar{position:absolute;z-index:5;left:0;right:0;bottom:clamp(22px,4vh,40px)}
.hx-segs{display:flex;gap:10px;max-width:560px}
.hx-seg{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:9px;padding:6px 0;border:0;background:none;color:rgb(255 255 255/.6);text-align:left;cursor:pointer;font:500 12.5px/1 var(--v-sans);letter-spacing:.01em;-webkit-tap-highlight-color:transparent}
.hx-seg span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.hx-seg.is-on,.hx-seg:hover{color:#fff}
.hx-seg i{position:relative;display:block;height:3px;border-radius:9px;background:rgb(255 255 255/.24);overflow:hidden}
.hx-seg i b{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:#fff;border-radius:inherit}
.hx-seg.done i b{transform:scaleX(1)}
.hx-seg.is-on i b{animation:hx-fill var(--hx-ms,6000ms) linear forwards}
.hx-hero.paused .hx-seg.is-on i b{animation-play-state:paused}
@keyframes hx-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- desktop & landscape: photo full height on the right, text on the left ---- */
@media(min-width:961px) and (min-aspect-ratio:4/3),(min-width:1101px){
  body.hm .hx-hero{min-height:max(100svh,640px)!important}
  .hx-photo{right:max(var(--v-gutter),calc((100vw - var(--v-max))/2 + var(--v-gutter)));top:96px;bottom:84px;display:flex;align-items:center;justify-content:flex-end;width:52vw}
  .hx-photo img{max-height:100%;max-width:100%;border-radius:28px;box-shadow:0 40px 90px -40px rgb(0 0 0/.75),0 0 0 1px rgb(255 255 255/.1)}
  .hx-shade{background:linear-gradient(90deg,rgb(11 18 32/.62) 0%,rgb(11 18 32/.25) 45%,rgb(11 18 32/0) 70%)}
  .hx-text{top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-top:72px!important;padding-bottom:110px!important}
  .hx-text > *{max-width:min(46vw,620px)}
}
/* ---- phones & portrait tablets: photo full width across the top, text below it ---- */
@media(max-width:960px) and (max-aspect-ratio:4/3),(max-width:1100px) and (orientation:portrait){
  body.hm .hx-hero{height:auto;min-height:100svh!important;max-height:none}
  .hx-photo{left:0;right:0;top:0;display:flex;justify-content:center}
  .hx-photo img{width:100%;max-height:68svh;object-fit:contain}
  .hx-shade{background:linear-gradient(180deg,rgb(11 18 32/.45) 0,rgb(11 18 32/0) 14%,rgb(11 18 32/0) 38%,rgb(11 18 32/.62) 58%,rgb(11 18 32/.92) 78%,var(--v-ink) 100%)}
  .hx-text{bottom:calc(150px + env(safe-area-inset-bottom))}
  .hx-title{font-size:clamp(2.1rem,9.4vw,3rem);max-width:15ch}
  .hx-info{font-size:15px;margin-top:10px}
  .hx-actions{margin-top:18px;gap:10px}
  .hx-actions .btn{flex:1 1 0;min-width:0;min-height:48px;padding:0 1rem;font-size:.92rem!important}
  .hx-live{margin-top:10px}
  .hx-bar{bottom:calc(98px + env(safe-area-inset-bottom))}
  .hx-segs{max-width:none}
  .hx-seg{font-size:11.5px}
}
@media(max-width:400px) and (max-height:700px){
  .hx-photo img{max-height:52svh}
  .hx-info{display:none}
  .hx-text{bottom:calc(138px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  .hx-slide,.hx-slide .hx-text > *{transition:none!important}
  .hx-seg.is-on i b{animation:none;transform:scaleX(1)}
}
.hx-bar{width:100%;max-width:var(--v-max);margin:0 auto;padding-inline:var(--v-gutter)}
@media(min-width:961px) and (min-aspect-ratio:4/3),(min-width:1101px){
  .hx-photo{width:min(42vw,640px)}
  .hx-text > *{max-width:min(calc(100vw - min(42vw,640px) - 3 * var(--v-gutter) - 40px),600px)}
  .hx-title{font-size:clamp(2.4rem,4.3vw,4.3rem)}
}
/* the WhatsApp bubble steps aside while the hero is on screen */
body.hm.hm-hero-on .wa-float{opacity:0!important;pointer-events:none!important;transition:opacity .3s}
@media(min-width:961px) and (min-aspect-ratio:4/3),(min-width:1101px){
  body.hm .hx-hero .hx-text > .hx-title{max-width:min(calc(100vw - min(42vw,640px) - 3 * var(--v-gutter) - 40px),600px)!important}
  body.hm .hx-hero .hx-text > .hx-info{max-width:min(calc(100vw - min(42vw,640px) - 3 * var(--v-gutter) - 40px),520px)!important}
}
@media(max-width:960px) and (max-aspect-ratio:4/3),(max-width:1100px) and (orientation:portrait){
  body.hm .hx-hero .hx-text > .hx-title{max-width:15ch!important}
  body.hm .hx-hero .hx-text > .hx-info{max-width:34rem!important}
}

/* ==========================================================================
   v2 (owner feedback): ONE full-screen picture per slide, text ON the picture.
   ========================================================================== */
.hx-photo img{border-radius:0!important;box-shadow:none!important}
.hx-slide[data-sport="tennis"]{--pos:38% 32%}
.hx-slide[data-sport="padel"]{--pos:42% 34%}
.hx-slide[data-sport="golf"]{--pos:24% 48%}
.hx-slide[data-sport="scholarships"]{--pos:50% 42%}
/* phones & portrait tablets: the photo IS the screen; story bars at the top */
@media(max-width:960px) and (max-aspect-ratio:4/3),(max-width:1100px) and (orientation:portrait){
  body.hm .hx-hero{height:100svh!important;min-height:560px!important}
  .hx-amb{display:none}
  .hx-photo{inset:0!important;display:block!important}
  .hx-photo img{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover;object-position:var(--pos)}
  .hx-shade{background:linear-gradient(180deg,rgb(11 18 32/.55) 0,rgb(11 18 32/.15) 16%,rgb(11 18 32/0) 32%,rgb(11 18 32/.1) 46%,rgb(11 18 32/.62) 64%,rgb(11 18 32/.9) 100%)!important}
  .hx-text{bottom:calc(100px + env(safe-area-inset-bottom))!important}
  .hx-bar{top:calc(env(safe-area-inset-top) + 74px);bottom:auto!important}
  .hx-seg{gap:0;padding:4px 0}
  .hx-seg span{display:none}
  .hx-seg i{height:3px;background:rgb(255 255 255/.32)}
  .hx-segs{gap:6px}
  body.hm .hx-hero .hx-text > .hx-title{text-shadow:0 2px 20px rgb(11 18 32/.45)}
}
/* desktop: full screen; the photo fills the right and melts into its own blurred light on the left,
   where the text sits on the picture */
@media(min-width:961px) and (min-aspect-ratio:4/3),(min-width:1101px){
  .hx-amb{display:block;filter:blur(60px) saturate(1.2) brightness(.5)!important}
  .hx-photo{top:0!important;bottom:0!important;right:0!important;left:auto!important;width:64vw!important;display:block!important}
  .hx-photo img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover;object-position:var(--pos);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,rgb(0 0 0/.55) 16%,#000 38%);mask-image:linear-gradient(90deg,transparent 0,rgb(0 0 0/.55) 16%,#000 38%)}
  .hx-shade{background:linear-gradient(90deg,rgb(11 18 32/.72) 0%,rgb(11 18 32/.45) 32%,rgb(11 18 32/.08) 58%,rgb(11 18 32/0) 75%),linear-gradient(180deg,rgb(11 18 32/.35) 0,rgb(11 18 32/0) 18%,rgb(11 18 32/0) 70%,rgb(11 18 32/.55) 100%)!important}
  .hx-slide[data-sport="tennis"]{--pos:50% 30%}
  .hx-slide[data-sport="padel"]{--pos:50% 30%}
  .hx-slide[data-sport="golf"]{--pos:30% 45%}
  .hx-slide[data-sport="scholarships"]{--pos:50% 45%}
  body.hm .hx-hero .hx-text > .hx-title{max-width:min(48vw,640px)!important;text-shadow:0 2px 28px rgb(11 18 32/.4)}
  body.hm .hx-hero .hx-text > .hx-info{max-width:min(40vw,520px)!important}
}
/* owner: quick — 2 s per slide, so fades and text are quicker too */
.hx-slide{transition:opacity .45s var(--v-ease-soft),visibility 0s .45s}
.hx-slide.is-on{transition:opacity .45s var(--v-ease-soft),visibility 0s 0s}
.hx-slide .hx-text > *{transition:opacity .35s var(--v-ease),transform .45s var(--v-ease)}
.hx-slide.is-on .hx-text > :nth-child(2){transition-delay:.04s}.hx-slide.is-on .hx-text > :nth-child(3){transition-delay:.08s}
.hx-slide.is-on .hx-text > :nth-child(4){transition-delay:.1s}.hx-slide.is-on .hx-text > :nth-child(5){transition-delay:.12s}