/* =============================================================
 * CNSF Calendari de Partits — frontend.css
 * Refactor consolidado. Tres bloques (banner, week, calendari)
 * sin redefiniciones ni `!important` innecesarios.
 * =============================================================
 *
 * Sumari
 * ------
 * 1. Tokens i base compartida
 * 2. Skeleton i estats (loading / empty / error)
 * 3. Crests
 * 4. Banner de resultats   (.cnsf-cp-results-banner)
 * 5. Pròxims partits       (.cnsf-cp-week  +  .cnsf-cp-match-card)
 * 6. Calendari de temporada (.cnsf-cp-calendar)
 * 7. Responsive (≤768px)
 * ============================================================= */


/* ---------- 1. TOKENS I BASE COMPARTIDA ----------
   Aquests defaults es poden sobreescriure des de la pàgina d'ajustes
   del admin (CNSF_CP_Settings imprimeix variables CSS inline). */
.cnsf-cp{
  --cnsf-primary:#005BA6;
  --cnsf-primary-2:#12A1E4;
  --cnsf-natacio-bg:#eef6fc;
  --cnsf-natacio-bg-strong:#dbeafe;
  --cnsf-natacio-accent:#075985;
  --cnsf-card-grad-from:#3F82C9;
  --cnsf-card-grad-via:#2459A6;
  --cnsf-card-grad-to:#153A7A;
  --cnsf-cta-bg:#ffffff;
  --cnsf-cta-color:#005BA6;
  --cnsf-cta-hover-bg:#f3f9fd;
  --cnsf-font-primary:"Inter";
  --cnsf-ink:#27272a;
  --cnsf-ink-soft:#3f3f46;
  --cnsf-muted:#71717a;
  --cnsf-line:#e5e7eb;
  --cnsf-line-soft:#eef0f3;
  --cnsf-bg-soft:#fafafa;
  --cnsf-bg-card:#ffffff;
  --cnsf-radius-card:18px;
  --cnsf-radius-pill:999px;
  --cnsf-shadow-card:0 1px 2px rgba(15,23,42,.035), 0 10px 28px rgba(15,23,42,.04);
  --cnsf-shadow-card-hover:0 2px 4px rgba(15,23,42,.045), 0 14px 34px rgba(15,23,42,.075);

  width:100%;
  box-sizing:border-box;
  font-family:var(--cnsf-font-primary), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color:var(--cnsf-ink);
}

.cnsf-cp *,
.cnsf-cp *::before,
.cnsf-cp *::after{
  box-sizing:border-box;
}

.cnsf-cp-week,
.cnsf-cp-calendar{
  max-width:1120px;
  margin:0 auto;
}

.cnsf-cp-results-banner{
  max-width:none;
  width:100%;
}

.cnsf-cp-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
}

.cnsf-cp-title{
  margin:0;
  line-height:1.15;
}

.cnsf-cp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:10px 14px;
  border:1px solid color-mix(in srgb, var(--cnsf-cta-color) 22%, transparent);
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  background:var(--cnsf-cta-bg);
  color:var(--cnsf-cta-color);
  transition:background .2s ease;
}

.cnsf-cp-btn:hover{
  background:var(--cnsf-cta-hover-bg);
}

.cnsf-cp-nav{
  display:flex;
  gap:8px;
  align-items:center;
}

.cnsf-cp-nav button{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--cnsf-primary) 18%, transparent);
  background:#fff;
  cursor:pointer;
  font-weight:900;
  line-height:1;
  color:var(--cnsf-primary);
}

.cnsf-cp-nav button:hover{
  background:color-mix(in srgb, var(--cnsf-primary) 6%, white);
}


/* ---------- 2. SKELETON I ESTATS ---------- */
.cnsf-cp-loading,
.cnsf-cp-empty,
.cnsf-cp-error{
  padding:14px 16px;
  border:1px dashed color-mix(in srgb, var(--cnsf-primary) 22%, transparent);
  border-radius:14px;
  background:#fff;
  color:var(--cnsf-ink-soft);
  font-size:.86rem;
}

.cnsf-cp-skel{
  min-height:120px;
  border-radius:var(--cnsf-radius-card);
  background:linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.08), rgba(0,0,0,.05));
  background-size:200% 100%;
  animation:cnsfcpPulse 1.25s linear infinite;
}

@keyframes cnsfcpPulse{
  0%   { background-position: 200% 0; }
  100% { background-position:-200% 0; }
}


