/* Cards and content components. */

/* ---------- Card ---------- */
.card { background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow-card); overflow: hidden; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: 52px; padding: var(--space-3) var(--space-4); }
.card__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--step-1); font-weight: 800; letter-spacing: -0.01em; }
.card__title .icon { inline-size: 18px; block-size: 18px; color: var(--atlas-green); }
.card__body { padding: 0 var(--space-4) var(--space-4); }
.card__more { display: inline-flex; align-items: center; gap: 4px; min-block-size: 36px; padding-inline: var(--space-3); border-radius: 999px; font-size: var(--step--1); font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.card__more:hover { background: var(--surface-2); color: var(--ink); }
.card__more::after { content: "›"; font-size: 1.1em; }
:root[dir="rtl"] .card__more::after { content: "‹"; }
.card__foot { display: block; padding: var(--space-3); border-block-start: 1px solid var(--line); text-align: center; font-size: var(--step--1); font-weight: 700; text-decoration: none; }
.card__foot:hover { background: var(--surface-2); }

.section-title { font-size: var(--step-2); font-weight: 800; letter-spacing: -0.015em; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }

/* ---------- News ---------- */
.news-card { position: relative; display: grid; gap: var(--space-3); align-content: start; }
.news-card__body { display: grid; gap: 6px; align-content: start; }
.news-card__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--step--1); font-weight: 600; color: var(--atlas-green); }
.news-card__kind { color: var(--ink-2); font-weight: 500; }
.news-card__kind::before { content: "·"; margin-inline-end: 6px; color: var(--ink-2); }
.news-card__title { font-size: var(--step-1); font-weight: 750; line-height: 1.3; letter-spacing: -0.012em; text-wrap: pretty; }
.news-card__link { text-decoration: none; }
.news-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.news-card:hover .news-card__title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
.news-card__summary { color: var(--ink-2); line-height: 1.55; }
.news-card__meta { font-size: 0.8125rem; color: var(--ink-2); }

.news-media { position: relative; overflow: hidden; border-radius: var(--radius-m); aspect-ratio: 16 / 9; background: var(--surface-3); margin: 0; }
.news-media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.news-card:hover .news-media img { transform: scale(1.03); }

/* Hero: big photo + headline, split on wide screens */
.news-card--hero { background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow-card); overflow: hidden; gap: 0; }
.news-card--hero .news-media { border-radius: 0; aspect-ratio: 2 / 1; }
.news-card--hero .news-card__body { gap: var(--space-3); padding: var(--space-5); }
.news-card--hero .news-card__title { font-size: clamp(1.625rem, 2.6vw, 2.375rem); line-height: 1.12; letter-spacing: -0.025em; font-weight: 800; }
.news-card--hero .news-card__summary { font-size: var(--step-1); }
.shell__main { container: main / inline-size; }
@container main (min-width: 900px) {
  .news-card--hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .news-card--hero .news-media { aspect-ratio: auto; min-block-size: 400px; }
  .news-card--hero .news-card__body { align-content: center; padding: var(--space-6); }
}

/* Row: thumbnail + headline */
.news-card--row { grid-template-columns: minmax(0, 1fr) 112px; gap: var(--space-4); align-items: start; padding-block: var(--space-4); border-block-start: 1px solid var(--line); }
.news-card--row .news-media { order: 2; aspect-ratio: 4 / 3; border-radius: var(--radius-s); }
.news-card--row .news-card__title { font-size: var(--step-0); }

/* Wire: time + headline */
.news-card--wire { grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-3); border-block-start: 1px solid var(--line); }
.news-card__clock { font-size: var(--step--1); font-weight: 700; color: var(--atlas-green); padding-block-start: 1px; }
.news-card--wire .news-card__title { font-size: var(--step-0); font-weight: 650; }
.news-card--headline { grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-3); border-block-start: 1px solid var(--line); }
.news-card__rank { font-size: var(--step-3); font-weight: 800; color: var(--ink-2); line-height: 1; }

