/* ==========================================================================
   AJUSTES DE RESPONSIVIDADE (celular e tablet)
   Carregado por último em cada página, por isso vence as regras antigas sem precisar de !important em quase tudo.
   Critérios: texto com pelo menos 12 px e áreas de toque com pelo menos 40 px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Até 992 px (celulares e tablets)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {

    /* Apoia-se: o menu de décadas do desktop não aparece no celular; o menu fica no botão hambúrguer */
    .campaign-page .main-header .header-bottom {
        display: none !important;
    }

    /* ordem do cabeçalho da campanha no celular: logo, busca, hambúrguer */
    .campaign-page .main-header #site-logo { order: 1 !important; }
    .campaign-page .main-header .desktop-search-wrapper { order: 3 !important; margin-left: auto !important; }
    .campaign-page .main-header .mobile-menu-btn { order: 4 !important; }

    /* Home: a coluna do herói pode encolher (antes o título estourava a margem direita) */
    .hero-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-content {
        min-width: 0;
    }

    .hero-content h1 {
        /* cabe em uma ou duas linhas sem quebrar palavras no meio */
        font-size: clamp(1.5rem, 6.9vw, 3rem);
    }
}

/* --------------------------------------------------------------------------
   Até 768 px (celulares)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* ---------- Textos: mínimo de 12 px ---------- */
    .season-card-label,
    .seasons-grid-timeline .season-card-label {
        font-size: 12px;
        letter-spacing: 0.04em;
    }

    .chip,
    .home-category-filters .chip,
    .drawer-filters .chip {
        font-size: 12px;
    }

    .hero-tag,
    .scroll-text,
    .asset-label,
    .asset-subtitle,
    .comment-date,
    .variation-item .label,
    .season-title,
    .decade-title span {
        font-size: 12px;
    }

    .hero-tag { letter-spacing: 0.12rem; }

    .nav-btn {
        font-size: 12px;
    }

    .variation-desc {
        font-size: 12.5px;
    }

    /* ---------- Áreas de toque: mínimo de 40 px ---------- */
    .chip,
    .home-category-filters .chip,
    .drawer-filters .chip {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .nav-btn {
        min-height: 40px;
        min-width: 40px;
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .social-icon,
    .footer-social-links .social-icon {
        width: 44px;
        height: 44px;
    }

    .mobile-menu-btn,
    .close-drawer-btn,
    .lightbox-close {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .main-header .logo,
    .footer-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .footer-info a {
        display: inline-block;
        padding: 8px 0;
    }

    /* logo do topo: área de toque de 44 px de altura (30 px do logo + folga) */
    .main-header #site-logo {
        padding: 7px 0;
        box-sizing: content-box;
    }

    /* setas de temporada anterior/próxima nas laterais: mais fáceis de tocar */
    .btn-submit-comment {
        min-height: 44px;
    }

    /* links de fontes: linha com altura de toque */
    .sources a {
        display: inline-block;
        padding: 10px 0;
    }
}

/* --------------------------------------------------------------------------
   Linha do tempo da home (celular): o título da década fica dividido pela linha central.
   A grade de 3 colunas garante que "N TEMPORADAS" nunca fique escondido atrás da bolinha da linha.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .decade-title {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
        align-items: center;
        gap: 0;
        transform: none;
        text-align: right;
        margin-top: 8px;
    }

    /* ano da temporada nos cartões da linha do tempo: maior para ler bem no celular */
    .seasons-grid-timeline .season-card-year {
        font-size: clamp(21px, 6.2vw, 27px);
        letter-spacing: -0.01em;
    }

    /* a palavra "TEMPORADA" é desnecessária no celular: o cartão mostra só o ano */
    .seasons-grid-timeline .season-card-label {
        display: none;
    }

    .decade-title span {
        grid-column: 3;
        text-align: left;
        white-space: nowrap;
        letter-spacing: 0.08rem;
    }
}

/* --------------------------------------------------------------------------
   Detalhes vistos no celular de verdade (iPhone)
   -------------------------------------------------------------------------- */

/* A sombra da gaveta do menu (fechada, fora da tela) vazava pela borda direita e escurecia o topo e o herói.
   A sombra só existe com a gaveta aberta. */
.mobile-drawer:not(.active) {
    box-shadow: none !important;
}

/* No toque o efeito de passar o mouse "gruda" depois do toque (a camisa aparecia grande por cima do jogador).
   Em telas sem mouse, os cartões da linha do tempo ficam sem o efeito de hover. */
@media (hover: none) {
    .season-card:hover {
        transform: none;
    }

    /* sem mouse, o cartão já fica no estado "aceso" do hover do desktop (veja o bloco logo abaixo) */
    .season-card:hover .season-card-bg {
        transform: scale(1.06) translateX(-7%);
        filter: brightness(0.85) grayscale(0) opacity(0.85);
    }

    .season-card:hover .season-card-player {
        transform: translateX(4%);
    }
}

/* Celular: a camisa atrás do jogador aparece acesa e mais para o lado, como no hover do desktop */
@media (max-width: 767px) {
    .seasons-grid-timeline .season-card-bg,
    .seasons-grid-timeline .season-card:hover .season-card-bg {
        transform: scale(1.04) translateX(-2%);
        filter: brightness(0.85) grayscale(0) opacity(0.85);
    }

    .seasons-grid-timeline .season-card-player,
    .seasons-grid-timeline .season-card:hover .season-card-player {
        transform: translateX(4%);
    }
}

