/* ==========================================================
   Widget Elementor : Text Image — Maison Blondin
   ========================================================== */

/* ── Conteneur principal ── */
.mb-text-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: stretch;
  overflow: hidden;
}

/* ── Image à droite (défaut) ── */
.mb-text-image--right .mb-text-image__content { order: 1; }
.mb-text-image--right .mb-text-image__image   { order: 2; }

/* ── Image à gauche ── */
.mb-text-image--left .mb-text-image__content { order: 2; }
.mb-text-image--left .mb-text-image__image   { order: 1; }

/* ── Colonne texte ── */
.mb-text-image__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mb-text-image__title {
  font-family: var(--mb-font-heading, 'Playfair Display', Georgia, serif);
  color: var(--mb-brown, #572400);
  margin: 0 0 1rem;
  line-height: 1.2;
}

.mb-text-image__text {
  color: var(--mb-text, #6b4232);
  font-family: var(--mb-font-body, 'Open Sans', system-ui, sans-serif);
  line-height: 1.75;
}

.mb-text-image__text p:last-child { margin-bottom: 0; }

/* ── Boutons ── */
.mb-text-image__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Les boutons utilisent les classes globales .mb-btn-fill et .mb-btn-out */

/* ── Colonne image (cover desktop) ── */
.mb-text-image__image {
  overflow: hidden;
  /* border-radius: 4px; */
  min-height: 300px;
  position: relative;
}

.mb-text-image__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* ==========================================================
   Tablette (≤ 1024 px) + Mobile (≤ 767 px) :
   Texte en haut — Image en bas avec ratio configurable
   ========================================================== */
@media (max-width: 1024px) {

  .mb-text-image {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: unset;
  }

  .mb-text-image__content {
    padding: 0 2rem;
  }

  /* Ordre forcé : texte toujours au-dessus, image en dessous */
  .mb-text-image__content,
  .mb-text-image--left  .mb-text-image__content,
  .mb-text-image--right .mb-text-image__content { order: 1; }

  .mb-text-image__image,
  .mb-text-image--left  .mb-text-image__image,
  .mb-text-image--right .mb-text-image__image   { order: 2; }

  /* L'image devient un bloc à hauteur auto via aspect-ratio */
  .mb-text-image__image {
    min-height: unset;
    position: relative; /* conservé pour l'img absolue */
  }

  /* Format 4/3 */
  .mb-text-image--ratio-4-3 .mb-text-image__image {
    aspect-ratio: 4 / 3;
  }

  /* Format 16/9 */
  .mb-text-image--ratio-16-9 .mb-text-image__image {
    aspect-ratio: 16 / 9;
  }

  /* L'img reste en cover dans le conteneur à ratio fixe */
  .mb-text-image__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}