/* examen-mir.es · home ("El full de respostes"). Fa servir els tokens de site.css. Mobile first.
   L'única animació és la del compte enrere en carregar (site.js, [data-countup]), i respecta el moviment reduït. */

.page--home { padding-top: var(--gap); }

/* ---------- Hero: el compte enrere i el pròxim tràmit ---------- */
.hero { display: grid; gap: 16px; margin-top: 0; }

/* Foto (REVISIO-UX-3-CRO.md, 1): en mòbil, franja de capçalera de com a molt 30vh, de vora a vora del full;
   el compte enrere i el pròxim tràmit han d'entrar a la primera pantalla. Sense text a sobre. */
.hero-foto { display: block; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0; }
.hero-foto img { display: block; width: 100%; height: clamp(120px, 38vw, 30vh); object-fit: cover; object-position: 50% 55%; background: var(--ground-2); }
/* Foto del pool (REVISIO-UX-7.md, 6): el contenidor reserva l'alçada abans que l'script hi posi la foto, i el punt
   focal de cada sèrie surt de pool.json */
.hero-foto--pool { min-height: clamp(120px, 38vw, 30vh); }
.hero-foto--pool img { object-position: var(--foco-tira, 50% 50%); }
.hero h1 { font-size: var(--step-lead); letter-spacing: 0; line-height: 1.2; }
.cd-num { margin-top: 12px; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 16px; font-weight: 700; }
.cd-u { font-size: clamp(1.75rem, 7vw, 3.25rem); letter-spacing: -0.02em; line-height: 1; }

/* Compte enrere amb dígits de paleta (REVISIO-UX-2.md, 1.5): una paleta per dígit, amb la línia horitzontal del mig.
   Colors del full de respostes, sense ombres ni degradats. Les capes de l'animació les crea site.js. */
