/**
 * Layout Utilities
 *
 * Schema-driven containers, flex alignment, and text alignment.
 */

/* Containers */
.container-sm {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.container-md {
    width: 100%;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}

.container-lg {
    width: 100%;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

.container-xl {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.container-full {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Section layout — contained */
.layout-contained {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .layout-contained { max-width: 768px; }
}

@media (min-width: 1024px) {
    .layout-contained { max-width: 1024px; }
}

@media (min-width: 1280px) {
    .layout-contained { max-width: 1280px; }
}

@media (min-width: 1536px) {
    .layout-contained { max-width: 1536px; }
}

/* Container mobile padding */
@media (max-width: 767px) {
    [class*="container-"] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Flex alignment (align-items) */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

/* Flex justify (justify-content) */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* Flex direction */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }

/* Min-height utilities */
.min-h-inherit { min-height: inherit; }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ==========================================================================
   Content Wrapper - Sidebar Layouts
   ========================================================================== */

.content-wrapper {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Full-width: single column */
.content-wrapper--full-width {
    display: block;
}

.content-wrapper--full-width .content-main {
    width: 100%;
}

/* Content-Sidebar: content left, sidebar right */
.content-wrapper--content-sidebar {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
}

/* Sidebar-Content: sidebar left, content right */
.content-wrapper--sidebar-content {
    display: grid;
    grid-template-columns: 256px 1fr;
    gap: 2rem;
}

/* Main content area */
.content-wrapper .content-main {
    min-width: 0; /* Prevent grid blowout */
}

/* Sidebar container - must stretch to enable sticky inside */
.content-wrapper .content-sidebar {
    min-width: 0; /* Prevent grid blowout */
    align-self: stretch; /* Explicit stretch to full grid row height */
}

/* Sticky sidebar - the aside sticks within the sidebar column */
.content-wrapper .content-sidebar > .plexa-sidebar.sticky,
.content-wrapper .content-sidebar > aside.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky !important;
    top: calc(var(--header-height, 80px) + 1rem) !important;
}

/* Ensure no ancestors break sticky positioning */
body > main,
.content-wrapper,
.content-wrapper .content-main,
.content-wrapper .content-sidebar {
    overflow: visible;
}

/* Responsive: stack on tablet and below */
@media (max-width: 1023px) {
    .content-wrapper--content-sidebar,
    .content-wrapper--sidebar-content {
        grid-template-columns: 1fr;
    }

    /* Sidebar below content on mobile */
    .content-wrapper--content-sidebar .content-sidebar,
    .content-wrapper--sidebar-content .content-sidebar {
        order: 2;
    }

    .content-wrapper--content-sidebar .content-main,
    .content-wrapper--sidebar-content .content-main {
        order: 1;
    }
}