/*
 * GR Slider Casas Destacadas (clean)
 * Flat / Booking-like UI
 */

:root{
  --grscd-bg: #F4F6F8;
  --grscd-radius: 18px;
  --grscd-gap: 14px;
  --grscd-text: #111827;
  --grscd-muted: #6b7280;
}

/* Wrapper */
.grscd{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 12px;
}

/* Slider */
.grscd-slider{
  position: relative;
}

/* Track: horizontal scroll */
.grscd__track{
  display: flex;
  gap: var(--grscd-gap);
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 6px 0 10px;
  scrollbar-width: none;
}
.grscd__track::-webkit-scrollbar{ display:none; }

/* Slides */
.grscd-card{
  flex: 0 0 auto;
  width: 300px;              /* desktop base */
}
@media (max-width: 1024px){
  .grscd-card{ width: 280px; }
}
@media (max-width: 768px){
  /* show ~1/4 of next card */
  .grscd-card{ width: 84vw; max-width: 340px; }
  .grscd__track{ padding-right: 16vw; }
}

/* Link: flat, no box */
.grscd-card__link{
  display:block;
  text-decoration:none;
  color: var(--grscd-text);
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: 0;
}

/* Media: ALL 4 corners rounded, guaranteed */
.grscd-card__media{
  border-radius: var(--grscd-radius);
  overflow: hidden;
  background: #e5e7eb;
  /* Slightly lower photo (but still prominent) */
  height: 230px;
}
@media (max-width: 768px){
  .grscd-card__media{ height: 205px; }
}
@media (min-width: 900px){
  .grscd-card__media{ height: 240px; }
}

.grscd-card__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  border-radius: var(--grscd-radius);
  /* Hard crop to prevent any square-corner artifacts from wrappers */
  -webkit-clip-path: inset(0 round var(--grscd-radius));
  clip-path: inset(0 round var(--grscd-radius));
}

/* Body */
.grscd-card__body{
  padding: 10px 2px 0;
}
.grscd-card__title{
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
}

/* Lines */
.grscd-card__line{
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--grscd-muted);
  border: 0 !important;
  box-shadow: none !important;
}

/* Rating */
.grscd-card__rating{
  display:flex;
  align-items:center;
  gap: 6px;
}
.grscd-card__rating .grscd-star{
  font-size: 12px;
  line-height: 1;
}
.grscd-card__rating .grscd-rating-count{
  color: var(--grscd-muted);
}

/* Price: only amount bold */
.grscd-card__price{
  display:flex;
  gap: 4px;
  align-items: baseline;
  color: var(--grscd-text);
}
.grscd-card__price .grscd-price-prefix,
.grscd-card__price .grscd-price-suffix{
  font-weight: 400;
}
.grscd-card__price .grscd-price-amount{
  font-weight: 700;
}

/* Nav buttons: flat */
.grscd__nav{
  position:absolute;
  top: 95px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.85);
  box-shadow: none;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.grscd__nav--prev{ left: -6px; }
.grscd__nav--next{ right: -6px; }
@media (max-width: 768px){
  .grscd__nav{ top: 88px; }
}

/* Remove any inherited borders/lines/shadows from theme */
.grscd, .grscd *{
  box-shadow:none !important;
  outline:0 !important;
}
.grscd a, .grscd a:hover{
  text-decoration:none;
}


/* === v1.6.1 Visual tweaks === */
/* Make nav arrows visible */
.grscd__nav {
  background: rgba(255,255,255,0.92);
}
.grscd__nav svg,
.grscd__nav i,
.grscd__nav span {
  color: #111827 !important;
  fill: #111827 !important;
  stroke: #111827 !important;
}

/* Reviews color (brand accent) */
.grscd-card__rating .grscd-star,
.grscd-card__rating .grscd-rating-avg {
  color: #04acbf !important;
}
.grscd-card__rating .grscd-rating-count {
  color: #6b7280 !important;
}


/* === v1.6.2 Typography & desktop layout === */

/* Title a bit heavier */
.grscd-card__title{
  font-weight: 700;
}

/* Reviews slightly heavier */
.grscd-card__rating .grscd-rating-count{
  font-weight: 500;
}

/* Desktop: show 4 cards + peek of 5th */
@media (min-width: 1024px){
  .grscd-slider .swiper-slide{
    width: 23.5% !important; /* 4 full cards + small peek */
  }
}


/* === v1.6.2: Title + reviews weight, 4 cards + peek on desktop === */

/* Slightly heavier title */
.grscd-card__title{
  font-weight: 700;
}

/* Reviews a bit stronger */
.grscd-card__rating{
  font-size: 13px;
}

/* Desktop: show 4 cards and a small peek of the 5th */
@media (min-width: 1025px){
  .grscd-card{
    width: calc((100% - (var(--grscd-gap) * 3)) / 4.2);
    min-width: 240px;
    max-width: 300px;
  }
}


/* === v1.6.3 final touches === */

/* Stronger reviews */
.grscd-card__rating .grscd-star,
.grscd-card__rating{
  font-size: 14px;
}
.grscd-card__rating .grscd-rating-count{
  color: #334155 !important;
  font-weight: 600;
}

/* Nav arrows color */
.grscd__nav{
  background: rgba(255,255,255,0.92);
}
.grscd__nav svg,
.grscd__nav i,
.grscd__nav span{
  color: #04acbf !important;
  fill: #04acbf !important;
  stroke: #04acbf !important;
}

