/* =====================================================
   Horizon Magazine Manager — hmm-hero
   Vedette full · split · hero+thumbs · mosaïques
   ===================================================== */

.hmm-hero {
  --hmm-gap:          4px;
  --hmm-radius:       8px;
  --hmm-title-color:  #ffffff;
  --hmm-hero-h:       auto;
  --hmm-hero-overlay: rgba(0,0,0,0.65);
  width: 100%;
}

/* ─── Layout container ──────────────────────────────── */
.hmm-hero__layout {
  display: flex;
  gap: var(--hmm-gap);
  width: 100%;
}

/* ─── Card overlay de base ──────────────────────────── */
.hmm-hero__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--hmm-radius);
  flex: 1;
  min-width: 0;
}
/* Dans le slider : chaque slide prend 100% — pas de flex:1 */
.hmm-slider .swiper-slide {
  width: 100% !important;
  flex-shrink: 0 !important;
}
.hmm-slider .swiper-slide .hmm-hero__card {
  flex: none !important;
  width: 100% !important;
  min-width: 0;
}
.hmm-slider .swiper { overflow: hidden; width: 100%; }
.hmm-slider .swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; }

.hmm-hero__card-link {
  display: block;
  position: relative;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.hmm-hero__card .hmm-img-wrap {
  width: 100%;
  height: 100%;
  min-height: 160px;
}

.hmm-hero__card .hmm-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* ─── Overlay styles ────────────────────────────────── */
.hmm-hero__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--hmm-radius);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

[data-overlay="gradient-bottom"]::before {
  background: linear-gradient(to top,
    var(--hmm-hero-overlay, rgba(0,0,0,.85)) 0%,
    rgba(0,0,0,.3) 40%,
    transparent 100%
  );
}

[data-overlay="gradient-full"]::before {
  background: linear-gradient(to top,
    var(--hmm-hero-overlay, rgba(0,0,0,.9)) 0%,
    rgba(0,0,0,.5) 50%,
    rgba(0,0,0,.15) 100%
  );
}

[data-overlay="band"]::before {
  background: none;
}
.hmm-hero__card[data-overlay="band"] .hmm-hero__content {
  background: var(--hmm-hero-overlay, rgba(0,0,0,.78));
  height: var(--hmm-band-h, auto);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

[data-overlay="none"]::before {
  display: none;
}

/* ─── Contenu ───────────────────────────────────────── */
.hmm-hero__content {
  position: absolute;
  z-index: 2;
  padding: 16px 20px;
  width: 100%;
  box-sizing: border-box;
  color: var(--hmm-title-color);
}

/* Positions */
.hmm-hero__content--bottom-left  { bottom: 0; left: 0; text-align: left; }
.hmm-hero__content--bottom-center { bottom: 0; left: 0; right: 0; text-align: center; }
.hmm-hero__content--bottom-right { bottom: 0; right: 0; text-align: right; }
.hmm-hero__content--center {
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
}

.hmm-hero__title {
  margin: 6px 0 0;
  color: var(--hmm-title-color);
  line-height: 1.3;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

.hmm-hero__excerpt {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* Meta dans overlay */
.hmm-hero__card .hmm-meta__cat {
  font-size: 10px;
}
.hmm-hero__card .hmm-meta__date,
.hmm-hero__card .hmm-meta__author {
  color: rgba(255,255,255,.75);
  font-size: 11px;
}

/* ─── Hover effects ─────────────────────────────────── */
.hmm-hero--hover-zoom .hmm-hero__card:hover .hmm-img {
  transform: scale(1.05);
}

.hmm-hero--hover-fade .hmm-hero__card::before {
  transition: opacity 0.3s ease;
}
.hmm-hero--hover-fade .hmm-hero__card:hover::before {
  opacity: 0.85;
}

/* ─── Layout: hero-full ─────────────────────────────── */
.hmm-hero--hero-full .hmm-hero__layout {
  display: block;
}
.hmm-hero--hero-full .hmm-hero__main {
  width: 100%;
}
.hmm-hero--hero-full .hmm-hero__main .hmm-img-wrap {
  aspect-ratio: auto;
  height: var(--hmm-hero-h, auto);
  min-height: 300px;
}
.hmm-hero--hero-full .hmm-hero__title {
  font-size: clamp(20px, 3vw, 32px);
}

/* ─── Layout: hero-split ────────────────────────────── */
.hmm-hero--hero-split .hmm-hero__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ─── Layout: hero + thumbs droite ─────────────────── */
.hmm-hero--hero-2right .hmm-hero__layout,
.hmm-hero--hero-3right .hmm-hero__layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: stretch;
}

.hmm-hero__thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--hmm-gap);
  flex: 1;
  min-width: 0;
}

.hmm-hero__thumb {
  flex: 1;
}

