/* ════════════════════════════════════════════════════════════
   hero.css — Hero de tres diapositives i aire de les anotacions.

   El carrusel no mou el CTA: només canvia el missatge i la foto. Un botó
   que balla cada sis segons és un botó que no es clica.
   ════════════════════════════════════════════════════════════ */

/* ── Les diapositives ─────────────────────────────────────── */
.slides{display:grid}
.slide{grid-area:1 / 1;animation:slide-in .55s cubic-bezier(.22,1,.36,1) both}
/* Amagada però present: conserva l'alçada, i visibility:hidden la treu també
   de l'arbre d'accessibilitat i del recorregut del tabulador. */
.slide.is-off{visibility:hidden;opacity:0;pointer-events:none;animation:none}
@keyframes slide-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.slide h1,.slide h2{margin-bottom:22px}
.slide h2{font-size:clamp(2.4rem,6.6vw,4.4rem);line-height:1.12;
  text-transform:none;letter-spacing:0}
.slide .lead{min-height:0}
.slide-link{margin-top:18px;font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.08em;font-size:.82rem}

/* Reserva d'alçada: sense això la pàgina fa un salt a cada canvi */
@media (min-width:1024px){ .hero-copy{display:flex;flex-direction:column} }

/* ── Els controls: numerats, com un índex ─────────────────── */
.hero-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.hero-dot{display:inline-flex;align-items:center;gap:10px;background:none;
  border:0;border-top:2px solid var(--rule);padding:12px 16px 10px 0;
  cursor:pointer;color:var(--gray);font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  transition:color .25s ease,border-color .35s ease;min-height:44px}
.hero-dot + .hero-dot{padding-left:16px}
.hero-dot:hover{color:var(--ink)}
.hero-dot.is-on{color:var(--ink);border-top-color:var(--ink)}
.dot-n{font-size:.68rem;opacity:.7}
.dot-t{display:none}
@media (min-width:560px){ .dot-t{display:inline} }

/* Barra de progrés del canvi automàtic, dins del control actiu */
.hero-dot.is-on::after{content:"";position:absolute;left:0;right:0;top:-2px;
  height:2px;background:var(--mint-deep);transform-origin:left;
  transform:scaleX(0)}
.hero-dot{position:relative}
.hero-dot.is-on.is-running::after{animation:dot-progres var(--hero-tempo,7s) linear both}
@keyframes dot-progres{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── Les fotos: es creuen, no salten ──────────────────────── */
.hero-media{position:relative}
.hero-foto{display:block;opacity:0;visibility:hidden;
  transition:opacity .6s ease,visibility .6s}
.hero-foto.is-on{opacity:1;visibility:visible}
.hero-foto:not(:first-child){position:absolute;inset:0}
.hero-foto img{width:100%;height:100%;object-fit:cover}

/* ── Anotacions sobre imatge: aire de veritat ─────────────────
   El distintiu del hero i els peus del mosaic anaven enganxats a la vora
   de la foto. Ara respiren i, al mosaic, el degradat comença abans perquè
   el text no toqui el límit de la imatge. */
.hero-badge{left:0;bottom:0;padding:24px 26px 26px;max-width:min(340px,86%)}
@media (min-width:1024px){
  .hero-badge{left:-20px;bottom:36px;padding:26px 30px 28px}
}
.hero-badge strong{margin-bottom:8px}
.hero-badge span{line-height:1.5}

/* L'anotació anava enganxada a la vora de la foto. Ara el degradat comença
   molt abans i el text seu sobre un coixí real, amb la mateixa respiració a
   banda i banda que a baix. */
 /* El degradat ha d'anar de banda a banda; qui s'ha d'aturar abans es el
    TEXT. Amb max-width al peu es veia la vora del rectangle sobre la foto. */
.mosaic figcaption{padding:52px clamp(26px,24%,140px) 22px 22px;line-height:1.4;
  background:linear-gradient(to top,rgba(45,42,41,.92) 0%,rgba(45,42,41,.72) 45%,transparent 100%)}
@media (min-width:900px){ .mosaic figcaption{padding:64px clamp(26px,26%,150px) 26px 26px} }

/* Amb el dit no hi ha hover: al mòbil i a les tauletes, l'anotació es veu
   sempre. Si no, la informació no existeix per a la meitat de la gent. */
@media (pointer:coarse),(max-width:1023px){
  .mosaic figcaption{opacity:1}
}

/* Els peus que van SOTA la imatge, també amb més aire */
figure > figcaption{padding-top:14px;line-height:1.45}

@media (prefers-reduced-motion:reduce){
  .slide{animation:none}
  .hero-foto{transition:none}
  .hero-dot.is-on.is-running::after{animation:none;transform:scaleX(1)}
}