/* ── Shortcode: Colunas Dinâmicas (Sistema Universal) ────────────────────── */
.shortcode-columns-section {
    padding: 4rem 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.col-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    /* Força todas as colunas da mesma linha a terem a altura da maior */
    align-items: stretch; 
}

.col-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    height: auto; /* Permite que o stretch do flexbox funcione */
    position: relative;
}

/* 
   FAZ O CONTEÚDO CRESCER: 
   Isso permite que, se houver um botão no final, 
   ele fique alinhado na base em todos os boxes.
*/
.col-item > .prose {
    flex: 1; 
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* Garante que imagens de fundo em colunas cubram todo o box esticado */
.col-item[style*="background-image"] {
    background-size: cover;
    background-position: center;
}

/* Ajustes Mobile */
@media (max-width: 768px) {
    .col-grid {
        gap: 2rem;
    }
    .col-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .shortcode-columns-section { padding: 3rem 0; }
}