/* ==========================================================================
   Mobile responsive overrides for Palemilos Apartments (elounda-palemilos.gr)
   Loaded AFTER template.css and the inline slider styles on every page.
   Desktop layout is untouched: everything lives inside media queries.
   ========================================================================== */

@media (max-width: 995px) {

    /* ---- Global sizing ------------------------------------------------- */
    html, body {
        overflow-x: hidden;
    }

    * {
        box-sizing: border-box;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ---- Main page shell: fixed 995px -> fluid ------------------------- */
    .webdynamic-eloundasheet {
        width: 100% !important;
        min-width: 0 !important;
    }

    #webdynamic-eloundapage-background-top-texture,
    #webdynamic-eloundapage-background-middle-texture,
    #webdynamic-eloundapage-background-glare {
        min-width: 0 !important;
    }

    .webdynamic-eloundasheet-body {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* ---- Layout table -> stacked blocks -------------------------------- */
    .webdynamic-eloundacontent-layout {
        display: block !important;
        width: 100% !important;
    }

    .webdynamic-eloundacontent-layout-row {
        display: block !important;
        width: 100% !important;
    }

    .webdynamic-eloundalayout-cell,
    .webdynamic-eloundacontent-layout .webdynamic-eloundalayout-cell {
        display: block !important;
        width: 100% !important;
    }

    .webdynamic-eloundacontent-layout .webdynamic-eloundasidebar1,
    .webdynamic-eloundacontent-layout .webdynamic-eloundasidebar2 {
        width: 100% !important;
    }

    /* ---- Left menu ------------------------------------------------------ */
    .webdynamic-eloundavmenublock {
        margin: 10px 0 !important;
    }

    ul.webdynamic-eloundavmenu a {
        height: 42px !important;
    }

    ul.webdynamic-eloundavmenu a .t {
        line-height: 42px !important;
        font-size: 16px !important;
        text-align: center;
    }

    ul.webdynamic-eloundavmenu a .l,
    ul.webdynamic-eloundavmenu a .r {
        height: 42px !important;
        background-size: auto 132px;
    }

    /* ---- DJ Image Slider (fade type): fixed 753x410 -> fluid ------------ */
    div[id^="djslider-loader"] {
        width: 100% !important;
        max-width: 753px;
        height: auto !important;
        aspect-ratio: 753 / 410;
    }

    div[id^="djslider"] {
        width: 100% !important;
        height: 100% !important;
    }

    div[id^="slider-container"] {
        width: 100% !important;
        height: 100% !important;
    }

    ul[id^="slider"] {
        width: 100% !important;
        height: 100% !important;
    }

    ul[id^="slider"] > li {
        width: 100% !important;
        height: 100% !important;
    }

    ul[id^="slider"] li img {
        width: 100% !important;
        height: auto !important;
    }

    ul[id^="slider"] .slide-desc {
        width: 100% !important;
    }

    /* ---- Booking / reservations box ------------------------------------ */
    #reservations {
        max-width: 100%;
        margin: 10px 0;
    }

    #reservations a {
        display: block;
        padding: 12px 10px !important;
        font-size: 15px !important;
    }

    #reservations table {
        width: 100% !important;
    }

    #reservations input[type="submit"],
    #reservations .Check {
        width: 100%;
        padding: 10px;
        font-size: 14px;
    }

    /* ---- Content area ---------------------------------------------------- */
    .webdynamic-eloundapostcontent,
    .webdynamic-eloundapostcontent li,
    .webdynamic-eloundapostcontent a,
    .webdynamic-eloundapostcontent table {
        font-size: 15px !important;
        text-align: left !important;
    }

    .webdynamic-eloundapostcontent h1 { font-size: 24px !important; }
    .webdynamic-eloundapostcontent h2 { font-size: 20px !important; }
    .webdynamic-eloundapostcontent h3 { font-size: 18px !important; }

    h1 a, h2 a, h3 a, h1, h2, h3 {
        font-size: 24px;
    }

    /* Wide price/policy tables become horizontally scrollable instead of
       overflowing the viewport. */
    .webdynamic-eloundapostcontent table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .webdynamic-eloundapostcontent table td {
        white-space: normal;
    }

    /* ---- Phoca Gallery thumbnails ----------------------------------------
       Keep the inline 150x130 box sizes intact (the inner -first/-second/
       -third divs are a display:table construction and must not be touched).
       Just un-float the outer boxes so they wrap and center on phones. */
    .phocagallery {
        text-align: center;
    }

    .phocagallery-box-file {
        float: none !important;
        display: inline-block;
        vertical-align: top;
    }

    /* ---- Header & footer --------------------------------------------------
       The header is a 970x155 logo strip shown via a 1920px-wide absolutely
       positioned div using a left:50% / left:-50% centering trick. On phones
       that trick shows a giant zoomed crop of the middle of the logo, so we
       neutralize it: hide the duplicate background header and turn the
       in-sheet header into a normal fluid block that scales the whole strip. */
    #webdynamic-eloundaheader-bg {
        display: none !important;
    }

    div.webdynamic-eloundaheader {
        height: auto !important;
        overflow: visible !important;
        margin: 0 -8px !important; /* full-bleed past sheet-body padding */
    }

    div.webdynamic-eloundaheader-center {
        position: static !important;
        width: 100% !important;
        left: 0 !important;
    }

    div.webdynamic-eloundaheader-jpeg {
        position: static !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 970 / 155;
        min-height: 50px;
        background-size: contain !important;
        background-position: center center !important;
        background-color: #476e37;
    }

    .webdynamic-eloundafooter-text {
        font-size: 12px;
        padding: 8px;
    }

    /* ---- Language flags --------------------------------------------------- */
    #jflanguageselection {
        text-align: center;
        padding: 6px 0;
    }
}

/* Slightly narrower phones: tighten paddings a bit more */
@media (max-width: 480px) {

    .webdynamic-eloundasheet-body {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .webdynamic-eloundapost-body {
        padding: 5px !important;
    }

    div.webdynamic-eloundaheader {
        margin: 0 -5px !important;
    }

    .webdynamic-eloundapostcontent h1 { font-size: 21px !important; }
    .webdynamic-eloundapostcontent h2 { font-size: 18px !important; }
}