/**
 * Content Block 5 Section - Dioqa UI Kit
 * Header centré + 3 colonnes avec pattern alternant Image/Texte
 *
 * @package Dioqa_UI_Kit
 */

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

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

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

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

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

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

/* ========================================
   HEADER CENTRÉ
   ======================================== */

.content-5-header {
  max-width: 648px;
  margin: 0 auto;
}

/* Surtitre */
.content-5-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;
}

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

/* Description */
.content-5-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;
}

/* ========================================
   COLONNES
   ======================================== */

.content-5-column {
  height: 100%;
}

/* Images */
.content-5-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
}

.content-5-image img {
  border-radius: var(--img-radius, var(--radius-lg));
}

/* Texte des items */
.content-5-item-title {
  color: var(--bs-gray-dark);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.4;
}

.content-5-item-description p {
  color: var(--bs-gray-medium);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 0;
}

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

@media (max-width: 991px) {
  /* Header plus compact */
  .content-5-header {
    max-width: 100%;
  }

  /* Aspect ratio légèrement plus court sur tablette */
  .content-5-image {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 768px) {
  /* Titres plus petits sur mobile */
  .content-5-title h1,
  .content-5-title h2,
  .content-5-title h3 {
    font-size: var(--display-2sm);
  }

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

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

  /* Aspect ratio horizontal sur mobile pour économiser l'espace */
  .content-5-image {
    aspect-ratio: 16 / 9;
  }

  .content-5-item-title {
    font-size: var(--text-lg);
  }

  .content-5-item-description p {
    font-size: var(--text-sm);
  }
}