/* Depends on: tokens.css, nav.css -- linked as separate <link>
   tags by every template that uses this file, NOT @import-ed here.
   @import is a serialized waterfall: the browser cannot discover an
   imported file until it has downloaded and parsed the one importing
   it, so this site's deepest chain (tokens -> nav -> calendar ->
   event_detail) cost four sequential round trips before first paint.
   Separate links are all visible in the initial HTML and download in
   parallel. Templates list dependencies first, so the cascade is
   unchanged -- see core/tests/test_template_lint.py, which fails if
   an @import is reintroduced here. */
/* body base: tokens.css */
.wrap { max-width: 900px; margin: 0 auto; padding: 0 26px 70px; }

/* .topbar / .brand / .btn-ghost / .search live in nav.css now (one copy for
   the whole site -- see its "Shared content-page top bar" block). */

/* .page-head lives in nav.css. */

.chip-group { margin-bottom: 22px; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line); color: var(--text-soft);
}
.chip:hover { border-color: var(--line-hover); color: var(--text-primary); }
.chip.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

.cal-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.cal-row {
  display: flex; align-items: center; gap: 22px; padding: 26px 28px; min-height: 150px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.cal-row:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.6); }
/* The date block: month over day, tinted by status so a glance down the page
   separates what is coming from what is done. */
.cal-datetile {
  flex-shrink: 0; width: 76px; min-height: 92px; padding: 10px 6px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--surface-2); border: 1px solid var(--line); text-align: center;
}
.cdt-month { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.cdt-day { font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cdt-end { font-size: 11px; font-weight: 700; color: var(--text-soft); }
.cal-st-upcoming .cal-datetile { border-color: var(--accent-line); background: var(--accent-soft); }
.cal-st-upcoming .cdt-month { color: var(--accent); }
.cal-st-ongoing .cal-datetile { border-color: rgba(255, 201, 74, 0.4); background: var(--gold-soft); }
.cal-st-ongoing .cdt-month { color: var(--gold); }
.cal-st-finished .cal-datetile { border-color: rgba(139, 123, 255, 0.4); background: var(--violet-soft); }
.cal-st-finished .cdt-month { color: var(--violet); }
.cal-row:hover { border-color: var(--line-hover); }
/* A finished event is marked by its label and its button, not by dimming the
   whole row -- the 0.72 opacity this used to carry took the date and the
   venue, the two things people actually read here, below legibility. */
/* A landscape tile, not the 46px square it was: event logos and key art are
   wide, and at 46px they were unreadable. Still drawn only when an image
   exists, and on the right, so rows without one are not indented. */
.cal-icon {
  width: 168px; height: 108px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center;
  background: #ffffff; border: 1px solid var(--line); overflow: hidden;
}
.cal-icon img {
  width: 100%; height: 100%; object-fit: contain; padding: 8px; display: block;
  background: #ffffff; /* most sponsor/event logos are designed for a light card, not our dark theme */
}
.cal-row.cal-next .cal-icon { width: 220px; height: 140px; border-radius: 14px; }
.cal-results-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 700;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
}
.cal-results-btn:hover { background: var(--accent); color: #04150c; }
.cal-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cal-ics-btn {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  color: var(--text-secondary); border: 1px solid var(--line);
}
.cal-ics-btn svg { width: 15px; height: 15px; }
.cal-ics-btn:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.cal-body { flex: 1; min-width: 0; }
.cal-top-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-round { font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-soft); }
/* The round ("Fecha 7"): the word small, the number big and in the status
   colour -- the number is what you scan the list for. */
.cal-round-big { display: inline-flex; align-items: baseline; gap: 8px; color: var(--text-soft); }
.cal-round-word { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.cal-round-num { font-size: 30px; line-height: 1; font-weight: 900; letter-spacing: -0.02em; color: var(--accent); }
.cal-st-ongoing .cal-round-num { color: var(--gold); }
.cal-st-finished .cal-round-num { color: var(--violet); }
.cal-st-cancelled .cal-round-num, .cal-st-postponed .cal-round-num { color: var(--text-secondary); }
.cal-row.cal-next .cal-round-num { font-size: 40px; }
/* .cal-status and .cat-chip below are shared: event_detail.html's hero,
   team_detail.html and circuit_detail.html all borrow them from this file
   (their own stylesheets say so at the top). Keep the pill here and scope
   the calendar list's own flatter treatment to .cal-list. */
.cal-status { margin-left: auto; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 11px; border-radius: 100px; }
.cal-status.upcoming { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.cal-status.finished { background: var(--violet-soft); color: var(--violet); border: 1px solid rgba(139, 123, 255, 0.4); }
.cal-status.ongoing { background: var(--gold-soft); color: var(--gold); border: 1px solid rgba(255, 201, 74, 0.35); }
/* In the list the status sits beside the round label instead of floating
   mid-row, and stays a pill like everywhere else it is used. */
.cal-list .cal-status { margin-left: 0; }
.cal-title { font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; }
/* The date is the fact this page exists to deliver, so it is the brightest
   thing in the row after the name. The venue sits behind it in the same line. */
.cal-meta { font-size: 14.5px; margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.cal-date { color: var(--text-primary); font-weight: 700; font-size: 16px; }
.cal-venue { color: var(--text-soft); display: flex; align-items: center; gap: 7px; }
.cal-venue svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-tertiary); }
.cal-cats { font-size: 13px; color: var(--text-soft); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); line-height: 1.5; }
/* Shared with event_detail.html's hero and team_detail.html. The calendar
   list no longer uses it -- eight bordered pills per row drowned the event
   name -- but those two pages still do, so it stays here. */
.cat-chip { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 100px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-secondary); }

