/**
 * Layout Component Styles
 *
 * This file contains all styles for page layout including:
 * - Sections and subsections
 * - Flexbox utilities
 * - Frontpage layout (half sections)
 * - Responsive layout adjustments
 */

@layer components.layout {
    /* ========================================
       Container Query Definitions
       ======================================== */
    .halfSubSection {
        container-type: inline-size;
        container-name: half-section;
    }

    .subSection {
        container-type: inline-size;
        container-name: sub-section;
    }

    /* ========================================
       Sections & Layout
       ======================================== */
    .section {
        margin-block-start: var(--space-5);
    }

    .subSection {
        padding-block: var(--space-3) var(--space-5);
        padding-inline: var(--space-3);
    }

    .body-wrapper {
        padding-block-start: var(--space-5);
    }

    /* ========================================
       Flexbox Utilities
       ======================================== */
    .flex-row-wrap {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-5);
    }

    .flex-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ========================================
       Frontpage Layout (Half Sections)
       ======================================== */
    .section .halfSubSection {
        /* Account for gap when in flex container */
        inline-size: calc(50% - var(--space-5) / 2);
    }

    .section .halfSubSection .rightP {
        position: relative;
        margin-inline-start: var(--space-5);
    }

    .flex-center .halfSubSection {
        inline-size: 400px;
    }

    /* ========================================
       Responsive Layout Adjustments
       ======================================== */

    /* Mobile base styles (default) */
    .section.flex-center > .halfSubSection {
        inline-size: 100%;
        display: block;
    }

    .section.flex-row-wrap > .halfSubSection {
        inline-size: 100%;
        display: block;
    }

    .section .halfSubSection .rightP {
        margin-inline-start: 0;
    }

    /* Very small screens */
    @media (max-width: 400px) {
        .center-content {
            padding-inline: var(--space-3);
        }
    }

    /* Tablet landscape and up */
    @media (min-width: 700px) {
        .section.flex-center > .halfSubSection {
            inline-size: 400px;
            display: inline-block;
        }
    }

    /* Desktop and up */
    @media (min-width: 1000px) {
        .section.flex-row-wrap > .halfSubSection {
            /* Account for gap: 50% minus half the gap */
            inline-size: calc(50% - var(--space-5) / 2);
            display: inline-block;
        }

        .section .halfSubSection .rightP {
            margin-inline-start: var(--space-5);
        }
    }
}