/* ============================================================
   Article List Mosaique - Styles v1.1.0
   ============================================================
   Toutes les variables de personnalisation sont regroupées
   dans :root ci-dessous. Pour adapter le plugin à un thème,
   il suffit de surcharger ces variables dans le CSS du thème
   enfant — aucune modification du plugin n'est nécessaire.
   ============================================================ */

:root {
  /* --- Couleurs ---
     --alm-color-primary pointe vers la variable du thème actif.
     Astra  : var(--ast-global-color-1)
     Elementor : var(--e-global-color-primary)
     Autre thème / valeur fixe : remplacez simplement la var() par votre valeur. */
  --alm-color-primary: var(--ast-global-color-1, #0073aa);

  /* Fond des zones claires (header de modal, fond de la modal) */
  --alm-color-bg: var(--ast-global-color-4, #ffffff);

  /* --- Rayons de bordure --- */
  --alm-radius-card:         5px;
  --alm-radius-header-block: 5px;
  --alm-radius-modal:        12px;
  --alm-radius-modal-image:  8px;

  /* --- Ombres --- */
  --alm-shadow-card:               0 3px 10px rgba(0, 0, 0, 0.5);
  --alm-shadow-card-hover:         0 8px 20px rgba(0, 0, 0, 0.7);
  --alm-shadow-header-block:       0 6px 20px rgba(0, 0, 0, 0.15);
  --alm-shadow-header-block-hover: 0 12px 30px rgba(0, 0, 0, 0.25);
  --alm-shadow-modal:              0 20px 60px rgba(0, 0, 0, 0.4);
  --alm-shadow-modal-image:        0 3px 10px rgba(0, 0, 0, 0.5);

  /* --- Overlay des cartes (dégradé sombre du bas vers le haut) ---
     Changez en rgba(255,255,255,...) pour un overlay clair sur fond foncé. */
  --alm-overlay-from:       rgba(0, 0, 0, 0.9);
  --alm-overlay-mid:        rgba(0, 0, 0, 0.7);
  --alm-overlay-from-hover: rgba(0, 0, 0, 0.95);
  --alm-overlay-mid-hover:  rgba(0, 0, 0, 0.8);

  /* Couleur du titre sur les cartes (blanc sur overlay sombre) */
  --alm-card-title-color: #ffffff;

  /* --- Modal : disposition en colonnes --- */
  --alm-modal-col-left-width: 35%;  /* Largeur de la colonne image */
  --alm-modal-col-gap:        25px; /* Espacement entre les colonnes */

  /* --- Modal : hauteur et z-index --- */
  --alm-modal-z-index:    99999;
  --alm-modal-max-height: 80vh;

  /* --- Grille mosaïque ---
     Alimentées par admin/mosaique-page.php (option alm_mosaique_settings),
     injectées en style inline sur .sly-alm-container par render_mosaique().
     Les valeurs ci-dessous sont les défauts (rendu identique si les
     réglages ne sont jamais modifiés). */
  --alm-columns-desktop: 15; /* Nombre de colonnes de la grille en desktop (> 992px) */
  --alm-columns-tablet:  10; /* Nombre de colonnes en tablette (768–992px)  */
  --alm-columns-mobile:  6;  /* Nombre de colonnes en mobile (< 768px)     */
  --alm-grid-gap:        8px; /* Espacement entre les cards */
  --alm-card-ratio:      1/2; /* Ratio largeur/hauteur des cards (et de leur image) */
  --alm-header-height:   200px; /* Hauteur mini du bandeau header_image */
}

/* ============================================================
   CONTENEUR PRINCIPAL
   ============================================================ */

.sly-alm-container {
  max-width: 100%;
  margin: 20px auto;
  padding: 0 20px;
}

.sly-alm-no-articles {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-style: italic;
  font-size: 16px;
}

/* ============================================================
   GRILLE MOSAÏQUE
   ============================================================ */

.sly-alm-mosaique-grid {
  display: grid;
  grid-template-columns: repeat(var(--alm-columns-desktop, 15), 1fr);
  gap: var(--alm-grid-gap, 8px);
  margin: 0 auto;
}

/* ============================================================
   BLOC HEADER
   ============================================================ */

.sly-alm-header-block {
  grid-column: span 3;
  grid-row: span 4;
  /* Hauteur calée sur 2 lignes de card (chaque card fait 1/2 large pour 1 haut,
     cf. .sly-alm-card aspect-ratio:1/2) plutôt que sur le contenu des rows
     voisines : évite que l'image se réduise quand peu d'articles sont présents.
     0.78 (et non 3/4 strict) car le ratio "pur largeur/hauteur en cards" ignore
     les 8px de gap absorbés dans ce span de 3 colonnes / 4 lignes — sans cet
     ajustement le bloc demande un peu plus de hauteur que les cards voisines
     n'en ont besoin, ce qui élargit visuellement leur gap interligne. */
  aspect-ratio: 0.78;
  border-radius: var(--alm-radius-header-block);
  overflow: hidden;
  box-shadow: var(--alm-shadow-header-block);
  position: relative;
  transition: all 0.3s ease;
  /* Décommentez pour ajouter une bordure colorée :
  border: 1px solid var(--alm-color-primary); */
  min-height: var(--alm-header-height, 200px);
}

.sly-alm-header-block:hover {
  transform: translateY(-4px);
  box-shadow: var(--alm-shadow-header-block-hover);
}

/* Seul background-image (dynamique, dépend du shortcode) reste en style
   inline PHP. background-size/repeat sont statiques et vivent ici. */
.sly-alm-header-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  text-align: center;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.sly-alm-header-title {
  color: var(--alm-color-primary);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 15px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1.3;
  width: 100%;
}

/* ============================================================
   CARTES ARTICLES
   ============================================================ */

.sly-alm-card {
  grid-column: span 1;
  grid-row: span 2;
  aspect-ratio: var(--alm-card-ratio, 1/2);
  cursor: pointer;
  border-radius: var(--alm-radius-card);
  overflow: hidden;
  background: #f5f5f5;
  box-shadow: var(--alm-shadow-card);
  transition: all 0.3s ease;
  position: relative;
}

.sly-alm-card:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: var(--alm-shadow-card-hover);
  z-index: 10;
}

.sly-alm-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.sly-alm-card-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}

