/* ============================================================================
   desktop-premium.css — Redesign desktop do índice Brasileirão (2026-06-06)
   ----------------------------------------------------------------------------
   Leva pro desktop a linguagem aprovada no mobile (Etapa 3, estilo Copa):
     1. HERO premium (rev3, direção A+B): moldura na arte, fio de acento,
        nav-pílula assentada na base do banner + sticky, chips vivos nas
        laterais do logo (movidos pelo hero-chips.v1.js)
     2. Card único por partida com header integrado (rd-placar-card)
     3. Campinho escuro desenhado (campo.svg) + nomes no gramado
   Carregado SÓ no index-shell.html. Tudo dentro de @media (min-width: 769px)
   — mobile permanece intacto. Regras do campinho escopadas em #jogos-root
   (não afetam /rodadas nem mais-indicados). Regras de topo escopadas em
   body.page-index (não afetam outras páginas que usam os mesmos partials).
   rev2: banner principal de volta, nav sem deformação, avatares +30%.
   rev3: hero A+B aprovado pelo Hebert.
   ============================================================================ */

@media (min-width: 769px) {
  /* ==========================================================================
     1. HERO PREMIUM — banner valorizado + nav assentada + chips vivos
     ========================================================================== */

  /* Sem faixa branca abaixo do rodapé: o padding-bottom do body (reserva da
     navbar fixa do MOBILE, 72px+safe-area) não faz sentido no desktop — a
     nav mobile é d-md-none. O rodapé escuro encosta no fim da página. */
  body.page-index {
    padding-bottom: 0;
  }

  /* Fio, moldura do banner e navbar fina/sticky agora são GLOBAIS —
     movidos pro fim de navbar.v1.css (2026-06-06) pra valer em /pages/*,
     /time/* e /jogador/* também. Aqui ficam só os exclusivos do índice. */

  /* Chips vivos nas laterais do logo (hero-chips.v1.js move os nós pra cá).
     A imagem ocupa var(--rail-w)=90% do item centrada → 5% de margem por
     lado; o calc posiciona DENTRO da arte. */
  body.page-index #header-especialista .hero-chips {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 5;
  }
  body.page-index #header-especialista .hero-chips--left {
    left: calc(5% + 28px);
    align-items: flex-start;
  }
  body.page-index #header-especialista .hero-chips--right {
    right: calc(5% + 28px);
    align-items: flex-end;
  }
  /* Chips num visual UNICO sobre a arte: vidro quente (casa com o bege),
     mesma altura e mesma fonte — cada um tinha estilo proprio e brigavam
     entre si. Icones internos mantem as cores de status. */
  body.page-index .hero-chips .u-chip,
  body.page-index .hero-chips .status-mercado-chip,
  body.page-index .hero-chips .status-mercado {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(255, 252, 246, 0.85);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    backdrop-filter: blur(8px) saturate(130%);
    border: 1px solid rgba(166, 108, 48, 0.22);
    box-shadow: 0 4px 14px rgba(28, 21, 48, 0.1);
    font-size: 0.8rem;
    color: var(--color-text, #25282e);
  }
  /* chip "online" enquanto invisivel (visibility:hidden ate o fetch) nao
     reserva espaco na coluna — senao o chip do mercado fica fora do centro */
  body.page-index .hero-chips .u-online[style*='hidden'] {
    display: none;
  }
  /* Tooltip do chip de acertos no hero: abre pra DIREITA, sobre a arte.
     Abrindo pra baixo ele colidia com o chip do WhatsApp — o backdrop-filter
     dos chips cria stacking context e o chip seguinte (DOM) pintava POR CIMA
     do tooltip. O z-index no hover garante o chip acima dos vizinhos. */
  body.page-index .hero-chips .u-chip.has-tip:hover,
  body.page-index .hero-chips .u-chip.has-tip:focus-within {
    z-index: 30;
  }
  body.page-index .hero-chips .u-chip.has-tip .tip {
    top: 50%;
    left: calc(100% + 12px);
    transform: translateY(-50%);
  }
  body.page-index .hero-chips .u-chip.has-tip:hover .tip,
  body.page-index .hero-chips .u-chip.has-tip:focus-within .tip {
    transform: translateY(-50%) translateX(2px);
  }
  /* setinha aponta pra esquerda */
  body.page-index .hero-chips .u-chip.has-tip::after {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #0f172a;
    border-bottom-color: transparent;
  }
  /* a fileira original esvazia no desktop — some sem deixar buraco */
  body.pdc-hero-chips .utility-row {
    display: none;
  }

  /* ==========================================================================
     1b. BANNER COPA — de "outdoor" pra faixa baixa de uma linha visual
     ========================================================================== */
  body.page-index .cwc26 {
    margin: 10px auto 16px;
  }
  body.page-index .cwc26-inner {
    padding: 12px 22px;
    gap: 6px 24px;
  }
  body.page-index .cwc26-left {
    gap: 3px;
  }
  body.page-index .cwc26-title {
    font-size: 1.22rem;
  }
  body.page-index .cwc26-sub {
    font-size: 0.85rem;
    margin: 0;
  }
  body.page-index .cwc26-eyebrow {
    font-size: 0.6rem;
  }
  body.page-index .cwc26-cd-cell {
    padding: 4px 9px 3px;
  }
  body.page-index .cwc26-cd-num {
    font-size: 1rem;
  }
  body.page-index .cwc26-cd-lbl {
    font-size: 0.5rem;
  }
  body.page-index .cwc26-cta {
    padding: 10px 18px;
    font-size: 0.92rem;
  }
  body.page-index .cwc26-trophy {
    width: 170px;
    height: 170px;
    opacity: 0.16;
  }
  body.page-index .cwc26::before {
    inset: 6px;
    border-radius: 12px;
  }

  /* ==========================================================================
     1c. TÍTULO DA RODADA — headline de verdade (era 15px, opacity .72)
     ========================================================================== */
  body.page-index .pdc-h1 {
    font-family: var(--font-display, 'Inter Tight', system-ui, sans-serif);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-ink, #0a1324);
    opacity: 1;
    margin: 18px auto 6px;
    max-width: none;
  }
  body.page-index .pdc-seo-lead {
    margin: 2px auto 12px;
  }

  /* ==========================================================================
     2. CARD ÚNICO POR PARTIDA — contorno + header integrado
     ========================================================================== */
  #jogos-root .custom-provaveis-item {
    margin: 26px auto 18px;
    padding: 0 0 16px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 22px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    overflow: hidden;
  }
  /* desliga a sombra radial flutuante e a listra par/ímpar do layout antigo */
  #jogos-root .jogo .custom-provaveis-item::after {
    display: none;
  }
  #jogos-root .jogo:nth-of-type(even) .custom-provaveis-item {
    background: #fff;
    padding-top: 0;
  }

  /* Header da partida DENTRO do card, full-width, com divisória tracejada */
  #jogos-root .rd-placar-card {
    width: 100%;
    max-width: none;
    margin: 0 0 16px;
    padding: 16px 28px 14px;
    background: #fff;
    border: 0;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.14);
    border-radius: 0;
    box-shadow: none;
  }
  #jogos-root .rd-placar-time {
    font-family: var(--font-display, 'Inter Tight', system-ui, sans-serif);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    gap: 12px;
  }
  #jogos-root .rd-placar-time img,
  #jogos-root .rd-placar-escudo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }
  #jogos-root .rd-placar-gols {
    font-size: 22px;
  }
  #jogos-root .rd-placar-gols .rd-x {
    color: #cbd5e1;
  }
  #jogos-root .rd-placar-meta {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-faint, #94a3b8);
    margin-top: 6px;
  }

  /* Campos com gutter interno (não encostam na borda do card) */
  #jogos-root .lineups {
    padding: 0 18px;
    gap: 18px;
    margin-bottom: 12px;
  }

  /* ==========================================================================
     3. CAMPINHO ESCURO ESTILO COPA (espelha o mobile, escala desktop)
     ========================================================================== */
  #jogos-root .lineup-card {
    background: #143620 url('/assets/img/campinhos/campo.svg') center / 100% 100%
      no-repeat !important;
    border-radius: 16px;
    box-shadow: none;
  }
  #jogos-root .lineup-card .pitch {
    background: #143620 url('/assets/img/campinhos/campo.svg') 0 0 / 100% 100%
      no-repeat !important;
    border-radius: 16px;
    box-shadow:
      inset 0 0 0 1px rgba(251, 89, 4, 0.18),
      inset 0 -24px 44px rgba(0, 0, 0, 0.2) !important;
  }

  /* Jogadores: rev2 (+30% sobre a rev1 a pedido do Hebert) */
  #jogos-root .pitch .player {
    width: clamp(60px, 13.6cqi, 80px);
    height: clamp(60px, 13.6cqi, 80px);
  }
  #jogos-root .pitch .player img {
    width: 100%;
    height: 100%;
  }
  #jogos-root .pitch .player.coach {
    width: clamp(48px, 9cqi, 62px);
    height: clamp(48px, 9cqi, 62px);
  }

  /* Microinteração: leve zoom no avatar (transform no IMG — nunca no .player,
     que usa translate(-50%,-50%) pra posicionamento) */
  #jogos-root .pitch .player img {
    transition: transform var(--transition-base, 0.2s ease);
  }
  #jogos-root .pitch .player:hover img {
    transform: scale(1.07);
  }

  /* Nomes no GRAMADO — sem pílula branca; branco bold com text-shadow */
  #jogos-root .pitch .player .cap,
  #jogos-root .pitch .player .alt-cap {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: #fff !important;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.85),
      0 0 4px rgba(0, 0, 0, 0.65) !important;
    padding: 1px 3px !important;
  }
  #jogos-root .pitch .player .cap {
    font-size: clamp(0.64rem, 2cqi, 0.82rem) !important;
    font-weight: 700 !important;
  }
  #jogos-root .pitch .player .alt-cap {
    font-size: clamp(0.58rem, 1.8cqi, 0.72rem) !important;
    font-weight: 600 !important;
    font-style: italic !important;
    top: calc(100% + 15px) !important;
  }
  #jogos-root .pitch.hide-stat .player .alt-cap {
    top: calc(100% + 15px) !important;
  }

  /* Chip "Atualizado há…" estilo vidro (mesmo do mobile, fonte um tico maior) */
  #jogos-root .lineup-card .upd-chip {
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    padding: 3px 10px !important;
    gap: 4px !important;
    background: linear-gradient(
      180deg,
      rgba(10, 18, 30, 0.62),
      rgba(10, 18, 30, 0.46)
    ) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(6px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(120%) !important;
  }
  #jogos-root .lineup-card .upd-chip i {
    font-size: 0.68rem !important;
    color: rgba(255, 255, 255, 0.78) !important;
  }
  #jogos-root .lineup-card > .chip-stack {
    top: 8px !important;
    left: 10px !important;
  }
}

/* Acessibilidade: sem zoom de avatar pra quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  #jogos-root .pitch .player img {
    transition: none;
  }
  #jogos-root .pitch .player:hover img {
    transform: none;
  }
}