/**
 * Content Block 7 Section - Dioqa UI Kit
 * Layout col-5 avec image featured + col-6 avec titre/description et cards
 *
 * @package Dioqa_UI_Kit
 */

/* ========================================
   SECTION STRUCTURE
   ======================================== */

/* Section principale */
.content-section-7 {
  position: relative;
}

/* ========================================
   BACKGROUNDS
   ======================================== */

/* Background blanc */
.content-section-7.bg-white {
  background-color: #ffffff;
}

/* Background gris */
.content-section-7.bg-gray-light {
  background-color: var(--bs-gray-light);
}

/* Background transparent = blanc par défaut */
.content-section-7.bg-transparent {
  background-color: #ffffff;
}

/* Background primary */
.content-section-7.bg-primary {
  background-color: var(--bs-primary);
}

/* Textes en blanc sur fond primary */
.content-section-7.bg-primary .content-7-featured-surtitre,
.content-section-7.bg-primary .content-7-featured-title,
.content-section-7.bg-primary .content-7-title,
.content-section-7.bg-primary .content-7-title h1,
.content-section-7.bg-primary .content-7-title h2,
.content-section-7.bg-primary .content-7-title h3,
.content-section-7.bg-primary .content-7-description p,
.content-section-7.bg-primary .content-7-card-surtitre,
.content-section-7.bg-primary .content-7-card-title {
  color: #ffffff;
}

/* Background secondary */
.content-section-7.bg-secondary {
  background-color: var(--bs-secondary);
}

/* Textes en primary sur fond secondary */
.content-section-7.bg-secondary .content-7-featured-surtitre,
.content-section-7.bg-secondary .content-7-featured-title,
.content-section-7.bg-secondary .content-7-title,
.content-section-7.bg-secondary .content-7-title h1,
.content-section-7.bg-secondary .content-7-title h2,
.content-section-7.bg-secondary .content-7-title h3,
.content-section-7.bg-secondary .content-7-description p,
.content-section-7.bg-secondary .content-7-card-surtitre,
.content-section-7.bg-secondary .content-7-card-title {
  color: var(--bs-primary);
}

/* ========================================
   FEATURED IMAGE (Colonne gauche)
   ======================================== */

.content-7-featured {
  position: relative;
  width: 100%;
  height: 421px;
}

.content-7-featured-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

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

/* Carte en overlay sur l'image */
.content-7-featured-card {
  position: absolute;
  bottom: -30%;
  left: 24px;
  right: 24px;
  background: #ffffff;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03),
    0px 12px 16px -4px rgba(16, 24, 40, 0.08);
}

/* Surtitre de la carte featured */
.content-7-featured-surtitre {
  color: var(--bs-primary);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Titre de la carte featured */
.content-7-featured-title {
  color: var(--bs-gray-dark);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 0;
}

/* ========================================
   INTRO (Colonne droite - haut)
   ======================================== */

/* Titre */
.content-7-title h1,
.content-7-title h2,
.content-7-title h3 {
  color: var(--bs-gray-dark);
  font-family: var(--font-heading);
  font-size: var(--display-md);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

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

/* ========================================
   CARDS (Colonne droite - bas)
   ======================================== */

.content-7-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.content-7-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06),
    0px 1px 3px 0px rgba(16, 24, 40, 0.1);
}

/* Image des cards */
.content-7-card-image {
  width: 133px;
  min-width: 133px;
  height: 92px;
  overflow: hidden;
}

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

/* Text container - bien centré verticalement avec l'image */
.content-7-card-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

/* Surtitre des cards */
.content-7-card-surtitre {
  color: var(--bs-primary);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Forcer margin-bottom à 0 sur les paragraphes WYSIWYG dans les cards */
.content-7-card-surtitre p,
.content-7-card-surtitre h1,
.content-7-card-surtitre h2,
.content-7-card-surtitre h3,
.content-7-card-surtitre h4,
.content-7-card-surtitre h5,
.content-7-card-surtitre h6 {
  margin-bottom: 0 !important;
}

/* Titre des cards */
.content-7-card-title {
  color: var(--bs-gray-dark);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.55;
  margin-bottom: 0;
}

/* Forcer margin-bottom à 0 sur les paragraphes WYSIWYG dans les cards */
.content-7-card-title p,
.content-7-card-title h1,
.content-7-card-title h2,
.content-7-card-title h3,
.content-7-card-title h4,
.content-7-card-title h5,
.content-7-card-title h6 {
  margin-bottom: 0 !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 991px) {
  /* Featured image moins haute sur tablette */
  .content-7-featured {
    height: 350px;
  }

  /* Cards plus compactes */
  .content-7-cards {
    gap: 20px;
  }

  .content-7-card {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  /* Featured image moins haute sur mobile */
  .content-7-featured {
    height: 300px;
  }

  /* Carte overlay plus petite */
  .content-7-featured-card {
    bottom: 16px;
    left: 16px;
    right: 16px;
    padding: 20px;
  }

  .content-7-featured-surtitre {
    font-size: var(--text-sm);
  }

  .content-7-featured-title {
    font-size: var(--text-lg);
  }

  /* Titres plus petits sur mobile */
  .content-7-title h1,
  .content-7-title h2,
  .content-7-title h3 {
    font-size: var(--display-2sm);
  }

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

  /* Cards plus compactes */
  .content-7-cards {
    gap: 16px;
  }

  .content-7-card {
    padding: 16px;
  }

  .content-7-card-image {
    width: 100px;
    min-width: 100px;
    height: 70px;
  }

  .content-7-card-surtitre {
    font-size: var(--text-sm);
  }

  .content-7-card-title {
    font-size: var(--text-md);
  }
}