/* Home — hero slider and bento placements, from mockup C2. */

.t-board{grid-column:1/8;grid-row:1/3}
.t-live{grid-column:8/13;grid-row:1}
.t-coupon{grid-column:8/13;grid-row:2}
.t-ladder{grid-column:1/13}
.t-ladder .lad{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:22px}
.t-ladder .ladb{grid-template-columns:30px minmax(0,136px) minmax(0,1fr) 38px}

.hero{position:relative;border-radius:var(--r-tile);overflow:hidden;border:1px solid var(--hair);background:#0c0c14;margin-bottom:16px;isolation:isolate}
.hero__track{display:grid}
.hs{grid-area:1/1;position:relative;opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility .7s}
.hs.is-on{opacity:1;visibility:visible}
.hs__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#14141F}
.hs__bg picture,.hs__bg img{position:absolute;inset:0;width:100%;height:100%}
.hs__bg img{object-fit:cover;object-position:var(--pos,center);transform:scale(1.07);transition:transform 8s linear}
.hs.is-on .hs__bg img{transform:scale(1)}
/* photo and shade in separate layers: the shade must never be painted under the photo */
.hs__bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(10,10,17,.94) 0%,rgba(10,10,17,.7) 36%,rgba(10,10,17,.12) 68%,rgba(10,10,17,.45) 100%),
  linear-gradient(0deg,rgba(10,10,17,.85),transparent 40%)}
.hs__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr);gap:40px;align-items:center;padding:48px 52px 96px;min-height:460px}
.hs__txt{max-width:620px}
.hs__txt h2{font-size:clamp(36px,4.2vw,60px);font-weight:800;letter-spacing:-.045em;line-height:.98;text-wrap:balance;margin:14px 0 14px}
.hs__txt h2 em{font-style:normal;color:var(--primary)}
.hs__txt p{color:#D5D6E2;max-width:46ch;font-size:16px;text-wrap:pretty}
.hs__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.hs__panel{justify-self:end;width:100%;max-width:390px;border-radius:18px;padding:18px;background:rgba(14,14,22,.8);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--hair-2);box-shadow:var(--shadow-popover);
  transform:translateY(10px);opacity:0;transition:transform .6s var(--ease) .15s,opacity .6s .15s}
.hs.is-on .hs__panel{transform:none;opacity:1}
.hp-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.hp-h .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--text)}
.hp-h .eyebrow .icon{width:16px;height:16px;color:var(--primary)}
.hp-lg{font-size:12.5px;color:var(--text-muted);margin-bottom:10px}
.hp-teams{display:grid;gap:8px;margin-bottom:14px}
.hp-team{display:flex;align-items:center;gap:10px;font-weight:750;font-size:16.5px;letter-spacing:-.01em}
.hp-team .led{margin-left:auto;font-size:22px;min-width:40px;padding:.2em .3em}
.hp-clock{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.hp-clock div{border-radius:12px;background:rgba(6,6,11,.55);border:1px solid var(--hair);padding:10px 12px}
.hp-clock small{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.hp-clock .led{font-size:22px;padding:.2em .35em}
.hp-sel{display:grid;gap:6px;margin-bottom:12px}
.hp-sel li{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid var(--hair)}
.hp-sel li span{color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-sel li b{font-variant-numeric:tabular-nums}
.hp-note{font-size:12px;color:var(--text-muted);margin-top:10px}
.hero__ctl{position:absolute;left:52px;right:52px;bottom:24px;display:flex;align-items:center;gap:12px;z-index:2}
.hero__idx{font-size:13px}
.hero__dots{display:flex;gap:8px;flex:0 1 300px}
.hero__dots button{position:relative;flex:1;height:44px}
.hero__dots button::before,.hero__dots button::after{content:"";position:absolute;left:0;right:0;top:20px;height:4px;border-radius:4px;background:rgba(255,255,255,.18)}
.hero__dots button::after{background:var(--primary);transform-origin:left;transform:scaleX(0)}
.hero__dots button[aria-current=true]::after{animation:hfill 7s linear forwards}
.hero.is-paused .hero__dots button[aria-current=true]::after{animation-play-state:paused}
@keyframes hfill{to{transform:scaleX(1)}}
.hero__ctl .grow{flex:1}
.hero__ctl .ibtn{width:44px;height:44px}

/* responsive (mockup C2) — after the base rules of this file so they win */
@media (max-width:1099px){
  .hs__in{grid-template-columns:minmax(0,1fr);gap:24px;padding:36px 32px 92px}
  .hs__panel{justify-self:start;max-width:460px}
  .hero__ctl{left:32px;right:32px}
  .t-live,.t-coupon{grid-column:auto;grid-row:auto}
  .t-ladder .lad{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-board{grid-column:1/-1;grid-row:auto}
  .t-hero,.t-live{grid-column:auto;grid-row:auto}
  .t-ladder,.t-coupon,.t-up,.side{grid-column:1/-1}
}
@media (max-width:767px){
  .bento,.side,.grid3{grid-template-columns:minmax(0,1fr);gap:12px}
  .hero{border-radius:18px}
  .hs__in{padding:24px 18px 84px;min-height:0}
  .hs__txt h2{font-size:34px}
  .hs__txt p{font-size:15px}
  .hs__cta .btn{flex:1 1 100%}
  .hs__panel{max-width:none;padding:14px}
  .hero__ctl{left:18px;right:18px;bottom:16px;gap:8px}
  .hero__idx{display:none}
  .t-ladder .lad{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 1099px) { .t-live { grid-column: 1 / -1; } }