/*
 * CSS exclusivo do gateway /login (Checkpoint LOGIN.2).
 * Carregado SOMENTE em resources/views/auth/inicio1.blade.php — não
 * afeta /telalogin, /register, /password/reset ou /password/email
 * (que continuam usando só style-inicial.css, intocado por este
 * arquivo). Todas as classes usam o prefixo "cglogin-" e ficam dentro
 * do escopo ".cglogin-page" — mesmo padrão de isolamento já usado em
 * area_gamer.css (.cgag-page), home.css (.cgh-page) e campeonatos.css
 * (.cgc-page), sem compartilhar tokens entre os arquivos.
 *
 * Fundo: public/assets/img/banner-login-horizontal.webp (1920x1080,
 * já enviado ao servidor, não alterado aqui). Fonte 'Bungee' já é
 * carregada globalmente por style-inicial.css (@import no topo do
 * arquivo) — reaproveitada aqui sem duplicar o @import.
 */

/* CHECKPOINT LOGIN.2D — CAUSA RAIZ COMPROVADA da faixa branca na borda
 * direita em mobile: style-inicial.css tem, dentro de
 * @media(max-width:450px) (linhas 245-427 daquele arquivo), a regra
 *     main { width: fit-content; }
 * — sobra do layout antigo de 3 colunas. Isso faz <main> (sem nenhuma
 * classe, filho direto de <body>) encolher pro tamanho do CONTEÚDO em
 * vez de preencher o body inteiro; como o descendente mais restrito é
 * .cglogin-content (max-width:380px), <main> colapsa pra ~380px numa
 * viewport de 393px — os 13px que sobram expõem o fundo branco padrão
 * do <body> (Bootstrap reboot: background-color:var(--bs-body-bg),
 * que é branco por padrão). Comprovado com medição real: scrollWidth=
 * clientWidth=bodyWidth=393 mas mainWidth=wrapperWidth=380.
 *
 * Não dá pra editar style-inicial.css (compartilhado por /telalogin,
 * /register e as 2 telas de senha) — a correção abaixo sobrescreve só
 * na MESMA faixa (≤450px), escopada a este arquivo (só carrega em
 * /login, então não vaza pras outras 4 páginas mesmo usando um seletor
 * de elemento puro). "body main" (2 seletores) tem especificidade maior
 * que o "main" (1 seletor) de lá, então vence independente da ordem de
 * carregamento dos <link> — não depende de nenhuma coincidência de
 * cascata. */
@media (max-width: 450px) {
    body main {
        width: 100%;
    }
}

.cglogin-page {
    --cglogin-red: #B31212;
    --cglogin-text: #F5F5F5;
    --cglogin-muted: rgba(245, 245, 245, .78);

    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #050505;
    background-image: url('../img/banner-login-horizontal.webp');
    background-size: cover;
    background-position: 68% center;
    background-repeat: no-repeat;
    /* CHECKPOINT LOGIN.2A: padding horizontal zerado aqui de propósito —
       o inset lateral no mobile agora vem só de .cglogin-content (width:
       calc(100% - 32px)), pra não somar dois insets diferentes (o desta
       regra + o do content) e acabar com margem lateral maior do que a
       pedida. Vertical reduzido de 28->24px pra ajudar a caber a
       identidade maior sem exigir rolagem. */
    padding: 24px 0;
}

/* Mobile: overlay forte e uniforme — o conteúdo fica direto sobre a
   imagem (empilhado), então precisa de contraste garantido em
   qualquer parte do recorte, não só numa faixa lateral. */
.cglogin-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .82) 100%);
    pointer-events: none;
}

