// ==========================================================================
// Expertise Page Layout Styles ("Savoir-faire")
// Hero + intro (fixed mountain-mask bg), sticky-image expertise list,
// and a dark "Patrimoine" band with a mountain-mask top edge.
// BEM Methodology: .expertise-page (Block) → .expertise-page__element
// ==========================================================================

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

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

// --------------------------------------------------------------------------
// Element: .expertise-page__bg
// Fixed mountain-mask background, color interpolated by assets/expertise.ts
// (GSAP ScrollTrigger, 3 stops: beige-light → beige → $color-primary as the
// user scrolls past the dark Patrimoine section).
// --------------------------------------------------------------------------
.expertise-page__bg {
    @include fixed-mountain-bg('../../images/actualite-mountain-mask-v2.svg', $color-primary-lighter, 60vh);
}

// --------------------------------------------------------------------------
// Block: .expertise-intro
// --------------------------------------------------------------------------
.expertise-intro {
    max-width: $breakpoint-blog;
    margin: 0 auto calc(#{$spacing-xl} * 2) auto;
    text-align: center;
}

.expertise-intro__title {
    font-family: $font-family-serif;
    font-size: $font-size-h2;
    font-weight: 400;
    margin: 0 0 $spacing-md 0;
    color: $color-primary-dark;

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

.expertise-intro__text {
    font-family: $font-family-sans;
    font-size: $font-size-base;
    line-height: $line-height-base;
    color: $color-primary-dark;
    max-width: calc(#{$breakpoint-blog} / 2);
    margin: 0 auto;
}

// --------------------------------------------------------------------------
// Block: .expertise-list
// Moved to components/_expertise-list.scss (imported directly in
// assets/expertise.ts), matching the components/_expertise-list.html.twig
// extraction.
// --------------------------------------------------------------------------

// --------------------------------------------------------------------------
// Block: .expertise-item
// One "Savoir-faire" item — title/subtitle/rich text + bottom divider line.
// --------------------------------------------------------------------------
.expertise-item {
    padding: $spacing-xl 0;

    &:first-child {
        padding-top: 0;
    }
}

.expertise-item__title {
    font-family: $font-family-serif;
    font-size: $font-size-h3;
    font-weight: 400;
    margin: 0 0 $spacing-xs 0;
    color: $color-primary-dark;
}

.expertise-item__subtitle {
    font-family: $font-family-sans;
    font-size: $font-size-lg;
    color: $color-primary-dark;
    margin: 0 0 $spacing-sm 0;
}

.expertise-item__body {
    font-family: $font-family-sans;
    font-size: $font-size-base;
    line-height: $line-height-base;
    color: $color-primary-dark;
}

.expertise-item__divider {
    display: block;
    width: 100%;
    height: 1px;
    background-color: $color-primary-dark;
    margin-bottom: $spacing-lg;
}

// --------------------------------------------------------------------------
// Modifier: .expertise-page--edit-mode
// Same dashed-outline affordance convention as .actualite-page--edit-mode.
// --------------------------------------------------------------------------
.expertise-page--edit-mode {
    .page-hero__title,
    .expertise-intro__title,
    .expertise-intro__text,
    .expertise-item__title,
    .expertise-item__subtitle,
    .expertise-item__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;
            }
        }
    }
}