/* =============================================================
   Mala Villa — responsive overrides
   Loaded AFTER style.css to override fixed-pixel desktop layout.
   Breakpoints:
     ≤1100px  — large tablet / narrow desktop
     ≤900px   — tablet portrait: sidebar drops below content
     ≤640px   — phone: single-column everything, stacked nav
   ============================================================= */

/* Universal: images never overflow their container */
img { max-width: 100%; height: auto; }

/* ============================================================
   Hamburger button (hidden on desktop, shown on mobile below)
   ============================================================ */
.nav-toggle {
    display: none;
    position: absolute;
    top: 20px; right: 16px;
    width: 44px; height: 44px;
    padding: 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 1001;
}
.nav-toggle span {
    display: block;
    width: 24px; height: 2px;
    margin: 5px auto;
    background: #59daff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The wrapper is hard-coded to 1112px — let it shrink on smaller screens */
@media (max-width: 1140px) {
    .wrapper { width: auto; max-width: 100%; padding: 0 20px; box-sizing: border-box; }
    footer { min-width: 0; }
    footer .footer-bg ul { width: auto; padding: 0 20px; }
}

/* ---------- ≤1100px : narrow desktop / large tablet ---------- */
@media (max-width: 1100px) {
    /* Content/sidebar still side-by-side, but fluid */
    section .content { width: auto; float: none; margin: 0 0 30px 0; }
    section .content iframe,
    section .content img { max-width: 100%; height: auto; }
    #map-canvas { width: 100%; }

    /* Route icons ("Kako do nas") have no width in legacy CSS — cap them */
    section .content .content_body .route img { width: 44px; height: auto; margin: 0 14px 0 0; }

    /* Featured 3-up tiles wrap nicely */
    section .content .container { display: flex; flex-wrap: wrap; gap: 24px; }
    section .content .container li { float: none; width: calc(33.33% - 16px); margin: 0 0 20px 0; }
    section .content .container li.last { margin: 0 0 20px 0; }
    section .content .container li p { height: auto; }
    section .content .container li img { width: 100%; }

    /* Sidebar becomes full-width below content.
       Force a clean vertical flex stack so the calendar, the legend and
       the Facebook widget can NEVER float next to each other. */
    section .sidebar {
        float: none; width: 100%; max-width: 100%; margin: 0;
        display: flex; flex-direction: column; align-items: center; gap: 24px;
    }

    /* Calendar widget: legacy CSS hard-codes 250px/140px widths and uses
       a forest of floats + a fixed 440px height with overflow:hidden.
       Release ALL of that on mobile and lay it out as a simple block. */
    #cal_wrapper {
        width: 100% !important;
        max-width: 360px;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 16px !important;
        margin: 0 auto !important;
        box-sizing: border-box;
        display: block;
    }
    /* Kill every legacy float inside the calendar, then re-enable only
       the prev/next arrows on the right. */
    #cal_wrapper #the_months,
    #cal_wrapper .cal_month,
    #cal_wrapper #key_wrapper,
    #cal_wrapper #key,
    #cal_wrapper .cal_footer,
    #cal_wrapper .cal_footer .button,
    #cal_wrapper .cal_footer .selected,
    #cal_wrapper .cal_month ul,
    #cal_wrapper .cal_month ul li {
        float: none !important;
        clear: none !important;
    }
    #cal_wrapper #cal_controls {
        float: none !important;
        width: 100% !important;
        display: flex; justify-content: flex-end; gap: 6px;
        margin: 0 0 8px 0;
    }
    #cal_wrapper #the_months { width: 100% !important; display: block; }
    #cal_wrapper .cal_month {
        width: 100% !important; max-width: 100%;
        height: auto !important;
        margin: 0 0 14px 0;
        display: block;
    }
    #cal_wrapper .cal_month ul {
        width: 100% !important;
        display: grid; grid-template-columns: repeat(7, 1fr);
        gap: 2px;
        padding: 0; margin: 0;
    }
    #cal_wrapper .cal_month ul li {
        width: auto !important; height: 38px;
        margin: 0; line-height: 38px;
    }
    #cal_wrapper #key_wrapper { width: 100% !important; margin: 10px 0 0 0; }
    #cal_wrapper #key { width: 100% !important; }
    #cal_wrapper #key ul {
        width: 100% !important;
        display: flex; flex-wrap: wrap; gap: 6px 14px;
        padding: 0; margin: 6px 0 0 0;
    }
    #cal_wrapper #key ul li { width: auto !important; height: auto; line-height: 1.4; }
    /* Reset the legacy 280px push on the book button so it sits right
       under the calendar, not floating over it. */
    #cal_wrapper .cal_footer { margin: 18px 0 0 0 !important; clear: both; display: block; }
    #cal_wrapper .cal_footer .button { display: inline-block; }

    /* Facebook Page Plugin (iframe embed) — sits as a hard block under
       the calendar. clear:both / float:none so it can never escape the
       sidebar's flex stack and overlap the calendar. */
    .sidebar .fb-page-iframe,
    .sidebar .fb-page-iframe iframe {
        width: 100% !important; max-width: 500px !important;
        display: block;
    }
    .sidebar .fb-page-iframe {
        clear: both;
        float: none !important; position: static !important;
        margin: 0 auto;
    }

    /* Gallery: let images flow */
    section .content .gallery .gallery_grid_one,
    section .content .gallery .gallery_grid_two { width: auto; max-width: 100%; }
    section .content .gallery .img_holder { float: none; width: 100%; margin: 0 0 10px 0; }
    section .content .gallery .img_holder img { width: 100%; height: auto; display: block; }
}

