/* ==========================================================================
   El dècim · plantilla oficial amb el número superposat
   --------------------------------------------------------------------------
   La plantilla és la de SELAE amb les cinc bombolles de sorteig al lloc on
   va el número. Aquesta franja es tapa amb un pedaç pla —el fons hi és blanc
   pur, mesurat: rgb(248–255)— i el número va a sobre. La imatge no es retoca.
   Mesures de les bombolles sobre l'original de 1519×894:
     x 534–1174 = 35,2 %–77,3 %   ·   y 120–230 = 13,4 %–25,7 %
   Tot va en percentatges i en `cqw`, així que el dècim escala sencer.
   Les paraules sota cada dígit van EN CASTELLÀ: el dècim és un document
   oficial de l'Estat i no es tradueix, encara que el web sigui en català.
   ========================================================================== */
.decim{
  position:relative;
  aspect-ratio:1519/894;
  background:url("../img/decim-plantilla.jpg") 0 0/100% 100% no-repeat;
  container-type:inline-size;
  font-family:var(--font-body);
}

/* El pedaç que esborra les bombolles */
.decim__patch{
  position:absolute; left:34.4%; top:12.4%; width:44.2%; height:14.6%;
  background:#fdfdfd;
}

/* El número */
.decim__num{
  position:absolute; left:34.4%; top:12.2%; width:44.2%;
  display:flex; justify-content:space-between; align-items:flex-start;
  color:#141414;
}
.decim__num > span{
  display:flex; flex-direction:column; align-items:center; line-height:.82;
  font-weight:700; font-size:10.4cqw; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.decim__num i{
  font-style:normal; font-weight:600; text-transform:uppercase;
  font-size:1.45cqw; letter-spacing:.08em; margin-top:.35em; color:#2a2a2a;
  white-space:nowrap;
}

/* Sèrie i fracció, dins dels seus òvals */
.decim__serie,.decim__fraccio{
  position:absolute; left:81.4%; width:14.6%;
  text-align:center; line-height:1; font-weight:700; color:#141414;
}
.decim__serie{ top:22.2%; font-size:5.2cqw }
.decim__fraccio{ top:38.4%; font-size:4.4cqw }
.decim__serie sup,.decim__fraccio sup{ font-size:.48em; vertical-align:.75em; font-weight:600 }

/* Marc: el dècim és paper, cantonada viva i cap ombra (§07) */
.decim{ border:1px solid var(--filet) }


/* --- El dècim com a targeta de número ----------------------------------
   Substitueix la targeta de text: el producte és el dècim, i veure-hi el teu
   número convenç més que llegir-lo. L'estat i el preu van a sota, en la
   mateixa «etiqueta» que demana §09: mono en majúscules, filet d'1 px.
   ---------------------------------------------------------------------- */
.decims{display:grid;gap:var(--space-3);
  grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
.decim-card{display:flex;flex-direction:column;gap:var(--space-2)}
/* En arribar des del cercador de la portada cal veure QUIN és el teu: sense
   marca, aterres al mig d'una llista de vint-i-quatre i no ho saps. El filet
   granat és el mateix que marca el número de la pàgina a la capçalera, i el
   `scroll-margin` deixa aire a sobre perquè no quedi enganxat a la vora.

   Eren 64 px i ara són 8: des que la capçalera és enganxada, el gruix que
   cal per no aterrar darrere de la barra el posa el `scroll-padding-top` de
   `:root` (`components.css`), i els dos valors se sumen. 64 + 81 haurien
   deixat la targeta a mitja pantalla. */
.decim-card:target{outline:2px solid var(--vi);outline-offset:var(--space-1);
  scroll-margin-top:var(--space-1)}
/* Misma corrección que en `.num-card`, y por el mismo motivo: la opacidad
   apagaba el número del dècim hasta 1,9:1. Aquí no queda ninguna: el estado
   lo dice la etiqueta del pie, y el número baja al gris cálido del sistema
   (4,9:1 sobre el blanco de la plantilla) en lugar de desteñirse. */
.decim-card[data-state="esgotat"] .decim__num{color:var(--state-soldout)}
.decim-card__peu{
  --state-color:var(--tinta);
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:4px var(--space-2);
  border-top:var(--border-w-rule) solid var(--border-rule);padding-top:var(--space-1);
  font-size:var(--text-small);
}
/* Los tres estados, como en `.num-card`: §09 pone el disponible en cobalto. */
.decim-card[data-state="disponible"] .decim-card__peu{--state-color:var(--state-available)}
.decim-card[data-state="pocs"] .decim-card__peu{--state-color:var(--state-low)}
.decim-card[data-state="esgotat"] .decim-card__peu{--state-color:var(--state-soldout)}
.decim-card__estat{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--state-color);
  border:var(--border-w-rule) solid var(--state-color);
  border-radius:var(--radius-pill);padding:3px 10px;
}
.decim-card__preu{font-family:var(--font-mono);white-space:nowrap}

@media (max-width:519px){
  .decims{grid-template-columns:minmax(0,1fr)}
}