/* =============================================================================
   BootHack Canonical Hero Module
   Unified Component Stylesheet
============================================================================= */


/* =============================================================================
   1. CORE STRUCTURE & BLEED
============================================================================= */

.bh-header {
    position: relative;
    overflow: hidden;
}

.bh-header--hero {
    min-height: clamp(420px, 60vh, 800px);
    display: flex;
    align-items: center;
}

.bh-header__inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Background Bleed (Crucial for Parallax bounds) */
.bh-header__bg {
    position: absolute;
    top: -25%;
    left: 0;
    width: 100%;
    height: 150%;
    z-index: -2;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Base hardware acceleration before parallax hooks in */
    transform: translate3d(0, 0, 0) scale(1.08);
    will-change: transform;
}

/* Gradient Overlay for Text Legibility */
.bh-header--hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.25) 0%,
        rgba(0,0,0,.35) 40%,
        rgba(0,0,0,.55) 100%
    );

    pointer-events: none;
}


/* =============================================================================
   2. LAYOUT VARIATIONS (Full Screen Landing)
============================================================================= */

.bh-header--landing {
    min-height: 100vh;
    padding: 0;
}

/* Optional isolated container for text on landing pages */
.bh-header__content--overlay {
    padding: 30px 40px;
    border-radius: 10px;
    display: inline-block;
    max-width: 800px;
    position: relative;
    z-index: 2;
}


/* =============================================================================
   3. TYPOGRAPHY & SPACING
============================================================================= */

.bh-header__content {
    position: relative;
    text-align: center;
}

.bh-header__title {
    margin-bottom: 1rem;
}

/*
 * Part-work series hero — hero-context-only overrides
 * (boothack-post-series 4.9.0+).
 *
 * The base styling for `.bh-header__series-title`, `.bh-header__part-title`,
 * `.bh-header__series-link`, and `.bh-header__part-title-text` lives in
 * content.css so it applies uniformly to both the hero header and the
 * standard header (the latter is used when the hero is suppressed —
 * featured-image absent, hero-mod off, etc.). The two rules below are
 * specific to the hero context:
 *
 * 1. `align-items: center` mirrors the hero's `text-align: center`
 *    on the surrounding content block (column stack: chip above title).
 *    The standard header is left-aligned so it keeps `flex-start` —
 *    hence the hero scoping here rather than a base rule.
 * 2. `text-shadow: none` on the chip protects its small label text
 *    from the hero's `.bh-text-shadow` (which cascades to descendants
 *    and turns the chip-on-solid-background text to mush). Standard
 *    headers don't apply a shadow at all, so this opt-out is hero-only.
 */
.bh-header--hero .bh-header__part-title {
    align-items: center;
}

.bh-header .bh-series-chip {
    text-shadow: none;
    flex-shrink: 0;
}

/*
 * Series-membership badge inside the hero — opt out of `.bh-text-shadow`
 * (which would blur the small label against its solid background) and
 * give the pill a soft outer glow so it keeps definition over the
 * widest possible range of hero photos. The base `.bh-series-badge`
 * styling lives in content.css; these are the hero-context tweaks
 * layered on top.
 */
.bh-header .bh-series-badge {
    text-shadow: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.18);
}

.bh-header__tagline {
    margin-top: .5rem;
    margin-bottom: 1rem;
    opacity: .9;
}

.bh-header__meta {
    margin-top: 1rem;
}

.bh-header__category {
    margin-top: 1.25rem;
}

.bh-header__cta {
    margin-top: 1.5rem;
}


/* =============================================================================
   4. BYLINE & AUTHOR META
============================================================================= */

.bh-byline {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    max-width: 100%;
    text-align: left;
}

.bh-byline__avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.bh-byline__author {
    font-weight: 600;
    margin: 0;
}

.bh-byline__author a {
    text-decoration: none;
    color: inherit;
    transition: opacity .2s ease;
}

.bh-byline__author a:hover {
    opacity: .75;
}

.bh-byline__meta {
    font-size: .9rem;
    opacity: .9;
}

.bh-byline__sep {
    margin: 0 .5rem;
}

.bh-byline__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}


/* =============================================================================
   5. ADAPTIVE GLASS SYSTEM
============================================================================= */

/* Base Glass Effect */
.bh-header--hero .bh-byline {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    background: rgba(255,255,255,.12);
    border-radius: 16px;
    padding: .8rem 1.25rem;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -1px 0 rgba(0,0,0,.08),
        0 4px 20px rgba(0,0,0,.25);
}

/* Modifiers for Light vs Dark Text Modes */
.text-dark .bh-byline,
.bh-text-dark .bh-byline,
.bh-hero-text-dark .bh-byline {
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    background: rgba(255,255,255,.18);
}

.text-white .bh-byline,
.bh-hero-text-light .bh-byline {
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    background: rgba(0,0,0,.08);
    border-color: rgba(0,0,0,.12);
}


/* =============================================================================
   6. PARALLAX MOTION SUPPORTS
============================================================================= */

/* JS requestAnimationFrame handles smooth interpolation. 
   Do NOT add CSS transitions here or they will cause scroll jitter. */
[data-parallax="true"] .bh-header__bg {
    will-change: transform;
}

/* Accessibility: Stop motion if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-parallax="true"] .bh-header__bg {
        transform: none !important;
        transition: none !important;
    }
}


/* =============================================================================
   7. RESPONSIVE REFINEMENTS
============================================================================= */

@media (max-width: 768px) {
    .bh-header--hero {
        min-height: 420px;
    }

    .bh-header__content--overlay {
        padding: 20px 24px;
        max-width: 90%;
    }

    .bh-byline {
        flex-direction: column;
        text-align: center;
    }

    .bh-byline__content {
        text-align: center;
    }
}