/*
 * Copie vendored depuis 4runners-hub `packages/editorial-css` v1.2.0.
 * Source unique : ne pas éditer ici. Resynchroniser en recopiant le fichier
 * du Hub quand le package bouge.
 *
 * @4runners/editorial-css — CSS structurel partagé pour les blocs éditoriaux
 *
 * Ce fichier définit UNIQUEMENT les layouts, espacements et responsive des
 * blocs produits par le Hub website-editorial (classes `block-*`).
 *
 * Il NE définit PAS :
 * - les polices (font-family, font-size, font-weight)
 * - les couleurs (color, background)
 * - les bordures et radius (à charge du design system de la destination)
 *
 * Chaque destination (Astro, WordPress, ...) override ces aspects via son
 * propre CSS pour matcher sa charte graphique.
 *
 * Classes documentées :
 *   - block-image          : image standalone avec figure/figcaption
 *   - block-media          : image + texte côte à côte (left/right)
 *   - block-gallery        : galerie 2/3/4 colonnes
 *   - block-embed          : wrapper iframe responsive (YouTube, Vimeo, ...)
 *   - block-columns        : colonnes fixes 2/3/4 (V1.1)
 *   - block-column         : une colonne (V1.1)
 *   - block-button         : appel à l'action (V1.1)
 *
 * Contrainte de dégradation (V1.1) : ce fichier est déployé SÉPARÉMENT sur
 * chaque destination. Un site client pas encore redéployé doit rester lisible.
 * Tout bloc doit donc avoir un rendu acceptable SANS ce CSS : les colonnes
 * retombent en flux bloc (des <div> empilés), le bouton reste un <a> cliquable.
 * Ne jamais introduire un bloc dont le HTML nu est inutilisable.
 *
 * PRD : 2026-05-11-editorial-blocks-v1
 */

/* ============================================================================
 * Image standalone (avec ou sans caption)
 * ============================================================================ */

.block-image {
  margin: 1.5rem 0;
  text-align: center;
}

.block-image img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

.block-image figcaption {
  margin-top: 0.5rem;
  font-size: 0.875em;
  font-style: italic;
  opacity: 0.75;
}

/* ============================================================================
 * Media block : image + zone de contenu côte à côte
 * ============================================================================ */

.block-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  margin: 2rem 0;
}

.block-media > figure {
  margin: 0;
}

.block-media img {
  width: 100%;
  height: auto;
  display: block;
}

.block-media figcaption {
  margin-top: 0.5rem;
  font-size: 0.875em;
  font-style: italic;
  opacity: 0.75;
}

.block-media__content > * + * {
  margin-top: 0.75rem;
}

.block-media__content > *:first-child {
  margin-top: 0;
}

/* Inversion image droite : on swap les colonnes via order
 * Compatible avec tous les navigateurs modernes (sans hack RTL). */
.block-media--right > figure {
  order: 2;
}

/* Responsive : stack en mobile */
@media (max-width: 768px) {
  .block-media {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .block-media--right > figure {
    order: 0;
  }
}

/* ============================================================================
 * Gallery 2/3/4 colonnes
 * ============================================================================ */

.block-gallery {
  display: grid;
  gap: 1rem;
  margin: 2rem 0;
}

.block-gallery--2cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.block-gallery--3cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.block-gallery--4cols {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.block-gallery > figure {
  margin: 0;
}

.block-gallery img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.block-gallery figcaption {
  margin-top: 0.5rem;
  font-size: 0.875em;
  font-style: italic;
  opacity: 0.75;
}

/* Responsive : 3/4 cols → 2 cols en tablet, 1 col en mobile */
@media (max-width: 1024px) {
  .block-gallery--3cols,
  .block-gallery--4cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .block-gallery {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================================
 * Colonnes fixes (V1.1)
 *
 * Sans ce CSS, les .block-column sont des <div> empilés : lisible, juste pas
 * en colonnes. C'est la dégradation voulue.
 * ============================================================================ */

.block-columns {
  display: grid;
  gap: 1.5rem;
  margin: 2rem 0;
  align-items: start;
}

.block-columns--2cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.block-columns--3cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.block-columns--4cols {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.block-column > * + * {
  margin-top: 1rem;
}

.block-column > *:first-child {
  margin-top: 0;
}

/* Responsive : 3/4 cols → 2 cols en tablet, tout en 1 col en mobile.
   Aligné sur les seuils déjà utilisés par .block-gallery. */
@media (max-width: 1024px) {
  .block-columns--3cols,
  .block-columns--4cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .block-columns--2cols,
  .block-columns--3cols,
  .block-columns--4cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================================
 * Bouton / appel à l'action (V1.1)
 *
 * Structure uniquement : pas de couleur, pas de police, pas de radius — la
 * destination les fournit. Sans ce CSS, .block-button reste un lien inline
 * parfaitement cliquable.
 * ============================================================================ */

.block-button {
  display: inline-block;
  margin: 1rem 0;
  padding: 0.75rem 1.5rem;
  text-align: center;
  text-decoration: none;
}

/* Fallback d'un bouton dont l'URL a été rejetée à la publication : le libellé
   est conservé en paragraphe, jamais un <a> mort. */
.block-button-fallback {
  margin: 1rem 0;
}

/* ============================================================================
 * Embeds (YouTube, Vimeo, etc.) — wrapper responsive 16/9
 * ============================================================================ */

.block-embed {
  position: relative;
  width: 100%;
  margin: 2rem 0;
  aspect-ratio: 16 / 9;
}

.block-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Variantes spécifiques (override possible côté destination) */
.block-embed--youtube,
.block-embed--vimeo {
  /* déjà 16/9 par défaut, défini pour clarté */
}