// ==========================================================================
// Projects List Page Layout Styles
// Grid of project_detail pages + client-side single-select category filter
// pills. BEM Methodology: .projects-list-page (Block) → .projects-list-page__element
//
// Follows the same structure as assets/styles/pages/_actualite_hub.scss
// (page-hero + filter pills + responsive card grid + empty state), swapping
// the multi-tag OR filter for a single-category filter since a project has
// exactly one category (haute-altitude / station / village).
// ==========================================================================

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

.projects-list-page {
    width: 100%;
}

// --------------------------------------------------------------------------
// Element: .projects-list-page__filter (category filter pill bar)
// --------------------------------------------------------------------------
.projects-list-page__filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: $spacing-xs;

    @media (max-width: #{$breakpoint-md - 1px}) {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

// --------------------------------------------------------------------------
// Element: .projects-list-page__grid
// Responsive columns: 2 desktop / 2 tablet / 1 mobile — wider than the
// actualite hub's 3-col grid since project-card items are meant to read as
// large showcase visuals. The right-hand column is staggered down to match
// the Figma masonry-style layout (mockup: node 405-525).
// --------------------------------------------------------------------------
.projects-list-page__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    align-items: start; // let each card keep its own aspect-ratio height instead of stretching to match its row — otherwise the .is-offset margin-top gets absorbed into the row track and the zig-zag disappears
    gap: $spacing-xl;
    transition: height 0.3s ease-in-out;
    margin-top: $spacing-xl;
    margin-bottom: $spacing-xl;

    @media (min-width: $breakpoint-md) {
        grid-template-columns: repeat(2, 1fr);
        column-gap: $spacing-xxl;
        row-gap: $spacing-xl;
    }

    .project-card {
        // Override the component's carousel sizing (fixed height + flex
        // auto-width): here the card is a grid item and must fill its
        // column, with height following from the 3/2 aspect-ratio instead.
        width: 100%;
        height: auto;

        // .project-card's decorative crosshair mark (::before/::after, see
        // _project-card.scss) defaults to a light beige tint meant for cards
        // sitting over a darker background (e.g. home page). On this page's
        // light beige background the marks are invisible at that opacity —
        // darken them here.
        &::before,
        &::after {
            background: color-mix(in srgb, $color-primary 50%, transparent);
        }

        &:nth-of-type(even) {
            margin-top: $spacing-xl;
        }
    }
}

// --------------------------------------------------------------------------
// Element: .projects-list-page__empty-state
// --------------------------------------------------------------------------
.projects-list-page__empty-state {
    text-align: center;
    padding: $spacing-lg;

    &.is-hidden {
        display: none;
    }
}