.story-grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Generated cover (no photo yet): calm, typographic */
.story-cover { position: relative; overflow: hidden; container-type: inline-size; aspect-ratio: 16 / 9; border-radius: var(--radius-m); background: var(--surface-3); color: var(--ink-2); }
.story-cover--thumb { aspect-ratio: 4 / 3; border-radius: var(--radius-s); }
.story-cover__art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4cqi; font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; font-variant-numeric: tabular-nums; direction: ltr; }
.story-cover__big { font-size: 22cqi; white-space: nowrap; color: var(--ink); opacity: 0.85; }
.story-cover--medium .story-cover__big { font-size: 18cqi; }
.story-cover--long .story-cover__big { font-size: 12cqi; }
.story-cover--versus .story-cover__big, .story-cover--move .story-cover__big { font-size: 14cqi; }
.story-cover__team > span { display: block; font-size: 6cqi; letter-spacing: 0.08em; }
.story-cover__dash, .story-cover__vs, .story-cover__arrow { color: var(--atlas-green); }
.story-cover__vs { font-size: 6cqi; }
.story-cover__arrow { inline-size: 10cqi; }
.story-cover__big--ghost { opacity: 0.35; }

/* ---------- Matches (FotMob-style rows) ---------- */
.match-list { display: grid; container: matches / inline-size; }
.match-compact--alt { display: none; }
@container matches (max-width: 520px) {
  .match-row { display: none; }
  .match-compact--alt { display: block; }
}
.match-group__head {
  display: flex; align-items: center; gap: var(--space-3); min-block-size: 44px; padding-inline: var(--space-4);
  background: var(--surface-2); border-block: 1px solid var(--line);
  font-size: var(--step--1); font-weight: 700;
}
.match-group__head .icon { inline-size: 16px; block-size: 16px; color: var(--ink-2); }
.match-group__head .mm-marker { margin-inline-start: auto; }
.match-group:first-child .match-group__head { border-block-start: 0; }

.match-row { position: relative; border-block-end: 1px solid var(--line); }
.match-row:last-child { border-block-end: 0; }
.match-row__link {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 72px minmax(0, 1fr) 20px; align-items: center; gap: var(--space-2);
  min-block-size: 56px; padding-inline: var(--space-3); text-decoration: none; color: inherit;
}
a.match-row__link:hover { background: var(--surface-2); }
.match-row__status { font-size: 0.75rem; font-weight: 700; color: var(--ink-2); text-align: center; }
.match-row__minute { display: inline-flex; align-items: center; gap: 5px; color: var(--flag-red); font-size: 0.8125rem; }
.match-row__minute::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; animation: live-pulse 1.4s ease-in-out infinite; }
.match-row__team { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0; font-weight: 600; }
.match-row__team--home { justify-content: flex-end; text-align: end; }
.match-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-row__team--loser { color: var(--ink-2); font-weight: 500; }
.match-row__center { display: grid; place-items: center; }
.match-row__score { padding: 4px 10px; border-radius: var(--radius-s); background: var(--surface-2); font-weight: 800; font-size: var(--step-0); letter-spacing: 0.04em; white-space: nowrap; direction: ltr; }
.match-row--live .match-row__score { background: color-mix(in srgb, var(--flag-red) 10%, var(--surface)); color: var(--flag-red); }
.match-row__time { font-weight: 700; font-size: var(--step-0); }
.match-row__competition { grid-column: 1 / -1; font-size: 0.75rem; color: var(--ink-2); margin-block-start: -4px; padding-block-end: 6px; text-align: center; }
@media (max-width: 480px) {
  .match-row__link { grid-template-columns: 44px minmax(0, 1fr) 60px minmax(0, 1fr); padding-inline: var(--space-2); }
  .match-row__aside { display: none; }
  .match-row__team { font-size: var(--step--1); }
}

