/**
 * Hero 7 Section - Horizontal Layout (Texte + Image)
 *
 * Layout: Texte à gauche (col-4 + offset-2) + Image à droite (col-6)
 * - Border radius customisable pour l'image
 * - Responsive: vertical en mobile
 *
 * @package Dioqa_UI_Kit
 */

/* Section Container */
.hero-7-section {
  height: var(--section-height, 95vh);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  /* Variables CSS pour l'animation GSAP */
  --svg-translate-x: 0px;
  --svg-translate-y: 0px;
  --svg-rotate: 0deg;
  --svg-scale: 1;
}

/* Forme décorative SVG en background (bas droite) */
.hero-7-section::before {
  content: '';
  position: absolute;
  bottom: -200px;
  right: -200px;
  width: 900px;
  height: 900px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' fill-opacity='0.1' d='M52,-61.8C65.6,-50.6,73.6,-32.5,78,-12.9C82.4,6.6,83.2,27.6,74.3,42.8C65.4,58,46.7,67.4,27.5,73.7C8.2,79.9,-11.5,83,-27.5,76.7C-43.5,70.4,-55.7,54.8,-66.3,37.7C-76.9,20.6,-85.9,1.9,-84.5,-16.4C-83.1,-34.8,-71.3,-52.8,-55.5,-63.6C-39.6,-74.4,-19.8,-77.9,-0.3,-77.5C19.2,-77.2,38.4,-72.9,52,-61.8Z' transform='translate(100 100)' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
  transform: translateX(var(--svg-translate-x))
    translateY(var(--svg-translate-y)) rotate(var(--svg-rotate))
    scale(var(--svg-scale));
  transform-origin: center center;
  transition: transform 0.3s ease;
}

/* Deuxième forme SVG en background (haut gauche) */
.hero-7-section::after {
  content: '';
  position: absolute;
  top: -200px;
  left: -200px;
  width: 800px;
  height: 800px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' fill-opacity='0.1' d='M40,-56C54.3,-53,70,-46.1,74.9,-34.5C79.8,-22.8,73.9,-6.5,66.8,6.2C59.7,19,51.4,28.2,43.1,36.7C34.7,45.3,26.4,53.3,15.7,59C5,64.7,-8,68.1,-20.7,66.2C-33.3,64.4,-45.7,57.3,-56.7,47.5C-67.7,37.7,-77.3,25.1,-79.9,11.1C-82.5,-2.9,-78,-18.2,-72.4,-34.2C-66.8,-50.1,-60.1,-66.6,-47.9,-70.5C-35.6,-74.4,-17.8,-65.8,-2.5,-61.9C12.9,-58.1,25.7,-59,40,-56Z' transform='translate(100 100)' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
  transform: translateX(var(--svg-translate-x))
    translateY(var(--svg-translate-y)) rotate(var(--svg-rotate))
    scale(var(--svg-scale));
  transform-origin: center center;
  transition: transform 0.3s ease;
}

/* Assurer que le contenu est au-dessus des backgrounds SVG */
.hero-7-section > .container {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Row principale */
.hero-7-section .row {
  flex: 1;
}

/* Colonne contenu */
.hero-7-content-col {
  display: flex;
  align-items: center;
}

.hero-7-content {
  width: 100%;
}

/* Titre */
.hero-7-title h1,
.hero-7-title h2,
.hero-7-title h3,
.hero-7-title h4,
.hero-7-title h5,
.hero-7-title h6 {
  color: var(--bs-gray-dark);
  font-family: var(--font-heading);
  font-size: var(--display-md);
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0;
}

/* Sous-titre */
.hero-7-subtitle p {
  color: var(--bs-gray-medium);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Boutons */
.hero-7-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* Colonne image */
.hero-7-image-col {
  display: flex;
  align-items: center;
}

/* Image wrapper */
.hero-7-image-wrapper {
  width: 100%;
  height: 100%;
  max-height: 80vh; /* Limiter la hauteur de l'image */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--border-radius, 16px);
}

/* Support pour Imagify/ShortPixel qui wrappent <img> dans <picture> */
.hero-7-image-wrapper picture {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image */
.hero-7-image,
.hero-7-image-wrapper picture img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Styles pour backgrounds sombres */
.hero-7-section.bg-primary .hero-7-title h1,
.hero-7-section.bg-primary .hero-7-title h2,
.hero-7-section.bg-primary .hero-7-title h3,
.hero-7-section.bg-primary .hero-7-title h4,
.hero-7-section.bg-primary .hero-7-title h5,
.hero-7-section.bg-primary .hero-7-title h6,
.hero-7-section.bg-secondary .hero-7-title h1,
.hero-7-section.bg-secondary .hero-7-title h2,
.hero-7-section.bg-secondary .hero-7-title h3,
.hero-7-section.bg-secondary .hero-7-title h4,
.hero-7-section.bg-secondary .hero-7-title h5,
.hero-7-section.bg-secondary .hero-7-title h6 {
  color: var(--color-white);
}

.hero-7-section.bg-primary .hero-7-subtitle p,
.hero-7-section.bg-secondary .hero-7-subtitle p {
  color: rgba(255, 255, 255, 0.9);
}

/* Responsive */

/* Tablettes */
@media (max-width: 992px) {
  /* Appliquer la hauteur tablette si définie */
  .hero-7-section {
    height: var(--section-height-tablet, 80vh);
  }

  /* En mode tablette, garder le layout horizontal mais ajuster */
  .hero-7-content-col {
    padding-bottom: 2rem;
  }

  .hero-7-title h1,
  .hero-7-title h2,
  .hero-7-title h3,
  .hero-7-title h4,
  .hero-7-title h5,
  .hero-7-title h6 {
    font-size: var(--display-sm);
  }

  .hero-7-subtitle p {
    font-size: var(--text-md);
  }

  .hero-7-image-wrapper {
    max-height: 60vh;
  }

  /* SVG backgrounds plus petits sur tablette */
  .hero-7-section::before {
    width: 700px;
    height: 700px;
  }

  .hero-7-section::after {
    width: 600px;
    height: 600px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  /* Appliquer la hauteur mobile si définie */
  .hero-7-section {
    height: auto;
    min-height: var(--section-height-mobile, 70vh);
  }

  /* Passer en layout vertical */
  .hero-7-section .row {
    flex-direction: column;
  }

  .hero-7-content-col {
    order: 1;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .hero-7-image-col {
    order: 2;
    margin-top: 2rem;
  }

  .hero-7-title h1,
  .hero-7-title h2,
  .hero-7-title h3,
  .hero-7-title h4,
  .hero-7-title h5,
  .hero-7-title h6 {
    font-size: var(--display-sm-mobile);
  }

  .hero-7-subtitle p {
    font-size: var(--text-base);
  }

  .hero-7-buttons {
    margin-top: 1.5rem;
  }

  .hero-7-image-wrapper {
    max-height: 50vh;
  }

  .hero-7-image {
    max-height: 50vh;
  }

  /* SVG backgrounds encore plus petits sur mobile */
  .hero-7-section::before {
    width: 500px;
    height: 500px;
  }

  .hero-7-section::after {
    width: 450px;
    height: 450px;
  }
}

/* Petits mobiles */
@media (max-width: 576px) {
  .hero-7-content-col {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .hero-7-image-wrapper {
    max-height: 40vh;
  }

  .hero-7-image {
    max-height: 40vh;
  }

  .hero-7-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .hero-7-buttons .btn {
    flex: 1 1 auto;
    min-width: auto;
  }
}