/* The next event, pinned above the season: an outlined, glowing card like the
   mockups' key panels. */
.cal-section-label {
  margin: 4px 0 16px; padding-left: 2px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-soft);
}
.cal-list-next { margin-bottom: 26px; }
/* The featured card's glow (~34px) washes over a label that sits right above
   it, so it gets its own gap on top of the label's margin. */
.cal-section-label + .cal-list-next { padding-top: 16px; }
/* "Próximo evento" gets room under the filter chips (the group's own 22px
   margin plus this), and the label after the next card drops well clear of it,
   because the card's green glow (box-shadow, ~34px) otherwise washes over the
   label right under it. */
.chip-group + .cal-section-label { margin-top: 14px; }
/* "Ya corridas" under the dates still to come. */
.cal-list + .cal-section-label { margin-top: 34px; }
.cal-list-next + .cal-section-label { margin-top: 52px; }
.cal-row.cal-next {
  padding: 32px 34px; min-height: 190px; border-color: var(--accent-line);
  background: linear-gradient(160deg, var(--accent-soft), var(--surface) 65%);
  box-shadow: 0 0 34px -12px var(--accent);
}
.cal-row.cal-next:hover { border-color: var(--accent); }
.cal-row.cal-next .cal-title { font-size: 26px; }
.cal-row.cal-next .cal-round { color: var(--accent); }
.cal-row.cal-next .cal-results-btn { background: var(--accent); color: #04150c; border-color: var(--accent); }
.cal-row.cal-next .cal-results-btn:hover { background: var(--accent-strong); }

.empty-state { padding: 30px 10px; text-align: center; color: var(--text-tertiary); font-size: 13px; }

@media (max-width: 600px) {
  .cal-row { flex-direction: column; align-items: stretch; padding: 20px; min-height: 0; }
  .cal-row.cal-next { padding: 24px 20px; min-height: 0; }
  .cal-datetile { align-self: flex-start; width: 68px; min-height: 80px; }
  .cal-status { margin-left: 0; }
  /* The venue wraps to its own line on a phone, where a leading middot
     would be left hanging at the start of it. */
  .cal-meta { gap: 2px; flex-direction: column; }
  .cal-actions { justify-content: flex-end; }
  .cal-icon, .cal-row.cal-next .cal-icon { align-self: stretch; width: auto; height: 110px; }
}

/* Provider detail: the cover carries the name/logo, the body is two cards. */
.provider-back { margin-bottom: 12px; }
.provider-title { display: flex; align-items: center; gap: 16px; }
.provider-logo {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 14px; overflow: hidden;
  background: #fff; border: 1px solid var(--line); display: grid; place-items: center;
}
.provider-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.provider-logo-initial { display: grid; place-items: center; font-size: 26px; font-weight: 800; color: var(--accent); background: var(--accent-soft) !important; border-color: var(--accent-line) !important; }
.provider-card.provider-cta { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; text-align: left; margin-bottom: 16px; }
.provider-cta-title { font-size: 16px; font-weight: 800; }
.provider-cta-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.provider-cta-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.provider-cta-actions a { padding: 9px 16px; text-decoration: none; }
.provider-card {
  margin-bottom: 16px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(175deg, var(--surface) 0%, var(--card-gradient-end) 100%);
}
.provider-about { line-height: 1.65; color: var(--text-secondary); }
.provider-about p { margin: 0 0 1em; }
.provider-about p:last-child { margin-bottom: 0; }
.provider-gallery h2 { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 12px; }
.provider-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.provider-gallery-grid figure { margin: 0; }
.provider-gallery-grid a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.provider-gallery-grid a:hover { border-color: var(--accent-line); }
.provider-gallery-grid img { display: block; width: 100%; height: 130px; object-fit: cover; transition: transform 0.25s ease; }
.provider-gallery-grid a:hover img { transform: scale(1.04); }
.provider-gallery-grid figcaption { margin-top: 5px; font-size: 12px; color: var(--text-tertiary); }
.provider-contact h2 { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 4px; }
.provider-contact ul { list-style: none; margin: 0; padding: 0; }
.provider-contact li { display: flex; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.provider-contact li:last-child { border-bottom: none; }
.provider-contact li > span:first-child { flex: 0 0 96px; color: var(--text-tertiary); }
.provider-contact a { color: var(--accent); word-break: break-all; }
.provider-contact a:hover { color: var(--accent-strong); }
.provider-address { color: var(--text-primary); }

/* ---------- Proveedores (provider_directory.html) ----------
   Was inline styles: a bare bordered box per provider with no background, no
   hover and a text-only category line. Now the directory card the team and
   circuit directories use -- surface gradient, logo tile (or initials, like
   the team rows), category chips. */
.provider-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; }
.provider-count { margin-left: auto; font-size: 12.5px; color: var(--text-tertiary); }
.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.provider-card {
  display: flex; flex-direction: column; gap: 6px; padding: 20px;
  background: linear-gradient(175deg, var(--surface) 0%, var(--card-gradient-end) 100%);
  border: 1px solid var(--line); border-radius: 16px; color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.provider-card:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.provider-logo {
  width: 52px; height: 52px; margin-bottom: 6px; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center; font-size: 16px; font-weight: 800; letter-spacing: 0.02em;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
}
.provider-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.provider-name { font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.provider-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.provider-cat {
  padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface-raised); color: var(--text-secondary);
}
.provider-where { display: flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--text-tertiary); }
.provider-where svg { width: 14px; height: 14px; flex-shrink: 0; }