/* =============================================
   ARQUIVO: /css/catalog-skeleton.css
   O "ESQUELETO" DE LAYOUT PARA TODOS OS CATÁLOGOS.
   Este arquivo não tem cores, apenas estrutura.
============================================= */

/* Classe de corpo genérica para todas as páginas de catálogo */
body.page-catalog { 
    font-family: 'Poppins', sans-serif; 
    background: var(--theme-body-bg);
    color: var(--theme-text-light); 
    min-height: 100vh;
}

main#course-grid { 
    padding: 40px 0; 
}

/* =============================================
   ESQUELETO DO HEADER (HERO)
============================================= */
header.hero-catalog {
    /* 1. A imagem vem da variável do tema */
    background-image: var(--theme-header-image); 
    background-size: cover; 
    
    /* 2. A posição pode ser definida pelo tema (default: center) */
    background-position: var(--theme-header-position, center center); 
    
    padding: 0 !important; 
    min-height: 350px; 
    
    /* 3. Cor de fallback e borda vêm das variáveis */
    background-color: var(--theme-bg-dark); 
    border-bottom: var(--theme-header-border);
    box-shadow: var(--theme-header-shadow);
}

/* Esqueleto responsivo */
@media (max-width: 767.98px) {
    header.hero-catalog {
        min-height: var(--theme-header-mobile-height, 180px); /* Permite ao tema mudar a altura mobile */
    }
}

/* =============================================
   ESQUELETO DO GRID DE CURSOS
============================================= */
.category-title { 
    font-weight: 700; 
    color: var(--theme-text-light); 
    margin-bottom: 25px; 
    padding-bottom: 10px; 
    display: inline-block; 
    
    /* 4. O gradiente da borda vem da variável */
    border-bottom: 3px solid;
    border-image-slice: 1;
    border-image-source: var(--theme-title-gradient);
}

/* =============================================
   ESQUELETO DOS CARDS
============================================= */
.course-card {
    /* 5. Todas as cores e fundos vêm das variáveis */
    background-color: var(--theme-card-bg);
    border: 1px solid var(--theme-card-border);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); 
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.course-card:hover { 
    transform: translateY(-5px); 
    box-shadow: var(--theme-card-hover-shadow); 
    border-color: var(--theme-primary); /* Cor primária do tema */
}

/* --- Cabeçalho com Ícone --- */
.course-card .card-icon-header { 
    padding: 25px; 
    background: var(--theme-card-icon-bg); 
    border-radius: 12px 12px 0 0; 
    text-align: center; 
    border-bottom: 1px solid var(--theme-card-border);
}

.course-card .card-icon-header i { 
    font-size: 3rem; 
    color: var(--theme-primary); /* Cor primária do tema */
    text-shadow: var(--theme-icon-shadow);
}

/* --- Corpo e Rodapé --- */
.course-card .card-body { 
    padding: 20px; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    text-align: left; 
}

.course-card .card-title { 
    font-weight: 600; 
    font-size: 1.1rem; 
    margin-bottom: 5px; 
    color: var(--theme-text-light); 
}

.course-card .card-text { 
    font-size: 0.9rem; 
    color: var(--theme-text-muted); 
}

.course-card .card-footer { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 20px; 
    background-color: transparent; 
    border-top: 1px solid var(--theme-card-border);
}

.course-card .course-duration { 
    font-size: 0.9rem; 
    font-weight: 500; 
    color: var(--theme-text-muted); 
}

.course-card .course-duration i { 
    color: var(--theme-secondary); /* Cor secundária do tema */
}

/* --- Botões --- */
.course-card .btn-course-details { 
    font-size: 0.85rem; 
    font-weight: 600; 
    padding: 6px 16px; 
    border-radius: 50px; 
    text-decoration: none; 
    transition: all 0.4s ease;
    
    /* 6. Cores do botão vêm das variáveis */
    color: var(--theme-button-text);
    border: var(--theme-button-border);
    background: var(--theme-button-bg, transparent);
    background-image: none;
}

.course-card:hover .btn-course-details,
.course-card .btn-course-details:hover { 
    color: var(--theme-button-hover-text); 
    border-color: transparent;
    background: var(--theme-button-hover-bg); /* Pode ser cor ou gradiente */
    background-image: var(--theme-button-hover-bg);
    background-size: 200% auto;
    background-position: left center;
    box-shadow: var(--theme-button-hover-shadow); 
}

.course-card .btn-course-details:hover {
    background-position: right center;
}

/* =============================================
   ESQUELETO DA RESPONSIVIDADE (IDÊNTICO)
============================================= */
@media (max-width: 991.98px) {
    .course-card {
        flex-direction: row;
        align-items: center;
        padding: 10px;
    }
    .course-card .card-icon-header {
        background: none;
        padding: 0 15px 0 10px;
        border: none;
    }
    .course-card .card-icon-header i {
        font-size: 2rem;
    }
    .course-card .card-body {
        padding: 10px 0;
        text-align: left;
    }
    .course-card .card-title {
        font-size: 1rem;
    }
    .course-card .card-footer {
        padding: 0;
        border: none;
        margin-left: auto;
    }
    .course-card .course-duration {
        display: none;
    }
    .course-card .btn-course-details {
        border: none;
        font-size: 1.5rem;
        padding: 0 10px;
        background: transparent !important;
        background-image: none !important;
        /* 7. Cor da seta no mobile vêm da variável */
        color: var(--theme-mobile-arrow-color); 
        box-shadow: none !important;
    }
}