/* ==========================================================================
   LAYOUT SHELLS & GRIDS (assets/css/layout.css)
   ========================================================================== */

/* ── EMERGENCY TAILWIND POLYFILL ── 
   This safely restores styling for any leftover structural utility classes 
   that were not migrated to semantic classes, without editing the HTML.
*/
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

/* Main Containers */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: var(--space-24);
    padding-right: var(--space-24);
}

.container-sm {
    max-width: 800px;
}

.container-fluid {
    width: 100%;
    padding-left: var(--space-24);
    padding-right: var(--space-24);
}

/* Section Spacing */
.section {
    padding-top: var(--space-64);
    padding-bottom: var(--space-64);
}

.section-lg {
    padding-top: var(--space-96);
    padding-bottom: var(--space-96);
}

.section-sm {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
}

/* Core Grids */
.grid {
    display: grid;
    gap: var(--space-24);
}

.grid-2 {
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

.grid-3 {
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.grid-4 {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Package / Content Split Layout */
.layout-split {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
}
@media (min-width: 1024px) {
    .layout-split {
        flex-direction: row;
        align-items: flex-start;
    }
}

.layout-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
}

.layout-sidebar {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

@media (min-width: 1024px) {
    .layout-sidebar {
        width: 380px;
        flex-shrink: 0;
        position: sticky;
        top: calc(var(--space-24) + 80px);
        z-index: var(--z-sticky);
    }
}

/* Header Body Offset */
body {
    padding-top: 80px; 
}
@media (max-width: 1023px) {
    body {
        padding-bottom: 80px; 
    }
}

/* ==========================================================================
   EMERGENCY LINE-CLAMP POLYFILL (Tailwind CDN often omits line-clamp plugin)
   ========================================================================== */
.line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.line-clamp-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.line-clamp-4 {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}