/**
 * Page Hero Component Styles
 * Contract: content_pages_contract.md A1
 * Used by: About page, News single
 * NOT used by: News archive (Contract v1.2)
 *
 * @package MG
 */

/* ========================================
   Scroll-leak prevention for 100vw gradient
   Hotfix v1.3 - minimal scope (html, body only)
   ======================================== */

/* Prefer overflow-x: clip (modern browsers) */
@supports (overflow-x: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

/* Fallback to hidden for older browsers */
@supports not (overflow-x: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

/* ========================================
   Page Hero Container
   Contract A1 + Visual Contract v1.0 + Hotfix v1.3
   ======================================== */

.page-hero {
    position: relative;
    z-index: 0; /* Hotfix v1.3: Establish stacking context for ::before z-index -1 */
    box-sizing: border-box; /* Visual Contract: prevent scroll leak with calc+margins */
    width: calc(100% - 40px); /* Visual Contract 1.3: Mobile framing */
    margin: 0 20px 40px; /* Visual Contract 1.3: Mobile margins */
    min-height: 400px; /* Contract A1: Mobile */
    border-radius: 10px; /* Visual Contract 1.4: Visual framing only */
    overflow: visible; /* Hotfix v1.3: CHANGED - Allow ::before gradient to bleed beyond card */
    background: transparent !important; /* Hotfix v1.3: Override inline style from PHP */
}

@media (min-width: 768px) {
    /* Contract A1 + Visual Contract 1.3: Tablet */
    .page-hero {
        width: calc(100% - 80px); /* Visual Contract: Tablet+ framing */
        margin: 0 40px 40px; /* Visual Contract: Tablet+ margins */
        min-height: 500px;
    }
}

@media (min-width: 1024px) {
    /* Contract A1: Desktop */
    .page-hero {
        min-height: 600px;
    }
}

/* ========================================
   Hero Full-Width Gradient Background Layer
   Hotfix v1.3
   ======================================== */

.page-hero::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(245,245,245,0.95) 100%);
    z-index: -1; /* Behind image (z-index: 0) and content (z-index: 2) */
}

/*
 * Fallback stacking strategy (if z-index: -1 not visible):
 * If gradient doesn't appear despite .page-hero { z-index: 0 }, use non-negative stacking:
 * - .page-hero::before { z-index: 0; }
 * - .page-hero__image-wrapper { z-index: 1; }
 * - .page-hero__content { z-index: 2; } (already set)
 */

/* ========================================
   Hero Image Background Layer
   Contract A1 + Hotfix v1.3
   ======================================== */

.page-hero__image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px; /* Hotfix v1.3: Clip image to rounded corners */
    overflow: hidden; /* Hotfix v1.3: Moved from .page-hero - clips image, not gradient */
    z-index: 0;
}

.page-hero__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ========================================
   Hero Content Layer
   Contract A1 + Visual Contract v1.0
   ======================================== */

.page-hero__content {
    position: absolute; /* Visual Contract 1.5: Bottom-left positioning */
    bottom: 0; /* Visual Contract 1.5: Anchor to bottom */
    z-index: 2;
    display: flex; /* Visual Contract: Container for title/subtitle stacking */
    flex-direction: column; /* Visual Contract: Vertical stacking */
    padding: 0 40px 40px; /* Visual Contract 1.5: Uniform padding all breakpoints */
}

/* ========================================
   Hero Title
   Contract A1 + Visual Contract v1.0
   ======================================== */

.page-hero__title {
    font-size: 32px; /* Contract A1: Mobile */
    line-height: 32px;
    font-weight: 300; /* Contract A1: Favorit light */
    letter-spacing: -0.04em;
    color: #fff; /* Contract A1: White text */
    margin: 0;
    /* Visual Contract 1.5: Left-aligned (inherits from flex parent) */
}

@media (min-width: 768px) {
    /* Contract A1: Tablet+ */
    .page-hero__title {
        font-size: 42px;
        line-height: 44px;
    }
}

/* ========================================
   Hero Subtitle (Optional - News Single Only)
   Contract Section 3.1 + Visual Contract v1.0
   ======================================== */

.page-hero__subtitle {
    font-size: 18px;
    line-height: 24px;
    font-weight: 300;
    color: #fff;
    margin: 16px 0 0;
    opacity: 0.9;
    /* Visual Contract 1.5: Left-aligned (inherits from flex parent) */
}

@media (min-width: 768px) {
    .page-hero__subtitle {
        font-size: 20px;
        line-height: 28px;
        margin-top: 20px;
    }
}