////
///
/// Content Section Classes
/// ===========================================================================
///
/// CSS classes for main content areas, sections, and content regions.
///
/// @group Classes.HeadContent
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

// ============================================================================
// Use
// ============================================================================

@use "../../dev" as *;
@use "../../mixins" as *;

// ============================================================================
// Section Classes
// ============================================================================

/// Base section
.section {
    width: 100%;
    padding-top: q(48);
    padding-bottom: q(48);
}

/// Section with small padding
.section--sm {
    padding-top: q(24);
    padding-bottom: q(24);
}

/// Section with large padding
.section--lg {
    padding-top: q(64);
    padding-bottom: q(64);
}

/// Section with extra large padding
.section--xl {
    padding-top: q(96);
    padding-bottom: q(96);
}

/// Full-height section
.section--full {
    min-height: 100vh;
    min-height: 100dvh;
}

/// Half-height section
.section--half {
    min-height: 50vh;
    min-height: 50dvh;
}

// ============================================================================
// Main Content Classes
// ============================================================================

/// Main content wrapper
.content--main {
    flex: 1 1 auto;
    min-width: 0;
}

/// Narrow content (for readability)
.content--narrow {
    max-width: q(680);
    margin-left: auto;
    margin-right: auto;
}

/// Wide content
.content--wide {
    max-width: q(1400);
    margin-left: auto;
    margin-right: auto;
}

/// Centered content
.content--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

// ============================================================================
// Sidebar Classes
// ============================================================================

/// Left sidebar
.sidebar--left {
    flex: 0 0 auto;
    width: fit-content;
    min-width: 0;
    order: -1;
}

/// Right sidebar
.sidebar--right {
    flex: 0 0 auto;
    width: fit-content;
    min-width: 0;
    order: 1;
}

/// Narrow sidebar
.sidebar--narrow {
    width: q(200);
}

/// Wide sidebar
.sidebar--wide {
    width: q(360);
}

/// Collapsible sidebar (hidden on mobile)
.sidebar--collapsible {
    @media (max-width: q(768)) {
        display: none;
    }
}

// ============================================================================
// Article Classes
// ============================================================================

/// Article wrapper
.article {
    max-width: q(720);
    margin-left: auto;
    margin-right: auto;
}

/// Article header
.article__header {
    margin-bottom: q(32);
}

/// Article body
.article__body {
    & > * + * {
        margin-top: q(24);
    }
}

/// Article footer
.article__footer {
    margin-top: q(48);
    padding-top: q(24);
    border-top: q(1) solid var(--color_line_primary);
}