/* PATROCINADORES — mural de logos por cota (página pública do evento)
   Variação "card justo" do designer (patrocinio-compacto.html). Todas as regras ficam sob
   .patrocinadores para não afetar o restante do site. */

/* ===== TOKENS (cores, espaçamento, referência de largura) ===== */
.patrocinadores {
    --largura-secao: 1140px; /* largura da SEÇÃO: título, linhas e limite do container */
    --gutter: 16px;          /* vão entre os cards */
    --folga: 32px;           /* "ar" horizontal por card além do logo (MENOR = logos mais juntos; piso 24px = 2× o padding do card) */
    --cor-texto: #1f2733;
    --cor-borda: #e7eaf0;
    box-sizing: border-box;
    color: var(--cor-texto);
    /* Sem padding em cima: o h4 "Patrocínio" da seção (m-b-lg) já dá o respiro. Embaixo, os
       mesmos 30px antes do bloco seguinte (Apoio). */
    padding: 0 0 30px;
    /* Mesma fonte do site: Open Sans, carregada pelo style.css e aplicada no body */
    font-family: inherit;
}

/* ===== BASE + LAYOUT ===== */
.patrocinadores * { box-sizing: border-box; }
.patrocinadores .patrocinadores__container { max-width: calc(var(--largura-secao) + 30px); margin: 0 auto; padding: 0 15px; } /* +30 = padding 2×15 */
.patrocinadores .cota { margin-bottom: 56px; }
.patrocinadores .cota:last-child { margin-bottom: 0; }
.patrocinadores .cota__cabecalho { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.patrocinadores .cota__linha { flex: 1; height: 1px; background: var(--cor-borda); }
.patrocinadores .cota__titulo { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--cor-texto); }
/* Grade limitada a exatamente --cols cards JUSTOS (logo + --folga), centralizada na seção
   (que é mais larga) -> logos agrupados no meio, título/linhas em largura cheia. */
.patrocinadores .cota__grid {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gutter);
    max-width: calc(var(--cols) * (var(--logo-w) + var(--folga)) + (var(--cols) - 1) * var(--gutter));
    margin: 0 auto;
}

/* ===== CARD + LOGO ===== */
/* Card JUSTO ao logo: largura = --logo-w + --folga (fixa, não fluida), então o espaço entre
   logos é pequeno e IGUAL em todas as cotas (= --folga + --gutter). Ao reduzir a tela o logo
   não encolhe: os cards só quebram para menos por linha (flex-wrap).
   min(..., 100%) só impede um card de ultrapassar a largura da tela. */
.patrocinadores .logo-card { display: flex; align-items: center; justify-content: center; height: var(--altura, 120px); flex: 0 0 auto; width: min(calc(var(--logo-w) + var(--folga)), 100%); padding: 12px; }
/* Ajuste ótico: o card do logo VERTICAL é justo à largura dele (--logo-wv), não à do
   horizontal -> mesmo "ar" lateral que os demais, sem sobra. */
.patrocinadores .logo-card--vertical { width: min(calc(var(--logo-wv) + var(--folga)), 100%); }
/* HIERARQUIA (entre cotas) + PROPORÇÃO (horizontal x vertical na mesma cota):
   • cada cota tem seus tamanhos -> cota superior aparece maior;
   • caixa padrão (horizontal): larga e baixa (limita pela LARGURA --logo-w);
   • .logo-card--vertical (aplicada pelo Patrocinio.js quando altura > largura): caixa mais
     ALTA e estreita (--logo-hv > --logo-h), para o logo em pé ter peso visual parecido com o
     deitado, sem perder o rank da cota.
   min(..., 100%) só impede o logo de vazar o card em telas estreitas. */
.patrocinadores .logo-card img { max-height: var(--logo-h); max-width: min(var(--logo-w), 100%); width: auto; height: auto; }
.patrocinadores .logo-card--vertical img { max-height: var(--logo-hv); max-width: min(var(--logo-wv), 100%); }

/* ===== CONFIG POR COTA (é aqui que se ajustam os tamanhos) =====
   Tudo na própria .cota--nivel-N (para a grade também enxergar --logo-w e --cols):
   colunas (--cols) + caixa horizontal (--logo-h/w) + caixa vertical (--logo-hv/wv).
   --logo-h/--logo-hv DECRESCEM por nível: garante a hierarquia entre cotas. */
.patrocinadores .cota--nivel-1 { --cols: 3; --altura: 165px; --logo-h: 120px; --logo-w: 220px; --logo-hv: 141px; --logo-wv: 135px; }
.patrocinadores .cota--nivel-2 { --cols: 4; --altura: 135px; --logo-h: 95px; --logo-w: 175px; --logo-hv: 111px; --logo-wv: 108px; }
.patrocinadores .cota--nivel-3 { --cols: 5; --altura: 110px; --logo-h: 74px; --logo-w: 135px; --logo-hv: 86px; --logo-wv: 84px; }
.patrocinadores .cota--nivel-4 { --cols: 6; --altura: 92px; --logo-h: 58px; --logo-w: 108px; --logo-hv: 68px; --logo-wv: 66px; }
.patrocinadores .cota--nivel-5 { --cols: 7; --altura: 78px; --logo-h: 46px; --logo-w: 88px; --logo-hv: 54px; --logo-wv: 52px; }

/* ===== RESPONSIVO =====
   Sem breakpoints: os cards têm largura fixa (justa ao logo) e quebram sozinhos (flex-wrap)
   conforme a tela diminui — menos por linha, sem encolher o logo. */