/* ========================================
   CUSTOM GRID LAYOUT SYSTEM
   ======================================== */

/* Grid Columns Container */
.grid-columns {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
    width: 100%;
}

/* Individual Grid Column */
.grid-column {
    /* Default to full width on mobile */
    grid-column: span 12;
}

/* Desktop column widths */
@media (min-width: 840px) {
    .grid-column-1 { grid-column: span 1; }
    .grid-column-2 { grid-column: span 2; }
    .grid-column-3 { grid-column: span 3; }
    .grid-column-4 { grid-column: span 4; }
    .grid-column-5 { grid-column: span 5; }
    .grid-column-6 { grid-column: span 6; }
    .grid-column-7 { grid-column: span 7; }
    .grid-column-8 { grid-column: span 8; }
    .grid-column-9 { grid-column: span 9; }
    .grid-column-10 { grid-column: span 10; }
    .grid-column-11 { grid-column: span 11; }
    .grid-column-12 { grid-column: span 12; }
}

/* ========================================
   FULL-WIDTH SECTIONS
   ======================================== */

/* Full-width section breaks out of container */
.full-width-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Inner container for full-width content with padding */
.full-width-content {
    padding: 2rem 1rem;
}

/* Optional: Full-width with background color */
.full-width-section.with-background {
    background-color: #f5f5f5;
    padding: 3rem 0;
}

.full-width-section.with-dark-background {
    background-color: #2d3748;
    color: white;
    padding: 3rem 0;
}

/* Ensure nested containers work properly */
.full-width-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ========================================
   RESPONSIVE TABLET OVERRIDES
   ======================================== */

/* Tablet column widths - can be customized per shortcode */
@media (min-width: 600px) and (max-width: 839px) {
    .grid-column.tablet-6 { grid-column: span 6; }
    .grid-column.tablet-4 { grid-column: span 4; }
    .grid-column.tablet-3 { grid-column: span 3; }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Gap size variations */
.grid-columns.gap-small { gap: 0.75rem; }
.grid-columns.gap-medium { gap: 1.5rem; }
.grid-columns.gap-large { gap: 3rem; }

/* Vertical alignment options */
.grid-columns.align-center { align-items: center; }
.grid-columns.align-start { align-items: start; }
.grid-columns.align-end { align-items: end; }

/* Column background and padding helpers */
.grid-column.with-padding {
    padding: 1.5rem;
}

.grid-column.with-background {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 6px;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .grid-columns {
        display: block;
    }
    
    .grid-column {
        page-break-inside: avoid;
        margin-bottom: 1rem;
    }
    
    .full-width-section {
        width: 100%;
        position: static;
        left: auto;
        right: auto;
        margin-left: 0;
        margin-right: 0;
    }
}