/* css/layout/sections.css */

/* Base Section Padding */
.section-padding {
    padding-block: var(--sp-12); /* Logical property for top/bottom padding */
    position: relative;
    overflow: hidden;
}

/* Elevated Backgrounds (Used for Dark Mode contrast) */
.bg-elevated {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* Section Headers */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--sp-8);
}

/* Full Bleed Utility (For carousels that escape the container) */
.full-bleed {
    width: 100vw;
    margin-inline-start: calc(50% - 50vw);
}

/* Glassmorphic Panels */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: var(--sp-6);
}

.accent-border {
    border-color: rgba(228, 229, 27, 0.2); /* Saffron tint */
}

/* Desktop Overrides */
@media (min-width: 1024px) {
    .section-padding {
        padding-block: var(--sp-24); /* Double padding for luxury desktop feel */
    }
}