.hmm-hero__main .hmm-hero__title {
  font-size: clamp(18px, 2.5vw, 28px);
}

.hmm-hero__thumb .hmm-hero__title {
  font-size: clamp(13px, 1.4vw, 16px);
}

/* ─── Layout: hero-below ────────────────────────────── */
.hmm-hero--hero-below .hmm-hero__layout {
  flex-direction: column;
}

.hmm-hero__row-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--hmm-gap);
}

/* ─── Mosaïque ──────────────────────────────────────── */

/* mosaic-1-2 */
.hmm-hero--mosaic-1-2 .hmm-hero__layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr;
}
.hmm-hero--mosaic-1-2 .hmm-mosaic__side {
  display: flex;
  flex-direction: column;
  gap: var(--hmm-gap);
}

/* mosaic-1-4 */
.hmm-hero--mosaic-1-4 .hmm-hero__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.hmm-hero--mosaic-1-4 .hmm-mosaic__side--2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hmm-gap);
}
.hmm-hero--mosaic-1-4 .hmm-mosaic__item--main {
  grid-row: 1 / 2;
}

/* mosaic-2-3 */
.hmm-hero--mosaic-2-3 .hmm-hero__layout {
  flex-direction: column;
  gap: var(--hmm-gap);
}
.hmm-hero--mosaic-2-3 .hmm-mosaic__row {
  display: grid;
  gap: var(--hmm-gap);
}
.hmm-hero--mosaic-2-3 .hmm-mosaic__row--2 { grid-template-columns: 1fr 1fr; }
.hmm-hero--mosaic-2-3 .hmm-mosaic__row--3 { grid-template-columns: 1fr 1fr 1fr; }

/* mosaic-3eq */
.hmm-hero--mosaic-3eq .hmm-hero__layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* Hauteur unifiée mosaïque */
.hmm-hero--mosaic-1-2 .hmm-hero__layout,
.hmm-hero--mosaic-1-4 .hmm-hero__layout {
  min-height: 400px;
}
.hmm-hero--mosaic-1-2 .hmm-mosaic__item--main,
.hmm-hero--mosaic-1-4 .hmm-mosaic__item--main {
  min-height: 400px;
}

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 991px) {
  .hmm-hero--hero-2right .hmm-hero__layout,
  .hmm-hero--hero-3right .hmm-hero__layout {
    grid-template-columns: 1fr;
  }
  .hmm-hero__thumbs {
    flex-direction: row;
  }
  .hmm-hero--hero-split .hmm-hero__layout {
    grid-template-columns: 1fr;
  }
  .hmm-hero--mosaic-2-3 .hmm-mosaic__row--3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .hmm-hero--mosaic-1-2 .hmm-hero__layout,
  .hmm-hero--mosaic-1-4 .hmm-hero__layout,
  .hmm-hero--mosaic-3eq .hmm-hero__layout {
    grid-template-columns: 1fr;
  }
  .hmm-hero--mosaic-1-4 .hmm-mosaic__side--2x2 {
    grid-template-columns: 1fr 1fr;
  }
  .hmm-hero__thumbs {
    flex-wrap: wrap;
  }
  .hmm-hero__thumb {
    min-width: calc(50% - var(--hmm-gap));
  }
  .hmm-hero__row-thumbs {
    grid-template-columns: 1fr 1fr;
  }
  .hmm-hero--mosaic-2-3 .hmm-mosaic__row--2,
  .hmm-hero--mosaic-2-3 .hmm-mosaic__row--3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 479px) {
  .hmm-hero__thumbs,
  .hmm-hero__row-thumbs {
    flex-direction: column;
    grid-template-columns: 1fr;
  }
  .hmm-hero--mosaic-1-4 .hmm-mosaic__side--2x2 {
    grid-template-columns: 1fr;
  }
  .hmm-hero__content {
    padding: 12px 14px;
  }
}

