/**
 * Orlando Rent Direct — capa responsive
 * Enlázalo después de custom-hotel.css / style.css para aplicar ajustes.
 * Breakpoints alineados con Bootstrap 5 y con el tema Rivora.
 * Las variables usan el selector `*` para coincidir con custom-hotel.css.
 */

.room-details i {
  text-shadow: none;
  padding: 12px 5px;
  width: 30px;
  height: 36px;
  text-align: center;
  font-size: 14px;
  margin: 0 3px 0 3px;
  color: #d4b37e;
}

/*
 * Things to Do (index): igual altura visual en todas las tarjetas.
 * aspect-ratio define la forma; object-fit cubre sin deformar fotos muy anchas/altas.
 */
.ord-things-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.ord-things-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
 * Heroes sin Jarallax JS: añade `jarallax jarallax-static-bg` al <section>.
 * Variante `--hero-*` define object-position vertical (cover, sin deformar).
 */
.jarallax-static-bg .jarallax-img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transform: none !important;
  margin-top: 0 !important;
}

/* The Villa — más zona superior (cuadros / cabecera). */
.jarallax-static-bg--hero-villa .jarallax-img {
  object-position: center 85%;
}

/* Gallery — cliente: bajar encuade (valor alto = ancla más abajo en la foto). */
.jarallax-static-bg--hero-gallery .jarallax-img {
  object-position: center 80%;
}

/* --------------------------------------------------------------------------
   1. Extra large screens — until 1400px (below XXL)
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1399.98px) {
  * {
    --container-max-width: 1140px;
    --h1-font-size: 52px;
    --h2-font-size: 42px;
    --subheader-title-font-size: 52px;
  }
}

/* --------------------------------------------------------------------------
   2. Desktop / laptop — until 1200px (below XL)
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1199.98px) {
  * {
    --container-max-width: 960px;
    --h1-font-size: 48px;
    --h2-font-size: 38px;
    --subheader-title-font-size: 48px;
    --logo-width: 155px;
    --text-circle-width: 300px;
  }
}

/* --------------------------------------------------------------------------
   3. Tablet horizontal / laptop small — until 992px (below LG)
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 991.98px) {
  * {
    --container-max-width: 720px;
    --h1-font-size: 40px;
    --h2-font-size: 34px;
    --h3-font-size: 24px;
    --subheader-title-font-size: 40px;
    --mainmenu-font-size: 16px;
    --logo-width: 150px;
    --logo-footer-width: 140px;
    --text-circle-width: 280px;
  }
}

/* --------------------------------------------------------------------------
   4. Tablet vertical — 768px–979px (matches theme adjustments)
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 979.98px) {
  * {
    --btn-padding: 8px 22px;
  }
}

/* --------------------------------------------------------------------------
   5. Tablet / mobile large — until 768px (below MD)
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767.98px) {
  * {
    --body-font-size: 15px;
    --h1-font-size: 34px;
    --h2-font-size: 30px;
    --h3-font-size: 22px;
    --h4-font-size: 18px;
    --subheader-title-font-size: 34px;
    --logo-width: 140px;
    --btn-padding: 10px 24px;
    --text-circle-width: 240px;
  }

  body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
}

/* --------------------------------------------------------------------------
   6. Mobile — until 576px (below SM)
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 575.98px) {
  * {
    --h1-font-size: 30px;
    --h2-font-size: 26px;
    --h3-font-size: 20px;
    --h5-font-size: 17px;
    --subheader-title-font-size: 30px;
    --logo-width: 130px;
    --rounded-1: 12px;
  }
}

/* --------------------------------------------------------------------------
   7. Mobile small — until 480px
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 479.98px) {
  * {
    --body-font-size: 14px;
    --h1-font-size: 26px;
    --h2-font-size: 24px;
    --subheader-title-font-size: 26px;
    --btn-font-size: 14px;
    --btn-padding: 8px 18px;
    --text-circle-width: 200px;
  }
}

/* --------------------------------------------------------------------------
   8. Mobile very narrow — until 360px
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 359.98px) {
  * {
    --h1-font-size: 24px;
    --h2-font-size: 22px;
    --subheader-title-font-size: 24px;
    --logo-width: 120px;
  }
}

/* Referencia mobile-first (añade reglas bajo el @media que necesites):
   (min-width: 576px) SM  |  (min-width: 768px) MD  |  (min-width: 992px) LG
   (min-width: 1200px) XL |  (min-width: 1400px) XXL */

/* --------------------------------------------------------------------------
   9. Intermediate range of the theme — 980px–1199px
   -------------------------------------------------------------------------- */
@media (min-width: 980px) and (max-width: 1199.98px) {
  * {
    --container-max-width: 1000px;
  }
}

/* --------------------------------------------------------------------------
   10. Cutoff used in style.css (830px)
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 830px) {
  /* Ajustes específicos del menú / cabecera si los necesitas */
}

/* --------------------------------------------------------------------------
   11. Only touch screens — comfortable touch targets
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  * {
    --btn-padding: 10px 22px;
  }
}

/* --------------------------------------------------------------------------
   12. Horizontal orientation on low screens
   -------------------------------------------------------------------------- */
@media screen and (orientation: landscape) and (max-height: 500px) {
  * {
    --subheader-title-font-size: clamp(28px, 5vh, 40px);
    --h1-font-size: clamp(26px, 5vh, 36px);
  }
}

/* --------------------------------------------------------------------------
   13. iPad / tablet in vertical (theme reference)
   -------------------------------------------------------------------------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  /* Ajustes para bloques de altura fija o sliders si aplica */
}

/* --------------------------------------------------------------------------
   14. Reduced motion preference (accessibility)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   15. Print
   -------------------------------------------------------------------------- */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }

  header,
  #menu-btn,
  .no-print {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   16. High contrast (optional)
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  * {
    --body-font-color: #1a1a1a;
    --heading-font-color: #000000;
  }
}