/* responsive.css - override and responsive fixes (2025-10-30)
   Purpose: Provide a clean, focused responsive stylesheet that
   complements existing styles without breaking visual design.
*/

:root{
    --primary-500: #8d2216;
    --primary-600: #a02819;
    --gap: 0.75rem;
}

/* Base helpers */
*, *::before, *::after{ box-sizing: border-box; }
html, body { height:100%; }
body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* Images, media and background handling */
img, picture, video, iframe { max-width:100%; height:auto; display:block; }
.carousel-item img, .modal img { width:100%; height:auto; display:block; object-fit:cover; }

/* Logo adjustments: replace inline sizing with classes */
.logo{ max-height:80px; max-width:100%; height:auto; }
@media (max-width:576px){ .logo{ max-height:60px; } }

/* Menu: responsive horizontal scroll and improved spacing */
.menu{ display:flex; gap:0.5rem; align-items:center; justify-content:center; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0.35rem 0.5rem; width:100%; }
.menu a.menu-link{ flex:0 0 auto; padding:0.45rem 0.6rem; white-space:nowrap; }

/* Sticky menu helper (mueve estilos inline a CSS) */
.menu-sticky{ position: sticky !important; top: 0 !important; z-index: 999 !important; margin: 0 !important; padding-bottom: 5px; }

/* Tabs and navs: prevent wrapping and allow scrolling */
.tabs-nav-wrapper .nav, .modern-tabs{ display:flex; gap:0.5rem; justify-content:center; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }

/* On small screens allow left alignment and natural scroll */
@media (max-width: 767.98px) {
    .menu, .tabs-nav-wrapper .nav, .modern-tabs { justify-content: flex-start; padding-left: 0.5rem; }
}

/* Sticky reserve button - ensure it doesn't cover content */
#sticky-reserve{ z-index:1100; }
@media (max-width: 991.98px){ body{ padding-bottom:92px; } }

/* Carousel background items: responsive heights */
.carousel .carousel-item{ background-size:cover !important; background-position:center center !important; min-height:60vh; }
@media (max-width:992px){ .carousel .carousel-item{ min-height:45vh; } }
@media (max-width:576px){ .carousel .carousel-item{ min-height:36vh; } }

