/* Grand Hotel — overrides al theme Relaxly (frontend público) */

/* Fix: imágenes verticales (habitación estándar) se desbordaban del card en /search y /categories.
   Forzamos cover y altura uniforme en todas las cards de habitación del listado y home. */
.room-list .room-list-img,
.room-list .room-list-img img,
.room-card .room-img,
.room-card .room-img img,
.room-grid-item .room-img,
.room-grid-item .room-img img,
.room-grid .room-img,
.room-grid .room-img img,
.featured-rooms .room-img img,
.product-list .product-img img {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
  border-radius: inherit;
}

/* === "Vive San Pedro" — cards de experiencias del mismo tamaño =========== */
/* El theme Relaxly renderiza cada experiencia con `.offer-card > .offer-image > img`
   (ver homepage1.blade.php). Las fotos del cliente tienen aspect-ratios distintos
   (alberca cuadrada, fachada panorámica, premium vertical). Forzamos un aspect
   ratio uniforme y altura mínima de la card para mantener la grilla pareja. */
.offer-section .offer-card,
.offer-ads-card,
.tp-offer-card,
.experience-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 520px;
}
.offer-section .offer-card .offer-image,
.offer-ads-card .offer-image,
.offer-section .offer-card .offer-img,
.offer-ad-item .offer-ad-img {
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  background: #0E1B2A;
}
.offer-section .offer-card .offer-image img,
.offer-section .offer-card .offer-img img,
.offer-ad-item .offer-ad-img img,
.offer-ads-card img,
.tp-offer-card img,
.experience-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
}
.offer-section .offer-card .offer-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Asegura que los íconos de servicios (line-art) no se estiren ni recorten. */
.our-services .service-item img,
.services-list .service-item img,
.tp-service-icon img {
  max-width: 64px;
  max-height: 64px;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* === Hero — carousel Bootstrap 5 ========================================== */
.hero-section { position: relative; }
.hero-section .carousel,
.hero-section .carousel-inner,
.hero-section .carousel-item { height: 100%; }
.hero-section .carousel-item .hero-screen { display: block; }
.hero-section .carousel-control-prev,
.hero-section .carousel-control-next {
  width: 4%;
  opacity: .85;
  z-index: 5;
}
.hero-section .carousel-control-prev-icon,
.hero-section .carousel-control-next-icon {
  background-color: rgba(14,27,42,.55);
  border-radius: 50%;
  padding: 22px;
  background-size: 50% 50%;
}
.hero-section .carousel-indicators {
  bottom: 26px;
  z-index: 5;
}
.hero-section .carousel-indicators [data-bs-target] {
  width: 12px; height: 12px;
  border-radius: 50%;
  background-color: rgba(255,255,255,.6);
  border: 0;
  margin: 0 6px;
}
.hero-section .carousel-indicators .active {
  background-color: #C9A35F;
}

/* === Botón "Reservar ahora" más grande y visible ========================== */
.btn.theme-btn,
.reservation-btn,
.search-btn,
.book-now-btn,
.booking-form .btn-primary,
.hero-content .btn.theme-btn {
  padding: 18px 42px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  border-radius: 8px !important;
  line-height: 1.2 !important;
}
.hero-content .btn.theme-btn {
  padding: 20px 48px !important;
  font-size: 1.2rem !important;
}

/* === Testimonios — avatares circulares de personas ======================== */
.testimonial-card .img-card,
.testimonial-card .client .img-card {
  width: 64px;
  height: 64px;
  border-radius: 50% !important;
  overflow: hidden;
  flex: 0 0 64px;
}
.testimonial-card .img-card img,
.testimonial-card .client .img-card img,
.testimonial-card .avatar img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block;
}

/* Ajuste de aspect-ratio en sliders/hero para imágenes con orientación vertical. */
.tp-hero-slide img,
.slider-img img {
  object-fit: cover !important;
  object-position: center center !important;
}