@media (max-width: 768px) {

    /* Temporada: as camisas de frente e de costas são fotos quadradas; a caixa de 3:4 deixava um vazio embaixo */
    .mockup-view {
        aspect-ratio: 1 / 1 !important;
    }

    /* Marcas da variação: a última linha incompleta fica centralizada e há espaço antes do texto */
    .assets-cluster {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.8rem 0.5rem !important;
        margin-bottom: 1.25rem !important;
    }

    .assets-cluster > div {
        width: calc(25% - 0.5rem) !important;
    }

    /* Barra de tipos de uniforme (Titular, Branco, Preto...): sombras nas bordas mostram que dá para rolar para o lado */
    .collection-nav {
        background:
            linear-gradient(to right, #1c1c1c 30%, rgba(28, 28, 28, 0)) left center / 36px 100% no-repeat local,
            linear-gradient(to left, #1c1c1c 30%, rgba(28, 28, 28, 0)) right center / 36px 100% no-repeat local,
            linear-gradient(to right, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)) left center / 14px 100% no-repeat scroll,
            linear-gradient(to left, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)) right center / 14px 100% no-repeat scroll;
    }
}

/* --------------------------------------------------------------------------
   Navegação entre temporadas no celular (sem as setas fixas nas laterais)
   No fim da página: dois botões grandes antes do rodapé
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {

    /* as setas saem das laterais e viram dois botões no fluxo da página */
    .season-navigation {
        position: static !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        display: flex !important;
        gap: 12px;
        padding: 28px 20px !important;
        background: #1c1c1c;
        pointer-events: auto !important;
    }

    .season-navigation .nav-arrow {
        position: static !important;
        transform: none !important;
        flex: 1 1 0;
        min-width: 0 !important;
        width: auto !important;
        height: 52px !important;
        padding: 0 14px !important;
        justify-content: center !important;
        gap: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        color: #e5e5e5;
    }

    .season-navigation .nav-arrow .nav-text {
        display: inline !important;
        opacity: 1 !important;
        transform: none !important;
        color: #e5e5e5 !important;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.04em;
    }

    .season-navigation .nav-arrow .arrow-svg {
        width: 14px !important;
        height: 18px !important;
        flex-shrink: 0;
    }
}

/* miniatura da camisa titular nos botões de temporada vizinha (só no celular) */
.nav-thumb { display: none; }

@media (max-width: 992px) {
    .season-navigation .nav-arrow .nav-thumb {
        display: block;
        height: 40px;
        width: auto;
        max-width: 44px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .season-navigation .nav-arrow {
        height: 64px !important;
    }
}

/* --------------------------------------------------------------------------
   Fontes da temporada: título da fonte em cima e endereço curto embaixo, com o ícone logo depois do texto
   (antes, as linhas pareciam títulos soltos e o ícone ia para a borda direita)
   -------------------------------------------------------------------------- */
.source-item--link {
    margin-bottom: 0.9rem;
    padding-left: 0;
    align-items: flex-start;
}

.source-item--link a {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 100%;
    padding: 2px 0;
    font-weight: 600;
    line-height: 1.35;
}

.source-item--link .source-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.source-item--link .source-title {
    overflow-wrap: anywhere;
}

.source-item--link .source-domain {
    font-size: 0.78rem;
    font-weight: 400;
    color: #8a8a8a;
    letter-spacing: 0.01em;
    overflow-wrap: anywhere;
}

.source-item--link .source-title .external-link-icon {
    display: inline-block;
    vertical-align: -1px;
    margin-left: 7px;
}

/* Emenda de 1 px entre a seção de créditos e o rodapé: com zoom ou telas de alta densidade, um fio claro do fundo da página aparecia entre as duas */
.credits-section + .main-footer,
.season-navigation + .main-footer,
body > .main-footer {
    margin-top: -1px;
}

/* --------------------------------------------------------------------------
   Créditos: ao passar o mouse sobre um nome, o nome acende e desliza um pouco, e a estrela gira
   (só em telas com mouse; no toque o efeito ficaria "grudado")
   -------------------------------------------------------------------------- */
.credit-item {
    gap: 0.45rem;
    width: fit-content;
    cursor: default;
}

.credit-item .credit-star {
    display: inline-block;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease, text-shadow 0.4s ease, filter 0.4s ease;
}

.credit-item .credit-name {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease, letter-spacing 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
    .credit-item:hover .credit-name {
        color: #fff;
        transform: translateX(6px);
        letter-spacing: 0.015em;
    }

    .credit-item:hover .credit-star {
        color: #fff;
        transform: rotate(72deg) scale(1.2);
        /* brilho sutil em volta da estrela */
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.75), 0 0 14px rgba(255, 255, 255, 0.35);
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45));
    }
}

@media (prefers-reduced-motion: reduce) {
    .credit-item .credit-star,
    .credit-item .credit-name { transition: none; }
    .credit-item:hover .credit-name,
    .credit-item:hover .credit-star { transform: none; letter-spacing: normal; }
}