/**
 * Shortcodes Styles
 *
 * Custom styles for theme shortcodes
 */

/* Columns Wrapper */
.lc-columns-wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    width: 100%;
    margin-bottom: 20px;
}

/* Nested columns should have smaller bottom margin */
.lc-column .lc-columns-wrapper {
    margin-bottom: 0;
}

/* Column Widths (1-12) */
.lc-column {
    min-width: 0; /* Prevents overflow issues */
}

/* Remove extra paragraph margins inside columns */
.lc-column > p:first-child {
    margin-top: 0;
}

.lc-column > p:last-child {
    margin-bottom: 0;
}

.lc-column-1 { grid-column: span 1; }
.lc-column-2 { grid-column: span 2; }
.lc-column-3 { grid-column: span 3; }
.lc-column-4 { grid-column: span 4; }
.lc-column-5 { grid-column: span 5; }
.lc-column-6 { grid-column: span 6; }
.lc-column-7 { grid-column: span 7; }
.lc-column-8 { grid-column: span 8; }
.lc-column-9 { grid-column: span 9; }
.lc-column-10 { grid-column: span 10; }
.lc-column-11 { grid-column: span 11; }
.lc-column-12 { grid-column: span 12; }

/* Responsive behavior - stack columns on mobile */
@media (max-width: 768px) {
    .lc-columns-wrapper {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .lc-column-1,
    .lc-column-2,
    .lc-column-3,
    .lc-column-4,
    .lc-column-5,
    .lc-column-6,
    .lc-column-7,
    .lc-column-8,
    .lc-column-9,
    .lc-column-10,
    .lc-column-11,
    .lc-column-12 {
        grid-column: span 12;
    }
}

/* Medium screens - allow 2 columns max */
@media (min-width: 769px) and (max-width: 1024px) {
    .lc-column-7,
    .lc-column-8,
    .lc-column-9,
    .lc-column-10,
    .lc-column-11,
    .lc-column-12 {
        grid-column: span 12;
    }
}