/* ====================================================================== */
/* FICHIER : blog-widget.css (dans /static/css/)                         */
/* RÔLE : Widget "Dernières actualités" pour page d'accueil              */
/* VERSION : 1.2 - Triangle uniquement en transition tablette            */
/* ====================================================================== */

/* ====================================================================== */
/* SECTION PRINCIPALE                                                     */
/* ====================================================================== */

/* Section widget blog - Fond orange brand */
.blog-widget {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--dl-layout-space-fourunits) var(--dl-layout-space-twounits);
  background-color: #f37021; /* Orange brand du site */
}

/* ====================================================================== */
/* TITRE SECTION                                                          */
/* ====================================================================== */

/* Titre "Dernières actualités" - Centré en blanc */
.blog-widget h2 {
  color: #fbfaf9; /* Blanc cassé du site */
  font-size: clamp(2rem, 5vw, 3.5rem); /* Taille fluide responsive */
  font-family: "Inter", sans-serif;
  font-weight: 700;
  text-align: center;
  margin: 0 0 var(--dl-layout-space-threeunits) 0;
  line-height: 1.2;
}

/* ====================================================================== */
/* GRILLE D'ARTICLES - DESKTOP                                            */
/* ====================================================================== */

/* Container des cartes - Grid desktop / Stack mobile */
.articles-grid {
  width: 100%;
  max-width: var(--dl-layout-size-maxwidth); /* 1400px max */
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes desktop */
  gap: var(--dl-layout-space-twounits); /* Espacement 32px entre cartes */
  padding: 0 var(--dl-layout-space-twounits); /* Espacement = bords */
}

/* ====================================================================== */
/* CARTE ARTICLE                                                          */
/* ====================================================================== */

/* Carte individuelle - Fond blanc, coins arrondis */
.article-card {
  background-color: #fbfaf9; /* Blanc cassé du site */
  border-radius: var(--dl-layout-radius-cardradius); /* 8px */
  padding: var(--dl-layout-space-oneandhalfunits); /* 24px */
  display: flex;
  flex-direction: column;
  gap: var(--dl-layout-space-unit); /* 16px entre éléments */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

/* Effet hover sur carte - Légère élévation */
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* ====================================================================== */
/* TITRE ARTICLE (H3)                                                     */
/* ====================================================================== */

/* Titre article dans carte */
.article-card h3 {
  margin: 0;
  font-size: 1.5rem; /* 24px */
  font-family: "Inter", sans-serif;
  font-weight: 700;
  line-height: 1.3;
}

/* Lien titre - Bleu foncé par défaut */
.article-card h3 a {
  color: rgb(5, 11, 36); /* Bleu marine du site */
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Lien titre hover - Orange */
.article-card h3 a:hover {
  color: #f37021; /* Orange brand */
}

/* ====================================================================== */
/* DATE                                                                   */
/* ====================================================================== */

/* Date de publication - Bleu foncé, petite taille */
.article-card .date {
  display: block;
  color: rgb(5, 11, 36); /* Bleu marine */
  font-size: 0.875rem; /* 14px */
  font-family: "Inter", sans-serif;
  font-weight: 400;
  opacity: 0.7; /* Légère transparence pour effet "secondaire" */
}

/* ====================================================================== */
/* EXTRAIT (CHAPEAU)                                                      */
/* ====================================================================== */

/* Extrait de l'article - Bleu foncé, texte normal */
.article-card .excerpt {
  color: rgb(5, 11, 36); /* Bleu marine */
  font-size: 1rem; /* 16px */
  font-family: "Inter", sans-serif;
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
  flex: 1; /* Prend l'espace disponible (pousse "Lire la suite" en bas) */
}

/* ====================================================================== */
/* BOUTON "LIRE LA SUITE"                                                 */
/* ====================================================================== */

/* Lien "Lire la suite" - Orange par défaut */
.article-card .read-more {
  color: #f37021; /* Orange brand */
  font-size: 1rem; /* 16px */
  font-family: "Inter", sans-serif;
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start; /* Aligne à gauche */
  transition: color 0.2s ease, transform 0.2s ease;
  margin-top: var(--dl-layout-space-halfunit); /* 8px marge haute */
}

/* Lien "Lire la suite" hover - Bleu foncé + déplacement */
.article-card .read-more:hover {
  color: rgb(5, 11, 36); /* Bleu marine */
  transform: translateX(4px); /* Décale de 4px vers la droite */
}

/* ====================================================================== */
/* RESPONSIVE - TABLETTE (Triangle si 3 cartes)                           */
/* ====================================================================== */

@media(max-width: 1024px) {
  /* Passe en 6 colonnes pour disposition triangle */
  .articles-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  /* Par défaut : 2 cartes par ligne (3 colonnes chacune) */
  .article-card {
    grid-column: span 3; /* Chaque carte = 3 colonnes sur 6 */
  }

  /* ✅ TRIANGLE : Si exactement 3 cartes */
  
  /* Carte 1 : colonnes 1-3 (à gauche en haut) */
  .article-card:nth-child(1):nth-last-child(3) {
    grid-column: 1 / 4;
  }

  /* Carte 2 : colonnes 4-6 (à droite en haut) */
  .article-card:nth-child(2):nth-last-child(2) {
    grid-column: 4 / 7;
  }

  /* Carte 3 : colonnes 2-5 (centrée en bas) */
  .article-card:nth-child(3):nth-last-child(1) {
    grid-column: 2 / 6;
  }
}

/* ====================================================================== */
/* RESPONSIVE - MOBILE (Stack vertical propre)                            */
/* ====================================================================== */

@media(max-width: 768px) {
  /* Section widget - Padding réduit */
  .blog-widget {
    padding: var(--dl-layout-space-threeunits) var(--dl-layout-space-unit);
  }

  /* Titre - Taille réduite */
  .blog-widget h2 {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
    margin-bottom: var(--dl-layout-space-twounits);
  }

  /* 1 seule colonne en mobile (stack vertical) */
  .articles-grid {
    grid-template-columns: 1fr; /* ✅ 1 seule colonne */
    gap: var(--dl-layout-space-unit); /* Espacement 16px entre cartes */
    padding: 0 var(--dl-layout-space-unit); /* Espacement = bords */
  }

  /* ✅ Annule toutes les règles triangle en mobile */
  .article-card {
    grid-column: 1 / 2; /* Force 1 seule colonne */
  }

  .article-card:nth-child(1):nth-last-child(3),
  .article-card:nth-child(2):nth-last-child(2),
  .article-card:nth-child(3):nth-last-child(1) {
    grid-column: 1 / 2; /* Force 1 seule colonne */
  }

  /* Carte article - Padding réduit */
  .article-card {
    padding: var(--dl-layout-space-unit);
  }

  /* Titre article - Taille réduite */
  .article-card h3 {
    font-size: 1.25rem; /* 20px */
  }

  /* Extrait - Taille réduite */
  .article-card .excerpt {
    font-size: 0.95rem; /* 15px */
  }
}

/* ====================================================================== */
/* FIN DU FICHIER                                                         */
/* ====================================================================== */