/*
 * Chaussmart — composeur d'accueil : mise en page front.
 *
 * Flexbox + aspect-ratio, auto-alignant : quelles que soient les proportions, une composition
 * tient dans un cadre 1300×600 (800+20+480 = 1300 en largeur ; 290+20+290 = 600 en hauteur).
 * Gouttière 20px. Empilement vertical sous 768px. Couleurs de marque via les variables du
 * thème enfant (--cs-secondary / --cs-main, posées sur :root dans custom.css), avec repli.
 * Aucune marge verticale propre : l'écart entre sections de la home est le seul row-gap de la
 * grille (custom.css, « Home — rythme vertical »).
 */

.cs-hpc {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
}

.cs-hpc__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 480 1 0;
}

/* Proportions des colonnes en ligne */
.cs-hpc--rows_right > .cs-hpc__slot--big,
.cs-hpc--rows_left > .cs-hpc__slot--big { flex: 800 1 0; }
.cs-hpc__slot--half,
.cs-hpc__slot--full { flex: 1 1 0; }

/* Emplacement */
.cs-hpc__slot {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.cs-hpc__slot--full  { aspect-ratio: 1300 / 600; }
.cs-hpc__slot--half  { aspect-ratio: 640 / 600; }
.cs-hpc__slot--big   { aspect-ratio: 800 / 600; }
.cs-hpc__slot--small { aspect-ratio: 480 / 290; }

.cs-hpc__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cs-hpc__btn {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: inline-block;
  padding: 0.6rem 1.4rem;
  background: var(--cs-secondary-strong, #ef4b8f);
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 2px;
  white-space: nowrap;
  opacity: 0.88;
  transition: background-color 0.15s ease;
}

.cs-hpc__slot:hover .cs-hpc__btn {
  background: var(--cs-main-strong, #6b3689);
}

/* Empilement mobile (breakpoint Bootstrap md, < 768px) : chaque emplacement en pleine largeur,
 * centré, sa propre proportion conservée. On repasse align-items en `stretch` (le mode par
 * défaut) : la valeur `flex-start` posée plus haut pour l'alignement en ligne empêchait sinon
 * les emplacements de s'étirer sur toute la largeur, les collant à gauche. */
@media (max-width: 767px) {
  .cs-hpc {
    flex-direction: column;
    align-items: stretch;
  }
  /* rows_right / rows_left : sur mobile on ne garde que la GRANDE image ; les deux petites
     vivent dans .cs-hpc__col, qu'on masque (colonne présente uniquement dans ces compositions). */
  .cs-hpc__col { display: none; }
  .cs-hpc__slot--big,
  .cs-hpc__slot--half,
  .cs-hpc__slot--full {
    flex: 1 1 auto;
    width: 100%;
  }
  /* Annule le `flex: 800 1 0` des règles desktop (spécificité supérieure : sélecteur enfant) :
     en colonne, son flex-basis 0 forçait la hauteur de la grande image à 0 et masquait
     l'aspect-ratio. Même spécificité ici, donc l'ordre source l'emporte dans la media query. */
  .cs-hpc--rows_right > .cs-hpc__slot--big,
  .cs-hpc--rows_left > .cs-hpc__slot--big {
    flex: 1 1 auto;
  }
}