/* ref-grid-by-date.css
   2 columns >= 980px, 1 column < 980px (cards stay horizontal)
*/

/* container */
.ref-grid-by-date { width:100%; box-sizing:border-box; padding:0 16px; margin:0 auto; }

/* group title */
.ref-grid-by-date .group { margin-bottom:24px; }

.ref-grid-by-date .group-title{
  color: #082350;
  background: #ff7d01;
  border-radius: 5rem;
  padding: 0.4rem 2rem;
  font-weight: 700;
  font-size: 1.6rem;
  margin: 3rem auto;
  width: fit-content;
}

/* row = flex container */
.ref-grid-by-date .ref-grid-row {
  display:flex;
  flex-wrap:wrap;
  gap:3%;
  align-items:stretch; /* ensure children stretch vertically */
  margin:0;
  padding:0;
}

/* immediate children act as columns (handles WPBakery wrappers) */
.ref-grid-by-date .ref-grid-row > * {
  box-sizing:border-box;
  padding:0 12px;
  margin:0;
  flex:0 0 calc(50% - 3%);   /* two items per row on wide screens */
  max-width:calc(50% - 3%);
  min-width:260px;
  display:flex;              /* allow the nested card to stretch vertically */
  flex-direction:column;     /* enable inner card to grow vertically */
  align-items:stretch;
  min-height:0;              /* important for flex child overflowing */
}

/* if .ref-grid-item is the direct child (no wrapper), make it fill the column */
.ref-grid-by-date .ref-grid-row > .ref-grid-item {
  width:100%;
  display:block;
  padding:0;
  margin:0 0 2rem 0!important;
}

/* collapse to a single column under 980px (each item takes full width)
   BUT keep card internals horizontal so image stays left / body stays right */
@media (max-width:979px) {
  .ref-grid-by-date .ref-grid-row > * {
    flex:0 0 100%;
    max-width:100%;
    min-width:0;
  }

  /* give a bit more vertical spacing between stacked rows */
  .ref-grid-by-date .ref-grid-row > * { padding-bottom: 1.5rem; }
}

/* card layout: KEEP horizontal (image left  / content right) */
.ref-grid-by-date .ref-grid-card {
  display:flex;
  flex-direction:row;   /* <-- keep row even on small screens */
  width:100%;
  box-sizing:border-box;
  min-height:200px;
  overflow:hidden;
  background:#fff;
  border-radius: 25px;
  align-items:stretch;  /* stretch children to same height */
  gap:0;
  flex:1 1 auto;        /* allow card to grow to fill column cell */
  min-height:0;         /* ensure flexbox children can shrink properly */
}

/* media column (left) */
.ref-grid-by-date .ref-card-media {
  flex:0 0 50%;
  max-width:50%;
  box-sizing:border-box;
  overflow:hidden;
  border-radius:25px 0 0 25px;
  display:flex;             /* make the media container a flexbox */
  align-items:stretch;      /* stretch the anchor / image to full height */
  justify-content:center;
  min-height:0;             /* allow flex shrink */
}

/* On very narrow screens reduce the media width so content has room */
@media (max-width:520px) {
  .ref-grid-by-date .ref-card-media {
    flex:0 0 40%;   /* smaller image area on very small screens */
    max-width:40%;
  }
}

/* force anchors/images to fully fill column */
.ref-grid-by-date .ref-card-media a {
  display:block !important;
  width:100% !important;
  height:100% !important;
  box-sizing:border-box !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* make the image cover the left column without distortion */
.ref-grid-by-date .ref-card-media img,
.ref-grid-by-date .ref-card-media .wp-post-image {
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  box-sizing:border-box !important;
  min-height:0; /* ensure it can shrink/grow within flex */
}

/* content column (right) */
.ref-grid-by-date .ref-card-body {
  flex:1 1 50%;
  max-width:50%;
  padding: 1rem 2rem;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  border-top-right-radius:25px;
  border-bottom-right-radius:25px;
  min-height:0; /* critical for correct flex behaviour */
  overflow: visible;
}

/* On very narrow screens adjust body max-width */
@media (max-width:520px) {
  .ref-grid-by-date .ref-card-body {
    flex:1 1 60%;
    max-width:60%;
    padding:0.8rem 1rem;
  }
}

/* visuals */
.ref-grid-by-date .ref-card-body h4 {
  margin:0 0 1rem!important;
  font-size:1.6rem;
  line-height:1.15;
  font-weight:700;
  color:#082350;
  text-transform:uppercase;
}
.ref-grid-by-date .ref-card-body .location {
  font-weight:700;
  color:#082350;
  text-transform:uppercase;
  margin:0 0 1rem;
}
.ref-grid-by-date .ref-card-body .excerpt {
  flex: 1;
  margin: 0 0 10px;
  color: #082350;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  line-height: 1.35rem;
  font-size: 1.1rem;
}

/* reservation button */
.ref-grid-by-date .btn-reserver a {
  color:#082350;
  background:#ff7d01;
  border-radius:6px;
  padding:8px 12px;
  font-weight:700;
  text-decoration:none;
  display:inline-block;
  margin-top:10px;
}

/* safety: ensure card internals don't inherit unexpected floats */
.ref-grid-by-date .ref-card-media a { float:none !important; }

/* minor fixes: ensure no unexpected overflow from nested elements */
.ref-grid-by-date .ref-card-body * { box-sizing:border-box; }

/* ref-grid-by-date - month button styles (active state) */
.ref-grid-by-date .ref-grid-controls .rg-btn {
  background: #ffffff;
  color: #082350;
  border: 1px solid #ddd;
  padding: .45rem .9rem;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}

/* hover */
.ref-grid-by-date .ref-grid-controls .rg-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(8,35,80,0.06);
}

/* active (selected) button — couleur distincte */
.ref-grid-by-date .ref-grid-controls .rg-btn.rg-btn-active {
  background: #082350 !important; /* couleur du fond actif */
  color: #ffffff !important;      /* texte blanc sur fond */
  border-color: #082350 !important;
  box-shadow: 0 6px 18px rgba(8,35,80,0.12);
}

/* variant visuelle pour "30 jours" si tu veux un badge légèrement différent */
.ref-grid-by-date .ref-grid-controls .rg-btn[ data-rg-target="30days" ] {
  padding-left: .75rem;
  padding-right: .75rem;
}

/* disabled state (optionnel) */
.ref-grid-by-date .ref-grid-controls .rg-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}