/* Visita virtual container */
#rdVvirtual-container{ width:100%; position:relative; }
#rdVvirtual-container .rdVvirtual{ padding:0; height:52vh; min-height:260px; }
@media (max-width:768px){ #rdVvirtual-container .rdVvirtual{ height:38vh; min-height:200px; } }

/* .punto and .evento photos */
.punto .foto, .evento .foto{ height:180px; background-size:cover; background-position:center center; }
@media (max-width:992px){ .punto .foto, .evento .foto{ height:160px; } }
@media (max-width:576px){ .punto .foto, .evento .foto{ height:120px; } }

/* Iframe maps responsive (override inline widths/heights if present) */
.bloque-textura iframe{ width:100% !important; height:420px !important; max-width:100%; border:0 !important; }
@media (max-width:992px){ .bloque-textura iframe{ height:320px !important; } }
@media (max-width:576px){ .bloque-textura iframe{ height:220px !important; } }

/* Reservation action buttons layout */
.card-reservas-compacta .acciones-reserva{ display:flex; gap:0.75rem; align-items:center; justify-content:flex-start; flex-wrap:wrap; }
.card-reservas-compacta .acciones-reserva .btn-reservar-premium{ flex:1 1 220px; min-width:140px; }
@media (max-width:576px){ .card-reservas-compacta .acciones-reserva .btn-reservar-premium,
.card-reservas-compacta .acciones-reserva .btn-booking-externo{ flex-basis:100%; } }

/* Modal sizing */
.modal-dialog{ max-width:1140px; }
@media (max-width:576px){ .modal-dialog{ max-width:95%; margin:0.5rem auto; } }

/* Make sure swiper slides center well */
.swiper-slide{ box-sizing:border-box; padding:0 10px; }
@media (max-width:1200px){ .swiper-slide{ width:33.33% !important; } }
@media (max-width:992px){ .swiper-slide{ width:50% !important; } }
@media (max-width:768px){ .swiper-slide{ width:80% !important; } }

/* Accessibility focus outlines */
.btn-sticky:focus, .btn-reservar-premium:focus{ outline:3px solid rgba(0,0,0,0.12); outline-offset:3px; }

/* Utility spacing tweaks */
.container-1000{ max-width:1000px; margin:0 auto; }
.container-800{ max-width:800px; margin:0 auto; }

/* Small screens: reduce generous paddings for compactness */
@media (max-width:576px){ .py-6{ padding-top:2.5rem!important; padding-bottom:2.5rem!important; } }

/* Final safety: ensure long text doesn't overflow fixed containers */
.bloque, .container, .card-reservas-compacta{ word-wrap:break-word; }

/* End of responsive overrides */

/* ============== Hamburger menu styles ============== */
.menu-container.menu-sticky {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-1-claro, #f8f8f8);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.menu-toggle{
    display:none;
    background: transparent;
    border: none;
    font-size: 1.35rem;
    color: #333;
    padding: 10px 12px;
    cursor: pointer;
}

/* Small screens: show toggle and hide menu by default until opened */
@media (max-width: 767.98px) {
    .menu-toggle{ display: inline-flex; align-items: center; }
    /* hide menu links until user opens it */
    #site-menu{ display: none; }
    .menu-container.menu-open #site-menu{ display:flex; flex-direction:column; gap:0.25rem; padding:0.5rem; }
    .menu-container.menu-open #site-menu .menu-link{ padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,0.06); }
}

/* Desktop: ensure toggle hidden and menu visible */
@media (min-width: 768px) {
    .menu-toggle{ display: none; }
    #site-menu{ display:flex !important; }
}

/* small aesthetic for open menu overlay */
.menu-container.menu-open #site-menu { background: rgba(255,255,255,0.98); box-shadow: 0 4px 18px rgba(0,0,0,0.08); }

/* ============== end hamburger ============== */

/* Fixes specifically for widths <= 767px where layout was breaking */
@media (max-width: 767px) {
    /* make containers more compact and avoid horizontal overflow */
    .container, .container-1000, .container-800 { padding-left: 0.75rem; padding-right: 0.75rem; }

    /* Menu: smaller paddings and font-size to keep it inside viewport */
    .menu { padding-left: 0.5rem; padding-right: 0.5rem; }
    .menu a.menu-link { padding: 0.35rem 0.45rem; font-size: 0.95rem; }

    /* Tabs: left-align so scroll is natural */
    .tabs-nav-wrapper .nav, .modern-tabs { justify-content: flex-start; }

    /* Reduce carousel heights to avoid very tall blocks */
    .carousel .carousel-item { min-height: 30vh !important; }

    /* Punto/evento photos smaller to fit mobile layout */
    .punto .foto, .evento .foto { height: 110px !important; }

    /* Google Maps iframe smaller */
    .bloque-textura iframe { height: 200px !important; }

    /* Sticky reserve: slightly smaller bottom padding so content isn't pushed too far */
    body { padding-bottom: 72px; }

    /* Swiper slides: prefer near-full width for readability */
    .swiper-slide { width: 92% !important; padding: 0 8px; }

    /* Reduce top paddings on sections */
    .py-6 { padding-top:2.25rem!important; padding-bottom:2.25rem!important; }

    /* Avoid accidental fixed-width elements causing overflow */
    [style*="width:"] { max-width: 100% !important; }
}

/* Fine-tuning for tablet / small desktop range where site broke (768px - 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Menu: center but compact paddings to avoid overflow from other styles */
    .menu { justify-content: center !important; padding: 0.45rem 0.5rem !important; }
    .menu a.menu-link, .menu a { padding: 8px 10px !important; font-size: 0.95rem !important; }
    #site-menu { display:flex !important; flex-direction:row !important; gap:0.5rem !important; }

    /* Ensure menu container sticky behavior consistent */
    .menu-sticky { position: sticky !important; top: 0 !important; z-index: 9999 !important; }

    /* Carousel: reduce min-height to avoid huge vertical blocks */
    .carousel .carousel-item { min-height: 45vh !important; max-height: 56vh !important; }
    #topgal.carousel, #xgal.carousel, #egal.carousel { height:45vh !important; min-height:240px !important; max-height:420px !important; }

    /* Visita virtual: override !important sizes coming from estilos-modernos.css */
    #rdVvirtual-container, .rdVvirtual { height: 42vh !important; min-height: 220px !important; }
    .rdVV_panorama { height: 38vh !important; }

    /* Punto/evento photos: moderate height to fit two columns if needed */
    .punto .foto, .evento .foto { height: 140px !important; }

    /* Map iframe slightly smaller to avoid pushing */
    .bloque-textura iframe { height: 280px !important; }

    /* Swiper slides: medium size */
    .swiper-slide { width: 48% !important; }

    /* Reduce section paddings that cause overflow */
    .py-6 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }

    /* If any element forces width > viewport - force it to fit */
    .menu a, .container, .container-1000, .container-800, .carousel, .swiper-container { max-width: 100% !important; box-sizing: border-box !important; }

    /* Body padding for sticky reserve on tablet: keep modest space */
    body { padding-bottom: 84px !important; }
}

/* Additional overrides to neutralize aggressive spacing / fixed-dim rules from legacy CSS */
@media (max-width: 991.98px) {
    /* Reduce large utility paddings that were using !important in older CSS */
    .py-6, .pt-6, .pb-6, .py-sm-6, .pt-sm-6, .pb-sm-6 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    .py-7, .pt-7, .pb-7 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }

    /* Remove menu anchor borders that push width */
    .menu a, .menu a.menu-link { border-right: none !important; }

    /* Force top containers to be relative height, avoid huge fixed heights */
    .top, #topgal.carousel, #xgal.carousel, #egal.carousel { height: auto !important; min-height: 180px !important; max-height: 520px !important; }

    /* Neutralize overly large min-height on rdVvirtual from estilos-modernos.css */
    #rdVvirtual-container, .rdVvirtual { min-height: 200px !important; height: auto !important; }

    /* Ensure elements with fixed pixel padding/width don't overflow */
    [class*="-px"], [class*="-p-"] { max-width:100% !important; box-sizing: border-box !important; }
}

/* Safety: force no horizontal overflow globally (but keep visible scrollbars) */
html, body { overflow-x: hidden; }