.sly-alm-card:hover .sly-alm-card-image {
  transform: scale(1.1);
}

.sly-alm-card-no-image {
  background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sly-alm-no-image-icon {
  font-size: 32px;
  opacity: 0.3;
}

.sly-alm-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    var(--alm-overlay-from) 0%,
    var(--alm-overlay-mid) 60%,
    transparent 100%
  );
  padding: 12px 8px 8px;
  transition: all 0.3s ease;
}

.sly-alm-card:hover .sly-alm-card-overlay {
  background: linear-gradient(
    to top,
    var(--alm-overlay-from-hover) 0%,
    var(--alm-overlay-mid-hover) 70%,
    transparent 100%
  );
}

.sly-alm-card-title {
  color: var(--alm-card-title-color);
  font-size: 11px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ============================================================
   MODAL — OVERLAY & ANIMATIONS
   ============================================================ */

.sly-alm-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--alm-modal-z-index);
  animation: sly-alm-fade-in 0.3s ease;
  overflow-y: auto;
  padding: 20px;
}

.sly-alm-modal-overlay.sly-alm-active {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

@keyframes sly-alm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes sly-alm-slide-up {
  from { transform: translateY(50px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ============================================================
   MODAL — CONTENEUR PRINCIPAL
   ============================================================ */

/* Structure flex colonne pour que le body soit scrollable
   indépendamment du header (qui reste visible en sticky). */
.sly-alm-modal-content {
  background: var(--alm-color-bg);
  border-radius: var(--alm-radius-modal);
  max-width: 900px;
  width: 100%;
  max-height: var(--alm-modal-max-height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--alm-shadow-modal);
  animation: sly-alm-slide-up 0.3s ease;
  position: relative;
  margin: 0 auto;
}

.sly-alm-modal-header {
  position: sticky;
  top: 0;
  background: var(--alm-color-bg);
  padding: 25px 30px 15px;
  border-radius: var(--alm-radius-modal) var(--alm-radius-modal) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  flex-shrink: 0;
}

.sly-alm-modal-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--alm-color-primary);
  padding-right: 50px;
  line-height: 1.3;
}

.sly-alm-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 45px;
  height: 45px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  color: var(--alm-color-primary);
  font-size: 28px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sly-alm-modal-close:hover {
  background: var(--alm-color-primary);
  color: #ffffff;
  transform: rotate(90deg);
}

/* flex:1 + overflow-y:auto : le body prend tout l'espace restant
   et gère son propre scroll sans dépasser la modal. */
.sly-alm-modal-body {
  padding: 30px;
  overflow-y: auto;
  flex: 1;
}

.sly-alm-loading-message {
  text-align: center;
  padding: 60px 20px;
  color: var(--alm-color-primary);
  font-size: 18px;
  font-weight: 600;
}

/* ============================================================
   MODAL — BANDEAU HEADER (logo / titre de section)
   Affiché uniquement si le shortcode possède un header_image.
   ============================================================ */

.sly-alm-modal-header-info {
  margin-bottom: 25px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(0, 115, 170, 0.05) 0%, rgba(0, 115, 170, 0.02) 100%);
  border-radius: var(--alm-radius-modal-image);
  border-left: 2px solid var(--alm-color-primary);
  display: flex;
  align-items: center;
  gap: 20px;
}

.sly-alm-modal-header-image {
  max-width: 80px;
  max-height: 80px;
  object-fit: cover;
  border-radius: var(--alm-radius-modal-image);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sly-alm-modal-header-category {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--alm-color-primary);
  line-height: 1.5;
}

/* ============================================================
   MODAL — DISPOSITION EN COLONNES
   Image à gauche (--alm-modal-col-left-width), contenu à droite.
   Si l'article n'a pas d'image, la colonne gauche n'est pas rendue
   et le contenu occupe toute la largeur.
   ============================================================ */

.sly-alm-modal-wrapper {
  display: flex;
  gap: var(--alm-modal-col-gap);
  align-items: flex-start;
}

.sly-alm-modal-col-left {
  flex: 0 0 var(--alm-modal-col-left-width);
  max-width: var(--alm-modal-col-left-width);
}

.sly-alm-modal-col-right {
  flex: 1;
  min-width: 0; /* Empêche le débordement du texte */
}

/* ============================================================
   MODAL — IMAGE PRINCIPALE (colonne gauche)
   ============================================================ */

.sly-alm-modal-image {
  /* width/height en auto + max-width/max-height : le navigateur choisit la
     contrainte la plus restrictive et déduit l'autre dimension pour garder
     le ratio intact, sans recadrage ni étirement (object-fit ne sert à rien
     ici puisqu'aucune des deux dimensions n'est forcée indépendamment). */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 60vh;
  border-radius: var(--alm-radius-modal-image);
  display: block;
  margin: 0 auto;
  box-shadow: var(--alm-shadow-modal-image);
}

/* ============================================================
   MODAL — CONTENU TEXTE (colonne droite)
   ============================================================ */

.sly-alm-modal-content-text {
  font-size: 16px;
  color: #444;
  margin-bottom: 25px;
}

.sly-alm-modal-content-text p {
  margin-bottom: 15px;
}

.sly-alm-modal-content-text img {
  max-width: 100%;
  border-radius: var(--alm-radius-modal-image);
  margin: 10px 0;
}

.sly-alm-modal-content-text h1,
.sly-alm-modal-content-text h2,
.sly-alm-modal-content-text h3,
.sly-alm-modal-content-text h4 {
  color: var(--alm-color-primary);
  margin-top: 25px;
  margin-bottom: 15px;
}

/* ============================================================
   MODAL — MÉTADONNÉES
   Non affichées par défaut. Les données sont disponibles dans
   la réponse AJAX (data.author, data.date, data.permalink,
   data.categories, data.tags) pour une extension JS personnalisée.
   ============================================================ */

.sly-alm-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 14px;
  color: #666;
}

