/**
 * Composant : carte d'article unique (inc/components.php → lobstetricien_card)
 *
 * Une seule anatomie, quatre mises en page :
 *   --vertical   grilles de 3        --horizontal  grilles de 2, vignette à gauche
 *   --compact    listes latérales    --featured    article à la une
 *
 * v2 (nov. 2026) — plus de relief, moins de vide :
 *  - rubrique en étiquette sauge + temps de lecture sur la même ligne (une ligne de moins) ;
 *  - titre plus grand, plus de hauteur réservée sous les titres courts ;
 *  - marges et éléments parasites neutralisés (WordPress peut insérer <p> vides ou <br>) ;
 *  - ombre lisible, liseré vert au survol.
 */

.lobst-card {
  position: relative; /* ancre du lien étiré */
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  box-shadow: 0 1px 2px rgba(10, 46, 26, 0.05), 0 10px 28px -12px rgba(10, 46, 26, 0.14);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Garde-fous : aucun espace ne vient d'ailleurs que de la grille de la carte. */
.lobst-card__body > * {
  margin: 0 !important;
}

.lobst-card br,
.lobst-card p:empty {
  display: none;
}

/* --- Image ---------------------------------------------------------------- */
.lobst-card__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--wp--preset--color--surface-mint); /* fond pendant le chargement */
}

.lobst-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Léger dégradé en bas de l'image : donne de la profondeur, raccorde au corps blanc. */
.lobst-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 35%;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 46, 26, 0.12) 100%);
  pointer-events: none;
}

.lobst-card__ribbon {
  position: absolute;
  z-index: 1;
  top: var(--wp--preset--spacing--40);
  left: var(--wp--preset--spacing--40);
  padding: 0.35rem 0.75rem;
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: var(--wp--custom--letter-spacing--label);
  text-transform: uppercase;
}

/* --- Corps ---------------------------------------------------------------- */
.lobst-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--50);
}

.lobst-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30);
  min-height: 1.6rem;
}

/* Rubrique : étiquette sauge. Au-dessus du lien étiré pour rester cliquable. */
.lobst-card__cat {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  border-radius: var(--wp--custom--radius--sm);
  background: var(--wp--preset--color--surface-mint);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: var(--wp--custom--letter-spacing--label);
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lobst-card__cat:hover {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
}

.lobst-card__time {
  flex: 0 0 auto;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--muted);
  white-space: nowrap;
}

.lobst-card__title {
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--font-weight--medium);
  line-height: 1.22;
  letter-spacing: var(--wp--custom--letter-spacing--tight);
  color: var(--wp--preset--color--contrast);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.lobst-card__link {
  color: inherit;
  text-decoration: none;
}

/* Lien étiré : toute la carte mène à l'article (une seule cible clavier). */
.lobst-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lobst-card__excerpt {
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.6;
  color: var(--wp--preset--color--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lobst-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5rem;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
}

.lobst-card__meta > span + span::before {
  content: "·";
  margin-right: 0.5rem;
}

.lobst-card__author strong {
  font-weight: var(--wp--custom--font-weight--medium);
  color: var(--wp--preset--color--contrast);
}

/* --- Survol (pointeur fin uniquement : pas d'effet collant au toucher) ----- */
@media (hover: hover) {
  .lobst-card:hover {
    transform: translateY(-4px);
    border-color: var(--wp--preset--color--secondary);
    box-shadow: 0 2px 4px rgba(10, 46, 26, 0.05), 0 22px 40px -16px rgba(10, 46, 26, 0.28);
  }

  .lobst-card:hover .lobst-card__media img {
    transform: scale(1.04);
  }

  .lobst-card:hover .lobst-card__title {
    color: var(--wp--preset--color--primary);
  }
}

/* Liseré vert en haut au survol et au focus clavier. */
.lobst-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  height: 3px;
  background: var(--wp--preset--color--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.lobst-card:hover::before,
.lobst-card:has(.lobst-card__link:focus-visible)::before {
  transform: scaleX(1);
}

/* Focus clavier : l'anneau est porté par la carte entière. */
.lobst-card:has(.lobst-card__link:focus-visible) {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--primary);
  outline-offset: var(--wp--custom--focus--offset);
}

.lobst-card__link:focus-visible {
  outline: none;
}

/* --- Variante horizontale ------------------------------------------------- */
.lobst-card--horizontal {
  display: grid;
  grid-template-columns: minmax(140px, 38%) minmax(0, 1fr);
}

/* Comme la carte « À la une » : la photo est recadrée dans son cadre et ne
   pilote jamais la hauteur. Les deux cartes d'une rangée restent alignées,
   même avec une image verticale. */
.lobst-card--horizontal {
  min-height: 220px;
}

.lobst-card--horizontal .lobst-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-position: center 30%;
}

