.screenshot-catalog-hero,
.screenshot-catalog-section {
    position: relative;
}

.screenshot-catalog-frame {
    background: linear-gradient(135deg, #031216 0%, #10262d 100%);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .16);
    overflow: hidden;
}

/* GL-009 (Ajustes-Modulo-Timeline/ReservaRecursos): screenshots de Product Marketing
   (galeria #screenshots-modulo-pm e hero .modulo-pm-hero) tendem a ser capturas de tela cheias
   (dashboards, feeds), bem mais altas que largas — cortadas via object-fit:cover a partir do
   topo, para manter o cabecalho e o inicio do conteudo visiveis no card, sem faixas vazias. A
   tela completa continua disponivel ao clicar em "Ampliar tela". */
#screenshots-modulo-pm .screenshot-catalog-image,
.modulo-pm-hero .screenshot-catalog-image {
    object-position: top;
}

/* GL-009 (Ajustes-Modulo-Avisos): a captura avisos-lista-desktop é uma tela cheia bem mais
   larga que alta, com o widget de conteúdo ocupando só a coluna esquerda — o corte central
   padrão de object-fit:cover deixava a maior parte do quadro em branco. Ancora o corte à
   esquerda especificamente para essa imagem (hero e primeiro card da galeria reaproveitam o
   mesmo arquivo), mantendo o conteúdo do widget em destaque. */
img.screenshot-catalog-image[src*="id=avisos-lista-desktop"] {
    object-position: left center;
}

.screenshot-catalog-frame figcaption {
    align-items: flex-start;
    background: #fff;
    border-top: 1px solid rgba(15, 23, 42, .08);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
}

.screenshot-catalog-frame figcaption strong {
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.35;
}

.screenshot-catalog-frame figcaption a {
    color: #111827;
    font-weight: 700;
    margin-top: 4px;
    text-decoration: none;
}

.screenshot-catalog-frame figcaption span {
    color: #64748b;
    font-size: .9rem;
    line-height: 1.5;
}

.screenshot-catalog-image {
    aspect-ratio: 16 / 9;
    background: #e2e8f0;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.screenshot-catalog-placeholder {
    align-items: center;
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(circle at 20% 20%, rgba(42, 196, 235, .22), transparent 28%),
        linear-gradient(135deg, #071a20 0%, #102a32 48%, #25145f 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 240px;
    padding: 32px;
    text-align: center;
}

.screenshot-catalog-placeholder-icon {
    align-items: center;
    background: linear-gradient(135deg, #29bde7, #6428ff);
    border-radius: 14px;
    display: inline-flex;
    height: 54px;
    justify-content: center;
    margin-bottom: 18px;
    width: 54px;
}

.screenshot-catalog-placeholder strong {
    font-size: 1.1rem;
}

.screenshot-catalog-placeholder small {
    color: rgba(255, 255, 255, .72);
    margin-top: 4px;
}

.screenshot-catalog-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.screenshot-catalog-carousel {
    display: grid;
    gap: 20px;
    grid-auto-columns: minmax(300px, 38%);
    grid-auto-flow: column;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
}

.screenshot-catalog-carousel .screenshot-catalog-card {
    scroll-snap-align: start;
}

.screenshot-catalog-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.screenshot-catalog-card:hover {
    border-color: rgba(41, 189, 231, .35);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .12);
    transform: translateY(-3px);
}

.screenshot-catalog-card-body {
    padding: 22px;
}

.screenshot-catalog-card-body span {
    color: #2563eb;
    display: inline-block;
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.screenshot-catalog-card-body h3 {
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 8px;
}

.screenshot-catalog-card-body p {
    color: #64748b;
    font-size: .95rem;
    line-height: 1.55;
    margin: 0 0 14px;
}

.screenshot-catalog-card-body a {
    color: #111827;
    font-weight: 700;
    text-decoration: none;
}

/* GL-009 (Ajustes-Solucoes): modal de zoom (#screenshotZoomModal) 30% maior que o modal-lg padrao
   do Bootstrap (800px -> 1040px), para a imagem ampliada aparecer maior. Sobrescreve a variavel
   --bs-modal-width usada pelo Bootstrap 5.3+ em vez de trocar a classe (modal-lg/modal-xl), para
   ter um valor exato de +30% em vez de pular para o proximo tamanho fixo do framework. */
#screenshotZoomModal .modal-dialog {
    --bs-modal-width: 1040px;
}

@media (max-width: 991.98px) {
    .screenshot-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .screenshot-catalog-carousel {
        grid-auto-columns: minmax(280px, 72%);
    }
}

@media (max-width: 575.98px) {
    .screenshot-catalog-grid {
        grid-template-columns: 1fr;
    }

    .screenshot-catalog-carousel {
        grid-auto-columns: 88%;
    }

    .screenshot-catalog-placeholder {
        min-height: 190px;
        padding: 24px;
    }
}