/* ====================================
   VELORA SECTION BANDING SYSTEM
   Creates "chapter rhythm" through alternating backgrounds
   ==================================== */

/* ========================================
   SECTION BACKGROUND UTILITIES
   Three background modes for vertical alternation
   ======================================== */

.section-bg-parchment {
    background-color: var(--bg-parchment);
    position: relative;
}

[data-theme="dark"] .section-bg-parchment {
    background-color: var(--bg-parchment-dark);
}

.section-bg-mist {
    background-color: var(--bg-mist);
    position: relative;
}

[data-theme="dark"] .section-bg-mist {
    background-color: var(--bg-mist-dark);
}

.section-bg-clear {
    background-color: var(--bg-clear);
    position: relative;
}

/* ========================================
   SECTION BANDING RULES
   - Sections must alternate backgrounds vertically
   - Never stack 3 identical background sections
   - Creates automatic "chapter rhythm"
   ======================================== */

/* Automatic alternation helper - apply to container */
.section-banding-container > section:nth-child(odd) {
    background-color: var(--bg-parchment);
}

.section-banding-container > section:nth-child(even) {
    background-color: var(--bg-mist);
}

[data-theme="dark"] .section-banding-container > section:nth-child(odd) {
    background-color: var(--bg-parchment-dark);
}

[data-theme="dark"] .section-banding-container > section:nth-child(even) {
    background-color: var(--bg-mist-dark);
}

/* Padding for section breathing room */
.section-bg-parchment,
.section-bg-mist,
.section-bg-clear {
    padding: var(--space-16, 4rem) var(--space-4, 1rem);
}

@media (max-width: 768px) {
    .section-bg-parchment,
    .section-bg-mist,
    .section-bg-clear {
        padding: var(--space-12, 3rem) var(--space-4, 1rem);
    }
}

@media (max-width: 480px) {
    .section-bg-parchment,
    .section-bg-mist,
    .section-bg-clear {
        padding: var(--space-8, 2rem) var(--space-3, 0.75rem);
    }
}

/* Ensure sections have proper spacing when stacked */
.section-bg-parchment + .section-bg-mist,
.section-bg-mist + .section-bg-parchment,
.section-bg-parchment + .section-bg-parchment,
.section-bg-mist + .section-bg-mist {
    /* Natural spacing from padding above */
}

/* Prevent 3 identical backgrounds in a row */
.section-bg-parchment + .section-bg-parchment + .section-bg-parchment {
    background-color: var(--bg-mist) !important;
}

.section-bg-mist + .section-bg-mist + .section-bg-mist {
    background-color: var(--bg-parchment) !important;
}

[data-theme="dark"] .section-bg-parchment + .section-bg-parchment + .section-bg-parchment {
    background-color: var(--bg-mist-dark) !important;
}

[data-theme="dark"] .section-bg-mist + .section-bg-mist + .section-bg-mist {
    background-color: var(--bg-parchment-dark) !important;
}