/* ==========================================================================
   COMPONENT: section-header
   --------------------------------------------------------------------------
   Logo + title + optional subtitle. Sits at the top of nearly every section
   on the site. Defaults to LEFT-aligned on desktop, CENTERED on mobile.
   Surface-aware: inherits text colors from .e-section--dark / --light.

   Markup contract (see _Hero.cshtml partial):
     <header class="e-section-header">
         <img class="e-section-header__logo" src="..." alt="eesier" />
         <div class="e-section-header__text">
             <h2 class="e-section-header__title">...</h2>
             <p  class="e-section-header__subtitle">...</p>
         </div>
     </header>

   Variants:
     .e-section-header--center      always center, regardless of breakpoint
     .e-section-header--with-margin marginBottom 50px (default)
   ========================================================================== */

/* Mirror of legacy `.conheca-header-with-logo` (components.css 736-753) +
   `.section-header` + `.section-title` + `.section-subtitle` (373-398).
   Always-column flex, centered, 25px gap, 50px bottom margin. The legacy
   site renders this exact layout on every section header; the partial that
   composes it stays in this single CSS rule for fidelity. */

.e-section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    margin-bottom: 50px;
    text-align: center;
}

.e-section-header__logo {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.e-section-header__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

.e-section-header__title {
    font-size: 32px;
    font-weight: var(--e-font-weight-bold);
    color: var(--e-color-primary);
    letter-spacing: var(--e-tracking-tight);
    line-height: 1.2;
    margin: 0;
}

.e-section-header__title .text-secondary,
.e-section-header__title .e-text-secondary {
    color: var(--e-color-secondary);
}

.e-section-header__subtitle {
    font-size: 18px;
    color: var(--e-color-muted);
    line-height: 1.6;
    max-width: 600px;
    margin: 10px auto 0;
}


/* DARK SURFACE INHERITANCE
   Inside .e-section--dark, title flips to white and subtitle to muted-white.
   Mirrors `.faq-editorial .section-header .section-title` etc. */

.e-section--dark .e-section-header__title {
    color: rgba(255, 255, 255, 0.95);
}

.e-section--dark .e-section-header__subtitle {
    color: rgba(255, 255, 255, 0.4);
}


/* CENTER VARIANT — alias only; default is already centered to match legacy. */

.e-section-header--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.e-section-header--center .e-section-header__text {
    align-items: center;
    text-align: center;
}