.sly-alm-modal-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sly-alm-modal-categories,
.sly-alm-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.sly-alm-modal-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.sly-alm-modal-category,
.sly-alm-modal-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: #f5f5f5;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sly-alm-modal-category:hover,
.sly-alm-modal-tag:hover {
  background: var(--alm-color-primary);
  color: #ffffff;
  transform: translateY(-2px);
}

/* ============================================================
   MODAL — FOOTER (lien vers l'article, optionnel)
   Pour activer : décommenter dans almRenderArticleModal (JS)
   et utiliser data.permalink.
   ============================================================ */

.sly-alm-modal-footer {
  padding: 20px 30px;
  text-align: center;
  flex-shrink: 0;
}

.sly-alm-modal-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: var(--alm-color-primary);
  color: #ffffff;
  text-decoration: none;
  border-radius: var(--alm-radius-modal-image);
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sly-alm-modal-link:hover {
  background: color-mix(in srgb, var(--alm-color-primary) 85%, black);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   SCROLLBAR PERSONNALISÉE
   ============================================================ */

.sly-alm-modal-body::-webkit-scrollbar {
  width: 10px;
}

.sly-alm-modal-body::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 5px;
}

.sly-alm-modal-body::-webkit-scrollbar-thumb {
  background: var(--alm-color-primary);
  border-radius: 5px;
}

