/*
 * Component: Media + Text (image + texte)
 * Classe racine: .nt-media-text
 *
 * Objectif: composant réutilisable (un seul CSS), insérable dans différentes sections.
 */

.nt-media-text{
  /* Variables optionnelles (override possible depuis un autre CSS) */
  --nt-mt-gap: 0px;
  --nt-mt-content-bg: #ffffff;
  --nt-mt-padding: clamp(26px, 4vw, 64px);
  --nt-mt-media-min-height: 360px;
  --nt-mt-media-aspect: 4 / 3; 
  --nt-mt-kicker-size: 0.75rem;
  --nt-mt-kicker-letter-spacing: 0.14em;
  --nt-mt-title-size: clamp(1.8rem, 2.6vw, 2.6rem);
  --nt-mt-text-size: 0.95rem;
  --nt-mt-text-line: 1.7;
}

/* Optionnel: rendu centré/encadré (proche de la maquette) */
.nt-media-text--boxed{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.nt-media-text__inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "media content";
  gap: var(--nt-mt-gap);
  align-items: stretch;
}

.nt-media-text__media{
  grid-area: media;
  position: relative;
  overflow: hidden;
  min-height: var(--nt-mt-media-min-height);
}

/* Image en mode "cover" (par défaut) */
.nt-media-text__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -------------------------------------------------
   MODIFIER: .nt-media-text--fit
   - Affiche l'image EN ENTIER (pas de crop)
   - Utile pour les images rectangulaires (ex: widget "Nouveaux produits")
   ------------------------------------------------- */
.nt-media-text--fit .nt-media-text__img{
  object-fit: contain;
}

/* -------------------------------------------------
   MODIFIER: .nt-media-text--style-hotel
   - Fond gris côté texte
   - Texte justifié (comme la maquette)
   ------------------------------------------------- */
.nt-media-text--style-hotel{
  --nt-mt-content-bg: #f2f2f2;                 /* fond gris côté texte */
  --nt-mt-padding: clamp(36px, 5vw, 80px);     /* respiration proche de la maquette */
}

.nt-media-text--style-hotel .nt-media-text__text{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  max-width: 24rem; /* colonne texte plus étroite, centrée (rendu "éditorial") */
}


.nt-media-text--fit .nt-media-text__media{
  /* évite l'effet "bords noirs" si l'image ne remplit pas le bloc */
  background: #ffffff;
}

.nt-media-text__content{
  grid-area: content;
  background: var(--nt-mt-content-bg);
  padding: var(--nt-mt-padding);
}

/* Image à droite */
.nt-media-text--image-right .nt-media-text__inner{
  grid-template-areas: "content media";
}

/* Variante sans image */
.nt-media-text--no-media .nt-media-text__inner{
  grid-template-columns: 1fr;
  grid-template-areas: "content";
}

.nt-media-text__kicker{
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: var(--nt-mt-kicker-letter-spacing);
  font-size: var(--nt-mt-kicker-size);
  text-align: center;
  opacity: 0.75;
}

.nt-media-text__title{
  margin: 0 0 22px;
  font-size: var(--nt-mt-title-size);
  line-height: 1.15;
  text-align: center;
}

.nt-media-text__text{
  font-size: var(--nt-mt-text-size);
  line-height: var(--nt-mt-text-line);
  text-align: left;
  max-width: 46rem;   /* style proche de la maquette (texte pas trop large) */
  margin: 0 auto;     /* centre le bloc de texte dans la colonne */
}

/* -------------------------------------------------
   Responsive
   - Tablette: on conserve 2 colonnes (aspect "desktop")
   - Mobile: empilement + ratio stable pour l'image
   ------------------------------------------------- */

/* Tablette (on garde 2 colonnes, on ajuste seulement les espacements) */
@media (max-width: 991.98px){
  .nt-media-text{
    --nt-mt-padding: 22px;
    --nt-mt-media-min-height: clamp(280px, 40vw, 360px);
  }

  .nt-media-text__media{
    min-height: var(--nt-mt-media-min-height);
  }
}

/* Mobile (empilement) */
@media (max-width: 767.98px){
  .nt-media-text{
    --nt-mt-padding: 22px;
  }

  /* Empilement par défaut: image puis contenu */
  .nt-media-text__inner{
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "content";
  }

  /* Si l'image est à droite sur desktop, on conserve un ordre cohérent sur mobile:
     contenu d'abord, puis image (le choix droite reste perceptible). */
  .nt-media-text--image-right .nt-media-text__inner{
    grid-template-areas:
      "content"
      "media";
  }

  /* Hauteur d'image stable: on utilise un ratio plutôt qu'une min-height variable */
  .nt-media-text__media{
    min-height: 0;
    aspect-ratio: var(--nt-mt-media-aspect);
  }

  /* Style "Hôtel": on garde le rendu éditorial (titres centrés) */
  .nt-media-text--style-hotel{
    --nt-mt-padding: clamp(24px, 6vw, 42px);
  }

  .nt-media-text--style-hotel .nt-media-text__kicker,
  .nt-media-text--style-hotel .nt-media-text__title{
    text-align: center;
  }

  /* Les autres styles: lisibilité mobile = align-left + largeur pleine */
  .nt-media-text:not(.nt-media-text--style-hotel) .nt-media-text__kicker,
  .nt-media-text:not(.nt-media-text--style-hotel) .nt-media-text__title{
    text-align: left;
  }

  .nt-media-text:not(.nt-media-text--style-hotel) .nt-media-text__text{
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }
}