/* Compact match (rails): status | two stacked team lines with scores */
.match-compact { border-block-start: 1px solid var(--line); }
.match-compact__link { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); text-decoration: none; color: inherit; }
a.match-compact__link:hover { background: var(--surface-2); }
.match-compact__status { display: grid; justify-items: center; gap: 2px; font-size: 0.75rem; font-weight: 700; color: var(--ink-2); text-align: center; }
.match-compact__time { font-size: var(--step--1); color: var(--ink); }
.match-compact__sides { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.match-compact__side { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--step--1); }
.match-compact__side--loser { color: var(--ink-2); font-weight: 500; }
.match-compact__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-compact__score { margin-inline-start: auto; font-weight: 800; }
.match-compact--live .match-compact__score { color: var(--flag-red); }
.match-compact__competition { grid-column: 2; font-size: 0.75rem; color: var(--ink-2); margin-block-start: -4px; }

.crest { flex: none; display: block; }
.crest__code { fill: #FFFFFF; font-family: "Inter", sans-serif; font-weight: 800; font-size: 8.5px; letter-spacing: 0.02em; }

/* Date switcher + filter chips in the matches card */
.match-toolbar { display: grid; gap: var(--space-3); padding: 0 var(--space-4) var(--space-3); }
.date-switch { display: flex; align-items: center; justify-content: space-between; }
.date-switch__label { font-weight: 700; }
.date-switch .icon-button { min-inline-size: 36px; min-block-size: 36px; background: var(--surface-2); }
.filter-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; min-block-size: 34px; padding-inline: var(--space-3); border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: var(--step--1); font-weight: 600; white-space: nowrap; text-decoration: none; }
.filter-chip[aria-current="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.filter-chip .icon { inline-size: 14px; block-size: 14px; color: var(--atlas-green); }

/* ---------- Standings ---------- */
.standings { display: grid; }
.standings__scroller { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }
.standings__table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--step--1); }
.standings__table th, .standings__table td { block-size: 40px; padding: 0 var(--space-2); text-align: center; white-space: nowrap; border-block-end: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
.standings__table tbody tr:last-child > * { border-block-end: 0; }
.standings__table thead th { block-size: 34px; font-size: 0.75rem; font-weight: 600; }
.standings__table abbr { text-decoration: none; }
.standings__table .standings__pos { position: sticky; inset-inline-start: 0; z-index: 1; inline-size: 36px; min-inline-size: 36px; border-inline-start: 3px solid transparent; color: var(--ink); font-weight: 700; }
.standings__table .standings__team { position: sticky; inset-inline-start: 36px; z-index: 1; text-align: start; min-inline-size: 140px; color: var(--ink); font-weight: 600; }
.standings__team-inner { display: inline-flex; align-items: center; gap: var(--space-2); }
.standings__team-name a { text-decoration: none; }
.standings__table .standings__points { color: var(--ink); font-weight: 800; }
.standings__row--maroc > * { background: var(--atlas-tint) !important; }
.standings__row--ucl .standings__pos, .standings__row--promotion .standings__pos { border-inline-start-color: var(--promo); }
.standings__row--uel .standings__pos { border-inline-start-color: color-mix(in srgb, var(--promo) 60%, var(--surface)); }
.standings__row--uecl .standings__pos { border-inline-start-color: color-mix(in srgb, var(--promo) 32%, var(--surface)); }
.standings__row--playoff .standings__pos { border-inline-start-color: var(--draw); }
.standings__row--relegation .standings__pos { border-inline-start-color: var(--relegation); }
.standings__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: var(--space-3) var(--space-4); list-style: none; font-size: 0.75rem; color: var(--ink-2); border-block-start: 1px solid var(--line); }
.standings__legend li { display: inline-flex; align-items: center; gap: 6px; }
.zone-swatch { inline-size: 10px; block-size: 10px; border-radius: 3px; }
.zone-swatch--ucl, .zone-swatch--promotion { background: var(--promo); }
.zone-swatch--uel { background: color-mix(in srgb, var(--promo) 60%, var(--surface)); }
.zone-swatch--uecl { background: color-mix(in srgb, var(--promo) 32%, var(--surface)); }
.zone-swatch--playoff { background: var(--draw); }
.zone-swatch--relegation { background: var(--relegation); }
.form-guide { display: inline-flex; gap: 3px; }
.form-guide__item { display: inline-grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: 5px; font-size: 0.6875rem; font-weight: 700; color: var(--on-status); }
.form-guide__item--win { background: var(--win); }
.form-guide__item--draw { background: var(--draw); }
.form-guide__item--loss { background: var(--loss); }
.signed { unicode-bidi: isolate; direction: ltr; display: inline-block; }

