////
///
/// Region
/// ===========================================================================
///
/// Page region/section layout primitives.
///
/// @group Layout
/// @author Scape Press
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

@layer ss.layout {
    .ss-l-region {
        padding-block: var(--ss-l-region-padding, var(--ss-vspace-xl));
    }

    // Region size variants
    .ss-l-region-sm {
        --ss-l-region-padding: var(--ss-vspace-sm);
    }
    .ss-l-region-md {
        --ss-l-region-padding: var(--ss-vspace-md);
    }
    .ss-l-region-lg {
        --ss-l-region-padding: var(--ss-vspace-lg);
    }
    .ss-l-region-xl {
        --ss-l-region-padding: var(--ss-vspace-xl);
    }
    .ss-l-region-2xl {
        --ss-l-region-padding: var(--ss-vspace-2xl);
    }

    // Hero region (larger vertical space)
    .ss-l-region-hero {
        padding-block: var(--ss-vspace-3xl);
        min-height: var(--ss-l-region-min-height, auto);
    }

    // Section with separator
    .ss-l-region-divided {
        border-block-end: var(--ss-a-border-width) solid var(--ss-color-border);
    }
}