.sly-alm-modal-body::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--alm-color-primary) 80%, black);
}

/* ============================================================
   RESPONSIVE — TABLETTES
   ============================================================ */

/* Palier intermédiaire entre desktop et tablette : valeur fixe,
   non pilotée par les réglages admin (seuls desktop/tablette/mobile
   sont exposés — cf. --alm-columns-*). Assure une transition douce
   entre les deux paliers configurables. */
@media (max-width: 1200px) {
  .sly-alm-mosaique-grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .sly-alm-header-block {
    grid-column: span 3;
  }
}

@media (max-width: 992px) {
  .sly-alm-mosaique-grid {
    grid-template-columns: repeat(var(--alm-columns-tablet, 10), 1fr);
  }
  .sly-alm-header-title {
    font-size: 20px;
  }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 768px) {
  .sly-alm-container {
    padding: 0 10px;
  }
  .sly-alm-mosaique-grid {
    grid-template-columns: repeat(var(--alm-columns-mobile, 6), 1fr);
    gap: 6px;
  }
  .sly-alm-header-block {
    grid-column: span 2;
    aspect-ratio: 1 / 2;
  }
  .sly-alm-header-title {
    font-size: 16px;
  }
  .sly-alm-card-title {
    font-size: 9px;
    -webkit-line-clamp: 2;
  }
  .sly-alm-modal-overlay {
    padding: 10px;
    padding-top: 20px;
  }
  .sly-alm-modal-header {
    padding: 20px;
  }
  .sly-alm-modal-title {
    font-size: 20px;
  }
  .sly-alm-modal-body {
    padding: 20px;
  }
  .sly-alm-modal-content-text {
    font-size: 15px;
  }
  .sly-alm-modal-header-info {
    flex-direction: column;
    text-align: center;
    padding: 15px;
  }
  .sly-alm-modal-header-image {
    max-width: 60px;
    max-height: 60px;
  }
  /* Colonnes en pile sur mobile */
  .sly-alm-modal-wrapper {
    flex-direction: column;
    gap: 15px;
  }
  .sly-alm-modal-col-left {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Palier intermédiaire sous le seuil mobile : valeur fixe, même
   logique que le palier 1200px ci-dessus. */
@media (max-width: 480px) {
  .sly-alm-mosaique-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }
  .sly-alm-header-block {
    grid-column: span 2;
    aspect-ratio: 1 / 2;
  }
  .sly-alm-header-title {
    font-size: 14px;
  }
  .sly-alm-card-title {
    font-size: 8px;
  }
  .sly-alm-modal-title {
    font-size: 18px;
    padding-right: 40px;
  }
  .sly-alm-modal-close {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}