/**
 * Content Block 4 Section - Dioqa UI Kit
 * Layout avec fond débordant + bento grid d'images
 *
 * @package Dioqa_UI_Kit
 */

/* Backgrounds colors */
.content-section-4.bg-white {
  background-color: #ffffff;
}

.content-section-4.bg-gray-light {
  background-color: var(--bs-gray-light);
}

.content-section-4.bg-primary {
  background-color: var(--bs-primary);
}

.content-section-4.bg-primary .content-4-title,
.content-section-4.bg-primary .content-4-title h1,
.content-section-4.bg-primary .content-4-title h2,
.content-section-4.bg-primary .content-4-title h3,
.content-section-4.bg-primary .content-4-title h4,
.content-section-4.bg-primary .content-4-description p {
  color: #ffffff;
}

.content-section-4.bg-secondary {
  background-color: var(--bs-secondary);
}

.content-section-4.bg-secondary .content-4-title,
.content-section-4.bg-secondary .content-4-title h1,
.content-section-4.bg-secondary .content-4-title h2,
.content-section-4.bg-secondary .content-4-title h3,
.content-section-4.bg-secondary .content-4-title h4,
.content-section-4.bg-secondary .content-4-description p {
  color: var(--bs-primary);
}

/* Section avec overflow hidden pour gérer le débordement */
.content-section-4 {
  overflow: hidden;
}

/* Wrapper principal : display flex */
.content-4-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Partie gauche : texte avec padding */
.content-4-left {
  padding: 100px 0;
  flex-shrink: 0;
}

/* Padding pour alignement */
.content-4-left.overflow-left {
  padding-left: 20%;
}

.content-4-left.overflow-right {
  padding-right: 20%;
}

/* Container Bootstrap pour alignement */
.content-4-left .container {
  max-width: 536px;
  padding: 0;
}

.content-4-text-content {
  max-width: 424px;
}

/* Title */
.content-4-title h1,
.content-4-title h2,
.content-4-title h3,
.content-4-title h4 {
  color: var(--bs-gray-dark);
  font-family: var(--font-heading);
  font-size: var(--display-md);
  font-weight: 600;
  line-height: normal;
  margin-bottom: 0;
}

/* Description */
.content-4-description p {
  color: var(--bs-gray-medium);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Partie droite : bento grid d'images */
.content-4-right {
  flex-shrink: 0;
  width: 1060px;
}

/* Container des images */
.content-4-image {
  overflow: hidden;
  position: relative;
}

.content-4-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--img-radius, var(--radius-lg));
}

/* Bento grid d'images - flexbox avec wrap */
.content-4-images-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* Ordre du bento : Grande (648) + Petite (388) / Petite (388) + Grande (648) */
.content-4-image-1 {
  width: 648px;
  height: 385px;
  order: 1;
}

.content-4-image-2 {
  width: 388px;
  height: 385px;
  order: 2;
}

.content-4-image-3 {
  width: 388px;
  height: 385px;
  order: 3;
}

.content-4-image-4 {
  width: 648px;
  height: 385px;
  order: 4;
}

/* Responsive */
@media (max-width: 991px) {
  /* Layout vertical sur tablette/mobile */
  .content-4-wrapper {
    flex-direction: column;
  }

  .content-4-wrapper.flex-row-reverse {
    flex-direction: column;
  }

  /* Pas de padding sur mobile */
  .content-4-left.overflow-left,
  .content-4-left.overflow-right {
    padding-left: 0;
    padding-right: 0;
  }

  .content-4-left {
    width: 100%;
    padding: 3rem 0;
  }

  .content-4-left .container {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  .content-4-text-content {
    max-width: 100%;
  }

  .content-4-right {
    width: 100%;
    padding: 0 15px;
  }

  /* Annuler le débordement des images sur mobile */
  .content-4-wrapper:not(.flex-row-reverse) .content-4-right,
  .content-4-wrapper.flex-row-reverse .content-4-right {
    margin-left: 0;
    margin-right: 0;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Grid responsive : 2 colonnes égales */
  .content-4-images-grid {
    gap: 1rem;
  }

  .content-4-image-1,
  .content-4-image-2,
  .content-4-image-3,
  .content-4-image-4 {
    width: calc(50% - 0.5rem);
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 768px) {
  .content-4-title h1,
  .content-4-title h2,
  .content-4-title h3,
  .content-4-title h4 {
    font-size: var(--display-2sm);
  }

  .content-4-description p {
    font-size: var(--text-md);
  }

  /* Grid mobile : 1 colonne */
  .content-4-image-1,
  .content-4-image-2,
  .content-4-image-3,
  .content-4-image-4 {
    width: 100%;
  }
}