/* ---------- ≤900px : tablet portrait ---------- */
@media (max-width: 900px) {
    /* Header: center the logo and switch to a hamburger menu */
    header { height: auto; padding: 16px 0; position: relative; }
    header h1 { float: none; width: 220px; height: 118px; margin: 0 auto; background-size: contain; }

    .nav-toggle { display: block; }

    /* Hide the inline desktop nav by default; show it as a drop-down panel
       under the header when the hamburger toggles .is-open. */
    header ul#primary-nav {
        float: none; clear: both;
        position: absolute;
        top: 100%; left: 0; right: 0;
        margin: 0;
        padding: 8px 0;
        background: #fff;
        box-shadow: 0 8px 18px rgba(0,0,0,.08);
        border-top: 1px solid #eee;
        display: none;
        z-index: 1000;
    }
    header ul#primary-nav.is-open { display: block; }
    header ul#primary-nav li {
        float: none; clear: both;
        display: block; width: 100%;
        margin: 0;
        font-size: 18px;
        text-align: center;
        background: none;
    }
    header ul#primary-nav li a {
        display: block;
        padding: 14px 20px;
        color: #333;
    }
    header ul#primary-nav li a span { display: none; }
    header ul#primary-nav li.last {
        width: 100%; height: auto;
        padding: 14px 20px;
        background-position: center right 20px;
        border-top: 1px solid #eee;
    }
    /* Language dropdown sits inline below its trigger inside the panel */
    header .toggle { float: none; clear: both; }
    header .toggle ul {
        position: static;
        float: none;
        margin: 0 auto 8px;
        padding: 8px 0;
        background: #f7f7f7;
        text-align: center;
        width: 100% !important;
        max-width: 100%;
    }
    header .toggle ul li { float: none; clear: both; margin: 0; height: auto; }
    header .toggle ul li a { display: block; padding: 10px 20px; }

    /* Featured tiles 2-up */
    section .content .container li { width: calc(50% - 12px); }

    /* Hero slider taller proportions on tablet */
    .full_page .royalSlider.heroSlider { height: 320px !important; }
    .rsOverflow, .rsContainer { height: 320px !important; }

    /* Footer: stack rows, drop the decorative top frame on small screens */
    footer .footer-bg { height: auto; background: none; padding: 20px 0 0; }
    footer .footer-bg ul {
        display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
        padding: 0 20px;
    }
    footer .footer-bg ul li {
        float: none; width: auto; height: auto; line-height: 1.4;
        margin: 0; padding: 10px 18px;
        background: rgba(255,255,255,.12); border-radius: 4px;
        font-size: 15px;
    }
    footer ul {
        float: none; width: 100% !important; max-width: 460px;
        margin: 0 auto 24px auto; text-align: center;
    }
    footer .facebook { float: none; margin: 0 auto; }
    footer .logo { margin: 0 0 30px 0; background-size: contain; }
    footer .wrapper.bottom {
        display: flex; flex-wrap: wrap; justify-content: center;
        padding: 30px 20px;
    }
}