/* ---------- Rankings ---------- */
.ranking__champion { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: center; padding: var(--space-4); border-block-end: 1px solid var(--line); background: color-mix(in srgb, var(--sand) 12%, var(--surface)); border-inline-start: 4px solid var(--sand); }
.ranking__belt { grid-column: 1 / -1; font-size: 0.75rem; font-weight: 700; color: color-mix(in srgb, var(--sand) 55%, var(--ink)); }
.ranking__champion-name { display: flex; align-items: center; gap: var(--space-2); font-size: var(--step-2); font-weight: 800; letter-spacing: -0.015em; }
.ranking__champion-value { font-weight: 800; font-size: var(--step-1); }
.ranking__table { inline-size: 100%; border-collapse: collapse; }
.ranking__table td, .ranking__table th { block-size: 48px; padding: 0 var(--space-3); border-block-end: 1px solid var(--line); text-align: start; }
.ranking__table tr:last-child > * { border-block-end: 0; }
.ranking__row--maroc > * { background: var(--atlas-tint); }
.ranking__rank { inline-size: 40px; font-weight: 800; text-align: center !important; }
.ranking__move { inline-size: 20px; font-size: 0.625rem; text-align: center !important; color: var(--ink-2); }
.ranking__move--up { color: var(--win); }
.ranking__move--down { color: var(--loss); }
.ranking__move--new { color: var(--promo); font-size: 0.9rem; }
.ranking__name { font-weight: 600; }
.ranking__name-inner { display: inline-flex; align-items: center; gap: 6px; }
.ranking__detail { display: block; font-size: 0.75rem; font-weight: 400; color: var(--ink-2); }
.ranking__value { text-align: end !important; font-weight: 700; white-space: nowrap; }

/* ---------- Maroc today, Lions, transfers, Moroccans panel ---------- */
.maroc-card { border-block-start: 3px solid var(--atlas-green); }
.maroc-card__date { font-size: var(--step--1); color: var(--ink-2); font-weight: 500; }