/* Mobile photo a bit taller */
@media (max-width: 768px){
  .grscd-card__media{ height: 220px; } /* was 205px */
}


/* === v1.6.4 Desktop-only tweaks === */

/* Desktop: Only rating number bold + brand color */
@media (min-width: 1025px){
    .grscd-card__rating .grscd-rating-count{
    font-weight: 400 !important;
    color: var(--grscd-muted) !important;
  }
}

/* Navigation arrows: desktop only, new visible style */
@media (min-width: 1025px){
  .grscd__nav{
    width: 42px;
    height: 42px;
    background: #04acbf;
    border-radius: 999px;
    box-shadow: none;
  }
  .grscd__nav svg,
  .grscd__nav i,
  .grscd__nav span{
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }
}

/* Hide navigation on mobile */
@media (max-width: 1024px){
  .grscd__nav{
    display: none !important;
  }
}


/* === v1.6.5 Final micro-fixes === */

/* Reviews bold everywhere */

/* Mobile: photo +5% height */
@media (max-width: 768px){
  .grscd-card__media{
    height: 231px;
  }
}

/* Mobile: show 5% more of next card */
@media (max-width: 768px){
  .grscd-card{
    width: 89vw;
  }
  .grscd__track{
    padding-right: 11vw;
  }
}

/* Desktop: fix left arrow visibility */
@media (min-width: 1025px){
  .grscd__nav--prev{
    left: 4px;
    z-index: 5;
  }
}


/* === v1.6.6 Force-apply (breakpoint + overrides) === */
/* Ensure rating number is bold (and brand) everywhere */

/* Desktop-only nav: use 1024px breakpoint (common laptops) */
@media (min-width: 1024px){
  .grscd__nav--prev{
    left: 10px !important;
    z-index: 50 !important;
  }
  .grscd__nav--next{
    right: 10px !important;
    z-index: 50 !important;
  }
}

/* Hide nav on non-desktop */
@media (max-width: 1023px){
  .grscd__nav{ display:none !important; }
}

/* Mobile photo +5% (enforced) */
@media (max-width: 768px){
  .grscd-card__media{ height: 231px !important; }
}

/* Mobile: show 5% more of next card (enforced) */
@media (max-width: 768px){
  .grscd-card{ width: 89vw !important; }
  .grscd__track{ padding-right: 11vw !important; }
}


/* === v1.6.7: Nav only on hover + centered vertically (desktop) === */
@media (min-width: 1024px){
  /* Center nav vertically */
  .grscd__nav{
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .18s ease-in-out;
  }

  /* Show nav only when hovering the section */
  .grscd:hover .grscd__nav{
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}


/* === v1.6.8: VRBO round nav + 4 full cards desktop (no peek) === */

/* VRBO-like nav buttons: fully round */
@media (min-width: 1024px){
  .grscd__nav{
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
  }
}

/* Desktop: exactly 4 full cards, no peek */
@media (min-width: 1024px){
  .grscd-card{
    width: calc((100% - (var(--grscd-gap) * 3)) / 4) !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .grscd__track{
    padding-right: 0 !important;
  }
}


/* === v1.6.9 Final polish === */

/* Desktop nav: 10% smaller */
@media (min-width: 1024px){
  .grscd__nav{
    width: 40px !important;  /* ~10% smaller than 44 */
    height: 40px !important;
  }
}

/* Desktop nav hover/focus state to distinguish (not plain white) */
@media (min-width: 1024px){
  .grscd__nav:hover,
  .grscd__nav:focus-visible{
    filter: brightness(0.92);
    outline: 2px solid rgba(4,172,191,0.35);
    outline-offset: 2px;
  }
}

/* Mobile: show one full card + a small peek of next */
@media (max-width: 768px){
  .grscd-card{
    width: 88vw !important;   /* 100vw - 12vw peek */
    max-width: 360px !important;
  }
  .grscd__track{
    padding-right: 12vw !important;
  }
}


/* === v1.7.1 (root) === */
/* Rating: only the number is bold + brand color; rest normal */
.grscd-card__rating .grscd-star{
  color: #04acbf;
  font-weight: 400;
}
.grscd-card__rating .grscd-rating-avg{
  color: #04acbf;
  font-weight: 800;
}
.grscd-card__rating .grscd-rating-count{
  color: var(--grscd-muted);
  font-weight: 400;
}

/* Mobile: show 1 card + a small peek of the next (carousel cue) */
@media (max-width: 768px){
  .grscd-card{ width: 86vw !important; }
  .grscd__track{ padding-right: 14vw !important; }
}

/* Desktop nav: pressed state has color */
@media (min-width: 1024px){
  .grscd__nav:active{
    background: #0398aa !important; /* darker brand */
  }
}


/* === v1.7.2 fixes (mobile peek + nav press) === */

/* Mobile: stronger peek cue (1 card + clearly visible next) */
@media (max-width: 768px){
  .grscd-card{ width: 82vw !important; max-width: none !important; }
  .grscd__track{ padding-right: 18vw !important; }
}

/* Desktop nav: pressed state more obvious */
@media (min-width: 1024px){
  .grscd__nav:active{
    background: #027e8c !important; /* clearly darker */
    transform: translateY(-50%) scale(0.96) !important;
  }
}


/* === v1.7.3 Mobile peek +10% === */
@media (max-width: 768px){
  .grscd-card{
    width: 74vw !important;   /* was 82vw -> more next card visible */
  }
  .grscd__track{
    padding-right: 26vw !important; /* increase peek */
  }
}