.lobst-card--horizontal .lobst-card__media::after {
  display: none;
}

.lobst-card--horizontal .lobst-card__body {
  justify-content: center;
}

/* --- Variante compacte (listes latérales) --------------------------------- */
.lobst-card--compact {
  flex-direction: row;
  gap: var(--wp--preset--spacing--40);
  height: auto;
  padding-bottom: var(--wp--preset--spacing--40);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.lobst-card--compact::before {
  display: none;
}

.lobst-card--compact:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.lobst-card--compact .lobst-card__media {
  flex: 0 0 120px;
  align-self: flex-start;
  border-radius: var(--wp--custom--radius--sm);
}

.lobst-card--compact .lobst-card__media::after {
  display: none;
}

.lobst-card--compact .lobst-card__media img {
  aspect-ratio: 4 / 3;
}

.lobst-card--compact .lobst-card__body {
  padding: 0;
  gap: var(--wp--preset--spacing--20);
}

.lobst-card--compact .lobst-card__cat {
  padding: 0;
  background: none;
}

.lobst-card--compact .lobst-card__cat:hover {
  background: none;
  color: var(--wp--preset--color--primary-dark);
}

.lobst-card--compact .lobst-card__title {
  font-size: var(--wp--preset--font-size--lg);
  -webkit-line-clamp: 2;
}

@media (hover: hover) {
  .lobst-card--compact:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--wp--preset--color--border);
  }
}

/* --- Variante à la une ---------------------------------------------------- */
.lobst-card--featured .lobst-card__media img {
  aspect-ratio: 16 / 9;
  max-height: 320px; /* garde l'article à la une et la liste « À lire aussi » à hauteur comparable */
}

.lobst-card--featured .lobst-card__body {
  gap: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
}

.lobst-card--featured .lobst-card__title {
  font-size: var(--wp--preset--font-size--3-x-large);
  line-height: 1.15;
}

.lobst-card--featured .lobst-card__excerpt {
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.65;
}

.lobst-card__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--wp--preset--spacing--50);
  border-radius: var(--wp--custom--radius--pill);
  background: var(--wp--preset--color--surface-mint);
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--font-weight--medium);
  transition: background-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
  .lobst-card--featured:hover .lobst-card__cta {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
  }
}

/* --- Variante « spotlight » : article à la une en bloc partagé ------------ */
.lobst-card--spotlight {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  border: 0;
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--surface-mint);
  box-shadow: 0 24px 50px -18px rgba(9, 40, 28, 0.24);
}

/* La hauteur ne dépend jamais du format de la photo : l'image est posée en
   absolu dans son cadre et recadrée (cover). La carte prend la hauteur du texte,
   avec un plancher fixe. */
.lobst-card--spotlight {
  min-height: 440px;
}

.lobst-card--spotlight .lobst-card__media {
  min-height: 100%;
}

.lobst-card--spotlight .lobst-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-position: center 30%;
}

.lobst-card--spotlight .lobst-card__media::after {
  display: none;
}

