@layer components {
  /* "Resúmenes" match tab — per-country YouTube highlights with a lite-embed
     facade (thumbnail + play; the YouTube SDK loads only on first click). */
  .match-highlights {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
  }

  .match-highlights[hidden] {
    display: none;
  }

  .mh-card {
    width: 100%;
    margin-bottom: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  /* ── Facade: 16/9 thumbnail with play overlay + duration badge ── */
  .mh-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: none;
    background: #000;
    cursor: pointer;
    overflow: hidden;
  }

  .mh-thumb[hidden] {
    display: none;
  }

  .mh-thumb--link {
    text-decoration: none;
  }

  .mh-thumb__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mh-thumb__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgb(0 0 0 / 0%) 40%,
      rgb(0 0 0 / 55%) 100%
    );
  }

  .mh-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgb(0 0 0 / 55%);
    color: #fff;
    backdrop-filter: blur(2px);
    transition:
      transform 0.15s ease,
      background 0.15s ease,
      color 0.15s ease;
  }

  .mh-play svg {
    margin-left: 2px;
  }

  .mh-badge {
    position: absolute;
    right: var(--space-2);
    bottom: var(--space-2);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: rgb(0 0 0 / 78%);
    color: #fff;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.3px;
  }

  /* "Ver en YouTube ↗" chip for out-link cards. */
  .mh-ext {
    position: absolute;
    left: var(--space-2);
    bottom: var(--space-2);
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    background: rgb(0 0 0 / 78%);
    color: #fff;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 11px;
    letter-spacing: 0.2px;
  }

  /* ── Mount: where the in-app iframe (or runtime fallback) renders ── */
  .mh-mount {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
  }

  .mh-mount[hidden] {
    display: none;
  }

  .mh-mount iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* Runtime fallback rendered by the controller when the embed is blocked. */
  .mh-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    text-align: center;
    text-decoration: none;
    color: var(--color-text-secondary);
  }

  .mh-fallback[hidden] {
    display: none;
  }

  .mh-fallback__msg {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.4;
    color: var(--color-text-muted);
  }

  .mh-fallback__cta {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: #07120b;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 12.5px;
  }

  /* ── Meta below the thumbnail ── */
  .mh-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-2) var(--space-3) var(--space-3);
  }

  .mh-fixture {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .mh-teams {
    flex: 1;
    min-width: 0;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 14px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mh-score {
    flex-shrink: 0;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 14px;
    color: var(--color-text-secondary);
  }

  .mh-attrib {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .mh-attrib__src {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Channel source chip (shared _yt_source): the source channel avatar with the
     YouTube brand glyph as fallback (no avatar URL, or it failed to load). */
  .mh-src {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
  }

  .mh-attrib .mh-src {
    flex: 1;
    min-width: 0;
  }

  .mh-src__logo {
    position: relative;
    flex-shrink: 0;
    display: block;
    overflow: hidden;
    border-radius: 50%;
  }

  .mh-src--sm .mh-src__logo {
    width: 24px;
    height: 24px;
  }

  .mh-src--md .mh-src__logo {
    width: 24px;
    height: 24px;
  }

  /* Glyph = always-present base layer; avatar overlays and covers it on load. */
  .mh-src__logo .mh-yt-icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  .mh-src__img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mh-src__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit;
    color: inherit;
  }

  .mh-attrib__ago {
    flex-shrink: 0;
  }

  @media (hover: hover) {
    .mh-thumb:hover .mh-play {
      transform: translate(-50%, -50%) scale(1.08);
      background: var(--color-accent);
      color: #07120b;
    }
  }

  /* ── FT overview SPOTLIGHT — el resumen oficial como card destacada.
     Header estándar (.card-header / .card-title) + tag del canal. El vídeo va
     inset en el cuerpo de la card, con su propio radio. */
  .mh-spotlight .mh-player,
  .mh-spotlight .mh-thumb--link {
    border-radius: 8px;
    overflow: hidden;
  }

  /* Tag del canal: logo del canal de YouTube + nombre oficial. Espejo de
     next-match-comp-tag; el margin-bottom balancea el del .card-title. */
  .mh-channel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 13px;
  }

  .mh-channel__logo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .mh-channel__name {
    font-size: 13px;
    text-transform: none;
    white-space: nowrap;
  }

  /* ════════════════════════════════════════════════════════════════════
     COMPETITION MEDIA — overview "Resúmenes" rail + hero, and the
     "Multimedia" tab wall (highlights grouped by jornada + FIFA editorial).
     The cards reuse the per-match facade above; inside a competition card
     (.mh-overview / .mh-group) the mh-card chrome is stripped so only the
     16/9 thumbnail carries the surface — the parent .card frames it.
     ════════════════════════════════════════════════════════════════════ */

  .mh-overview .mh-card,
  .mh-group .mh-card {
    border: none;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  /* Anchor for the hero corner badge ("Partido del día") overlaid on the
     thumbnail's top-left. */
  .mh-card--comp {
    position: relative;
  }

  .mh-corner-badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 2;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: #07120b;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 11px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    box-shadow: 0 1px 6px rgb(0 0 0 / 35%);
  }

  .mh-overview .mh-player,
  .mh-overview .mh-thumb--link,
  .mh-overview .mh-mount,
  .mh-group .mh-player,
  .mh-group .mh-thumb--link,
  .mh-group .mh-mount {
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .mh-overview .mh-meta,
  .mh-group .mh-meta {
    padding: var(--space-2) 0 0;
  }

  /* ── Match-of-the-day hero ──────────────────────────────────────── */
  .mh-hero {
    position: relative;
    margin-top: var(--space-2);
  }

  /* ── Horizontal rail (overview) — scroll-snap, scrollbar hidden.
     A subtle hairline + extra breathing room sets the rail apart from the
     "último partido" hero above it. ── */
  .mh-rail {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mh-rail::-webkit-scrollbar {
    display: none;
  }

  .mh-rail__item {
    flex: 0 0 78%;
    max-width: 300px;
    scroll-snap-align: start;
  }

  @media (min-width: 600px) {
    .mh-rail__item {
      flex-basis: 48%;
    }
  }

  @media (min-width: 900px) {
    .mh-rail__item {
      flex-basis: 31%;
    }
  }

  /* ── Competition card meta (crests + names, no score) ───────────── */
  .mh-comp-teams {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 13.5px;
    color: #fff;
  }

  /* Per-team goals, sitting right after each team name inside the teams row. */
  .mh-comp-goals {
    flex-shrink: 0;
    font-size: 14.5px;
    color: #fff;
    font-variant-numeric: tabular-nums;
  }

  .mh-comp-crest {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .mh-comp-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mh-comp-vs {
    flex-shrink: 0;
    color: var(--color-text-muted);
  }

  /* ── Multimedia tab — group cards + responsive card grid ────────── */
  .mh-group {
    margin-bottom: var(--space-3);
  }

  .mh-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  @media (min-width: 600px) {
    .mh-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 900px) {
    .mh-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ── Editorial (FIFA press / interviews) card meta ──────────────── */
  .mh-ed-type {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 11px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--color-accent);
  }

  .mh-ed-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.35;
    color: #fff;
  }

  /* ── Empty state ────────────────────────────────────────────────── */
  .mh-empty__text {
    margin: 0;
    padding: var(--space-3);
    text-align: center;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-muted);
  }

  /* ── Skeleton (tab fragment loading) ────────────────────────────── */
  .mh-skeleton__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: 0 var(--space-3) var(--space-3);
  }

  @media (min-width: 600px) {
    .mh-skeleton__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 900px) {
    .mh-skeleton__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .mh-skeleton__cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .mh-skeleton__thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
  }
}