/**
 * Foxbow CMS Custom Styles
 * Styles pour les pages CMS avec layout 2 colonnes (3/4 contenu + 1/4 image)
 */

/* ============================================
   LARGEUR DU CONTAINER CMS - 1400px
   ============================================ */

/* Élargir le container principal à 1400px UNIQUEMENT pour le contenu des pages CMS */
/* IMPORTANT : Ne pas impacter le header ni le footer */

/* Cibler uniquement le container dans #wrapper pour les pages CMS */
#wrapper:has(#content.page-cms) > .container,
#wrapper:has(.page-cms) > .container {
  width: 1400px !important;
  max-width: 1400px !important;
}

/* Breadcrumb uniquement sur les pages CMS */
.breadcrumb-wrapper:has(~ #wrapper #content.page-cms) .container {
  width: 1400px !important;
  max-width: 1400px !important;
}

/* Layout 2 colonnes pour les pages CMS avec images */
.cms-two-columns-layout {
  display: flex;
  gap: 30px;
  align-items: center; /* Centre verticalement l'image */
}

/* Colonne de contenu (65% de la largeur) */
.cms-content-column {
  flex: 0 0 65%;
  max-width: 65%;
}

/* Colonne d'image (35% de la largeur) */
.cms-image-column {
  flex: 0 0 35%;
  max-width: 35%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image dans la colonne */
.cms-image-column .cms-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Styles pour le contenu CMS */
.cms-content-column h1,
.cms-content-column h2,
.cms-content-column h3,
.cms-content-column h4 {
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  color: #333;
}

.cms-content-column h1 {
  font-size: 2em;
}

.cms-content-column h2 {
  font-size: 1.5em;
}

.cms-content-column h3 {
  font-size: 1.25em;
}

.cms-content-column p {
  margin-bottom: 1em;
  line-height: 1.6;
  color: #555;
}

.cms-content-column ul,
.cms-content-column ol {
  margin-bottom: 1em;
  padding-left: 2em;
  line-height: 1.6;
}

.cms-content-column li {
  margin-bottom: 0.5em;
}

/* Styles pour les pages CMS sans image (layout standard) */
.page-cms:not(.cms-with-image) .cms-content-column {
  flex: 1 1 100%;
  max-width: 100%;
}

/* Responsive - Tablettes (< 992px) */
@media (max-width: 991px) {
  .cms-two-columns-layout {
    gap: 20px;
  }

  .cms-content-column {
    flex: 0 0 70%;
    max-width: 70%;
  }

  .cms-image-column {
    flex: 0 0 30%;
    max-width: 30%;
  }
}

/* Responsive - Mobile (< 768px) */
@media (max-width: 767px) {
  /* En mobile, passer en colonne avec image au-dessus */
  .cms-two-columns-layout {
    flex-direction: column-reverse;
    gap: 20px;
  }

  .cms-content-column,
  .cms-image-column {
    flex: 1 1 100%;
    max-width: 100%;
  }

  /* Image au-dessus du contenu en mobile */
  .cms-image-column {
    order: -1;
  }

  /* Ajuster la taille de l'image en mobile */
  .cms-image-column .cms-image {
    max-width: 100%;
    margin: 0 auto 20px;
  }

  /* Réduire les marges des titres en mobile */
  .cms-content-column h1 {
    font-size: 1.75em;
    margin-top: 1em;
  }

  .cms-content-column h2 {
    font-size: 1.35em;
    margin-top: 1em;
  }

  .cms-content-column h3 {
    font-size: 1.15em;
    margin-top: 0.75em;
  }
}

/* Très petits écrans (< 576px) */
@media (max-width: 575px) {
  .cms-two-columns-layout {
    gap: 15px;
  }

  .cms-content-column h1 {
    font-size: 1.5em;
  }

  .cms-content-column h2 {
    font-size: 1.25em;
  }

  .cms-content-column h3 {
    font-size: 1.1em;
  }

  .cms-content-column p,
  .cms-content-column li {
    font-size: 0.95em;
  }
}

/* Classes spécifiques pour les pages CMS connues */

/* Page Livraison (ID 1) */
.page-cms-1.cms-with-image {
  /* Styles spécifiques à la page livraison si nécessaire */
}

/* Page À propos (ID 4) */
.page-cms-4.cms-with-image {
  /* Styles spécifiques à la page à propos si nécessaire */
}