/* --- ID 194: hivepress - welcome --- */
/* === Home — carrousel horizontal "Biens récemment ajoutés"
   -> garde 100% le design original des cards, change juste la disposition
*/

/* La rangée qui suit le H2 "Biens récemment ajoutés" */
.home h2.home-recent-listings + .hp-listings.hp-block.hp-grid .hp-row {
  display: flex;
  flex-wrap: nowrap;          /* toutes les cards sur une seule ligne */
  overflow-x: auto;           /* scroll horizontal */
  overflow-y: visible;        /* éviter coupe d'ombre en hauteur */
  gap: 24px;
  padding: 8px 24px 28px;     /* espace pour ombres + scroll */
  margin: 0 -24px;            /* garde la coupe par les marges */
}

/* Chaque item garde la logique col-sm-4 (1/3) mais devient scrollable */
.home h2.home-recent-listings + .hp-listings.hp-block.hp-grid .hp-grid__item {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  overflow: visible;
}

.home h2.home-recent-listings + .hp-listings.hp-block.hp-grid {
  overflow: visible;
  position: relative;
}

/* Home recent: conserve le zoom image, évite la card qui sort du cadre */
.home h2.home-recent-listings + .hp-listings.hp-block.hp-grid
.hp-listing.hp-listing--view-block:hover {
  transform: none !important;
}

/* Scrollbar discrète (optionnel) */
.home h2.home-recent-listings + .hp-listings.hp-block.hp-grid .hp-row::-webkit-scrollbar {
  height: 6px;
}
.home h2.home-recent-listings + .hp-listings.hp-block.hp-grid .hp-row::-webkit-scrollbar-track {
  background: transparent;
}
.home h2.home-recent-listings + .hp-listings.hp-block.hp-grid .hp-row::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 999px;
}















/* =========================================
   HOME — bloc "Locations ajoutées récemment"
   → cartes full-width et ombres propres en mobile
   ========================================= */
@media (max-width: 768px) {

  /* On vise seulement la home + le bloc récent */
  .home .home-recent-listings + .hp-listings.hp-grid {
    /* On élargit légèrement le bloc pour que les ombres
       ne soient pas coupées par les marges du container */
    margin-left: -1rem;
    margin-right: -1rem;
  }

  /* On neutralise les marges internes de la rangée */
  .home .home-recent-listings + .hp-listings .hp-row {
    margin-left: 0;
    margin-right: 0;
  }

  /* Chaque item occupe toute la largeur du bloc,
     avec un léger padding interne pour garder le radius visible */
  .home .home-recent-listings + .hp-listings .hp-grid__item {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Carte elle-même : radius et ombre propres, comme sur la page annonces */
  .home .home-recent-listings + .hp-listings .hp-listing.hp-listing--view-block {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  }
}




/* =========================================
   HOME — Listings récents
   Fix bandes sombres sur les côtés (mobile)
   ========================================= */
@media (max-width: 768px) {

  /* On remet le container à sa place */
  .home .home-recent-listings + .hp-listings.hp-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .home .home-recent-listings + .hp-listings .hp-row {
    margin: 0 !important;
    padding-inline: 0 !important;
  }

  .home .home-recent-listings + .hp-listings .hp-grid__item {
    padding-inline: 0 !important;
    margin: 0 !important;
  }

  /* La card est un peu plus étroite que l’écran
     => l’ombre ne colle plus aux bords */
  .home .home-recent-listings + .hp-listings
  .hp-listing.hp-listing--view-block {
    width: auto !important;
    max-width: 92vw !important;      /* légère marge à gauche/droite */
    margin: 0 auto 20px !important;  /* centrée */

    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12) !important; /* ombre un peu plus douce */
  }
}










/*************************************************
 * HOME — CARROUSEL MOBILE (Locations ajoutées récemments)
 * Override fort contre les rules mobile globales HivePress
 *************************************************/
@media (max-width: 768px){

  /* Rangée = carrousel horizontal */
  h2.home-recent-listings + .hp-listings.hp-block.hp-grid > .hp-row{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    overflow-x: auto !important;
    overflow-y: visible !important;

    gap: 16px !important;
    padding: 0 16px 18px !important;
    margin: 0 !important;

    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  /* Chaque item = slide */
  h2.home-recent-listings + .hp-listings.hp-block.hp-grid > .hp-row > .hp-grid__item{
    flex: 0 0 auto !important;

    width: 84vw !important;
    max-width: 360px !important;

    margin: 0 !important;
    padding: 0 !important;

    scroll-snap-align: start;
  }

  /* Important : neutralise les “centrages colonne” hérités */
  h2.home-recent-listings + .hp-listings.hp-block.hp-grid > .hp-row{
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /* Scrollbar discrète */
  h2.home-recent-listings + .hp-listings.hp-block.hp-grid > .hp-row::-webkit-scrollbar{
    height: 6px;
  }
  h2.home-recent-listings + .hp-listings.hp-block.hp-grid > .hp-row::-webkit-scrollbar-track{
    background: transparent;
  }
  h2.home-recent-listings + .hp-listings.hp-block.hp-grid > .hp-row::-webkit-scrollbar-thumb{
    background: rgba(148,163,184,.4);
    border-radius: 999px;
  }
}















/*************************************************
 * HOME — CARROUSEL MOBILE (UX + SHADOW SAFE)
 * - Scrollbar visible en permanence
 * - Ombres non coupées
 *************************************************/
@media (max-width: 768px){

  /* 1) Le carrousel doit laisser respirer les ombres */
  h2.home-recent-listings + .hp-listings.hp-block.hp-grid{
    overflow: visible !important;          /* parent safe */
  }

  h2.home-recent-listings + .hp-listings.hp-block.hp-grid > .hp-row{
    overflow-x: auto !important;
    overflow-y: visible !important;        /* important pour les ombres */
    padding: 0 18px 26px !important;       /* + bas = place pour l’ombre + scrollbar */
    margin: 0 !important;

    /* scrollbar Firefox (visible) */
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,.55) rgba(148,163,184,.14);
  }

  /* 2) Ombres : on évite que la card soit “rognée” par un overflow caché ailleurs */
  h2.home-recent-listings + .hp-listings.hp-block.hp-grid > .hp-row > .hp-grid__item{
    overflow: visible !important;
    padding-bottom: 2px !important;        /* micro marge anti-cut */
  }

  /* 3) Scrollbar visible en permanence — WebKit (iOS/Chrome) */
  h2.home-recent-listings + .hp-listings.hp-block.hp-grid > .hp-row::-webkit-scrollbar{
    height: 10px;                          /* plus visible */
  }
  h2.home-recent-listings + .hp-listings.hp-block.hp-grid > .hp-row::-webkit-scrollbar-track{
    background: rgba(148,163,184,.14);
    border-radius: 999px;
    margin: 0 18px;                        /* aligne avec padding du row */
  }
  h2.home-recent-listings + .hp-listings.hp-block.hp-grid > .hp-row::-webkit-scrollbar-thumb{
    background: rgba(148,163,184,.55);
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.75); /* petit “contraste” sur fond clair */
  }

  /* 4) Petit “hint” visuel : léger fade à droite pour comprendre qu’on peut swiper */
  h2.home-recent-listings + .hp-listings.hp-block.hp-grid{
    position: relative;
  }
  h2.home-recent-listings + .hp-listings.hp-block.hp-grid::after{
    content:"";
    position:absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 100%;
    pointer-events:none;
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
  }
}