/**
 * Layout Styles
 * Page structure and container widths
 */

/* ============================================================================
   CONTAINER WIDTHS
   ========================================================================== */

/* Recommended max-width for desktop: 1200px - 1440px for optimal readability */

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

.container-narrow {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.container-wide {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 1rem;
}

.container-full {
    width: 100%;
    padding: 0 1rem;
}

/* ============================================================================
   SITE STRUCTURE
   ========================================================================== */

.site-main {
    min-height: 50vh;
}

.front-page {
    width: 100%;
}

.front-page .site-main {
    max-width: 100%;
    padding: 0;
}

.entry-content {
    width: 100%;
}

/* Remove default article margins on homepage */
.front-page article {
    margin: 0;
}

/* ============================================================================
   CONTENT SECTIONS
   ========================================================================== */

.content-section {
    padding: 2rem 0;
}

.content-section-full {
    width: 100%;
    padding: 2rem 1rem;
}

/* ============================================================================
   GRID LAYOUTS
   ========================================================================== */

.grid {
    display: grid;
    gap: 1.5rem;
}

.grid-2 {
    grid-template-columns: 1fr;
}

.grid-3 {
    grid-template-columns: 1fr;
}

.grid-4 {
    grid-template-columns: 1fr;
}

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet: 768px */
@media (min-width: 768px) {
    .container {
        padding: 0 1rem;
    }

    .container-narrow,
    .container-wide,
    .container-full {
        padding: 0 1rem;
    }

    .content-section {
        padding: 3rem 0;
    }

    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 1024px */
@media (min-width: 1024px) {
    .content-section {
        padding: 4rem 0;
    }

    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Large Desktop: 1440px */
@media (min-width: 1440px) {
    .container {
        padding: 0 1rem;
    }
}

/* ============================================================================
   WORDPRESS CORE LAYOUTS
   ========================================================================== */

/* Full width */
.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Wide width */
.alignwide {
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}