/* Compartit · El calendari: la capçalera, els xips i la taula de partits.
 *
 * El va escriure la porra i ara el fan servir les dues aplicacions: és el
 * mateix calendari mirat per dues finestres —els mateixos partits, en el
 * mateix ordre— i havien de ser la mateixa taula, no dues que
 * s'assemblessin. El que canvia entre l'una i l'altra és NOMÉS la cel·la de
 * la dreta: la porra hi diu com va acabar el partit i l'onze què hi vas fer
 * tu. El marcatge de la fila el fa `/shared/ui/calendar.js`.
 *
 * Es carrega DESPRÉS del full de cada aplicació, com la resta de peces
 * compartides: si alguna ha de retocar res del calendari, ho ha de fer amb
 * més especificitat i a posta, no per ordre.
 *
 * Aquí NO hi ha ni els xips (`.chip`) ni l'estat de "cap partit encara": el
 * primer és una peça de cada web i el segon és text seu.
 */

.cal-cap{
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:14px;
  margin-bottom:18px;
}
/* El títol i la línia de sota, amb les mateixes mides que les pàgines del
   web (`.page-title` i `.page-lede` a `styles.css`): el calendari és el
   mateix als tres llocs i la capçalera no pot dir el contrari. */
.cal-cap h1{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:clamp(2rem,5vw,3rem);line-height:1;
  letter-spacing:-.015em;text-transform:uppercase;color:var(--cream);
  margin-bottom:10px;
}
.cal-lede{
  max-width:52ch;margin:0 0 clamp(18px,3vh,28px);
  color:rgba(245,242,236,.62);font-size:clamp(.92rem,1.1vw,1rem);line-height:1.55;
}
/* Xips de competició. Van sobre la taula i no dins la capçalera: quan no hi
   ha amistosos la barra desapareix sencera i el calendari queda com sempre. */
.cal-tria{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}

/* L'escut petit de les files. Era de la porra i ara viatja amb la taula: si
   la fila la pinten els dos webs, la mida de l'escut que hi porta dins no pot
   quedar-se al full d'un dels dos. La porra el fa servir també a l'acta i a
   la taula d'admin, i el continua tenint: aquest full també és seu. */
.escut-mini{width:20px;height:20px;object-fit:contain;flex:0 0 auto;vertical-align:middle}

/* ── Les files ──
   Les mateixes que el calendari del web (`.matchday` a `styles.css`): una
   peça per partit, amb la superfície un pas més clara que el fons i sense
   perfil; els noms en minúscula i el Nàstic en crema; el marcador AL MIG,
   entre els dos equips i en l'ordre del camp. Abans era una taula amb els
   noms en majúscula i el marcador a la dreta, i el mateix calendari
   semblava de dues cases.

   Les dues columnes dels costats fan la mateixa amplada, i per això els
   equips queden centrats a totes les files encara que la dreta digui una
   data en una i uns punts en una altra. */
.cal-fila{
  --cal-costat:clamp(4.5rem,13vw,10rem);
  display:grid;
  grid-template-columns:var(--cal-costat) minmax(0,1fr) auto minmax(0,1fr) var(--cal-costat);
  align-items:center;gap:clamp(8px,1.5vw,16px);
  padding:clamp(11px,1.6vw,15px) clamp(12px,2vw,20px);
  margin-bottom:10px;width:100%;min-height:56px;
  border:1px solid transparent;border-radius:var(--r-md);
  background:var(--surf-card);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  text-align:left;color:inherit;
  transition:background .2s, box-shadow .2s;
}
.cal-fila.clicable{cursor:pointer}
/* Sense vora, el senyal de "s'hi pot clicar" és la llum: la fila s'encén. */
.cal-fila.clicable:hover{
  background:linear-gradient(180deg, rgba(68,46,50,.68), rgba(30,21,23,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.cal-fila:not(.clicable){cursor:default}
.cal-fila:focus-visible{outline:2px solid var(--llauto);outline-offset:-2px}

/* La que ve ara: l'única que crida de tota la llista, i ho fa amb el grana. */
.cal-fila.actual,
.cal-fila.actual.clicable:hover{
  background:
    linear-gradient(90deg, rgba(194,30,51,.18), transparent 46%),
    var(--surf-card);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
             0 10px 30px -18px rgba(194,30,51,.8);
}

.cal-fila .num{
  font-family:'Space Grotesk',sans-serif;font-size:var(--txt-sm);letter-spacing:var(--track-sm);
  color:var(--or);text-transform:uppercase;
}
/* Un amistós no és una jornada: la marca es distingeix de "J14" sense
   cridar més que el partit. */
.cal-fila.altra-competicio .num{color:rgba(224,161,62,.75)}

.cal-fila .costat{
  display:flex;align-items:center;gap:8px;min-width:0;
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(.85rem,1.1vw,.98rem);line-height:1.2;
  color:rgba(245,242,236,.62);
}
.cal-fila .costat.local{justify-content:flex-end}
.cal-fila .costat.visitant{justify-content:flex-start}
.cal-fila .costat .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* El Nàstic, en crema i sense truncar: ja saps qui és l'altre. */
.cal-fila .costat .nom.nastic{flex:0 0 auto;color:var(--cream);font-weight:600}
.cal-fila .escut-mini{
  width:26px;height:26px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.cal-fila .vs,
.cal-fila .marcador-fila{
  font-family:'Space Grotesk',sans-serif;
  min-width:56px;text-align:center;white-space:nowrap;
}
.cal-fila .vs{
  font-size:var(--txt-sm);letter-spacing:var(--track-sm);text-transform:uppercase;
  color:rgba(245,242,236,.3);
}
.cal-fila .marcador-fila{
  font-weight:700;font-size:clamp(.95rem,1.3vw,1.1rem);color:var(--cream);
  font-variant-numeric:tabular-nums;
}

/* La cel·la de la dreta: el que diu cada joc (els teus punts, la data). */
.cal-fila .cal-info{
  display:flex;flex-direction:column;align-items:flex-end;gap:3px;
  justify-self:end;min-width:0;text-align:right;
}
.cal-fila .quan{
  font-family:'Space Grotesk',sans-serif;
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  color:rgba(245,242,236,.42);white-space:nowrap;
}
.cal-fila .quan.destacada,
.cal-fila.actual .quan{color:var(--cream)}
.cal-fila .quan.en-joc{color:#e0533e;letter-spacing:.16em}
.cal-fila .quan.per-definir{color:rgba(224,161,62,.85)}
.cal-fila .punts-mini{
  font-family:'Space Grotesk',sans-serif;
  font-size:var(--txt-xs);letter-spacing:var(--track-xs);text-transform:uppercase;
  color:rgba(245,242,236,.5);white-space:nowrap;
}
.cal-fila .punts-mini b{
  color:var(--or);font-weight:700;font-size:.95rem;letter-spacing:0;margin-right:3px;
}

@media (max-width:620px){
  /* Com al web: a dalt la jornada i el que diu la dreta, a sota el partit
     sencer amb el marcador al mig. */
  .cal-fila{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-areas:
      "num  num  info"
      "local mig visitant";
    row-gap:8px;min-height:unset;
  }
  .cal-fila .num{grid-area:num}
  .cal-fila .cal-info{grid-area:info;flex-direction:row;gap:10px;align-items:center}
  .cal-fila .costat.local{grid-area:local}
  .cal-fila .costat.visitant{grid-area:visitant}
  .cal-fila .vs,
  .cal-fila .marcador-fila{grid-area:mig}
  .cal-fila .escut-mini{width:22px;height:22px}
  .cal-fila.clicable:active{background:rgba(245,242,236,.08)}
}