.cglogin-content {
    position: relative;
    z-index: 2;
    /* CHECKPOINT LOGIN.2A: width explícita em vez de só 100% — garante
       exatamente 16px de respiro de cada lado (32px no total),
       independente do padding de .cglogin-page. max-width reduzido de
       420->380px (pedido explícito). Sobrescrito no desktop (width:auto)
       pra não vazar pro layout ancorado à esquerda lá. */
    width: calc(100% - 32px);
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cglogin-logo {
    /* CHECKPOINT LOGIN.2C: ainda pequeno no dispositivo real — subindo
       de ~80px pra ~94px em 393px (375px:90 / 393px:94.3 / 430px:103.2,
       limitado a 96px). Margem também sobe um pouco (14->18px) pra
       manter o respiro proporcional ao logo maior, já que o eyebrow que
       ocupava esse espaço no desktop não existe mais em lugar nenhum.
       Sobrescrito no desktop (104px fixo, ver media query). */
    width: clamp(86px, 24vw, 96px);
    height: clamp(86px, 24vw, 96px);
    border-radius: 50%;
    margin-bottom: 18px;
}

/* CHECKPOINT LOGIN.2C: o mockup aprovado NÃO tem uma segunda linha
   "CAMPEONATO GAMER" vermelha e pequena antes de "BEM-VINDO AO" — isso
   era o .cglogin-eyebrow. LOGIN.2B tinha escondido só no mobile e
   restaurado no desktop (display:block na media query >=768px); essa
   restauração era o que ainda causava a label vermelha aparecer no
   desktop. Removida — escondido em TODAS as larguras agora, sem
   restauração em nenhum breakpoint. Elemento mantido no Blade (não
   apagado), só nunca renderiza visualmente. */
.cglogin-eyebrow {
    display: none;
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cglogin-red);
}

.cglogin-title {
    margin: 0 0 10px;
}

/* CHECKPOINT LOGIN.2A: "Bem-vindo ao" e "Campeonato Gamer" viraram
   spans (ver inicio1.blade.php) justamente pra poder ter tamanho/cor
   independentes — impossível com o <h1> de nó de texto único + <br> de
   antes. display:block em ambos (aqui, compartilhado) faz cada um
   ocupar sua própria linha sozinho, com o text-align herdado de
   .cglogin-content (center no mobile, left no desktop) — não precisa
   de flex/gap extra em .cglogin-title. */
.cglogin-title-line1,
.cglogin-title-line2 {
    display: block;
    margin: 0;
}

/* CHECKPOINT LOGIN.2B: "BEM-VINDO AO" é parte do título principal no
   mockup aprovado, não um rótulo minúsculo — 14-16px lia como legenda
   secundária. Alvo ~20-23px em telas mobile reais (393px: 21.6px /
   375px: 20.6px / 430px: 22px, capado).
   CHECKPOINT LOGIN.2F: cor trocada de var(--cglogin-red) (#B31212, lia
   escura/apagada contra o fundo do estádio) pra um vermelho sólido mais
   vivo (#E21B1B), só aqui — a variável em si não muda, porque também
   alimenta o botão vermelho principal (.cglogin-btn--primary), que fica
   fora do escopo deste checkpoint. */
.cglogin-title-line1 {
    font-size: clamp(18px, 5.5vw, 22px);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.25;
    text-transform: uppercase;
    color: #E21B1B;
}

/* CHECKPOINT LOGIN.2E: o gradiente text-clip (2B/2C) continuava lendo
   cinza/metálico em tela real, mesmo com stops cada vez mais claros —
   qualquer gradiente vertical escurece visivelmente a MAIOR PARTE da
   letra (do meio pra baixo), então o "cinza" nunca ia embora só
   clareando os stops. Trocado por tratamento sólido: a FACE da letra é
   branco puro (#fff) de verdade, sem background-clip nenhum — a
   profundidade vem só de um text-shadow bem contido (raso, baixa
   opacidade), nunca de sombreamento na própria cor da letra. */
