/* 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 que diu de què va la taula. Els números són els de la
   porra, d'on surt aquest calendari —el títol gran de les seves vistes i la
   nota just a sota—: l'onze no té cap `h1` de vista tan gran, i sense
   escriure-ho aquí les dues capçaleres es veien de dues aplicacions
   diferents. */
.cal-cap h1{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:clamp(2rem,5vw,3.4rem);line-height:.95;
  text-transform:uppercase;margin-bottom:24px;
}
.cal-lede{color:rgba(245,242,236,.5);font-size:.9rem;margin:6px 0 14px}
/* 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}

/* ── La taula: compacta, amb la respiració mesurada ── */
.cal-fila{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 32px minmax(0,1fr) 150px;
  align-items:center;gap:14px;padding:10px 18px;
  border:0;border-bottom:1px solid rgba(245,242,236,.06);border-radius:14px;
  margin-bottom:8px;
  background:transparent;text-align:left;width:100%;color:inherit;
  transition:background .15s;
  min-height:48px;
}
.cal-fila:last-child{border-bottom:0}
.cal-fila.clicable{cursor:pointer}
.cal-fila.clicable:hover{background:rgba(245,242,236,.045)}
/* Les jornades futures no s'obren: el `button{cursor:pointer}` global feia
   que semblessin clicables tot i estar deshabilitades. */
.cal-fila:not(.clicable){cursor:default}
.cal-fila.passada{color:rgba(245,242,236,.55)}

/* Fila del proper partit: destacada amb barra grana a l'esquerra */
.cal-fila.actual{
  background:rgba(163,23,58,.1);
  box-shadow:inset 3px 0 0 var(--grana-viu);
  padding-left:20px;
}
.cal-fila.actual.clicable:hover{background:rgba(163,23,58,.18)}

.cal-fila .num{
  font-family:'Space Grotesk',sans-serif;font-size:10.5px;letter-spacing:.1em;
  color:rgba(245,242,236,.75);text-align:center;text-transform:uppercase;
}
.cal-fila.actual .num{color:var(--or);font-weight:700}
/* Un amistós no és una jornada: el número no hi porta i la marca ha de
   distingir-se de "J14" sense cridar més que el partit. */
.cal-fila.altra-competicio .num{
  color:rgba(224,161,62,.9);
  border:1px solid rgba(224,161,62,.3);border-radius:2px;
  padding:2px 0;text-align:center;font-size:9.5px;
}

/* Cada costat és una cel·la flex: local (nom→escut, dreta) · vs · visitant (escut→nom, esquerra) */
.cal-fila .costat{
  display:flex;align-items:center;gap:8px;min-width:0;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;text-transform:uppercase;font-size:.92rem;line-height:1.15;
  letter-spacing:.03em;
}
.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}
.cal-fila .costat .nom.nastic{flex:0 0 auto}   /* el Nàstic no es trunca mai */
.cal-fila .vs{
  color:rgba(245,242,236,.28);font-weight:400;font-size:.82em;text-align:center;
  font-family:'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.05em;
}
.cal-fila.actual .costat{font-weight:700;color:var(--cream)}
.cal-fila.passada .costat{color:rgba(245,242,236,.7)}

/* Cel·la dreta: badge/marcador a dalt, data a sota. Amplada fixa a totes
   les files (definida a .cal-fila) → alineació perfecta a la columna. */
.cal-fila .cal-info{
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  justify-self:end;min-width:0;
}
.cal-fila .marc{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:.02em;color:var(--cream);
  padding:2px 9px;border-radius:3px;background:rgba(163,23,58,.28);
  white-space:nowrap;text-align:center;
}
.cal-fila .quan{
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.08em;
  color:rgba(245,242,236,.5);white-space:nowrap;text-align:right;
}
/* Data del proper partit: destacada en grana perquè es reconegui d'un cop d'ull */
.cal-fila .quan.destacada{
  color:var(--cream);font-weight:700;letter-spacing:.1em;
}
.cal-fila.actual .quan{color:var(--cream)}
/* Jornada en joc: mateix pes que la data destacada, en vermell i en majúscules */
.cal-fila .quan.en-joc{color:#e0533e;text-transform:uppercase;letter-spacing:.16em;font-size:9.5px}
.cal-fila .quan.per-definir{
  color:rgba(224,161,62,.85);text-transform:uppercase;letter-spacing:.2em;font-size:9px;
  padding:3px 8px;border:1px dashed rgba(224,161,62,.35);border-radius:2px;
}
.cal-fila .punts-mini{
  font-family:'Space Grotesk',sans-serif;font-size:9.5px;letter-spacing:.1em;
  color:rgba(245,242,236,.7);white-space:nowrap;text-transform:uppercase;
}
.cal-fila .punts-mini b{color:var(--cream);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;margin-right:3px}

@media (max-width:640px){
  /* A mòbil, 3 files: [equip local] / [equip visitant] / [info (badge+data)]. */
  .cal-fila{
    grid-template-columns:30px minmax(0,1fr);
    grid-template-areas:
      "num  local"
      "num  visitant"
      "info info";
    padding:10px 14px;gap:2px 10px;min-height:unset;
  }
  .cal-fila.actual{padding-left:16px}
  .cal-fila .num{grid-area:num;align-self:center}
  /* a mòbil ambdós costats mostren "escut + nom" alineats a l'esquerra;
     al local, com al HTML el nom va abans que l'escut, invertim l'ordre */
  .cal-fila .costat.local{
    grid-area:local;flex-direction:row-reverse;justify-content:flex-end;
    font-size:.85rem;
  }
  .cal-fila .costat.visitant{
    grid-area:visitant;justify-content:flex-start;
    font-size:.85rem;
  }
  /* noms extremadament llargs es poden partir en 2 línies (excepcional) */
  .cal-fila .costat .nom{
    white-space:normal;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    overflow:hidden;text-overflow:ellipsis;line-height:1.2;
  }
  .cal-fila .vs{display:none}
  /* info a la fila 3, en horitzontal, alineada dreta */
  .cal-fila .cal-info{
    grid-area:info;flex-direction:row;align-items:center;
    justify-content:flex-end;gap:10px;margin-top:4px;
  }
  .cal-fila .quan.per-definir{padding:2px 7px;font-size:9px}
  /* A mòbil no hi ha ni cursor ni hover: la fletxa és l'únic senyal de quines
     jornades s'obren (les jugades i la propera). Les futures no en tenen. */
  .cal-fila.clicable .cal-info::after{
    content:"›";
    font-family:'Space Grotesk',sans-serif;font-size:1.05rem;line-height:1;
    color:rgba(245,242,236,.45);margin-left:-2px;
  }
  .cal-fila.actual.clicable .cal-info::after{color:var(--or)}
  .cal-fila.clicable:active{background:rgba(245,242,236,.08)}
  .cal-fila.actual.clicable:active{background:rgba(163,23,58,.2)}
}

/* La llum superior de les superfícies elevades. A la porra li venia de la
   llista d'`edge highlights` del seu full; ara viatja amb la fila, que és
   qui l'ha de portar allà on es faci servir. */
.cal-fila{box-shadow:var(--edge-hi)}