/**
 * Dimensionamento das logos institucionais CBIC / SESI
 *
 * As duas marcas oficiais são horizontais, com o lettering ao lado: a CBIC é
 * ~6,0:1 e a do SESI ~4,4:1. Como ambas têm a mesma estrutura (marca à esquerda,
 * três linhas de texto à direita), igualar a ALTURA faz com que as marcas e os
 * textos apareçam no mesmo corpo — é o que dá a impressão de "mesmo tamanho".
 * O app.min.css dimensiona por LARGURA fixa (width:80px), o que as esmaga.
 *
 * IMPORTANTE — especificidade: as regras originais são
 *   .page-login .about__header img        (0,2,1)
 *   .page-enterprise .video__header img   (0,2,1)
 * e não apenas ".about__header img". Seletores mais curtos aqui PERDEM para
 * elas e a largura de 80px continua valendo, deformando a imagem. Por isso
 * todas as regras abaixo repetem o prefixo da página.
 *
 * Observação: o src das imagens carrega "?v=<mtime>" (versionamento de cache
 * em Helpers::assetUrl), então os seletores usam *= e não $=.
 */

/* ---------- Home e cabeçalho dos formulários ---------- */
/*
 * Dimensionamento PROPORCIONAL, não por altura fixa.
 *
 * O contêiner destas telas varia bastante (mediu 466px numa e 920px noutra,
 * conforme o painel que o envolve). Com altura fixa, as duas marcas somavam
 * 708px e transbordavam nas telas estreitas.
 *
 * Aqui cada imagem recebe uma fração do espaço proporcional à sua própria
 * proporção (CBIC 6,03:1 e SESI 4,36:1). Como a largura de cada uma fica
 * proporcional ao seu aspecto, as duas terminam exatamente com a MESMA ALTURA,
 * em qualquer largura de contêiner — e nunca transbordam.
 * O max-width do bloco é o que limita o tamanho máximo (504px ≈ 46px de altura).
 */
.page-login .about__header,
.page-enterprise .video__header,
.about__header,
.video__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4%;
    width: 100%;
    max-width: 504px;
    margin-left: auto;
    margin-right: auto;
}

.page-login .about__header img,
.page-enterprise .video__header img,
.about__header img,
.video__header img {
    width: 100%;
    height: auto;
    max-width: none;
    margin-right: 0;
    object-fit: contain;
    /* Sem isto, o min-width:auto do flexbox impede a imagem de encolher abaixo
       da sua largura intrínseca (1449px) e as duas transbordam o contêiner. */
    min-width: 0;
}

/* O fator de crescimento é a proporção de cada marca (largura ÷ altura x100) */
.page-login .about__header img[src*="/logo.png"],
.page-enterprise .video__header img[src*="/logo.png"] { flex: 603 1 0; }

.page-login .about__header img[src*="sesi-logo.png"],
.page-enterprise .video__header img[src*="sesi-logo.png"] { flex: 436 1 0; }

@media (max-width: 700px) {
    .page-login .about__header,
    .page-enterprise .video__header { gap: 3%; max-width: 330px; }
}

/* ---------- Barra superior (abaixo de 1200px) ---------- */
.mobile-menu .mobile-logo { gap: 14px; }

.mobile-menu .mobile-logo img,
.mobile-menu .mobile-logo .mobile-logo-img {
    width: auto;
    height: auto;
    max-width: none;
    object-fit: contain;
}

.mobile-menu .mobile-logo img[src*="/logo.png"],
.mobile-menu .mobile-logo img[src*="sesi-logo.png"] { height: 30px; }

@media (max-width: 420px) {
    .mobile-menu .mobile-logo { gap: 10px; }
    .mobile-menu .mobile-logo img[src*="/logo.png"],
    .mobile-menu .mobile-logo img[src*="sesi-logo.png"] { height: 22px; }
}

/* ---------- Menus laterais ---------- */
/* Não havia regra alguma para estas imagens: saíam no tamanho natural do
   arquivo (457px de largura), ocupando a barra inteira. */
.sidebar-mobile .menu img {
    width: auto;
    height: 34px;
    max-width: 60vw;
    object-fit: contain;
}

.sidebar .sidebar__menu img {
    /* A marca é horizontal (~6:1) e a barra é estreita: fixar a altura estouraria
       a largura. Aqui ela se ajusta à largura disponível e a altura acompanha. */
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    margin-bottom: 14px;
}

@media (max-width: 420px) {
    .sidebar-mobile .menu img { height: 26px; }
}