/* ---------- ≤640px : phone ---------- */
@media (max-width: 640px) {
    .wrapper { padding: 0 14px; }

    /* Header / nav — hamburger styles already applied at ≤900px;
       just shrink the logo a bit more on phones. */
    header { padding: 12px 0 16px; }
    header h1 { width: 170px; height: 92px; }
    .nav-toggle { top: 14px; right: 10px; }
    /* Language toggle dropdown should not push layout */
    .toggle ul { width: auto !important; }

    /* Section */
    section { padding: 24px 0 30px; }
    section .content h2 { font-size: 20px; padding: 18px 0; background-size: 25% auto; }
    section .content .lead { font-size: 17px; margin: 0 0 28px 0; }

    /* Route icons even smaller on phone */
    section .content .content_body .route img { width: 36px; margin: 0 0 6px 0; }

    /* Featured tiles full-width */
    section .content .container { gap: 18px; }
    section .content .container li { width: 100%; margin: 0 0 24px 0; }
    section .content .container li.last { margin: 0; }
    section .content .container li img { display: block; margin: 0 auto 18px; }

    /* Routes list: stack icon above text */
    section .content .content_body .route li {
        line-height: 1.5; padding: 8px 0;
        display: flex; flex-direction: column; gap: 6px;
    }

    /* Hero slider shorter on phones */
    .full_page .royalSlider.heroSlider { height: 220px !important; }
    .rsOverflow, .rsContainer { height: 220px !important; }

    /* Map */
    #map-canvas { height: 220px; }

    /* Forms (contact / reservations): full-width inputs, stacked labels */
    section .kontakt label,
    section .rezervacija label {
        float: none; width: auto; line-height: 1.4;
        padding: 0 0 6px 0; display: block;
    }
    section .kontakt input[type="text"], section .rezervacija input[type="text"],
    section .kontakt input.half,      section .rezervacija input.half,
    section .kontakt textarea,        section .rezervacija textarea {
        width: 100%; box-sizing: border-box;
        padding-left: 14px;
    }
    section .kontakt input[type="submit"], section .rezervacija input[type="submit"] {
        margin: 10px 0 0 0; width: 100%;
    }
    section .kontakt .error, section .rezervacija .error { left: 0; position: static; display: block; }

    /* Pricing table — let it scroll horizontally rather than overflow page */
    table.cjenik { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Calendar widget — go full width on phones so individual day cells
       are large enough to tap (legacy 320px is too narrow) */
    section .sidebar { max-width: 100%; padding: 0 4px; }
    #cal_wrapper { max-width: 100%; margin: 0 auto; }

    /* Footer trim */
    footer .footer-bg ul li { font-size: 13px; padding: 8px 12px; }
    footer ul { margin-bottom: 18px; }
    footer .logo { height: 96px; }
}

/* ---------- Admin panel: ensure topbar / tabs / grid behave ----------
   admin.php already uses flex; we only need to make sure the viewport
   meta plus a few small tweaks render right on phones. */
@media (max-width: 640px) {
    #wrap .topbar { flex-wrap: wrap; gap: 10px; padding: 12px 14px !important; }
    #wrap .tabs { flex-wrap: wrap; }
    #wrap .tabs a { padding: 10px 14px !important; }
    /* Calendar months: single column on phone */
    #the_months { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Mobile-friendly gallery / lightbox
   The bundled lightbox-2.6 is desktop-only: hover-only nav arrows,
   fixed pixel container, no swipe. On touch screens we make it act
   like a modern full-screen swipeable gallery.
   ============================================================ */
@media (max-width: 900px), (pointer: coarse) {
    /* Full-screen dark overlay */
    .lightboxOverlay {
        position: fixed !important;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100% !important; height: 100% !important;
        background: #000 !important;
        opacity: .96 !important;
        filter: none !important;
    }

    /* Lightbox positioned to fill the viewport.
       NOTE: do NOT force `display` here — lightbox.js toggles display
       between `none` (hidden) and `block` (shown). Overriding it would
       make the empty overlay appear on every page. */
    .lightbox {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        padding: 0 !important;
        text-align: center;
    }
    /* Vertically center the inner container without changing the
       outer .lightbox display value */
    .lightbox .lb-outerContainer { margin-top: 8vh !important; }

    .lb-outerContainer {
        background: transparent !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        margin: 0 auto !important;
    }
    .lb-container { padding: 0 !important; width: 100%; }
    .lb-image {
        max-width: 100vw !important;
        max-height: 80vh !important;
        width: auto !important;
        height: auto !important;
        margin: 0 auto;
        border-radius: 0 !important;
    }

    /* Always-visible large tap-targets for prev/next.
       Do NOT touch `.lb-nav` display — lightbox.js manages it. */
    .lb-nav a.lb-prev,
    .lb-nav a.lb-next {
        opacity: .6 !important;
        filter: alpha(opacity=60) !important;
        background-repeat: no-repeat !important;
        background-size: 28px auto !important;
        height: 100% !important;
        width: 25% !important;
    }
    .lb-nav a.lb-prev { background-image: url(../img/icons/lightbox_prev.png) !important; background-position: 14px center !important; }
    .lb-nav a.lb-next { background-image: url(../img/icons/lightbox_next.png) !important; background-position: right 14px center !important; }
    .lb-nav a.lb-prev:hover,
    .lb-nav a.lb-next:hover { opacity: 1 !important; }

    /* Caption / counter / close on a dark bar */
    .lb-dataContainer {
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 10px 14px !important;
        box-sizing: border-box;
        background: rgba(0,0,0,.4);
    }
    .lb-data .lb-caption { font-size: 15px !important; }
    .lb-data .lb-number  { font-size: 12px !important; }
    .lb-data .lb-close {
        width: 40px !important; height: 40px !important;
        background-size: 24px auto !important;
        background-position: center !important;
        opacity: .9 !important;
    }

    /* Gallery grid: 2-up on tablet, 1-up on phone, with consistent gaps */
    section .content .gallery { width: 100%; }
    section .content .gallery .gallery_grid_one,
    section .content .gallery .gallery_grid_two,
    section .content .gallery .gallery_grid_three {
        float: none !important; width: 100% !important; max-width: 100% !important;
        display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 8px 0;
    }
    section .content .gallery .img_holder {
        float: none !important; width: 100% !important; margin: 0 !important;
        display: block; overflow: hidden;
    }
    section .content .gallery .img_holder img {
        width: 100% !important; height: 100% !important;
        object-fit: cover; aspect-ratio: 4 / 3;
        display: block;
    }
}

@media (max-width: 480px) {
    section .content .gallery .gallery_grid_one,
    section .content .gallery .gallery_grid_two,
    section .content .gallery .gallery_grid_three {
        grid-template-columns: 1fr;
    }
    section .content .gallery .img_holder img { aspect-ratio: 3 / 2; }
}