/**
 * TurboJet - Estilos para o Shortcode [tj_cards_interativos]
 *
 * @version 1.4.0
 * @package TurboJet
 */

/* --- Wrapper Principal --- */
.tj-interactive-cards-wrapper {
    display: grid;
    width: 100%; /* << CORREÇÃO 1: Garante que o próprio container do grid ocupe todo o espaço horizontal disponível, dando uma base para o cálculo das colunas. */
    grid-template-columns: repeat(var(--tj-interactive-cols, 3), 1fr);
    gap: var(--tj-interactive-gap, 20px);
}

/* --- Card Individual (Item do Grid) --- */
.tj-interactive-card {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%; 
    min-width: 0; /* << CORREÇÃO 2: Um truque de CSS que previne bugs de cálculo em layouts de grid complexos, evitando que o item colapse para 0px. */
    height: var(--tj-card-height, 250px);
    border-radius: var(--tj-card-border-radius, 8px);
}

/* --- Imagem de Fundo do Card --- */
.tj-interactive-card-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}

/* --- Efeito: Zoom --- */
.tj-interactive-cards-wrapper.effect-zoom .tj-interactive-card:hover .tj-interactive-card-image {
    transform: scale(1.1);
}

/* --- Efeito: Lift --- */
.tj-interactive-cards-wrapper.effect-lift .tj-interactive-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* --- Efeito: Overlay Info --- */
.tj-interactive-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    box-sizing: border-box;
    color: #fff;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    background: var(--tj-overlay-bg, linear-gradient(to top, rgba(0,0,0,0.7) 40%, transparent 100%));
}

.tj-interactive-cards-wrapper.effect-overlay_info .tj-interactive-card:hover .tj-interactive-card-overlay {
    opacity: 1;
    transform: translateY(0);
}

.tj-interactive-cards-wrapper.effect-overlay_info .tj-interactive-card:hover .tj-interactive-card-image {
    transform: scale(1.1);
}

.tj-interactive-card-category {
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 5px;
    opacity: 0.8;
}

.tj-interactive-card-title {
    margin: 0;
    line-height: 1.3;
    color: var(--tj-title-color, #FFFFFF);
    font-size: var(--tj-title-font-size, 1.5em);
}

/* --- Responsividade --- */
@media (max-width: 992px) {
    .tj-interactive-cards-wrapper {
        --tj-interactive-cols: 2;
    }
}

@media (max-width: 768px) {
    .tj-interactive-cards-wrapper {
        --tj-interactive-cols: 1;
    }
}