// ==========================================================================
// Actualité Hub Page Layout Styles
// Grid of published "actualite" pages + client-side tag filter pills.
// BEM Methodology: .actualite-hub-page (Block) → .actualite-hub-page__element
//
// NOTE: this is placeholder/minimal styling only, sufficient to make the grid,
// filter pills, and responsive column counts functional. Exact spacing,
// typography, and pill visual design are pending Figma extraction — see
// spec-driven-development/2026-07-11-actualite-hub-page-template.md
// (node-id=143-1125). The scss-component-integrator design pass should
// replace/refine these values, not just add to them.
// ==========================================================================

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

.actualite-hub-page {
    width: 100%;
    margin-bottom: 120px;
}

// --------------------------------------------------------------------------
// Element: .actualite-hub-page__filter (tag filter pill bar)
// --------------------------------------------------------------------------
.actualite-hub-page__filter {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-xs;

    // Story requires pills to remain accessible/readable on mobile (wrap or
    // horizontal scroll) - wrap is the placeholder default here.
    @media (max-width: #{$breakpoint-md - 1px}) {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

// Filter pill visual style moved to reusable .tag component (see
// assets/styles/components/_tag.scss and templates/components/_tag.html.twig).

// --------------------------------------------------------------------------
// Element: .actualite-hub-page__grid
// Responsive columns: 3 desktop (>=1024px per story) / 2 tablet / 1 mobile.
// Uses project's $breakpoint-lg (992px) as the closest existing token; if the
// design system needs an exact 1024px breakpoint, introduce it during the
// SCSS polish pass rather than hand-rolling an ad hoc value here.
// --------------------------------------------------------------------------
.actualite-hub-page__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: $spacing-lg;
    transition: height 0.3s ease-in-out;
    margin-top: $spacing-lg;

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

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

// Card element styles (.actualite-hub-page__card*) moved to
// assets/styles/components/_actualite_hub_card.scss (see
// templates/components/_actualite_hub_card.html.twig).

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

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