.flip { display: inline-flex; gap: 0.08em; font-size: clamp(5.5rem, 25vw, 11rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.flip-d { position: relative; display: inline-block; width: 0.74em; height: 1.12em; line-height: 1.12em; text-align: center; background: var(--ink); color: var(--paper); border-radius: 0.06em; overflow: hidden; }
.flip-d::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0.025em; min-height: 2px; background: var(--paper); transform: translateY(-50%); z-index: 3; }
.fl { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: var(--ink); }
.fl > span { display: block; height: 1.12em; line-height: 1.12em; }
.fl-top, .fl-flap-top { top: 0; }
.fl-bot, .fl-flap-bot { bottom: 0; }
.fl-bot > span, .fl-flap-bot > span { transform: translateY(-50%); }
.fl-flap-top { z-index: 2; transform-origin: 50% 100%; animation: flip-cae 260ms ease-in var(--retardo, 0ms) both; }
.fl-flap-bot { z-index: 2; transform-origin: 50% 0; transform: perspective(4em) rotateX(90deg); animation: flip-llega 260ms ease-out calc(var(--retardo, 0ms) + 260ms) both; }
@keyframes flip-cae { from { transform: perspective(4em) rotateX(0); } to { transform: perspective(4em) rotateX(-90deg); } }
@keyframes flip-llega { from { transform: perspective(4em) rotateX(90deg); } to { transform: perspective(4em) rotateX(0); } }
.cd-num--texto { font-size: var(--step-display); }
/* El dia de l'examen, el text en lloc dels dígits (REVISIO-UX-5.md, 2.1) */
.cd-num--hoy { font-size: var(--step-display); line-height: 1; letter-spacing: -0.02em; }
.cd-fecha { margin-top: 20px; font-size: var(--step-lead); font-weight: 500; line-height: 1.25; }
.cd-hora { margin-top: 8px; color: var(--muted); max-width: 46ch; }
/* "(hora peninsular)" un 30 % més petit que la resta de la línia (REVISIO-UX-5.md, 2.2) */
.cd-hora-zona { font-size: 0.7em; white-space: nowrap; }
/* Després de l'examen, el pròxim tràmit és l'element principal del hero (REVISIO-UX-5.md, 2.1) */
.cd-tras { margin-top: 16px; display: grid; gap: 8px; }
.cd-tras-nombre { font-size: var(--step-head); font-weight: 700; line-height: 1; letter-spacing: -0.02em; max-width: 16ch; }
.cd-tras-fecha { font-size: var(--step-lead); font-weight: 500; line-height: 1.25; max-width: 32ch; }
/* Resposta a la incertesa, sota l'horari (REVISIO-UX-5.md, 4.1) */
.cd-garantia { margin-top: 8px; font-weight: 500; max-width: 46ch; }

.next { background: var(--ground); padding: 20px; display: grid; gap: 6px; }
.next-tag { font-size: var(--step-small); font-weight: 700; }
.next-name { font-size: var(--step-lead); font-weight: 700; line-height: 1.2; }
.next .state { margin-top: 4px; }
.next-fecha { font-weight: 500; }
.next-fecha.estimada-corta { font-size: var(--step-body); color: var(--ink); border-left: 3px dashed var(--muted); padding-left: 10px; }
.next-nota { font-size: var(--step-small); color: var(--muted); }

.hero-actions { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.hero-actions .btn { min-height: 56px; padding: 0 28px; }
.hero-actions .btn .arrow { transition: transform 220ms var(--ease-out); }
.hero-actions .btn:hover .arrow { transform: translateX(4px); }
.hero-link { font-weight: 500; display: inline-flex; align-items: center; min-height: 44px; }
/* Una acció principal (REVISIO-UX-5.md, 4.1): "Añadir a mi calendario" i, al costat, l'enllaç "Ver todas las fechas";
   la nota ocupa tota l'amplada a sota */
.hero-actions .cal-add { display: contents; }
.hero-actions .cal-add-boton, .hero-actions .cal-add-titulo { min-height: 56px; }
.js .hero-actions .cal-add:not(.is-menu) .cal-add-titulo { background: var(--ink); color: var(--paper); }
.hero-actions .cal-add-nota { flex-basis: 100%; max-width: none; order: 3; margin-top: -4px; }
.hero-actions .hero-link { order: 2; }
.hero .meta-row { margin-top: 0; }

/* ---------- Pròxims tràmits ---------- */
.fechas .more a { font-weight: 500; }

/* ---------- Temes i eines: una carta impresa sobre el camp verd ---------- */
.temas { margin-top: var(--gap); background: var(--field); color: var(--field-ink); padding: clamp(40px, 7vw, 96px) var(--m); }
.menu { color: var(--ink); width: 100%; max-width: 1100px; margin: 0 auto; }
.menu-body { background: var(--paper); padding: clamp(24px, 4vw, 56px); }
.menu .scallops span { border-radius: 999px 999px 0 0; }
.menu .scallops--down span { border-radius: 0 0 999px 999px; }
.menu h2 { font-size: var(--step-head); line-height: 1; }
.menu h3 { font-size: var(--step-lead); letter-spacing: -0.01em; line-height: 1.1; margin: 36px 0 12px; }
.menu-foot { margin-top: 36px; font-weight: 500; }

/* ---------- Recomanació final ---------- */
.home-mirial { padding: clamp(32px, 5vw, 72px) 0 0; }
.home-mirial .mirial { margin-top: 0; }

/* ---------- Mòbil: carta compacta (la descripció de cada pàgina ja és a la pàgina) ---------- */
@media (max-width: 859px) {
  .menu h3 { margin-top: 24px; }
  .menu .fe-desc { display: none; }
  .menu .fe-caja { padding: 8px 14px; }
  .menu .lista-enlaces { gap: 4px; }
  .menu-foot { margin-top: 24px; }
}

/* ---------- Escriptori ---------- */
@media (min-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "cd foto" "side side" "meta meta"; align-items: start; gap: 32px clamp(32px, 5vw, 80px); }
  .hero-cd { grid-area: cd; }
  .hero-side { grid-area: side; }
  .hero .meta-row { grid-area: meta; }
  /* Foto a la dreta, en el format horitzontal de les fotos (3:2, REVISIO-UX-8.md, 1): una columna vertical obligava el
     navegador a ampliar un fitxer triat per l'amplada */
  .hero-foto { grid-area: foto; margin: 0; align-self: start; max-width: 600px; justify-self: end; width: 100%; aspect-ratio: 3 / 2; }
  .hero-foto img { height: 100%; object-position: 50% 60%; }
  .hero-foto--pool { min-height: 0; }
  /* L'horari i "(hora peninsular)" en una sola línia (REVISIO-UX-7.md, 3), i la frase de les fonts també */
  .cd-hora, .cd-garantia { max-width: 60ch; }
  .hero-foto--pool img { object-position: var(--foco, 50% 50%); }
  .next { padding: 28px; }
  .menu .grupos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(32px, 5vw, 80px); }
}