/*
  Bloc: autres-heb (carrousel "Découvrir nos autres hébergements")
  Extrait de : themes/Nature&Residence/single-hebergements.php
               (bloc AUTRES-HEB-START ... AUTRES-HEB-END)
*/

.nrl-others {
  max-width: 1274px;
  margin: 60px auto 80px;
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
}
.nrl-others h2 {
  font-size: 32px;
  font-weight: 700;
  color: #383838;
  text-align: center;
  margin: 0 0 32px;
  font-family: inherit;
}
.nrl-others__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.nrl-others__track::-webkit-scrollbar { display: none; }
.nrl-others__card {
  flex: 0 0 calc((100% - 48px) / 3);
  scroll-snap-align: start;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .07);
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.nrl-others__img { aspect-ratio: 16 / 11; width: 100%; object-fit: cover; display: block; background: #eee; }
.nrl-others__body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 9px; }
.nrl-others__name { font-size: 20px; font-weight: 700; color: #383838; }
.nrl-others__meta { display: flex; flex-wrap: wrap; gap: 16px; color: #7a7a7a; font-size: 14px; }
.nrl-others__link { color: #ff912c; font-weight: 600; text-decoration: none; margin-top: 2px; }
.nrl-others__nav {
  position: absolute;
  top: calc(50% + 16px);
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #ff912c;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
  color: #fff;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.nrl-others__nav--prev { left: -12px; }
.nrl-others__nav--next { right: -12px; }

@media (max-width: 992px) {
  .nrl-others__card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 600px) {
  .nrl-others__card { flex-basis: 86%; }
  .nrl-others__nav { display: none; }
  .nrl-others h2 { font-size: 26px; }
}