@media only screen and (max-width: 767px) {
    body {
        min-width: 0 !important;
    }

    /* Reduce horizontal padding so the logo image isn't clipped by max-width: 100% */
    body .gdlr-logo {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Logo image: 220px max, scales down gracefully on very small screens */
    .gdlr-logo a img {
        width: min(220px, 60vw) !important;
        height: auto !important;
    }

    /* Move hamburger to bottom-right of header, flush with where the menu opens */
    #gdlr-responsive-navigation .dl-trigger {
        top: auto !important;
        bottom: 5px !important;
        margin-top: 0 !important;
    }

    /* Menu sticks to header bottom — top: 100% of header-wrapper content height */
    .gdlr-header-wrapper .dl-menuwrapper > .dl-menu,
    .gdlr-header-wrapper .dl-menuwrapper > .dl-submenu {
        top: 100% !important;
        margin-top: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }

    /*
     * Column service items (3-column layout = "four columns" class in this theme's grid).
     * On desktop: padding-bottom:100px + margin-bottom:-100px + overflow:hidden on first/last
     * create equal-height columns. On mobile they stack, and this causes the "read more"
     * links to be clipped or hidden by overflow:hidden on .gdlr-first / .gdlr-last.
     * The existing fix in the page CSS used .three.columns which never matches (wrong selector).
     */
    .gdlr-column-service-tab-item.four.columns {
        padding-bottom: 0 !important;
        margin-bottom: 30px !important;
        overflow: visible !important;
    }

    .gdlr-column-service-tab-item.four.columns .gdlr-column-service-item.gdlr-type-1 {
        height: auto !important;
        min-height: 0 !important;
    }

    .gdlr-column-service-item.gdlr-type-1 .column-service-learn-more {
        position: static !important;
        display: inline-block !important;
        margin-top: 12px !important;
    }

    /*
     * TripAdvisor "selfserveprop" widget: iswide=true generates a fixed-width layout.
     * Wrap it in a scrollable container rather than clipping it.
     */
    .TA_selfserveprop {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
}