/* ====================================
   VELORA SECTION ROLES SYSTEM
   Each section must have a clear role
   ==================================== */

/* ========================================
   SECTION ROLE CLASSES
   Five roles for section composition
   ======================================== */

/* Opening - Identity, mood */
.section-opening {
    padding: var(--space-16, 4rem) var(--space-4, 1rem);
    text-align: center;
}

.section-opening h1,
.section-opening h2 {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: var(--font-bold, 700);
    line-height: var(--leading-tight, 1.25);
    margin-bottom: var(--space-6, 1.5rem);
}

/* Essence - Short explanation */
.section-essence {
    padding: var(--space-12, 3rem) var(--space-4, 1rem);
    max-width: 65ch;
    margin: 0 auto;
}

.section-essence p {
    font-size: var(--text-lg, 1.125rem);
    line-height: var(--leading-relaxed, 1.8);
}

/* Depth - Main content / tool */
.section-depth {
    padding: var(--space-12, 3rem) var(--space-4, 1rem);
}

/* Pause - Quote, reflection (minimum one per page) */
.section-pause {
    padding: var(--space-16, 4rem) var(--space-4, 1rem);
    text-align: center;
    max-width: 65ch;
    margin: 0 auto;
}

.section-pause blockquote {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-style: italic;
    line-height: var(--leading-relaxed, 1.8);
    color: var(--velora-text-secondary, #4A4A4A);
    border: none;
    padding: 0;
    margin: 0;
    position: relative;
}

[data-theme="dark"] .section-pause blockquote {
    color: var(--velora-text-secondary, #B3B3B3);
}

.section-pause blockquote::before {
    content: '"';
    font-size: 4rem;
    position: absolute;
    top: -1rem;
    left: -2rem;
    opacity: 0.2;
    font-family: Georgia, serif;
}

.section-pause blockquote::after {
    content: '"';
    font-size: 4rem;
    position: absolute;
    bottom: -2rem;
    right: -2rem;
    opacity: 0.2;
    font-family: Georgia, serif;
}

/* Pause variant: single reflective sentence */
.section-pause--sentence {
    padding: var(--space-12, 3rem) var(--space-4, 1rem);
}

.section-pause--sentence p {
    font-size: var(--text-xl, 1.25rem);
    font-style: italic;
    line-height: var(--leading-relaxed, 1.8);
    color: var(--velora-text-secondary, #4A4A4A);
    max-width: 50ch;
    margin: 0 auto;
}

[data-theme="dark"] .section-pause--sentence p {
    color: var(--velora-text-secondary, #B3B3B3);
}

/* Pause variant: visual divider with text */
.section-pause--divider {
    padding: var(--space-8, 2rem) var(--space-4, 1rem);
    position: relative;
}

.section-pause--divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--velora-border-primary, rgba(0, 0, 0, 0.1)) 20%,
        var(--velora-border-primary, rgba(0, 0, 0, 0.1)) 80%,
        transparent 100%
    );
}

.section-pause--divider p {
    position: relative;
    display: inline-block;
    background: var(--bg-parchment, #FAF8F5);
    padding: 0 var(--space-4, 1rem);
    font-size: var(--text-sm, 0.875rem);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest, 0.1em);
    color: var(--velora-text-muted, #808080);
}

[data-theme="dark"] .section-pause--divider p {
    background: var(--bg-parchment-dark, #1A1A1A);
    color: var(--velora-text-muted, #B3B3B3);
}

/* Ritual - Continuation / CTA */
.section-ritual {
    padding: var(--space-16, 4rem) var(--space-4, 1rem);
    text-align: center;
}

.section-ritual .surface-ritual {
    max-width: 800px;
    margin: 0 auto;
}

/* ========================================
   SECTION RULES ENFORCEMENT
   Documentation and guidelines
   ======================================== */

/*
 * SECTION COMPOSITION RULES:
 * 
 * 1. Each section must have a role:
 *    - .section-opening: Identity, mood
 *    - .section-essence: Short explanation
 *    - .section-depth: Main content / tool
 *    - .section-pause: Quote, reflection
 *    - .section-ritual: Continuation / CTA
 * 
 * 2. If a section has no role → delete or merge it
 * 
 * 3. One "pause" per page (minimum)
 *    - Can be a pull quote (.section-pause)
 *    - A single reflective sentence (.section-pause--sentence)
 *    - A visual divider with text (.section-pause--divider)
 * 
 * 4. Sections should flow: Opening → Essence → Depth → Pause → Ritual
 */

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .section-opening,
    .section-essence,
    .section-depth,
    .section-pause,
    .section-ritual {
        padding: var(--space-8, 2rem) var(--space-4, 1rem);
    }
}

@media (max-width: 480px) {
    .section-opening,
    .section-essence,
    .section-depth,
    .section-pause,
    .section-ritual {
        padding: var(--space-6, 1.5rem) var(--space-3, 0.75rem);
    }
}