// ==========================================================================
// Actualité Page Layout Styles
// News/article page template: header (title + tags), hero image, content
// blocks, and related-posts footer.
// BEM Methodology: .actualite-page (Block) → .actualite-page__element
// ==========================================================================

@use '../base/variables' as *;
@use '../base/mixins' as *;

// Local typography token: 36px title doesn't exist in the shared heading
// scale ($font-size-h2 is 40px) - see also _actualite-block.scss.
$actualite-title-size: 36px;

// --------------------------------------------------------------------------
// Block: .actualite-page
// --------------------------------------------------------------------------
.actualite-page {
    width: 100%;
    position: relative;
    z-index: 1;
}

// --------------------------------------------------------------------------
// Element: .actualite-page__bg
// Fixed mountain-mask background, color interpolated $color-primary-lighter →
// $color-neutral on scroll by assets/actualite.ts (GSAP ScrollTrigger).
// Starts at viewport mid-height down to viewport bottom.
// --------------------------------------------------------------------------
.actualite-page__bg {
    @include fixed-mountain-bg('../../images/actualite-mountain-mask-v2.svg', $color-primary-lighter);
}

// --------------------------------------------------------------------------
// Element: .actualite-page__hero-image
// --------------------------------------------------------------------------
.actualite-page__hero-image {
    width: 100%;
    overflow: hidden;
    margin-bottom: $spacing-lg;

    // Torn/wavy bottom edge, inverted: full solid mask XOR'd with the svg
    // strip (34px, bottom) — pixels where both masks overlap cancel out, so
    // the shape cut is the inverse of the raw svg silhouette.
    -webkit-mask-image: linear-gradient(#000, #000), url("../../images/mask-news-main-image.svg");
    mask-image: linear-gradient(#000, #000), url("../../images/mask-news-main-image.svg");
    -webkit-mask-size: 100% 100%, 100% 80px;
    mask-size: 100% 100%, 100% 80px;
    -webkit-mask-position: top center, bottom center;
    mask-position: top center, bottom center;
    -webkit-mask-repeat: no-repeat, repeat-x;
    mask-repeat: no-repeat, repeat-x;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

// --------------------------------------------------------------------------
// Element: .actualite-page__hero-img
// --------------------------------------------------------------------------
.actualite-page__hero-img {
    width: 100%;
    height: auto;
    max-height: 645px;
    object-fit: cover;
    display: block;
}

.actualite-page__hero-img--placeholder {
    height: 400px;
    background-color: rgba(0, 0, 0, 0.08);
}

// --------------------------------------------------------------------------
// Element: .actualite-page__blocks
// --------------------------------------------------------------------------
.actualite-page__blocks {
    display: flex;
    flex-direction: column;
    max-width: $breakpoint-blog;
    margin-left: auto;
    margin-right: auto;
}

// --------------------------------------------------------------------------
// Modifier: .actualite-page--edit-mode
// --------------------------------------------------------------------------
.actualite-page--edit-mode {
    .page-hero__title,
    .actualite-block__title,
    .actualite-block__subtitle,
    .actualite-block__body {
        position: relative;

        &[data-editable="true"] {
            outline: 1px dashed color-mix(in srgb, $color-primary 30%, transparent);
            outline-offset: 4px;
            transition: outline-color 0.2s ease;

            &:hover {
                outline-color: $color-primary;
            }
        }
    }
}

// ==========================================================================
// Related posts footer ("Autres news à découvrir")
// BEM Methodology: .actualite-related (Block) → .actualite-related__element
// ==========================================================================

.actualite-related {
    background-color: $color-primary;
    padding: 0 $spacing-md $footer-mask-height $spacing-md;
    position: relative;
    margin-top: $footer-mask-height;

    @media (min-width: $breakpoint-md) {
        padding: 0 $spacing-lg $footer-mask-height $spacing-lg;
    }

    &:before {
        @include mountain-mask-top-edge('../../images/footer-mountain-mask.svg', $color-primary, $footer-mask-height);
    }
}

.actualite-related__title {
    font-family: $font-family-serif;
    font-size: $actualite-title-size;
    color: $color-light;
    font-weight: 400;
    text-align: center;
    margin: 0 0 $spacing-lg 0;

    @media (max-width: $breakpoint-md) {
        font-size: $font-size-h3;
    }
}

.actualite-related__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: $spacing-lg;

    @media (min-width: $breakpoint-md) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.actualite-related__card {
    display: flex;
    flex-direction: column;
    gap: $spacing-sm;
    text-decoration: none;
    color: inherit;
}

.actualite-related__card-image {
    width: 100%;
    height: 220px;
    border-radius: $radius-md;
    overflow: hidden;
    background-color: color-mix(in srgb, $color-light 10%, transparent);
}

.actualite-related__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;

    .actualite-related__card:hover & {
        transform: scale(1.03);
    }
}

.actualite-related__card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-xs;
}

.actualite-related__card-date {
    font-family: $font-family-sans;
    font-size: 14px;
    color: color-mix(in srgb, $color-light 70%, transparent);
}

.actualite-related__card-headline {
    font-family: $font-family-sans;
    font-size: $font-size-h4;
    font-weight: 700;
    color: $color-light;
    margin: 0;
    line-height: 1.3;
}

.actualite-related__card-divider {
    width: 100%;
    height: 1px;
    background-color: color-mix(in srgb, $color-light 20%, transparent);
    margin-top: $spacing-xs;
}