/* ============================================================================
   22-actu-mosaique.css — Mise en page mosaïque des actualités
   ----------------------------------------------------------------------------
   Chargé en dernier → surcharge .actu-grid / .actu-card de 03-public.css.

   - Carte VEDETTE (1er article, .actu-card--featured) : grande, en haut à
     gauche, image plein cadre + texte blanc en surimpression, ruban diagonal
     navy→doré « À la une » dans le coin.
   - Cartes secondaires : split image | panneau, en alternant un fond CREAM et
     un fond NAVY (texte clair), avec l'image alternée gauche/droite pour le
     rythme visuel.
   - Plus de barre de filtres : l'ordre des cartes est fixe. L'alternance
     cream/navy est posée en JS (applyArticleAlternation, public.js) sur les
     cartes RÉELLEMENT visibles, pour rester correcte même quand des articles
     sont masqués par date (visibilité « à J » en prod).
   ============================================================================ */

/* --- Grille mosaïque -------------------------------------------------------- */
.actu-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-auto-rows: 232px;
  gap: 1.25rem;
  grid-auto-flow: dense;
}

/* La vedette occupe la colonne large sur deux rangées (grand bloc haut-gauche). */
.actu-card--featured {
  grid-column: 1;
  grid-row: span 2;
}

/* --- Carte vedette : split image | panneau navy (texte à droite, séparé) ----- */
.actu-card--featured {
  display: flex;
  flex-direction: row;        /* image à gauche, texte à droite (comme les autres) */
  align-items: stretch;
  position: relative;         /* contexte de positionnement du ruban */
  overflow: hidden;           /* clippe le ruban diagonal au coin */
  border: none;
}

.actu-card--featured::before { display: none; } /* pas de liseré doré top */

.actu-card--featured .actu-card-image {
  width: 56%;
  height: auto;
  min-height: 100%;
  flex-shrink: 0;
}

.actu-card--featured .actu-card-content {
  flex: 1;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: #ffffff;
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.actu-card--featured .actu-card-title {
  color: #ffffff;
  font-size: 1.55rem;
  line-height: 1.2;
  -webkit-line-clamp: 4;
  min-height: 0;
}

.actu-card--featured .actu-card-excerpt {
  color: rgba(255, 255, 255, 0.85);
  -webkit-line-clamp: 3;
}
.actu-card--featured .actu-card-category { color: var(--gold-400); }
.actu-card--featured .actu-card-date { color: rgba(255, 255, 255, 0.7); }
.actu-card--featured .actu-card-link { color: var(--gold-400); }
.actu-card--featured .actu-card-link span { color: var(--gold-400); }

/* Plus de badge doré « Actualité / Événement » incrusté sur les images. */
.actu-card-badge { display: none; }

/* --- Ruban diagonal « À la une » (navy → doré) ------------------------------ */
.actu-featured-ribbon {
  position: absolute;
  top: 22px;
  left: -54px;
  transform: rotate(-45deg);
  background: var(--navy-950);
  color: var(--gold-400);
  padding: 0.4rem 4.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 5;
  box-shadow: 0 3px 10px rgba(1, 21, 45, 0.35);
  pointer-events: none;
}

/* --- Cartes secondaires : split image | panneau ----------------------------- */
.actu-card:not(.actu-card--featured) {
  flex-direction: row;
  align-items: stretch;
}

.actu-card:not(.actu-card--featured) .actu-card-image {
  width: 42%;
  height: auto;
  min-height: 100%;
  flex-shrink: 0;
}

.actu-card:not(.actu-card--featured) .actu-card-content {
  flex: 1;
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--cream-100); /* cream par défaut ; .actu-alt-navy surcharge */
}

.actu-card:not(.actu-card--featured) .actu-card-title {
  font-size: 1.15rem;
  line-height: 1.2;
}

.actu-card:not(.actu-card--featured) .actu-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Alternance cream / navy posée en JS (applyArticleAlternation, public.js) sur
   les cartes secondaires RÉELLEMENT visibles — et non via nth-of-type, qui
   compterait les cartes masquées par date et casserait le rythme en prod.
   1re carte secondaire visible = navy (texte clair, image à droite) ; la
   suivante reste cream (défaut, image à gauche) ; et ainsi de suite. */
.actu-card.actu-alt-navy:not(.actu-card--featured) {
  flex-direction: row-reverse;
}
.actu-card.actu-alt-navy:not(.actu-card--featured) .actu-card-content {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
}
.actu-card.actu-alt-navy:not(.actu-card--featured) .actu-card-title { color: #ffffff; }
.actu-card.actu-alt-navy:not(.actu-card--featured) .actu-card-excerpt { color: rgba(255, 255, 255, 0.8); }
.actu-card.actu-alt-navy:not(.actu-card--featured) .actu-card-category { color: var(--gold-400); }
.actu-card.actu-alt-navy:not(.actu-card--featured) .actu-card-date { color: rgba(255, 255, 255, 0.65); }
.actu-card.actu-alt-navy:not(.actu-card--featured) .actu-card-link,
.actu-card.actu-alt-navy:not(.actu-card--featured) .actu-card-link span { color: var(--gold-400); }

/* --- Responsive : empilement sur une colonne ------------------------------- */
@media (max-width: 768px) {
  .actu-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .actu-card--featured {
    grid-column: auto;
    grid-row: auto;
    flex-direction: column;
  }
  .actu-card--featured .actu-card-image {
    width: 100%;
    height: 200px;
    min-height: 0;
  }
  .actu-card:not(.actu-card--featured),
  .actu-card.actu-alt-navy:not(.actu-card--featured) {
    flex-direction: column;
  }
  .actu-card:not(.actu-card--featured) .actu-card-image {
    width: 100%;
    height: 170px;
    min-height: 0;
  }
}

/* --- Visibilité par date (« à J ») -----------------------------------------
   En PRODUCTION uniquement (logique dans hideFutureArticles() de public.js),
   les cartes dont la date de publication (data-date) n'est pas encore atteinte
   reçoivent .is-future-hidden et sont masquées ; elles apparaissent toutes
   seules le jour J. En staging/local, rien n'est masqué (aperçu complet des
   articles à venir). Remplace l'ancien masquage statique adhésion/afterwork. */
.actu-card.is-future-hidden {
  display: none;
}

/* Repli : si la colonne secondaire se retrouve vide (il ne reste que la
   vedette visible), la grille repasse en une seule colonne pleine largeur
   pour éviter une colonne droite vide. Classe posée par hideFutureArticles(). */
.actu-grid--single {
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
}
.actu-grid--single .actu-card--featured {
  grid-row: auto;
  min-height: 380px;
}