.cglogin-title-line2 {
    margin-top: 2px;
    font-family: 'Bungee', cursive;
    font-size: clamp(34px, 10.5vw, 44px);
    line-height: 1.08;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.cglogin-lead {
    margin: 0 0 8px;
    font-size: clamp(16px, 4.2vw, 18px);
    font-weight: 700;
    color: var(--cglogin-text);
}

.cglogin-description {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--cglogin-muted);
    max-width: 360px;
}

.cglogin-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cglogin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .15s ease, opacity .15s ease, border-color .15s ease;
}

.cglogin-btn:focus-visible {
    outline: 2px solid var(--cglogin-text);
    outline-offset: 3px;
}

.cglogin-btn--primary {
    background: var(--cglogin-red);
    border: 1px solid var(--cglogin-red);
    color: var(--cglogin-text);
}

.cglogin-btn--primary:hover,
.cglogin-btn--primary:focus-visible {
    opacity: .9;
    color: var(--cglogin-text);
    text-decoration: none;
}

.cglogin-btn--secondary {
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(245, 245, 245, .4);
    color: var(--cglogin-text);
}

.cglogin-btn--secondary:hover,
.cglogin-btn--secondary:focus-visible {
    background: rgba(245, 245, 245, .1);
    color: var(--cglogin-text);
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .cglogin-btn {
        transition: none;
    }
}

/* ===================== Desktop (>=768px): conteúdo ancorado à
   esquerda, lado direito da arte livre — o assunto principal do banner
   (o jogador) já ocupa a direita da imagem. ===================== */
@media (min-width: 768px) {
    .cglogin-page {
        justify-content: flex-start;
        padding: 0 8vw;
    }

    .cglogin-overlay {
        background: linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .62) 35%, rgba(0, 0, 0, .18) 62%, rgba(0, 0, 0, 0) 80%);
    }

    .cglogin-content {
        align-items: flex-start;
        text-align: left;
        /* CHECKPOINT LOGIN.2A: cancela explicitamente o width:calc(...)
           do mobile — sem isso, o valor mobile continuaria valendo aqui
           também (media query só sobrescreve o que declara), esticando
           o conteúdo desktop em vez de manter a coluna compacta
           ancorada à esquerda já aprovada. */
        width: auto;
        max-width: 480px;
    }

    /* CHECKPOINT LOGIN.2C: 68px lia pequeno demais contra o mockup —
       subindo pra 104px (sugestão do pedido, dentro da faixa 96-108px).
       Margem também sobe (24->32px) proporcionalmente, cobrindo o
       espaço que o eyebrow (agora removido em definitivo) ocupava
       antes, sem virar um buraco nem um espaço arbitrário. */
    .cglogin-logo {
        width: 104px;
        height: 104px;
        margin-bottom: 32px;
    }

    .cglogin-title {
        margin-bottom: 14px;
    }

    /* CHECKPOINT LOGIN.2A: desktop já estava aprovado com as duas linhas
       do mesmo tamanho/cor (sem a hierarquia vermelho-pequeno / prata-
       grande que é só do mobile) — aqui as duas spans são
       reexplicitamente igualadas, cancelando o gradiente/sombra/cor
       vermelha que a regra mobile aplicou. */
    .cglogin-title-line1,
    .cglogin-title-line2 {
        font-family: 'Bungee', cursive;
        font-size: clamp(32px, 3.4vw, 44px);
        font-weight: normal;
        letter-spacing: normal;
        line-height: 1.15;
        text-transform: uppercase;
        color: var(--cglogin-text);
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        -webkit-text-fill-color: initial;
        text-shadow: none;
        margin: 0;
    }

    .cglogin-lead {
        font-size: 19px;
    }

    .cglogin-description {
        font-size: 15px;
        margin-bottom: 32px;
    }

    .cglogin-actions {
        flex-direction: row;
        max-width: none;
    }

    .cglogin-btn {
        width: auto;
        padding: 14px 28px;
    }
}

@media (min-width: 1440px) {
    .cglogin-page {
        padding: 0 9vw;
    }
}