/* =============================================
   PRESENÇA DIGITAL 4 ANOS — BASE STYLES
   Tipografia, layout e elementos fundamentais
   ============================================= */

/* Container */
.container {
    width: 100%;
    max-width: var(--largura-max);
    margin-inline: auto;
    padding-inline: var(--padding-container);
}

.container--narrow {
    max-width: var(--largura-estreita);
}

.container--content {
    max-width: var(--largura-conteudo);
}

/* Tipografia */
h1 { font-size: var(--tamanho-3xl); font-family: var(--fonte-display); }
h2 { font-size: var(--tamanho-2xl); font-family: var(--fonte-display); }
h3 { font-size: var(--tamanho-xl); }
h4 { font-size: var(--tamanho-lg); }
h5 { font-size: var(--tamanho-md); }
h6 { font-size: var(--tamanho-base); }

.text-sm { font-size: var(--tamanho-sm); }
.text-xs { font-size: var(--tamanho-xs); }
.text-lg { font-size: var(--tamanho-lg); }
.text-xl { font-size: var(--tamanho-xl); }
.text-center { text-align: center; }
.text-muted { color: var(--cor-texto-secundario); }

/* Seções */
.section {
    padding-block: var(--espaco-3xl);
}

.section__title {
    font-size: var(--tamanho-2xl);
    font-family: var(--fonte-display);
    margin-bottom: var(--espaco-xs);
    text-align: center;
}

.section__subtitle {
    font-size: var(--tamanho-md);
    color: var(--cor-texto-secundario);
    text-align: center;
    margin-bottom: var(--espaco-2xl);
    max-width: 600px;
    margin-inline: auto;
}

/* Grid utilitário */
.grid {
    display: grid;
    gap: var(--espaco-lg);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* Flex utilitário */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--espaco-sm); }
.gap-md { gap: var(--espaco-md); }
.gap-lg { gap: var(--espaco-lg); }

/* Links estilizados */
.link {
    color: var(--cor-primaria);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--transicao-rapida), text-decoration-color var(--transicao-rapida);
}

.link:hover,
.link:focus-visible {
    color: var(--cor-primaria-hover);
    text-decoration-thickness: 2px;
}

/* Divider */
.divider {
    border: none;
    border-top: 1px solid var(--cor-borda);
    margin-block: var(--espaco-xl);
}

/* Imagem responsiva */
.img-responsive {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--espaco-2xs) var(--espaco-sm);
    font-size: var(--tamanho-xs);
    font-weight: var(--peso-semi);
    border-radius: var(--raio-pill);
    line-height: 1;
    gap: 0.25em;
}

.badge--primary {
    background-color: var(--cor-primaria);
    color: var(--cor-primaria-texto);
}

.badge--secondary {
    background-color: var(--cor-secundaria);
    color: var(--cor-secundaria-texto);
}

.badge--success {
    background-color: var(--cor-sucesso);
    color: #fff;
}

.badge--warning {
    background-color: var(--cor-alerta);
    color: #1a1a1a;
}

/* Destaque / tag */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.2em 0.6em;
    font-size: var(--tamanho-xs);
    font-weight: var(--peso-medio);
    background: var(--cor-superficie);
    color: var(--cor-texto-secundario);
    border-radius: var(--raio-sm);
    border: 1px solid var(--cor-borda-leve);
}

/* Espaçamento de margem */
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--espaco-sm); }
.mb-md { margin-bottom: var(--espaco-md); }
.mb-lg { margin-bottom: var(--espaco-lg); }
.mb-xl { margin-bottom: var(--espaco-xl); }
.mt-lg { margin-top: var(--espaco-lg); }
.mt-xl { margin-top: var(--espaco-xl); }

/* Visibilidade responsiva */
.hide-mobile { display: none; }
.hide-desktop { display: block; }

@media (min-width: 768px) {
    .hide-mobile { display: block; }
    .hide-desktop { display: none; }
}