/* ============================================================================
   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
     nth-of-type est donc stable.
   ============================================================================ */

/* --- 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;
}

.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 : cartes PAIRES = panneau navy (texte clair), image à droite. */
.actu-card:nth-of-type(even):not(.actu-card--featured) {
  flex-direction: row-reverse;
}
.actu-card:nth-of-type(even):not(.actu-card--featured) .actu-card-content {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
}
.actu-card:nth-of-type(even):not(.actu-card--featured) .actu-card-title { color: #ffffff; }
.actu-card:nth-of-type(even):not(.actu-card--featured) .actu-card-excerpt { color: rgba(255, 255, 255, 0.8); }
.actu-card:nth-of-type(even):not(.actu-card--featured) .actu-card-category { color: var(--gold-400); }
.actu-card:nth-of-type(even):not(.actu-card--featured) .actu-card-date { color: rgba(255, 255, 255, 0.65); }
.actu-card:nth-of-type(even):not(.actu-card--featured) .actu-card-link,
.actu-card:nth-of-type(even):not(.actu-card--featured) .actu-card-link span { color: var(--gold-400); }

/* Alternance : cartes IMPAIRES (hors vedette) = panneau cream, image à gauche. */
.actu-card:nth-of-type(odd):not(.actu-card--featured) .actu-card-content {
  background: var(--cream-100);
}

/* --- 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:nth-of-type(even):not(.actu-card--featured) {
    flex-direction: column;
  }
  .actu-card:not(.actu-card--featured) .actu-card-image {
    width: 100%;
    height: 170px;
    min-height: 0;
  }
}

/* --- Production : seul l'article « à la une » est publié --------------------
   Les deux autres cartes (adhésion « Rejoignez le CAP » + « Afterwork ») sont
   du contenu de démonstration, masquées en prod via body[data-env="production"]
   (posé par env.js au boot). En staging/local, la mosaïque complète reste
   visible. Quand il ne reste que la vedette, la grille repasse sur une colonne
   pleine largeur pour éviter une colonne droite vide. */
body[data-env="production"] .actu-card[onclick*="article-adhesion"],
body[data-env="production"] .actu-card[onclick*="article-afterwork"] {
  display: none;
}
body[data-env="production"] .actu-grid {
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
}
body[data-env="production"] .actu-card--featured {
  grid-row: auto;
  min-height: 380px;
}