/*
 * Styles additionnels pour le modèle "Article Correl"
 * (single-correl-article.php). S'appuie sur les mêmes variables et
 * classes que page-correl.css (chargé juste avant celui-ci).
 */

.correl-article__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: .86rem;
  color: var(--correl-ink);
  opacity: .75;
}

.correl-article__author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.correl-article__author img {
  border-radius: 50%;
  display: block;
}

.correl-article__dot {
  opacity: .5;
}

/* Listes numérotées "Top 5" : gros numéro habillé, lisible et SEO friendly */
.correl-content ol:not(.correl-summary ol)  {
  list-style: none;
  counter-reset: correl-step;
  margin: 28px 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.correl-content ol:not(.correl-summary ol) > li {
  counter-increment: correl-step;
  position: relative;
  padding: 18px 20px 18px 62px;
  background: var(--correl-white);
  border: 1px solid var(--correl-border);
  border-radius: 18px;
}

.correl-content ol:not(.correl-summary ol) > li::before {
  content: counter(correl-step);
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--correl-green);
  color: var(--correl-white);
  font-weight: 700;
  font-size: .9rem;
}

.correl-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
}

.correl-article__tags a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--correl-pale);
  color: var(--correl-green);
  font-size: .8rem;
  text-decoration: none;
}

.correl-related-section {
  padding-block: 20px clamp(60px, 8vw, 100px);
}

.correl-related-section h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--correl-green);
  margin: 0 0 24px;
}

.correl-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.correl-related-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 20px;
  overflow: hidden;
  background: var(--correl-white);
  border: 1px solid var(--correl-border);
  transition: transform .2s ease, box-shadow .2s ease;
}

.correl-related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--correl-shadow);
}

.correl-related-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.correl-related-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.correl-related-card__title {
  display: block;
  padding: 16px 18px 20px;
  font-weight: 600;
  color: var(--correl-green);
}

@media (max-width: 780px) {
  .correl-related-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Modèle "Article Correl" (single-correl-article.php) —
   ce fichier n'est chargé QUE sur ce template, donc ces règles
   s'appliquent à TOUS les articles qui l'utilisent :
   1) la marge de côté se fond avec le header, plus d'effet
      "rectangle" blanc/pâle au-dessus du contenu ;
   2) la photo à la une n'a plus de cadre rectangulaire, juste
      son ombre en forme organique.
   ========================================================= */

/* Le header (assets/css/components.css) est en var(--correl-cream).
   On aligne le bandeau d'intro sur la même teinte puis on l'estompe
   très progressivement vers le pâle du reste de la page : la limite
   header -> hero disparaît, y compris sur les côtés.
   NB : .ast-container est un ANCÊTRE de .correl-article (pas l'inverse),
   d'où le sélecteur ci-dessous — l'ancienne version avait le mauvais
   sens et ne matchait donc jamais rien. */
body.single-post #content > .ast-container,
body.single-post.single-format-standard #content > .ast-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
  overflow-x: visible !important;
}

.correl-guide-hero {
  background:
    radial-gradient(circle at 10% 20%, rgba(169, 185, 162, .6), transparent 34%),
    radial-gradient(circle at 85% 12%, rgba(227, 233, 220, .85), transparent 40%),
    linear-gradient(to bottom, var(--correl-cream) 0%, var(--correl-pale) 240px);
}

/* Photo à la une : on retire l'ombre rectangulaire (box-shadow suit le
   cadre de l'image, pas sa découpe organique) et on la remplace par un
   drop-shadow, qui épouse la silhouette réellement visible (le blob),
   donnant l'impression d'une forme organique pure, sans cadre. */
.correl-guide-hero__image {
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 18px 40px rgba(48, 46, 40, .22));
}

.correl-guide-hero__media {
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

/* =========================================================
   Encart "Infos rapides" — pattern de bloc "Correl : Fiche —
   Infos rapides" (voir inc/blocks.php), inséré dans le contenu
   des fiches plantes. Grille responsive de mini-cartes.
   ========================================================= */

.correl-fiche-infos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* grid-auto-rows: 1fr force toutes les cellules d'une même rangée
     à partager exactement la même hauteur, quelle que soit la longueur
     du contenu. C'est ça qui égalise les cartes. */
  grid-auto-rows: 1fr;
  gap: 16px;
  margin: 32px 0;
  padding: 24px;
  background: var(--correl-soft);
  border: 1px solid var(--correl-border);
  border-radius: var(--correl-radius);
}

.correl-fiche-infos__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  padding: 18px 20px;
  background: var(--correl-white);
  border: 1px solid var(--correl-border);
  border-radius: var(--correl-radius-sm);
  box-sizing: border-box;
  transition: box-shadow .18s ease, transform .18s ease;
}

.correl-fiche-infos__item:hover {
  box-shadow: var(--correl-shadow);
  transform: translateY(-2px);
}

.correl-fiche-infos__label {
  margin: 0;
  color: var(--correl-green);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .85;
}

.correl-fiche-infos__value {
  margin: 0;
  color: var(--correl-ink);
  font-size: .97rem;
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 780px) {
  .correl-fiche-infos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .correl-fiche-infos {
    grid-template-columns: 1fr;
    padding: 14px;
  }
}