{#
    Home "mountain" section — shared markup for the 3 brown bands on the
    homepage: Haute altitude / Station / Village. Each shows a small
    decorative skyline scene, a giant faded watermark title, and a pair of
    project cards.

    The scene illustration bridges into the PREVIOUS section: that section
    reserves bottom padding equal to the scene's height, and the scene wrap
    sits at the top of this section with a matching negative margin-top, so
    it visually floats over the seam between the two backgrounds. The wrap
    is a fixed-height, full-bleed, overflow-hidden crop window — the image
    itself is sized by height only (its own aspect ratio drives the width),
    so it's centered and cropped by the wrap rather than stretched to fit
    the viewport width.

    Params:
    - modifier (string): 'haute-altitude' | 'station' | 'village' — BEM modifier and section id.
      Maps to the decorative scene's filename prefix via `sceneNumber` below
      (assets/images/home/{sceneNumber}-ete.svg / {sceneNumber}-hiver.svg); both
      variants render and CSS shows the one matching the current site theme
      (see [data-theme] rules in _home.scss / ThemeToggle.ts)
    - defaultTitle (string)
    - defaultAltitude (string)
    - section (HomePageSectionModel|null): contentModel.sections entry matching `modifier`
    - recentProjects (array): data.recentProjectsByCategory[modifier] — up to 2
      {title, subtitle, tags, imagePath, href}, most recently created project_detail
      pages tagged with this category (see HomePageEnricher::resolveRecentProjectsByCategory())
    - editMode (bool)
#}
{% set fields = section ? section.fields : null %}
{% set sceneNumber = {'haute-altitude': '01', 'station': '02', 'village': '03'}[modifier] %}

<section class="home-mountain home-mountain--{{ modifier }}" data-section="{{ modifier }}" data-altitude="{{ fields.altitude|default(defaultAltitude) }}">
    <div class="home-mountain__scene-wrap" aria-hidden="true">
        <img src="{{ asset('build/images/home/' ~ sceneNumber ~ '-ete.svg') }}" alt="" class="home-mountain__scene home-mountain__scene--ete">
        <img src="{{ asset('build/images/home/' ~ sceneNumber ~ '-hiver.svg') }}" alt="" class="home-mountain__scene home-mountain__scene--hiver">
    </div>

    <div class="home-mountain__pin">
        <h2 class="home-mountain__title"{% if editMode|default(false) %}
            data-editable="true"
            data-editor-type="simple"
            data-section-id="{{ modifier }}"
            data-field="title"{% endif %}>
            {{ fields.title|default(defaultTitle) }}
        </h2>

        {% if recentProjects|default([]) is not empty %}
            <div class="home-mountain__cards-viewport">
                <div class="home-mountain__cards" data-horizontal-track>
                    {% for project in recentProjects %}
                        {% include 'components/_project-card.html.twig' with {
                            imagePath: project.imagePath,
                            imageDarkPath: project.imageDarkPath,
                            imageFrame: project.imageFrame,
                            imageDarkFrame: project.imageDarkFrame,
                            title: project.title,
                            subtitle: project.subtitle,
                            tags: project.tags,
                            href: project.href
                        } %}
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    </div>
</section>