/* ---------- 3. CRESTS ---------- */
.cnsf-cp-crest{
  width:40px;
  height:40px;
  object-fit:contain;
  flex:0 0 auto;
}

.cnsf-cp-crest--sm{
  width:34px;
  height:34px;
}


/* =============================================================
 * 4. BANNER DE RESULTATS
 * Mostra resultats anteriors com a tira horitzontal compacta,
 * amb fletxes superposades a esquerra/dreta.
 * ============================================================= */
.cnsf-cp-results-banner{
  position:relative;
  width:100%;
  overflow:hidden;
}

/* La capçalera amb el títol està oculta a propòsit:
   el banner apareix sense títol per estar embegut a la home.
   Les fletxes (dins de __nav) es reposicionen com a overlay. */
.cnsf-cp-results-banner__head{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
}

.cnsf-cp-results-banner__label{
  display:none;
}

.cnsf-cp-results-banner__nav{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.cnsf-cp-results-banner__nav button{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:6;
  width:28px;
  height:28px;
  min-width:28px;
  min-height:0;
  padding:0;
  border-radius:var(--cnsf-radius-pill);
  border:1px solid var(--cnsf-line);
  background:rgba(255,255,255,.96);
  color:var(--cnsf-ink-soft);
  box-shadow:0 1px 6px rgba(15,23,42,.12);
  pointer-events:auto;
  cursor:pointer;
}

.cnsf-cp-results-banner__nav button:first-child{ left:4px; }
.cnsf-cp-results-banner__nav button:last-child { right:4px; }

.cnsf-cp-results-banner__nav button:disabled{
  opacity:.38;
  cursor:not-allowed;
}

.cnsf-cp-results-banner__viewport{
  padding:3px 38px;
  overflow:hidden;
}

.cnsf-cp-results-banner__track{
  display:flex;
  align-items:stretch;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}

.cnsf-cp-results-banner__track::-webkit-scrollbar{ display:none; }

.cnsf-cp-results-banner__item{
  flex:0 0 230px;
  width:230px;
  height:72px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1px;
  padding:4px 11px 5px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid var(--cnsf-line);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  scroll-snap-align:start;
  overflow:hidden;
  line-height:1.05;
}

/* Data, dalt de tot, centrada i discreta */
.cnsf-cp-results-banner__date{
  display:block;
  text-align:center;
  font-size:.72rem;
  line-height:1;
  color:var(--cnsf-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cnsf-cp-results-banner__match{
  display:grid;
  grid-template-columns:50px minmax(64px, 1fr) 50px;
  align-items:center;
  gap:10px;
  min-height:50px;
}

.cnsf-cp-results-banner__team,
.cnsf-cp-results-banner__team--away{
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
}

.cnsf-cp-results-banner .cnsf-cp-crest--sm{
  width:50px;
  height:50px;
  padding:3px;
  border-radius:12px;
  background:#fff;
  border:1px solid #e4e4e7;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}

/* Columna central: score amb categoria a sota */
.cnsf-cp-results-banner__center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:0;
  text-align:center;
}

.cnsf-cp-results-banner__score{
  white-space:nowrap;
  font-size:1.2rem;
  font-weight:800;
  line-height:1;
  color:var(--cnsf-ink-soft);
}

.cnsf-cp-results-banner__category{
  display:block;
  max-width:100%;
  font-size:.68rem;
  line-height:1;
  color:var(--cnsf-ink-soft);
  text-transform:capitalize;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Quan no hi ha categoria, conservem espai per mantenir l'alçada uniforme,
   però sense escriure res visible. */
.cnsf-cp-results-banner__category--empty{
  visibility:hidden;
}

/* Skeleton del banner: mateixa silueta que un __item, amb pulse. */
.cnsf-cp-results-banner__item--skel{
  flex:0 0 230px;
  width:230px;
  height:72px;
  border-radius:14px;
  border:1px solid var(--cnsf-line-soft);
  background:linear-gradient(90deg, rgba(0,0,0,.04), rgba(0,0,0,.08), rgba(0,0,0,.04));
  background-size:200% 100%;
  animation:cnsfcpPulse 1.25s linear infinite;
}

.cnsf-cp-results-banner .cnsf-cp-empty,
.cnsf-cp-results-banner .cnsf-cp-error,
.cnsf-cp-results-banner .cnsf-cp-loading{
  flex:1 0 100%;
  border:1px dashed #d4d4d8;
  border-radius:12px;
  background:#f8fafc;
  color:var(--cnsf-ink-soft);
  padding:10px 12px;
  font-size:.82rem;
}


/* =============================================================
 * 5. PRÒXIMS PARTITS (week slider)
 * ============================================================= */
.cnsf-cp-week{
  position:relative;
}

.cnsf-cp-week .cnsf-cp-header{
  margin-bottom:8px;
}

.cnsf-cp-week .cnsf-cp-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(500px, 620px);
  gap:20px;
  overflow-x:auto;
  padding:0 2px 4px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.cnsf-cp-week .cnsf-cp-track::-webkit-scrollbar{ display:none; }

/* Match card (targeta de proper partit) */
.cnsf-cp-match-card{
  max-width:620px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:21px;
  border:1.5px solid #999;
  background:#fff;
  color:#fff;
  scroll-snap-align:start;
}

.cnsf-cp-match-card__top{
  display:flex;
  padding:12px 20px 10px;
  background:linear-gradient(90deg,
    var(--cnsf-card-grad-from) 0%,
    var(--cnsf-card-grad-via)  35%,
    var(--cnsf-card-grad-to)   100%);
  color:#fff;
  border-bottom-left-radius:14px;
  border-bottom-right-radius:14px;
}

.cnsf-cp-match-card__match{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  width:100%;
}

.cnsf-cp-match-card__team{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:0;
  text-align:center;
}

.cnsf-cp-match-card__crest-shell{
  width:58px;
  height:58px;
  border-radius:15px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cnsf-cp-match-card__crest-shell .cnsf-cp-crest{
  width:52px;
  height:52px;
  object-fit:contain;
}

.cnsf-cp-match-card__team-name{
  max-width:118px;
  font-size:.86rem;
  font-weight:760;
  line-height:1.08;
  color:#fff;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:normal;
  overflow-wrap:break-word;
  text-wrap:balance;
  /* Reserva sempre 2 línies d'alçada perquè totes les cards quedin igual,
     tant si el nom de l'equip ocupa 1 com 2 línies. */
  min-height:calc(2 * 1.08em);
}

.cnsf-cp-match-card__center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:98px;
  text-align:center;
}

.cnsf-cp-match-card__time{
  font-size:1.35rem;
  font-weight:820;
  line-height:1;
}

.cnsf-cp-match-card__date{
  font-size:.82rem;
  font-weight:650;
  line-height:1.1;
  opacity:.92;
}

.cnsf-cp-match-card__category{
  margin-top:4px;
  font-size:.78rem;
  font-weight:680;
  line-height:1.15;
  opacity:.92;
  text-transform:capitalize;
}

.cnsf-cp-match-card__body{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7px 16px 8px;
  background:#fff;
  border-top:1px solid var(--cnsf-line-soft);
  text-align:center;
  color:#52525b;
  /* Reserva l'alçada d'una línia de venue (~15px) + paddings,
     perquè les cards sense venue no quedin més baixes que les que en tenen. */
  min-height:30px;
}

.cnsf-cp-match-card__venue,
.cnsf-cp-match-card__venue a{
  font-family:"Inter", sans-serif;
  font-size:.78rem;
  font-weight:600;
  line-height:1.2;
  color:#52525b;
  text-decoration:none;
  display:block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cnsf-cp-match-card__venue a:hover{
  color:var(--cnsf-primary);
}

/* Variant natació: sense equips ni escuts. El títol de la competició
   és el protagonista; hora/data i categoria queden a sota, més petites.
   min-height iguala l'alçada del bloc superior de les cards de waterpolo
   (escut 58px + nom en 2 línies) perquè el carrusel quedi uniforme. */
.cnsf-cp-match-card--natacio .cnsf-cp-match-card__natacio{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:100%;
  min-height:93px;
  text-align:center;
}

.cnsf-cp-match-card--natacio .cnsf-cp-match-card__event-name{
  font-size:1.02rem;
  font-weight:800;
  line-height:1.15;
  color:#fff;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:break-word;
  text-wrap:balance;
}

.cnsf-cp-match-card__natacio-meta{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
}

.cnsf-cp-match-card__time--natacio{
  font-size:.95rem;
  font-weight:760;
}

.cnsf-cp-match-card__meta-sep{
  font-size:.82rem;
  opacity:.7;
}

.cnsf-cp-match-card--natacio .cnsf-cp-match-card__category{
  margin-top:1px;
}


/* =============================================================
 * 6. CALENDARI DE TEMPORADA
 * Llista agrupada (Pròxims partits / Partits jugats),
 * dins de cada grup files agrupades per mes, en estil tabular.
 * ============================================================= */
.cnsf-cp-calendar{
  color:#444;
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cnsf-cp-calendar .cnsf-cp-header{
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--cnsf-line-soft);
}

.cnsf-cp-calendar .cnsf-cp-title{
  font-size:clamp(1.35rem, 1.8vw, 1.7rem);
  font-weight:760;
  letter-spacing:-.035em;
  color:var(--cnsf-ink);
}

.cnsf-cp-calendar .cnsf-cp-season-list{
  display:grid;
  gap:34px;
}

.cnsf-cp-calendar-group{
  display:grid;
  gap:18px;
}

.cnsf-cp-calendar-group + .cnsf-cp-calendar-group{
  margin-top:12px;
}

.cnsf-cp-calendar-group__title{
  margin:0;
  font-size:.92rem;
  font-weight:760;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--cnsf-ink);
}

.cnsf-cp-calendar-group--played{
  opacity:.58;
  transition:opacity .18s ease;
}

.cnsf-cp-calendar-group--played:hover{
  opacity:.72;
}

.cnsf-cp-calendar-month{
  display:grid;
  gap:8px;
}

.cnsf-cp-calendar-month__title{
  margin:0 0 0 2px;
  font-size:.78rem;
  font-weight:720;
  line-height:1.2;
  color:var(--cnsf-muted);
  text-transform:capitalize;
}

.cnsf-cp-calendar .cnsf-cp-season-table{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--cnsf-line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--cnsf-shadow-card);
}

/* Files del calendari: grid de 3 columnes (data | info | match) */
.cnsf-cp-calendar .cnsf-cp-season-row{
  display:grid;
  grid-template-columns:minmax(150px, 180px) minmax(140px, 220px) minmax(0, 1fr);
  align-items:center;
  gap:14px;
  padding:10px 16px;
  border-bottom:1px solid var(--cnsf-line-soft);
  background:#fff;
  transition:background .18s ease;
}

.cnsf-cp-calendar .cnsf-cp-season-row:last-child{
  border-bottom:0;
}

.cnsf-cp-calendar .cnsf-cp-season-row:hover{
  background:var(--cnsf-bg-soft);
}

/* Tint blau clar per a files de natació */
.cnsf-cp-calendar .cnsf-cp-season-row--natacio{
  background:var(--cnsf-natacio-bg);
}
.cnsf-cp-calendar .cnsf-cp-season-row--natacio:hover{
  background:var(--cnsf-natacio-bg-strong);
}

/* Col 1 — Data + hora */
.cnsf-cp-calendar .cnsf-cp-season-row__col-date{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  min-width:0;
}

.cnsf-cp-calendar .cnsf-cp-season-row__day{
  font-size:.82rem;
  font-weight:700;
  line-height:1.2;
  color:var(--cnsf-ink-soft);
  text-transform:capitalize;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.cnsf-cp-calendar .cnsf-cp-season-row__time{
  font-size:.78rem;
  font-weight:650;
  color:var(--cnsf-muted);
}

/* Col 2 — Categoria + lloc */
.cnsf-cp-calendar .cnsf-cp-season-row__col-info{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  font-size:.78rem;
  line-height:1.18;
}

.cnsf-cp-calendar .cnsf-cp-season-row__category{
  display:inline-block;
  width:fit-content;
  padding:1px 9px;
  font-size:.7rem;
  font-weight:660;
  line-height:1.4;
  color:var(--cnsf-ink-soft);
  background:#f1f5f9;
  border-radius:999px;
  text-transform:capitalize;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.cnsf-cp-calendar .cnsf-cp-season-row--natacio .cnsf-cp-season-row__category{
  background:var(--cnsf-natacio-bg-strong);
  color:var(--cnsf-natacio-accent);
}

.cnsf-cp-calendar .cnsf-cp-season-row__venue,
.cnsf-cp-calendar .cnsf-cp-season-row__venue a{
  color:var(--cnsf-muted);
  font-size:.74rem;
  font-weight:520;
  line-height:1.2;
  text-decoration:none;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
  max-width:100%;
}

/* Col 3 — Marcador (waterpolo) o badge (natacio) */
.cnsf-cp-calendar .cnsf-cp-season-row__col-match{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center;
  gap:10px;
  min-width:0;
}

.cnsf-cp-calendar .cnsf-cp-season-row__col-match--natacio{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  min-width:0;
}

/* Nom de la competició de natació amb l'estil dels noms d'equip:
   text bold, ben llegible, sense pastilla. El color usa l'accent
   de natació perquè la fila té tint blau. */
.cnsf-cp-calendar .cnsf-cp-season-row__event-name{
  font-size:.95rem;
  font-weight:700;
  line-height:1.18;
  letter-spacing:-.015em;
  color:var(--cnsf-natacio-accent);
  text-align:center;
  max-width:100%;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:normal;
  overflow-wrap:break-word;
}

.cnsf-cp-calendar .cnsf-cp-season-row__team{
  display:grid;
  grid-template-columns:58px minmax(0, 1fr);
  align-items:center;
  gap:8px;
  min-width:0;
}

.cnsf-cp-calendar .cnsf-cp-season-row__team--away{
  grid-template-columns:minmax(0, 1fr) 58px;
  text-align:left;
}

.cnsf-cp-calendar .cnsf-cp-season-row__team-name{
  font-size:.9rem;
  font-weight:680;
  line-height:1.16;
  letter-spacing:-.015em;
  color:var(--cnsf-ink-soft);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.cnsf-cp-calendar .cnsf-cp-season-row__team--away .cnsf-cp-season-row__team-name{
  text-align:right;
}

.cnsf-cp-calendar .cnsf-cp-season-row__mid{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  color:#b4b4bd;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
}

/* Filtres del calendari */
.cnsf-cp-calendar-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:flex-end;
  margin:0 0 14px;
  padding:12px 14px;
  background:#fff;
  border:1px solid var(--cnsf-line);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}

.cnsf-cp-calendar-filters__item{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:140px;
}

.cnsf-cp-calendar-filters__label{
  font-size:.68rem;
  font-weight:700;
  color:var(--cnsf-muted);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.cnsf-cp-calendar-filters select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  padding:8px 30px 8px 12px;
  font-family:inherit;
  font-size:.86rem;
  font-weight:600;
  color:var(--cnsf-ink);
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2371717a' stroke-width='2'><path d='M1 1l5 5 5-5'/></svg>") no-repeat right 10px center / 10px auto;
  border:1px solid var(--cnsf-line);
  border-radius:10px;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.cnsf-cp-calendar-filters select:hover{ border-color:#cbd5e1; }
.cnsf-cp-calendar-filters select:focus{
  outline:none;
  border-color:var(--cnsf-primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cnsf-primary) 14%, transparent);
}

.cnsf-cp-calendar-filters__reset{
  align-self:flex-end;
  height:38px;
  padding:0 14px;
  font-family:inherit;
  font-size:.78rem;
  font-weight:680;
  color:var(--cnsf-ink-soft);
  background:#f1f5f9;
  border:1px solid var(--cnsf-line);
  border-radius:10px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}

.cnsf-cp-calendar-filters__reset:hover{
  background:#e2e8f0;
  color:var(--cnsf-ink);
}

.cnsf-cp-calendar .cnsf-cp-season-row__venue a:hover{
  color:var(--cnsf-ink);
  text-decoration:underline;
  text-underline-offset:3px;
}

.cnsf-cp-calendar .cnsf-cp-crest--sm{
  width:48px;
  height:48px;
  padding:3px;
  border-radius:13px;
  object-fit:contain;
  background:#fff;
  border:1px solid var(--cnsf-line);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:border-color .18s ease, box-shadow .18s ease;
}

.cnsf-cp-calendar .cnsf-cp-season-row:hover .cnsf-cp-crest--sm{
  border-color:#d4d4d8;
  box-shadow:0 2px 8px rgba(15,23,42,.065);
}


/* =============================================================
 * 7. RESPONSIVE (≤768px)
 * Una sola media query per bloc, en el mateix ordre.
 * ============================================================= */
@media (max-width: 900px){
  .cnsf-cp-header{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 768px){
  .cnsf-cp-week,
  .cnsf-cp-results-banner,
  .cnsf-cp-calendar{
    max-width:100%;
  }

  /* Banner */
  .cnsf-cp-results-banner__viewport{
    padding:3px 34px;
  }

  .cnsf-cp-results-banner__nav button{
    width:26px;
    height:26px;
    min-width:26px;
  }

  .cnsf-cp-results-banner__item,
  .cnsf-cp-results-banner__item--skel{
    flex-basis:170px;
    width:170px;
    height:58px;
    border-radius:11px;
  }

  .cnsf-cp-results-banner__item{
    padding:3px 8px 4px;
    gap:0;
  }

  .cnsf-cp-results-banner__date{
    font-size:.66rem;
  }

  .cnsf-cp-results-banner__match{
    grid-template-columns:40px minmax(40px, 1fr) 40px;
    gap:5px;
    min-height:40px;
  }

  .cnsf-cp-results-banner .cnsf-cp-crest--sm{
    width:40px;
    height:40px;
    padding:2px;
    border-radius:10px;
  }

  .cnsf-cp-results-banner__center{
    gap:1px;
  }

  .cnsf-cp-results-banner__score{
    font-size:1.05rem;
  }

  .cnsf-cp-results-banner__category{
    font-size:.62rem;
  }

  /* Pròxims partits */
  .cnsf-cp-week .cnsf-cp-track{
    grid-auto-columns:minmax(320px, 92vw);
    gap:14px;
  }

  .cnsf-cp-match-card{
    max-width:none;
    border-radius:20px;
  }

  .cnsf-cp-match-card__top{
    padding:11px 14px 9px;
    border-bottom-left-radius:13px;
    border-bottom-right-radius:13px;
  }

  .cnsf-cp-match-card__match{
    gap:9px;
  }

  .cnsf-cp-match-card__center{
    min-width:84px;
  }

  .cnsf-cp-match-card__crest-shell{
    width:52px;
    height:52px;
    border-radius:14px;
  }

  .cnsf-cp-match-card__crest-shell .cnsf-cp-crest{
    width:46px;
    height:46px;
  }

  .cnsf-cp-match-card__team-name{
    max-width:92px;
    font-size:.8rem;
    min-height:calc(2 * 1.08em);
  }

  .cnsf-cp-match-card__time{
    font-size:1.15rem;
  }

  .cnsf-cp-match-card__date,
  .cnsf-cp-match-card__category{
    font-size:.74rem;
  }

  .cnsf-cp-match-card__body{
    padding:6px 12px 7px;
    min-height:26px;
  }

  .cnsf-cp-match-card__venue,
  .cnsf-cp-match-card__venue a{
    font-size:.72rem;
    line-height:1.15;
  }

  .cnsf-cp-match-card--natacio .cnsf-cp-match-card__natacio{
    min-height:85px;
  }

  .cnsf-cp-match-card--natacio .cnsf-cp-match-card__event-name{
    font-size:.94rem;
  }

  .cnsf-cp-match-card__time--natacio{
    font-size:.86rem;
  }

  /* Calendari de temporada */
  .cnsf-cp-calendar .cnsf-cp-header{
    margin-bottom:16px;
  }

  .cnsf-cp-calendar .cnsf-cp-title{
    font-size:1.45rem;
  }

  .cnsf-cp-calendar .cnsf-cp-season-list{
    gap:28px;
  }

  .cnsf-cp-calendar-group{
    gap:14px;
  }

  .cnsf-cp-calendar .cnsf-cp-season-table{
    border-radius:14px;
  }

  /* Móvil: col·lapse a una sola columna apilada (data / info / match) */
  .cnsf-cp-calendar .cnsf-cp-season-row{
    grid-template-columns:1fr;
    gap:8px;
    padding:10px 12px;
  }

  .cnsf-cp-calendar .cnsf-cp-season-row__col-date{
    flex-direction:row;
    align-items:center;
    gap:8px;
  }

  .cnsf-cp-calendar .cnsf-cp-season-row__col-info{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:6px 10px;
  }

  .cnsf-cp-calendar .cnsf-cp-season-row__col-match{
    grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
    gap:8px;
  }

  .cnsf-cp-calendar .cnsf-cp-season-row__col-match--natacio{
    justify-content:flex-start;
  }

  .cnsf-cp-calendar .cnsf-cp-season-row__team,
  .cnsf-cp-calendar .cnsf-cp-season-row__team--away{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:4px;
    text-align:center;
  }

  .cnsf-cp-calendar .cnsf-cp-season-row__team--away .cnsf-cp-season-row__team-name{
    text-align:center;
  }

  .cnsf-cp-calendar .cnsf-cp-season-row__team-name{
    font-size:.76rem;
    line-height:1.12;
  }

  .cnsf-cp-calendar .cnsf-cp-crest--sm{
    width:48px;
    height:48px;
  }

  .cnsf-cp-calendar .cnsf-cp-season-row__mid{
    min-width:20px;
    font-size:.62rem;
  }

  .cnsf-cp-calendar-filters{
    flex-direction:column;
    align-items:stretch;
    padding:10px 12px;
  }

  .cnsf-cp-calendar-filters__item{
    min-width:0;
  }
}