/**
 * Composant : bloc « Consultations » (parts/cta-orientation.html)
 *
 * v2 (nov. 2026) : fond au dégradé du bouton « Prendre rendez-vous » (vert forêt),
 * hauteur réduite (la photo ne dicte plus la hauteur : elle remplit sa colonne
 * et se recadre), boutons inversés pour rester lisibles sur le vert.
 * La pastille « Ouvert maintenant » est calculée par assets/js/consult-status.js.
 */

.lobst-consult {
  position: relative;
  isolation: isolate;
  margin-block: var(--wp--preset--spacing--80) !important;
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--custom--gradient--brand);
  box-shadow: 0 24px 50px -20px rgba(9, 40, 28, 0.45);
  overflow: hidden;
  color: var(--wp--preset--color--base);
}

/* Léger halo clair en haut à gauche : donne du relief au dégradé. */
.lobst-consult::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%;
  left: -10%;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: var(--wp--preset--color--secondary);
  opacity: 0.16;
  filter: blur(80px);
  pointer-events: none;
}

.lobst-consult__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: stretch;
}

.lobst-consult__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

.lobst-consult .lobst-eyebrow {
  color: var(--wp--preset--color--secondary);
}

.lobst-consult__title {
  margin: 0 0 var(--wp--preset--spacing--30);
  max-width: 22em;
  font-size: var(--wp--preset--font-size--2-x-large);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--wp--preset--color--base);
}

.lobst-consult__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--wp--preset--color--secondary);
}

.lobst-consult__lead {
  margin: 0 0 var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

/* --- Chiffres clés -------------------------------------------------------- */
.lobst-consult__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  margin: 0 0 var(--wp--preset--spacing--50);
}

.lobst-consult__fact {
  padding: 0 var(--wp--preset--spacing--50);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.lobst-consult__fact:first-child {
  padding-left: 0;
  border-left: 0;
}

.lobst-consult__fact dt {
  margin-bottom: 0.1rem;
  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;
  color: rgba(255, 255, 255, 0.72);
}

.lobst-consult__fact dd {
  margin: 0;
  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.2;
  white-space: nowrap;
  color: var(--wp--preset--color--base);
}

.lobst-consult__fact dd span {
  font-family: var(--wp--preset--font-family--plus-jakarta-sans);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--font-weight--medium);
  color: var(--wp--preset--color--secondary);
}

/* --- Boutons inversés (lisibles sur le vert) ------------------------------ */
.lobst-consult__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
}

.lobst-consult .lobst-btn {
  min-height: 48px;
  padding: 0 1.6rem;
  font-size: var(--wp--preset--font-size--md);
}

.lobst-consult .lobst-btn--primary {
  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-consult .lobst-btn--primary:hover {
  background: var(--wp--preset--color--surface-mint) !important;
  color: var(--wp--preset--color--primary-dark) !important;
}

.lobst-consult .lobst-btn--soft {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--wp--preset--color--base) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: none;
}

.lobst-consult .lobst-btn--soft:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--wp--preset--color--base) !important;
}

/* Anneau de focus clair sur le vert. */
.lobst-consult .lobst-btn:focus-visible {
  outline-color: var(--wp--preset--color--base);
}

/* --- Photo : remplit sa colonne sans en fixer la hauteur ------------------ */
.lobst-consult__media {
  position: relative;
  margin: 0;
  min-height: 100%;
}

.lobst-consult__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%; /* l'enseigne de la clinique reste dans le cadre */
  /* Photo réelle très saturée (façade turquoise) : couleurs adoucies pour
     s'accorder au vert du thème, sans retoucher le fichier. */
  filter: saturate(0.45) contrast(0.98) brightness(1.02);
}

/* Fondu du vert vers la photo. */
.lobst-consult__media::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 22%;
  background: linear-gradient(90deg, #1A6B3C 0%, rgba(26, 107, 60, 0) 100%);
  pointer-events: none;
}

.lobst-consult__status {
  position: absolute;
  z-index: 2;
  right: var(--wp--preset--spacing--40);
  bottom: var(--wp--preset--spacing--40);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-width: calc(100% - 2 * var(--wp--preset--spacing--40));
  padding: 0.6rem 1rem;
  border-radius: var(--wp--custom--radius--pill);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: var(--wp--preset--shadow--pill);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--font-weight--medium);
  color: var(--wp--preset--color--contrast);
}

.lobst-consult__dot {
  position: relative;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wp--preset--color--muted);
}

.lobst-consult__status.is-open .lobst-consult__dot {
  background: var(--wp--custom--color--online); /* vert signal, distinct du vert de marque : lu comme « en ligne » */
}

