/* ==========================================================
   CSS Unificado - PÁGINA DE CATEGORIA (Padrão V5 Otimizado)
   
   Este arquivo controla o layout de TODAS as páginas de
   categoria (ex: /imagens/, /texto/, /utilitarios/).
   Ele é carregado por qualquer index.php de categoria.
   ========================================================== */

/* --- 
   [BASE] ESTRUTURA PRINCIPAL 
   Define o container principal da página
   --- */
.tool-container { 
    /* Define a largura máxima para páginas de categoria, que é um pouco mais larga que as ferramentas */
    max-width: 1100px; 
    /* Define a fonte padrão para consistência */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- 
   [BASE] CABEÇALHO DA CATEGORIA
   Estilos para o H1 e a descrição principal da página.
   --- */
.category-header { 
    text-align: center; 
    margin-bottom: var(--spacing-xl); /* Espaçamento V5 */
}
.category-header h1 { 
    font-size: 2.5rem; /* Tamanho padrão do H1 */
    margin-bottom: var(--spacing-sm);
}
.category-header p.page-description { 
    font-size: 1.1rem; /* Tamanho do parágrafo de descrição */
    max-width: 600px; /* Limita a largura da linha para legibilidade */
    margin: var(--spacing-sm) auto 0; 
    color: var(--c-text-secondary); /* Cor de texto secundária (cinza) */
}

/* --- 
   [CATEGORIA] GRID DE FERRAMENTAS
   O grid principal que lista os cards de ferramentas desta categoria.
   (ex: "Compressor", "Conversor")
   --- */
.grid.tools-grid { 
    display: grid; 
    /* Cria um grid responsivo que se ajusta automaticamente */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: var(--spacing-lg); /* Espaçamento V5 entre os cards */
    margin-top: var(--spacing-xl);
}
.card.card--tool {
    /* Estilo base para o card de ferramenta clicável */
    text-align: left;
    transition: all var(--transition-fast); /* Transição suave V5 */
    padding: var(--spacing-lg);
    text-decoration: none;
    background-color: var(--c-surface); /* Cor de fundo do card (suporta modo escuro) */
    border: 1px solid var(--c-border); /* Borda V5 (suporta modo escuro) */
    border-radius: var(--border-radius-lg);
}
.card.card--tool:hover {
    /* Efeito de "levantar" o card no hover */
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover); /* Sombra V5 */
}
.card.card--tool h3 {
    /* Título do card (ex: "🗜️ Compressor") */
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    color: var(--c-primary); /* Cor primária V5 (verde) */
}
.card.card--tool p {
    /* Descrição do card (ex: "Reduza o tamanho de imagens...") */
    font-size: 0.95rem;
    color: var(--c-text-secondary);
    line-height: 1.6;
}


/* --- 
   [BASE] BLOCO DE CONTEÚDO SEO
   Estilos para o artigo de texto que fica abaixo do grid de ferramentas.
   --- */
.main-content-section { 
    /* Define o espaçamento vertical das seções principais */
    padding: var(--spacing-xxl) 0; 
}
.tool-content-wrapper { 
    /* Limita a largura do texto de SEO para legibilidade */
    max-width: 800px; 
    margin: 0 auto; /* Centraliza o wrapper */
    padding: 0 var(--spacing-sm); /* Garante espaçamento lateral em telas pequenas */
}
.tool-content-wrapper h2 { 
    font-size: 1.8rem; 
    margin-bottom: var(--spacing-md); 
}
.tool-content-wrapper h3 { 
    font-size: 1.3rem; 
    margin-top: var(--spacing-lg); 
    margin-bottom: var(--spacing-sm); 
}
.tool-content-wrapper p { 
    font-size: 1.05rem; 
    line-height: 1.7; /* Altura de linha ideal para leitura */
    margin-bottom: var(--spacing-lg); 
}

/* --- 
   [BASE] SEÇÃO "EXPLORE OUTRAS CATEGORIAS"
   Estilos para o grid inferior de navegação.
   --- */
.section-title { 
    /* Título (ex: "Explore Outras Categorias") */
    text-align: center; 
    font-size: 1.8rem; 
    margin-bottom: var(--spacing-xl); 
    color: var(--c-text-primary);
}
.grid.category-grid { 
    /* O grid que contém os cards de outras categorias */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: var(--spacing-lg); 
}

/* Nota: O estilo .breadcrumbs NÃO está aqui.
   Ele é herdado corretamente do style.css global,
   que já define os links como verdes (var(--c-primary))
   para páginas de categoria.
*/