/* CSS UNIFICADO DE ESPACIOS: tamanos de los tres carruseles y efectos actuales de n-5. Sustituye desktop.css, ancho.css y efectos-v2.css. */

/* Crown of India | Espacios | Formato 4:3 de los tres carruseles
   Solo ordenador (>= 801px). No modifica fotos, marcos, móvil, ni JavaScript.
   Archivo: assets/css/crown-espacios-carruseles-desktop.css
*/
@media (min-width: 801px) {
  /* RANG MAHAL: imagen a la izquierda */
  html body #espacios #rang-mahal {
    width: min(1312px, calc(100% - 48px)) !important;
    max-width: 1312px !important;
    grid-template-columns: minmax(0, min(694px, 55%)) minmax(0, 1fr) !important;
    column-gap: clamp(30px, 4.7vw, 72px) !important;
  }

  /* MAYUR MAHAL: imagen a la derecha */
  html body #espacios #mayur-mahal {
    width: min(1218px, calc(100% - 48px)) !important;
    max-width: 1218px !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(694px, 57%)) !important;
    column-gap: clamp(30px, 4.7vw, 72px) !important;
  }

  /* HAWA MAHAL: imagen a la izquierda */
  html body #espacios #hawa-mahal {
    width: min(1282px, calc(100% - 48px)) !important;
    max-width: 1282px !important;
    grid-template-columns: minmax(0, min(694px, 56%)) minmax(0, 1fr) !important;
    column-gap: clamp(28px, 4vw, 60px) !important;
  }

  /* Tamaño del marco original, sin cambiar sus estilos decorativos */
  html body #espacios #rang-mahal .photo-frame--portrait,
  html body #espacios #mayur-mahal .photo-frame--mayur,
  html body #espacios #hawa-mahal .photo-frame--landscape {
    width: 100% !important;
    max-width: 694px !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
}

/* Crown of India — n-5: ampliar los tres carruseles.
   Ajuste integrado en el archivo que ya carga n-5.
   Sustituye el ajuste independiente crown-espacios-mayur-ancho.css.
   Selectores comprobados con el HTML n-5 y los CSS locales.
*/
@media (min-width: 1101px) {
  html body #espacios #rang-mahal.room-story--rang,
  html body #espacios #mayur-mahal.room-story--mayur,
  html body #espacios #hawa-mahal.room-story--hawa {
    width: min(1604px, calc(100% - 48px)) !important;
    max-width: 1604px !important;
  }

  html body #espacios #rang-mahal.room-story--rang,
  html body #espacios #hawa-mahal.room-story--hawa {
    grid-template-columns: minmax(0, min(868px, 57%)) minmax(0, 1fr) !important;
  }

  html body #espacios #mayur-mahal.room-story--mayur {
    width: min(1464px, calc(100% - 48px)) !important;
    max-width: 1464px !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(868px, 60%)) !important;
  }

  html body #espacios #rang-mahal .photo-frame--portrait,
  html body #espacios #mayur-mahal .photo-frame--mayur,
  html body #espacios #hawa-mahal .photo-frame--landscape {
    width: 100% !important;
    max-width: 868px !important;
    height: auto !important;
    aspect-ratio: 868 / 520.5 !important;
  }


}
@media (min-width: 1101px) {
  html body #espacios #rang-mahal .photo-frame--portrait,
  html body #espacios #mayur-mahal .photo-frame--mayur,
  html body #espacios #hawa-mahal .photo-frame--landscape {
    width: 100% !important;
    max-width: 848px !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
}








/* CROWN OF INDIA | LOS ESPACIOS | EFECTOS v2
   Archivo independiente. Cargar DESPUES de los estilos de la pagina.
   Solo afecta a Rang Mahal, Mayur Mahal y Hawa Mahal.
   No modifica tamanos, object-fit, object-position ni las fotos originales. */

/* Base: degradado superior y marco interior sobre la fotografia */
html body #espacios .room-carousel__slide {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
html body #espacios .room-carousel__slide::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(to bottom,
    rgba(30,16,35,.15) 0%,
    rgba(30,16,35,.06) 45%,
    rgba(30,16,35,0) 80%) !important;
}
html body #espacios .photo-frame::before {
  border-color: rgba(208,181,162,.50) !important;
  transition: border-color .6s ease !important;
}

/* Suavidad en las tres galerias; los selectores ganan a los bloqueos
   especificos transform:none!important del HTML original. */
html body #espacios #rang-mahal .room-carousel__slide picture img,
html body #espacios #mayur-mahal .room-carousel__slide picture img,
html body #espacios #hawa-mahal .room-carousel__slide picture img {
  transform: scale(1) !important;
  transform-origin: center center !important;
  transition: transform .85s cubic-bezier(.16,1,.3,1) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body #espacios #rang-mahal .room-carousel__slide:hover picture img,
  html body #espacios #mayur-mahal .room-carousel__slide:hover picture img,
  html body #espacios #hawa-mahal .room-carousel__slide:hover picture img {
    transform: scale(1.025) !important;
  }
  html body #espacios .photo-frame:hover::before {
    border-color: rgba(225,200,174,.85) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body #espacios #rang-mahal .room-carousel__slide picture img,
  html body #espacios #mayur-mahal .room-carousel__slide picture img,
  html body #espacios #hawa-mahal .room-carousel__slide picture img {
    transition: none !important;
  }
}