/* ============================================================
   Galeria de telas do produto — /sobre-a-plataforma e Home (/)
   Usada por Views/SobrePlataforma/_sectionTelas.cshtml
   Depende das variáveis da LP (--accent-color, --border-color, ...)
   declaradas em _lpSobrePlataforma.cshtml.
   ============================================================ */

/* ---------- Captura real dentro da moldura do hero ----------
   O .lp-hero-grid usa align-items:start para a moldura nascer na mesma
   linha do texto. Este ajuste fino compensa a entrelinha do kicker, para
   a borda superior da moldura bater com o topo das letras, não com a
   caixa do texto. */
@media (min-width: 1041px) {
    /* A moldura (2º filho) alinha com o topo do texto. */
    .lp-hero-grid > .lp-reveal:nth-child(2) {
        margin-top: 0.35rem;
    }

    /* Os CTAs ocupam a linha inteira, abaixo das duas colunas: na coluna
       estreita do texto os três botões quebravam em pilha vertical. */
    .lp-hero-ctas {
        grid-column: 1 / -1;
    }
}

/* No mobile a grade vira uma coluna e a ordem natural seria
   título > parágrafo > IMAGEM > CTAs, jogando o primeiro botão para depois
   de uma tela cheia de captura. Aqui os CTAs sobem para logo abaixo do
   texto, antes da imagem. */
@media (max-width: 1040px) {
    .lp-hero-grid {
        display: flex;
        flex-direction: column;
    }

    .lp-hero-grid > .lp-hero-copy { order: 1; }
    .lp-hero-ctas { order: 2; margin-top: 2rem; }
    .lp-hero-grid > .lp-reveal:nth-child(2) { order: 3; margin-top: 1rem; }
}

.lp-hero-shot {
    position: relative;
    z-index: 1;
    padding: 0.75rem;
    /* A captura é 16:10; travar a proporção evita salto de layout (CLS)
       enquanto a imagem carrega e na troca entre telas. */
    aspect-ratio: 16 / 10;
}

.lp-hero-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    display: block;
    border-radius: 8px;
    border: 1px solid rgba(169, 191, 224, 0.22);
    background: #0b1524;
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
    transition: opacity .5s ease;
}

.lp-hero-shot.is-trocando img {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .lp-hero-shot img {
        transition: none;
    }
}

/* ---------- Captura avulsa ilustrando uma seção ----------
   Usada em Solução, Transformação, Como funciona e Acompanhamento. */
.lp-shot-inline {
    position: relative;
    margin: 0;
}

/* A captura vive dentro da .lp-product-frame (mesma moldura do hero), então
   quem carrega borda e sombra é a moldura, não a imagem. */
.lp-shot-moldura {
    position: relative;
    z-index: 1;
    padding: 0.75rem;
}

.lp-shot-moldura img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    border: 1px solid rgba(169, 191, 224, 0.22);
    background: #0b1524;
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
}

/* Rótulo na barra da janela. Trunca em vez de empurrar a barra quando a
   moldura cai numa coluna estreita (ex.: a seção Solução). */
.lp-product-rotulo {
    color: #9db0c9;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.lp-shot-inline figcaption {
    color: #9db0c9;
    font-size: 0.86rem;
    line-height: 1.5;
    text-align: center;
    margin-top: 0.85rem;
}

/* ---------- Filtros por área ---------- */
.lp-telas-filtros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 2.5rem;
}

