/* ====================================
   VELORA EDITORIAL HEADINGS SYSTEM
   Chapter title pattern: eyebrow + serif heading + optional subline
   ==================================== */

/* ========================================
   EDITORIAL SECTION TITLE
   Chapter title pattern for all pages
   ======================================== */

.editorial-heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    margin-bottom: var(--space-8, 2rem);
}

/* Eyebrow - quiet label above */
.editorial-eyebrow {
    font-family: var(--font-sans, 'Source Sans 3', sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest, 0.1em);
    color: var(--velora-text-muted, #808080);
    margin-bottom: var(--space-2, 0.5rem);
    display: block;
}

[data-theme="dark"] .editorial-eyebrow {
    color: var(--velora-text-muted, #B3B3B3);
}

/* Main heading - expressive serif */
.editorial-heading-title {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--font-bold, 700);
    line-height: var(--leading-tight, 1.25);
    letter-spacing: var(--tracking-tight, -0.025em);
    color: var(--velora-text-primary, #1A1A1A);
    margin: 0;
}

[data-theme="dark"] .editorial-heading-title {
    color: var(--velora-text-primary, #FFFFFF);
}

/* Optional reflective subline */
.editorial-heading-subline {
    font-family: var(--font-sans, 'Source Sans 3', sans-serif);
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--font-normal, 400);
    line-height: var(--leading-relaxed, 1.8);
    color: var(--velora-text-secondary, #4A4A4A);
    margin-top: var(--space-2, 0.5rem);
    max-width: 65ch;
}

[data-theme="dark"] .editorial-heading-subline {
    color: var(--velora-text-secondary, #B3B3B3);
}

/* ========================================
   SECTION TITLE VARIANTS
   Different contexts for editorial headings
   ======================================== */

/* Centered variant */
.editorial-heading--centered {
    text-align: center;
    align-items: center;
}

.editorial-heading--centered .editorial-heading-subline {
    margin-left: auto;
    margin-right: auto;
}

/* Left-aligned variant (default) */
.editorial-heading--left {
    text-align: left;
    align-items: flex-start;
}

/* ========================================
   INTEGRATION WITH EXISTING COMPONENTS
   ======================================== */

/* Apply to existing section titles */
.section-title {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--font-bold, 700);
    line-height: var(--leading-tight, 1.25);
    letter-spacing: var(--tracking-tight, -0.025em);
}

/* Page titles can use editorial pattern */
.page-title {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--font-bold, 700);
    line-height: var(--leading-tight, 1.25);
    letter-spacing: var(--tracking-tight, -0.025em);
}

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

@media (max-width: 768px) {
    .editorial-heading-title {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
    }
    
    .editorial-heading-subline {
        font-size: var(--text-base, 1rem);
    }
}

@media (max-width: 480px) {
    .editorial-heading-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
    
    .editorial-eyebrow {
        font-size: var(--text-xs, 0.75rem);
    }
}