/* event-list.css — shared SITE styles for the event list (events.html, es/disciplina.html).
 * 2026-10-21. Extracted from events.html so the Calendar and the discipline landing pages render the
 * same rows. Pages must define the :root palette (--gray-100, --gray-600, --aqua, --gold, --fuchsia,
 * --blue-mid, --aqua-glow) as they already do. Markup comes from SiteCommon.eventListHtml().
 * One row: badge | title (+pills) | location | dates | disciplines; below 980px: badge + stacked data. */

  .finished-toggle{ background:transparent; border:1px solid rgba(255,255,255,.2); color:inherit; border-radius:9999px;
    padding:7px 16px; font-size:12px; font-weight:800; cursor:pointer; }
  html:not(.dark) .finished-toggle{ border-color:rgba(0,0,0,.18); }
  .finished-toggle[aria-pressed="true"]{ background:var(--blue-mid); border-color:var(--blue-mid); color:#fff; }
  .finished-toggle:focus-visible{ outline:2px solid var(--aqua); outline-offset:2px; }

  /* Vertical list (S1): one full-width row per event; the title link stretches over the row,
     chips sit above it (z-index) so they stay independently clickable — no nested <a>. */
  .month-h{ font-family:'Manrope',sans-serif; font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--gray-600); margin:28px 0 10px; }
  html.dark .month-h{ color:#8FA7B6; }
  .section-h{ font-family:'Manrope',sans-serif; font-weight:900; font-size:20px; margin:36px 0 4px; }
  .event-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
  /* One thin row, data spread across columns: badge | title (+pills) | location | dates | disciplines.
     Below 980px it collapses to badge + stacked data. */
  .event-row{ position:relative; display:grid; grid-template-columns:60px minmax(0,2.4fr) minmax(0,1.4fr) 150px minmax(0,1.6fr);
    align-items:center; column-gap:24px; padding:12px 20px; background:var(--gray-100);
    border:1px solid rgba(0,0,0,.06); border-radius:16px; transition:transform .15s ease, box-shadow .15s ease; }
  html.dark .event-row{ background:#122A3D; border-color:#1E4560; }
  .event-row:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -20px rgba(10,40,60,.35); }
  .row-link{ color:inherit; text-decoration:none; }
  .row-link::after{ content:""; position:absolute; inset:0; border-radius:16px; }
  .row-link:focus-visible{ outline:none; }
  .row-link:focus-visible::after{ outline:2px solid var(--aqua); outline-offset:2px; }
  .row-title{ font-weight:700; font-size:17px; line-height:1.25; overflow-wrap:anywhere; margin:0; }
  .col-main{ min-width:0; }
  .col-main .pill-row{ margin-bottom:4px; }

  .date-badge{ background:var(--aqua); color:#04231d; font-weight:800; border-radius:10px; padding:10px 8px;
    text-align:center; font-size:13px; line-height:1.15; width:60px; }
  .date-badge .yr{ display:block; font-size:9px; font-weight:700; opacity:.75; margin-top:3px; }
  .date-badge.is-consada{ background:var(--gold); color:#12253a; }
  .date-badge.is-live{ background:var(--fuchsia); color:#2a0f20; }
  .date-badge.is-finished{ background:var(--gray-600); color:#fff; }

  .pill-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .pill{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; border-radius:9999px;
    padding:3px 9px; display:inline-block; white-space:nowrap; }
  .pill-live{ background:rgba(212,136,179,.22); color:#a14b80; }
  html.dark .pill-live{ color:var(--fuchsia); }
  .pill-completed{ background:rgba(107,117,128,.2); color:#4b5560; }
  html.dark .pill-completed{ color:#aab9c4; }
  .pill-cancelled{ background:rgba(200,40,40,.15); color:#b32d2d; }
  html.dark .pill-cancelled{ color:#e35555; }
  .pill-consada{ background:rgba(212,164,40,.18); color:#8a6a0c; }
  html.dark .pill-consada{ color:var(--gold); }
  .pill-level{ background:rgba(38,133,204,.12); color:var(--blue-mid); }
  html.dark .pill-level{ color:var(--aqua-glow); }

  .col-loc{ font-size:14px; display:flex; align-items:center; min-width:0; }
  .col-loc span{ overflow-wrap:anywhere; }
  .col-dates{ font-size:12px; font-weight:600; white-space:nowrap; }
  .col-disc{ display:flex; flex-wrap:wrap; gap:6px; position:relative; z-index:1; }
  .col-disc:empty{ display:none; }
  .disc-chip{ font-size:11px; font-weight:700; border-radius:9999px; padding:2px 10px; background:rgba(38,133,204,.12);
    color:var(--blue-mid); text-decoration:none; }
  html.dark .disc-chip{ color:var(--aqua-glow); }
  a.disc-chip:hover{ text-decoration:underline; }

  /* Muted (S3): reduced contrast + grayscale flag + a TEXT label (pill) + struck-through title when
     cancelled. The status pill stays outside the dimmed block so the label is never washed out. */
  .event-row.is-muted .dim{ opacity:.68; }
  .event-row.is-muted .consada-flag{ filter:grayscale(1); }


  @media (max-width:980px){
    .event-row{ grid-template-columns:52px minmax(0,1fr); column-gap:14px; row-gap:6px; align-items:start; padding:14px; }
    .event-row > .date-badge{ grid-row:1 / span 4; width:52px; font-size:12px; }
    .event-row > :not(.date-badge){ grid-column:2; }
    .col-dates{ white-space:normal; }
    .row-title{ font-size:16px; }