.lobst-card--spotlight .lobst-card__body {
  justify-content: center;
  gap: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
}

.lobst-card--spotlight .lobst-card__cat {
  background: var(--wp--preset--color--base);
}

.lobst-card--spotlight .lobst-card__title {
  font-size: var(--wp--preset--font-size--4-x-large);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.lobst-card--spotlight .lobst-card__excerpt {
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.6;
  -webkit-line-clamp: 3;
}

.lobst-card__btn {
  align-self: flex-start;
  min-height: 50px;
  padding: 0 1.6rem;
  font-size: var(--wp--preset--font-size--md);
}

.lobst-card--spotlight .lobst-card__ribbon {
  top: var(--wp--preset--spacing--50);
  left: var(--wp--preset--spacing--50);
}

@media (hover: hover) {
  .lobst-card--spotlight:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 60px -18px rgba(9, 40, 28, 0.32);
  }
}

/* --- Variante « mini » : petite carte horizontale encadrée ---------------- */
.lobst-card--mini {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--30);
}

.lobst-card--mini::before {
  display: none;
}

.lobst-card--mini .lobst-card__media {
  border-radius: var(--wp--custom--radius--sm);
}

.lobst-card--mini .lobst-card__media::after {
  display: none;
}

.lobst-card--mini .lobst-card__media img {
  aspect-ratio: 5 / 4;
}

.lobst-card--mini .lobst-card__body {
  gap: var(--wp--preset--spacing--20);
  padding: 0;
}

.lobst-card--mini .lobst-card__cat {
  padding: 0;
  background: none;
}

.lobst-card--mini .lobst-card__cat:hover {
  background: none;
  color: var(--wp--preset--color--primary-dark);
}

.lobst-card--mini .lobst-card__title {
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.25;
}

/* --- Section « À la une » de l'accueil (patterns/editorial-hero.php) ------ */
.lobst-une {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--60);
  padding-block: 0 var(--wp--preset--spacing--60); /* l'espace du haut vient déjà de la bande de recherche */
}

.lobst-une__more {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
}

.lobst-une__more-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40);
}

.lobst-une__more-head .lobst-eyebrow {
  margin: 0;
  color: var(--wp--preset--color--muted);
}

.lobst-une__all {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--font-weight--medium);
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.lobst-une__all:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lobst-une__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--50);
}