.lobst-consult__status.is-open .lobst-consult__dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--wp--custom--color--online);
  animation: lobst-pulse 2s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lobst-consult__status.is-open .lobst-consult__dot::after {
    animation: none;
    opacity: 0;
  }
}

@keyframes lobst-pulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* --- Tablette et mobile --------------------------------------------------- */
@media (max-width: 1023px) {
  .lobst-consult__inner {
    grid-template-columns: 1fr;
  }

  .lobst-consult__media {
    order: -1;
    min-height: 0;
    height: 200px; /* bandeau photo bas : le texte reste au premier plan */
  }

  .lobst-consult__media::before {
    inset: auto 0 0 0;
    width: auto;
    height: 40%;
    background: linear-gradient(0deg, #1A6B3C 0%, rgba(26, 107, 60, 0) 100%);
  }

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

@media (max-width: 599px) {
  .lobst-consult__facts {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--wp--preset--spacing--30);
  }

  .lobst-consult__fact:nth-child(3) {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
  }

  .lobst-consult__actions .lobst-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* --- Localisation + statut, empilés en bas à droite de la photo ------------ */
.lobst-consult__chips {
  position: absolute;
  z-index: 2;
  right: var(--wp--preset--spacing--40);
  bottom: var(--wp--preset--spacing--40);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: calc(100% - 2 * var(--wp--preset--spacing--40));
}

.lobst-consult__chips .lobst-consult__status {
  position: static;
  max-width: 100%;
}

.lobst-consult__place {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  max-width: 100%;
  padding: 0.6rem 1.1rem 0.6rem 0.8rem;
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--base);
  text-decoration: none;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.lobst-consult__place svg {
  flex: 0 0 auto;
  color: var(--wp--preset--color--secondary);
}

.lobst-consult__place-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.lobst-consult__place-text strong {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
}

.lobst-consult__place-text > span {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--muted-on-dark);
}

.lobst-consult__place:hover {
  background: var(--wp--preset--color--primary);
  transform: translateY(-1px);
}

.lobst-consult__place:focus-visible {
  outline: 2px solid var(--wp--preset--color--base);
  outline-offset: 3px;
}


/* Téléphone : photo un peu plus haute, étiquettes compactes en bas pour
   laisser voir l'enseigne de la clinique. */
@media (max-width: 599px) {
  .lobst-consult__media {
    min-height: 250px !important;
  }

  .lobst-consult__chips {
    left: var(--wp--preset--spacing--30);
    right: var(--wp--preset--spacing--30);
    bottom: var(--wp--preset--spacing--30);
    max-width: none;
    gap: 0.35rem;
  }

  .lobst-consult__place,
  .lobst-consult__chips .lobst-consult__status {
    padding: 0.4rem 0.75rem;
    font-size: var(--wp--preset--font-size--xs);
  }

  .lobst-consult__place-text strong {
    font-size: var(--wp--preset--font-size--xs);
  }

  .lobst-consult__place svg {
    width: 16px;
    height: 16px;
  }
}

/* --- Plus d'air entre les éléments (ordinateur et tablette) --------------- */
@media (min-width: 600px) {
  .lobst-consult__content {
    padding: var(--wp--preset--spacing--70);
  }

  .lobst-consult .lobst-eyebrow {
    margin-bottom: var(--wp--preset--spacing--40);
  }

  .lobst-consult__title {
    margin-bottom: var(--wp--preset--spacing--40);
  }

  .lobst-consult__lead {
    margin-bottom: var(--wp--preset--spacing--60);
  }

  .lobst-consult__facts {
    margin-bottom: var(--wp--preset--spacing--60);
  }

  .lobst-consult__fact dt,
  .lobst-consult__fact > :first-child {
    white-space: nowrap;
  }

  .lobst-consult__actions {
    gap: var(--wp--preset--spacing--40);
  }
}

/* Téléphone : un peu plus d'espace aussi, sans allonger le bloc. */
@media (max-width: 599px) {
  .lobst-consult__lead,
  .lobst-consult__facts {
    margin-bottom: var(--wp--preset--spacing--60);
  }
}

/* Grands écrans : marges latérales et colonnes de chiffres plus généreuses. */
@media (min-width: 1200px) {
  .lobst-consult__content {
    padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
  }

  .lobst-consult__fact {
    padding-left: var(--wp--preset--spacing--60);
    padding-right: var(--wp--preset--spacing--60);
  }

  .lobst-consult__fact:first-child {
    padding-left: 0;
  }
}