.lions-list, .maroc-panel__list { margin: 0; padding: 0; list-style: none; }
.lions-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); min-block-size: 60px; padding-inline: var(--space-4); border-block-start: 1px solid var(--line); }
.lions-row__rank { font-weight: 800; color: var(--ink-2); }
.lions-row__who { display: grid; min-inline-size: 0; }
.lions-row__name { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.lions-row__club, .lions-row__line { font-size: 0.75rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lions-row__spark { color: var(--atlas-green); }
.rating { display: inline-grid; place-items: center; min-inline-size: 38px; block-size: 26px; padding-inline: 6px; border-radius: var(--radius-s); font-weight: 800; font-size: var(--step--1); }
.rating--high { background: var(--win); color: var(--on-status); }
.rating--good { background: var(--atlas-tint); color: var(--atlas-green); }
.rating--ok { background: var(--surface-3); color: var(--ink); }

.transfer-card { display: grid; gap: 6px; padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--line); }
.transfer-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.transfer-card__player { font-size: var(--step-0); font-weight: 750; letter-spacing: -0.01em; }
.transfer-card__move { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--step--1); color: var(--ink-2); }
.transfer-card__arrow { inline-size: 14px; block-size: 14px; }
:root[dir="rtl"] .transfer-card__arrow { transform: scaleX(-1); }
.transfer-card__fee { margin-inline-start: auto; font-weight: 800; color: var(--ink); }
.transfer-card__foot { display: flex; align-items: center; gap: var(--space-2); font-size: 0.75rem; color: var(--ink-2); }
.status-pill { padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; white-space: nowrap; }
.status-pill--rumour, .status-pill--talks { background: var(--surface-3); color: var(--ink); }
.status-pill--advanced, .status-pill--agreed { background: color-mix(in srgb, var(--promo) 12%, var(--surface)); color: var(--promo); }
.status-pill--done { background: var(--atlas-tint); color: var(--atlas-green); }
.status-pill--off { background: color-mix(in srgb, var(--loss) 10%, var(--surface)); color: var(--loss); }
.credibility { display: inline-flex; align-items: end; gap: 2px; block-size: 12px; }
.credibility__bar { inline-size: 3px; border-radius: 1px; background: var(--line); }
.credibility__bar:nth-child(1) { block-size: 4px; }
.credibility__bar:nth-child(2) { block-size: 7px; }
.credibility__bar:nth-child(3) { block-size: 10px; }
.credibility__bar:nth-child(4) { block-size: 12px; }
.credibility__bar--on { background: var(--ink); }

.maroc-panel__item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-block-size: 60px; padding-inline: var(--space-4); border-block-start: 1px solid var(--line); }
.maroc-panel__avatar { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--atlas-tint); color: var(--atlas-green); font-weight: 800; font-size: 0.75rem; }
.maroc-panel__who { display: grid; min-inline-size: 0; }
.maroc-panel__name { font-weight: 700; }
.maroc-panel__detail { font-size: 0.75rem; color: var(--ink-2); }
.maroc-panel__value { font-weight: 800; }

/* ---------- Small pieces ---------- */
.mm-marker { color: var(--atlas-green); display: inline-flex; align-items: center; vertical-align: middle; }
.mm-marker--inline .mm-marker__star { inline-size: 13px; block-size: 13px; }
.mm-marker--badge { gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--atlas-tint); font-size: 0.75rem; font-weight: 700; line-height: 1.5; }
.mm-marker--badge .mm-marker__star { inline-size: 12px; block-size: 12px; }
.chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; white-space: nowrap; background: var(--surface-3); color: var(--ink-2); }
.chip--maroc { background: var(--atlas-tint); color: var(--atlas-green); }

.lens-toggle { margin: 0; }
.lens-toggle__button { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--touch); padding-inline: var(--space-2); background: none; border: 0; border-radius: 999px; font-size: var(--step--1); font-weight: 600; cursor: pointer; white-space: nowrap; }
.lens-toggle__button:hover { background: var(--surface-2); }
.lens-toggle__star { inline-size: 16px; block-size: 16px; color: var(--atlas-green); }
.lens-toggle__track { position: relative; inline-size: 34px; block-size: 20px; flex: none; border-radius: 999px; background: var(--surface-3); transition: background 0.15s; }
.lens-toggle__thumb { position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: inset-inline-start 0.15s; }
.lens-toggle__button[aria-checked="true"] .lens-toggle__track { background: var(--atlas-green); }
.lens-toggle__button[aria-checked="true"] .lens-toggle__thumb { inset-inline-start: 16px; }

.empty-state { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-7) var(--space-5); text-align: center; }
.empty-state__icon { inline-size: 44px; block-size: 44px; padding: 11px; margin-block-end: var(--space-1); border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
.empty-state__title { font-weight: 700; }
.empty-state__body { color: var(--ink-2); font-size: var(--step--1); max-inline-size: 42ch; }

.source-note { padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--line); font-size: 0.75rem; color: var(--ink-2); }
.source-note a { color: inherit; }