@media (max-width: 1023px) {
  .lobst-card--spotlight {
    grid-template-columns: 1fr;
  }

  .lobst-card--spotlight {
    min-height: 0;
  }

  .lobst-card--spotlight .lobst-card__media img {
    position: static;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .lobst-card--spotlight .lobst-card__body {
    padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
  }

  .lobst-une__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 599px) {
  .lobst-card--spotlight .lobst-card__title {
    font-size: var(--wp--preset--font-size--3-x-large);
  }

  .lobst-card__btn {
    align-self: stretch;
    justify-content: center;
  }

  .lobst-card--mini {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

/* --- Mobile --------------------------------------------------------------- */
@media (max-width: 599px) {
  .lobst-card--horizontal {
    grid-template-columns: 1fr;
  }

  .lobst-card--horizontal {
    min-height: 0;
  }

  .lobst-card--horizontal .lobst-card__media img {
    position: static;
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .lobst-card--compact .lobst-card__media {
    flex-basis: 96px;
  }

  .lobst-card--featured .lobst-card__body {
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  }
}

/* --- Carte construite en blocs (boucles de requête des gabarits) ----------
   Même rendu que la carte PHP, appliqué aux blocs natifs
   post-featured-image / post-terms / post-title / post-excerpt / post-date. */
.lobst-card--block {
  gap: var(--wp--preset--spacing--30);
}

.lobst-card--block > * {
  margin-block: 0 !important; /* annule les marges des blocs : le rythme vient du gap */
  margin-inline: var(--wp--preset--spacing--50);
}

.lobst-card--block > .wp-block-post-featured-image {
  margin-inline: 0;
  margin-bottom: var(--wp--preset--spacing--20) !important;
}

.lobst-card--block > :last-child {
  margin-bottom: var(--wp--preset--spacing--50) !important;
}

.lobst-card--block .wp-block-post-featured-image img {
  border-radius: 0 !important; /* l'arrondi est porté par la carte */
}

.lobst-card--block .wp-block-post-terms {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  font-size: var(--wp--preset--font-size--xs) !important;
  font-weight: var(--wp--custom--font-weight--bold);
  letter-spacing: var(--wp--custom--letter-spacing--label);
  text-transform: uppercase;
}

.lobst-card--block .wp-block-post-terms a {
  display: inline-flex;
  padding: 0.22rem 0.6rem;
  border-radius: var(--wp--custom--radius--sm);
  background: var(--wp--preset--color--surface-mint);
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.lobst-card--block .wp-block-post-terms__separator {
  display: none;
}

.lobst-card--block .wp-block-post-terms a + .wp-block-post-terms__separator + a {
  margin-left: 0.35rem;
}

.lobst-card--block .wp-block-post-title {
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: var(--wp--preset--font-size--xl) !important;
  line-height: 1.22 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lobst-card--block .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}

.lobst-card--block .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lobst-card--block .wp-block-post-excerpt__excerpt {
  margin: 0;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lobst-card--block .wp-block-post-excerpt__more-text {
  display: none; /* la carte entière est déjà un lien */
}

.lobst-card--block .wp-block-post-date {
  margin-top: auto !important;
}

@media (hover: hover) {
  .lobst-card--block:hover .wp-block-post-title {
    color: var(--wp--preset--color--primary) !important;
  }
}

.lobst-card--block:has(.wp-block-post-title a:focus-visible) {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--primary);
  outline-offset: var(--wp--custom--focus--offset);
}

/* --- « À la une » : partie texte sur le dégradé de la marque, textes en blanc
   (même dégradé que le bouton « Prendre rendez-vous » et le bloc Consultations). */
.lobst-card--spotlight {
  background: var(--wp--custom--gradient--brand);
}

.lobst-card--spotlight .lobst-card__body {
  background: var(--wp--custom--gradient--brand);
  color: var(--wp--preset--color--base);
}

.lobst-card--spotlight .lobst-card__title,
.lobst-card--spotlight .lobst-card__title a,
.lobst-card--spotlight:hover .lobst-card__title,
.lobst-card--spotlight:hover .lobst-card__title a {
  color: var(--wp--preset--color--base);
}

.lobst-card--spotlight .lobst-card__excerpt {
  color: rgba(255, 255, 255, 0.88);
}

.lobst-card--spotlight .lobst-card__meta,
.lobst-card--spotlight .lobst-card__meta *,
.lobst-card--spotlight .lobst-card__meta > span + span::before {
  color: rgba(255, 255, 255, 0.82);
}

.lobst-card--spotlight .lobst-card__author strong {
  color: var(--wp--preset--color--base);
}

.lobst-card--spotlight .lobst-card__cat {
  background: rgba(255, 255, 255, 0.14);
  color: var(--wp--preset--color--base);
}

.lobst-card--spotlight .lobst-card__cat:hover {
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--primary-dark);
}

/* Bouton inversé : blanc, texte vert foncé. */
.lobst-card--spotlight .lobst-card__btn {
  background: var(--wp--preset--color--base) !important;
  color: var(--wp--preset--color--primary-dark) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.lobst-card--spotlight .lobst-card__btn:hover {
  background: var(--wp--preset--color--surface-mint) !important;
}

.lobst-card--spotlight .lobst-card__link:focus-visible,
.lobst-card--spotlight a:focus-visible {
  outline-color: var(--wp--preset--color--base);
}