/**
 * Cards específicos da prática Frequência
 * @version 1.0.0
 * @see docs/ARCHITECTURE-GUIDE.md
 *
 * Este arquivo contém VARIANTES de cards específicos desta prática.
 * Cards base/genéricos estão em /core/css/cards.css
 *
 * Variantes específicas:
 *   - card-dominio  - Cards dos 6 domínios
 *   - card-veiculo  - Cards dos veículos
 *   - card-ferramenta - Cards das ferramentas
 *   - card-categoria - Cards de categorias
 *   - card-feature - Cards de features/benefícios
 *   - feature-grid/feature-item - Grid de features
 */

/* ==========================================================================
   CARD VARIANT: DOMINIO
   Cards dos 6 domínios (Mente, Corpo, Emoções, etc.)
   ========================================================================== */

.card-dominio {
    --card-min-height: 100px;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(135deg, var(--som-bg) 0%, var(--som-bg-alt) 100%);
    border: 1px solid var(--som-border);
}

.card-dominio .card-title {
    font-size: var(--font-size-md);
}

.card-dominio .card-subtitle {
    font-size: var(--font-size-xs);
    max-width: 90%;
}

.card-dominio:hover {
    border-color: var(--som-primary);
    background: linear-gradient(135deg, rgba(146, 181, 184, 0.05) 0%, rgba(146, 181, 184, 0.1) 100%);
}

.card-dominio.active {
    background: linear-gradient(135deg, var(--som-primary) 0%, var(--som-primary-dark) 100%);
    border-color: var(--som-primary-dark);
}

/* Responsive: domínio cards */
@media (min-width: 768px) {
    .card-dominio {
        --card-min-height: 112px;
    }

    .card-dominio .card-title {
        font-size: var(--font-size-lg);
    }
}

@media (min-width: 1024px) {
    .card-dominio {
        --card-min-height: 132px;
    }
}

/* ==========================================================================
   CARD VARIANT: VEICULO
   Cards dos veículos de frequência
   ========================================================================== */

.card-veiculo {
    --card-min-height: 100px;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--som-bg);
    border: 1px solid var(--som-border);
}

.card-veiculo .card-title {
    font-size: var(--font-size-base);
    font-weight: 500;
}

.card-veiculo .card-subtitle {
    font-size: var(--font-size-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-veiculo:hover {
    border-color: var(--som-primary);
}

.card-veiculo.active {
    background-color: var(--som-primary);
    border-color: var(--som-primary);
}

/* Responsive: veículo cards */
@media (min-width: 768px) {
    .card-veiculo {
        --card-min-height: 112px;
    }

    .card-veiculo .card-title {
        font-size: var(--font-size-md);
    }
}

@media (min-width: 1024px) {
    .card-veiculo {
        --card-min-height: 132px;
    }
}

/* ==========================================================================
   CARD VARIANT: FERRAMENTA
   Cards de ferramentas em formato lista
   ========================================================================== */

.card-ferramenta {
    --card-min-height: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-bottom: 1px solid var(--som-border);
    border-radius: 0;
    box-shadow: none;
}

.card-ferramenta:last-child {
    border-bottom: none;
}

.card-ferramenta .card-content {
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

.card-ferramenta .card-title {
    font-size: var(--font-size-base);
    font-weight: 500;
}

.card-ferramenta .card-subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-ferramenta:hover {
    background-color: var(--som-bg-alt);
}

.card-ferramenta.active {
    background-color: rgba(146, 181, 184, 0.1);
    border-left: 3px solid var(--som-primary);
}

/* ==========================================================================
   CARD VARIANT: CATEGORIA
   Cards de categorias/seções
   ========================================================================== */

.card-categoria {
    --card-min-height: var(--touch-target-recommended);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--som-border);
    border-radius: 0;
    box-shadow: none;
}

.card-categoria .card-title {
    font-size: var(--font-size-base);
    font-weight: 500;
}

.card-categoria:hover {
    background-color: var(--som-bg-alt);
}

.card-categoria.active {
    background-color: rgba(146, 181, 184, 0.1);
    border-left: 3px solid var(--som-primary);
    padding-left: calc(var(--space-4) - 3px);
}

/* ==========================================================================
   CARD VARIANT: FEATURE
   Cards de features/benefícios
   ========================================================================== */

.card-feature {
    --card-min-height: auto;
    align-items: flex-start;
    text-align: left;
    padding: var(--space-5);
    border: 1px solid var(--som-border);
}

.card-feature .card-icon {
    margin-bottom: var(--space-3);
}

.card-feature .card-title {
    font-size: var(--font-size-md);
    margin-bottom: var(--space-2);
}

.card-feature .card-text {
    font-size: var(--font-size-sm);
    color: var(--som-text-light);
}

/* ==========================================================================
   FEATURE GRID & ITEMS
   Grid de features usado em páginas internas (Como Funciona, etc.)
   ========================================================================== */

.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-top: var(--space-5);
}

.feature-item {
    background: var(--som-bg);
    border: 1px solid var(--som-border);
    border-radius: var(--radius);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
}

.feature-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.feature-icon {
    width: 48px;
    height: 48px;
    color: var(--som-accent, var(--color-accent));
    margin-bottom: var(--space-3);
}

.feature-item h3 {
    font-family: var(--font-titulos);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--som-text, var(--color-text));
    margin: 0;
}

.feature-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-right p {
    font-size: var(--font-size-sm);
    color: var(--som-text-light, var(--color-text-muted));
    margin: 0;
    line-height: var(--line-height-relaxed);
}

/* Feature Grid - Responsive */
@media (min-width: 768px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-item {
        flex-direction: row;
        text-align: left;
        gap: 0;
    }

    .feature-left {
        flex: 0 0 35%;
        padding-right: var(--space-5);
        border-right: 1px solid var(--som-border);
    }

    .feature-right {
        flex: 0 0 65%;
        padding-left: var(--space-5);
        justify-content: flex-start;
    }
}

@media (min-width: 1024px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }

    .feature-left {
        flex: 0 0 30%;
    }

    .feature-right {
        flex: 0 0 70%;
    }
}

/* ==========================================================================
   DARK MODE - Variantes específicas
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .card-dominio {
        background: linear-gradient(135deg, var(--som-bg) 0%, var(--som-bg-alt) 100%);
    }

    .card-dominio:hover {
        background: linear-gradient(135deg, rgba(168, 213, 216, 0.05) 0%, rgba(168, 213, 216, 0.1) 100%);
    }

    .card-dominio.active {
        background: linear-gradient(135deg, var(--som-primary) 0%, var(--som-primary-dark) 100%);
    }

    .card-ferramenta:hover,
    .card-categoria:hover {
        background-color: var(--som-bg-alt);
    }
}