/* ─── Nouvelles variables ───────────────────────────── */
.hmm-hero {
  --hmm-thumb-title-color: #ffffff;
  --hmm-excerpt-color:     #e0e0e0;
  --hmm-meta-color:        #cccccc;
  --hmm-title-size:        clamp(18px, 3vw, 32px);
  --hmm-title-weight:      800;
  --hmm-thumb-title-size:  15px;
  --hmm-excerpt-size:      13px;
  --hmm-meta-size:         12px;
  --hmm-badge-bg:          var(--hmm-accent, #e74c3c);
  --hmm-badge-color:       #ffffff;
  --hmm-thumb-h:           auto;
  --hmm-thumb-w:           auto;
  --hmm-nav-color:         #ffffff;
  --hmm-nav-bg:            rgba(0,0,0,0.5);
  --hmm-pag-color:         #ffffff;
}

/* ─── hero-split ────────────────────────────────────── */
.hmm-hero--hero-split .hmm-hero__layout { display: block; }
.hmm-hero__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hmm-gap, 4px);
  align-items: center;
  min-height: var(--hmm-hero-h, auto);
}
.hmm-hero__split-img { overflow: hidden; border-radius: var(--hmm-radius); line-height: 0; }
.hmm-hero__split-img img { width: 100%; display: block; object-fit: cover; }
.hmm-hero__split-img a { display: block; }
.hmm-hero__split-body {
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hmm-hero__split-body .hmm-hero__title {
  font-size: var(--hmm-title-size);
  font-weight: var(--hmm-title-weight);
  line-height: 1.2;
  margin: 0;
}
.hmm-hero__split-body .hmm-hero__excerpt {
  color: var(--hmm-text, #333);
  font-size: var(--hmm-excerpt-size);
}

/* ─── hero__thumbs (right) ──────────────────────────── */
.hmm-hero__thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--hmm-gap);
  flex: 0 0 36%;
  max-width: 36%;
}
.hmm-hero__thumb { min-height: var(--hmm-thumb-h, 120px); }
.hmm-hero__thumb .hmm-img-wrap { height: var(--hmm-thumb-h, auto); }

/* ─── hero-below ────────────────────────────────────── */
.hmm-hero--hero-below .hmm-hero__layout { flex-direction: column; }
.hmm-hero__row-thumbs {
  display: flex;
  gap: var(--hmm-gap);
  flex: 1;
}
.hmm-hero__row-thumbs .hmm-hero__thumb {
  flex: 1;
  min-width: 0;
  max-width: var(--hmm-thumb-w, none);
}
.hmm-hero__row-thumbs .hmm-hero__thumb .hmm-img-wrap {
  height: var(--hmm-thumb-h, auto);
}

/* ─── mosaic-3eq : hauteur carte ────────────────────── */
.hmm-hero--mosaic-3eq .hmm-hero__layout { flex-wrap: wrap; }
.hmm-hero--mosaic-3eq .hmm-mosaic__item { flex: 1 1 calc(33% - var(--hmm-gap)); min-width: 0; }
.hmm-hero--mosaic-3eq .hmm-hero__card .hmm-img-wrap { height: 100%; }

/* ─── Titre vignette (couleur indépendante) ─────────── */
.hmm-hero__thumb .hmm-hero__title { color: var(--hmm-thumb-title-color) !important; font-size: var(--hmm-thumb-title-size) !important; }
.hmm-hero__thumb .hmm-hero__excerpt { color: var(--hmm-excerpt-color); font-size: var(--hmm-excerpt-size); }
.hmm-hero__thumb .hmm-meta { color: var(--hmm-meta-color) !important; font-size: var(--hmm-meta-size) !important; }

/* ─── Badge ─────────────────────────────────────────── */
.hmm-meta__cat {
  background: var(--hmm-badge-bg, var(--hmm-accent, #e74c3c)) !important;
  color: var(--hmm-badge-color, #fff) !important;
}

/* ─── Slider : styles flèches ───────────────────────── */
.hmm-slider .swiper-button-prev,
.hmm-slider .swiper-button-next {
  color: var(--hmm-nav-color) !important;
  background: var(--hmm-nav-bg);
  transition: opacity .2s;
}
.hmm-slider .hmm-slider-nav--circle { border-radius: 50%; width: 44px; height: 44px; }
.hmm-slider .hmm-slider-nav--square { border-radius: 4px; width: 40px; height: 40px; }
.hmm-slider .hmm-slider-nav--minimal { background: transparent; }
.hmm-slider .hmm-slider-nav--ghost { background: transparent; border: 2px solid var(--hmm-nav-color); border-radius: 50%; width: 44px; height: 44px; }

/* ─── Slider : styles pagination ───────────────────── */
.hmm-slider .swiper-pagination-bullet { background: var(--hmm-pag-color) !important; opacity: .5; }
.hmm-slider .swiper-pagination-bullet-active { opacity: 1; }
.hmm-slider .swiper-pagination-fraction { color: var(--hmm-pag-color); font-size: 13px; font-weight: 600; }
.hmm-slider .swiper-pagination-progressbar { background: rgba(255,255,255,.2); }
.hmm-slider .swiper-pagination-progressbar-fill { background: var(--hmm-pag-color) !important; }
.hmm-slider .hmm-slider-pag--line .swiper-pagination-bullet {
  width: 24px; height: 3px; border-radius: 2px;
}

/* ─── Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
  .hmm-hero__split { grid-template-columns: 1fr; }
  .hmm-hero__thumbs { flex: none; max-width: 100%; flex-direction: row; flex-wrap: wrap; }
  .hmm-hero__row-thumbs { flex-wrap: wrap; }
}