/* Card — canonical container for every widget on match-detail, team-detail
   and future league-detail pages. One pattern, one naming.
   Supersedes ad-hoc section-card / section-header / section-title that
   lived in match-detail.css + team-overview.css with diverging styles.

   Usage:
     <article class="card">
       <h3 class="card-title">Palmarés</h3>
       …content…
     </article>

   With right-side extras (count badge, "See all" action, etc):
     <article class="card">
       <header class="card-header">
         <h3 class="card-title">Palmarés</h3>
         <span class="card-count">6</span>
       </header>
       …content…
     </article>
*/

@layer components {
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;

    /* Container query opt-in: components inside .card can adapt to its
       inline-size rather than the viewport. Pilot host for the desktop CQ
       strategy (see docs/CLAUDE.feat-v2-templates-desktop-mode.md § 2).
       No `@container .card (…)` queries declared yet — components opt in
       per-piloto starting Sprint 2. */
    container-type: inline-size;
  }

  /* Modifier: drops the card padding so a flush header (with its own
     padding) and a borderless body list can sit edge-to-edge. Used by
     accordion groups (career), trophy grouping cards, info grids. */
  .card--no-padding {
    padding: 0;
  }

  /* Title — UPPERCASE small caps, 13px. Always carries its own 12px
     bottom margin: works standalone inside .card and inside .card-header
     (flex doesn't collapse margins, so the 12px shows through). */
  .card-title {
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    margin: 0 0 16px;
  }

  /* Subtitle — secondary line below the title or alongside it inside
     .card-header. 12px medium muted, no margin (header gap handles it). */
  .card-subtitle {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
  }

  /* Hint — UPPERCASE small-caps annotation, right-aligned in .card-header
     to scope the card ("últimos 5", "próximamente", "vs delanteros"). */
  .card-hint {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
  }

  /* Optional flex wrapper when a card needs title + right-side content
     (count badge, link, action). No border-bottom, no own margin — the
     title inside owns the spacing below. */
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  /* Count pill right of the title inside .card-header. */
  .card-count {
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--color-surface-sunken);
    color: var(--color-text-subtle);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }
}