.lp-telas-filtro {
    appearance: none;
    border: 1px solid var(--border-color, rgba(156, 178, 214, 0.22));
    background: var(--panel-bg, rgba(255, 255, 255, 0.045));
    color: #b9c8dd;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.lp-telas-filtro:hover {
    color: #fff;
    border-color: var(--accent-color, #2f80ed);
    transform: translateY(-1px);
}

.lp-telas-filtro.is-active {
    color: #fff;
    border-color: transparent;
    background: var(--grad-accent, linear-gradient(135deg, #f58d16 0%, #2f80ed 100%));
    box-shadow: 0 12px 26px -14px rgba(47, 128, 237, 0.8);
}

.lp-telas-filtro:focus-visible {
    outline: 2px solid #8fbfff;
    outline-offset: 2px;
}

/* ---------- Grid ---------- */
.lp-telas-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.lp-tela-card {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.lp-tela-card[hidden] {
    display: none;
}

.lp-tela-botao {
    appearance: none;
    border: 1px solid var(--border-color, rgba(156, 178, 214, 0.22));
    background: rgba(7, 14, 25, 0.58);
    border-radius: 12px;
    padding: 0;
    cursor: zoom-in;
    overflow: hidden;
    position: relative;
    display: block;
    width: 100%;
    box-shadow: var(--shadow-premium, 0 28px 70px -34px rgba(0, 0, 0, 0.75));
    transition: transform .4s cubic-bezier(.22, 1, .36, 1),
                border-color .4s ease,
                box-shadow .4s ease;
}

.lp-tela-botao:hover,
.lp-tela-botao:focus-visible {
    transform: translateY(-6px);
    border-color: var(--accent-color, #2f80ed);
    box-shadow: 0 26px 54px -20px rgba(0, 0, 0, .75),
                0 0 36px -12px rgba(47, 128, 237, .55);
    outline: none;
}

/* Barra de janela do card, versão reduzida da .lp-product-topbar. */
.lp-tela-topbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 26px;
    padding: 0 0.6rem;
    border-bottom: 1px solid var(--border-color, rgba(156, 178, 214, 0.22));
    background: rgba(12, 26, 48, 0.9);
}

.lp-tela-dots {
    display: flex;
    gap: 0.24rem;
    flex-shrink: 0;
}

.lp-tela-dots span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
}

.lp-tela-dots span:nth-child(1) { background: #ef4444; }
.lp-tela-dots span:nth-child(2) { background: #f58d16; }
.lp-tela-dots span:nth-child(3) { background: #26c281; }

.lp-tela-rotulo {
    color: #9db0c9;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A screenshot é clara sobre um fundo escuro: uma leve borda interna
   evita que a imagem "flutue" sem limite dentro do card. */
.lp-tela-shot {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #0b1524;
}

.lp-tela-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    display: block;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.lp-tela-botao:hover .lp-tela-shot img,
.lp-tela-botao:focus-visible .lp-tela-shot img {
    transform: scale(1.03);
}

.lp-tela-lupa {
    position: absolute;
    /* Abaixo da barra de janela (26px), para não cobrir o rótulo. */
    top: calc(26px + 0.6rem);
    right: 0.7rem;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(8, 17, 31, 0.78);
    border: 1px solid rgba(169, 191, 224, 0.3);
    color: #dbeafe;
    font-size: 1rem;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .3s ease, transform .3s ease;
    backdrop-filter: blur(6px);
}

.lp-tela-botao:hover .lp-tela-lupa,
.lp-tela-botao:focus-visible .lp-tela-lupa {
    opacity: 1;
    transform: none;
}

.lp-tela-card figcaption {
    padding: 0.9rem 0.25rem 0;
}

.lp-tela-card figcaption strong {
    display: block;
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.22rem;
}

.lp-tela-card figcaption span {
    display: block;
    color: #9db0c9;
    font-size: 0.86rem;
    line-height: 1.5;
}

.lp-telas-vazio {
    text-align: center;
    color: #9db0c9;
    margin-top: 2rem;
}

/* ---------- "Ver todas as telas" ---------- */
.lp-telas-mais {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.lp-telas-mais[hidden] {
    display: none;
}

/* O botão é um <button>, não um <a>: normaliza o que o .lp-btn assume. */
.lp-telas-mais .lp-btn {
    appearance: none;
    font-family: inherit;
    cursor: pointer;
}

/* ---------- Lightbox ---------- */
.lp-telas-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(4, 9, 17, 0.93);
    backdrop-filter: blur(10px);
    animation: lp-lightbox-in .22s ease-out;
}

.lp-telas-lightbox[hidden] {
    display: none;
}

@keyframes lp-lightbox-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lp-lightbox-conteudo {
    margin: 0;
    max-width: min(1400px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.lp-lightbox-conteudo img {
    max-width: 100%;
    max-height: calc(100vh - 11rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid rgba(169, 191, 224, 0.28);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
    background: #0b1524;
}

.lp-lightbox-conteudo figcaption {
    text-align: center;
}

.lp-lightbox-conteudo figcaption strong {
    display: block;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.lp-lightbox-conteudo figcaption span {
    color: #9db0c9;
    font-size: 0.92rem;
}

.lp-lightbox-fechar,
.lp-lightbox-nav {
    appearance: none;
    border: 1px solid rgba(169, 191, 224, 0.3);
    background: rgba(15, 30, 52, 0.85);
    color: #e2e8f0;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: border-color .25s ease, color .25s ease, transform .25s ease;
}

.lp-lightbox-fechar:hover,
.lp-lightbox-nav:hover {
    border-color: var(--accent-color, #2f80ed);
    color: #fff;
    transform: scale(1.06);
}

.lp-lightbox-fechar:focus-visible,
.lp-lightbox-nav:focus-visible {
    outline: 2px solid #8fbfff;
    outline-offset: 2px;
}

.lp-lightbox-fechar {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
}

.lp-lightbox-nav {
    width: 48px;
    height: 48px;
    font-size: 1.35rem;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1040px) {
    .lp-telas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .lp-telas-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .lp-telas-filtros {
        /* Em telas estreitas os filtros rolam na horizontal em vez de
           quebrar em quatro linhas. */
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 0.4rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .lp-telas-filtros::-webkit-scrollbar {
        display: none;
    }

    .lp-telas-filtro {
        flex: 0 0 auto;
    }

    /* No mobile as setas ocupariam a largura útil da imagem. */
    .lp-lightbox-nav {
        display: none;
    }

    .lp-lightbox-conteudo img {
        max-height: calc(100vh - 12rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-tela-botao,
    .lp-tela-shot img,
    .lp-tela-lupa,
    .lp-telas-filtro,
    .lp-lightbox-fechar,
    .lp-lightbox-nav {
        transition: none;
    }

    .lp-telas-lightbox {
        animation: none;
    }

    .lp-tela-botao:hover,
    .lp-tela-botao:focus-visible {
        transform: none;
    }

    .lp-tela-botao:hover .lp-tela-shot img,
    .lp-tela-botao:focus-visible .lp-tela-shot img {
        transform: none;
    }
}