/* =========================================================
   HOME (index.html → /) · solo impaginazione della pagina
   Token e componenti condivisi stanno in /css/site.css.
   Qui: griglie delle sezioni #coach, #pro, #trova, #partner,
   spaziature della pagina e le poche classi hm-.
   ========================================================= */

/* ---------- ritmo verticale della home (sezioni un po' più strette: pagina lunga) ---------- */
.hm-coach,.hm-pro,.hm-trova,.hm-partner,.hm-chi{padding-block:clamp(64px,8vw,120px)}
.hm-man{padding-block:clamp(64px,8vw,112px)}

/* didascalia "Schermate reali…" sotto lo split e sotto il bento del Pro */
.hm-cap{margin-top:16px;text-align:right}
@media (max-width:1023px){ .hm-cap{text-align:left} }

/* ---------- 5. "E poi" alla fine del film ---------- */
.hm-mq{padding-top:clamp(24px,3vw,48px)}

/* ---------- 6. #coach: testo a sinistra, fasce a destra ---------- */
.hm-coach-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(32px,4vw,72px);align-items:center}
.hm-coach-copy{grid-column:1/6;min-width:0}
.hm-coach-copy .body-lg{margin-top:24px;max-width:30em}
.hm-coach-band{grid-column:7/13;min-width:0}
.hm-coach-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px clamp(32px,4vw,72px);align-items:start;margin-top:clamp(48px,5vw,80px);padding-top:32px;border-top:1px solid var(--line)}
.hm-ref{grid-column:1/6;max-width:30em;color:var(--text-2)}
.hm-coach-links{grid-column:7/13;min-width:0}
.hm-coach-links .tlinks{margin-top:0}
.hm-coach-links .cap{margin-top:14px}

/* ---------- 7. #pro: titolo a sinistra, prezzo a destra, bento sotto ---------- */
.hm-pro-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(32px,4vw,72px);align-items:end;margin-bottom:clamp(48px,5.5vw,88px)}
.hm-pro-copy{grid-column:1/7;min-width:0}
.hm-pro-copy .lead{margin-top:22px}
.hm-pro-copy .body{margin-top:18px;max-width:30em}
.hm-pro-head .price{grid-column:8/13;min-width:0}

/* ---------- 8. #trova: testo a sinistra, telefono + card del coach a destra ---------- */
.hm-trova-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(32px,4vw,72px);align-items:center}
.hm-trova-copy{grid-column:1/6;min-width:0}
.hm-trova-copy .body-lg{margin-top:24px;max-width:30em}
.hm-trova-media{grid-column:7/13;position:relative;margin:0;min-width:0;padding-left:clamp(24px,4vw,64px)}
.hm-trova-phone{width:clamp(240px,21vw,300px);margin-left:auto;margin-right:clamp(0px,4vw,56px)}
.hm-card{position:absolute;z-index:4;left:0;bottom:22%;width:min(420px,64%);box-shadow:var(--sh-deep)}
.hm-trova-media>.cap{margin-top:18px;text-align:right}

/* ---------- 9. #partner: titolo e testo a sinistra, le due maglie a destra ---------- */
/* (il codice in contorno si misura sulla maglia, container query in site.css: sta intero anche in una maglia stretta) */
.hm-partner-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px clamp(32px,4vw,72px);align-items:center}
.hm-partner-copy{grid-column:1/6;min-width:0}
.hm-partner-copy .body-lg{margin-top:24px;max-width:30em}
.hm-partner-copy .tlinks{margin-top:24px}
.hm-partner-grid .jerseys{grid-column:6/13;min-width:0}
.hm-jprice{font-size:15px;line-height:1.45;color:var(--text-2);margin-top:2px}
.hm-jprice b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- movimento della pagina ---------- */
/* la card del coach sale piano mentre scorri (mai nel modo calmo né negli screenshot) */
@supports (animation-timeline: view()){
  html.js:not(.is-calm):not(.is-shot) .hm-card{animation:hm-par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}
@keyframes hm-par{from{translate:0 34px}to{translate:0 -34px}}

/* ---------- tablet e telefoni ---------- */
@media (max-width:1023px){
  .hm-coach-grid,.hm-pro-head,.hm-trova-in,.hm-partner-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hm-coach-copy,.hm-coach-band,.hm-pro-copy,.hm-pro-head .price,.hm-trova-copy,.hm-trova-media,.hm-partner-copy,.hm-partner-grid .jerseys{grid-column:1/-1}
  .hm-coach-foot{grid-template-columns:minmax(0,1fr)}
  .hm-ref,.hm-coach-links{grid-column:1/-1}
  .hm-pro-head{align-items:start}
  .hm-trova-media{padding-left:0;max-width:560px;width:100%;justify-self:center}
  .hm-trova-phone{width:min(62vw,280px);margin:0 auto}
  .hm-card{position:relative;left:auto;bottom:auto;width:100%;margin-top:-24px}
  .hm-trova-media>.cap{text-align:left}
}
@media (max-width:719px){
  .hm-coach-foot{padding-top:24px}
  .hm-pro-head{gap:32px;margin-bottom:40px}
  /* telefono: basta la card del coach, leggibile a tutta larghezza (il telefono con la chat è già nel film) */
  .hm-trova-phone{display:none}
  .hm-card{margin-top:0}
}

/* maglie strette (due accanto al testo): il tasto copia a tutta larghezza, le icone sotto, uguali nelle due maglie */
@media (min-width:720px){
  .hm-partner .jersey-act .copy{flex:1 1 100%;justify-content:center}
}