/* =========================================================================
   ORANGEX — MOBILE FIXES
   -------------------------------------------------------------------------
   Goal: make the existing theme reflow nicely on phones WITHOUT changing a
   single pixel on desktop.

   SAFETY RULE: every rule in this file lives inside a `max-width` media query
   (<= 991px). Desktop screens (>= 992px) never load any of these rules, so the
   desktop look & feel is guaranteed untouched.

   This file is loaded AFTER css/responsive.css, so its overrides win where the
   specificity matches.
   ========================================================================= */


/* ======================================================================
   1. FOUNDATION  (phones, <= 767px)
   ====================================================================== */
@media (max-width: 767px) {

    /* --- Stop sideways scrolling anywhere on the page --- */
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* --- Core bug fix: the theme pins .container to 300px on phones, which
       leaves huge empty margins on modern 360-430px screens. Make it fluid so
       content uses the full width of the phone. --- */
    .container {
        width: auto !important;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: auto;
        margin-right: auto;
    }

    /* --- Never let an image or embed push the page wider than the screen --- */
    img {
        max-width: 100%;
        height: auto;
    }

    iframe,
    video,
    embed,
    object {
        max-width: 100%;
    }

    /* --- Tables shouldn't force horizontal overflow; let them scroll inside
       their own box instead of stretching the page --- */
    table {
        max-width: 100%;
    }
}


/* ======================================================================
   2. LARGE PHONES  (480px - 767px)
   The theme sets .container to 450px here; override to fluid as well.
   ====================================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container {
        width: auto !important;
        max-width: 100%;
    }
}


/* ======================================================================
   3. HERO / PAGE BANNERS  (<= 767px)
   -------------------------------------------------------------------------
   The theme drops banner height to ~55px of padding on phones, so these wide
   "cover" photos collapse into a thin, unreadable strip. Give them a real
   height and vertically centre the title so the photo reads as a proper hero
   panel. `cover` keeps the image centred and crops instead of distorting.
   ====================================================================== */
@media (max-width: 767px) {

    .banner-area {
        min-height: 230px;
        padding-top: 90px !important;   /* clear the fixed logo/menu bar */
        padding-bottom: 40px;
        background-position: center center !important;
        background-size: cover !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* The banner's inner .container must not add its own min-height quirks */
    .banner-area > .container {
        width: 100% !important;
    }

    /* The list/about/contact banner variants share the same treatment */
    .banner-area.list,
    .banner-area.listabout,
    .banner-area.about-banner,
    .banner-area.contact-banner,
    .banner-area.signin-banner {
        min-height: 230px;
        padding-top: 90px !important;
        padding-bottom: 40px;
    }
}


/* ======================================================================
   4. CONTENT PHOTOS — never distort  (<= 767px)
   -------------------------------------------------------------------------
   Step 1 already forces `height:auto` on all <img>, so photos scale
   proportionally. Here we make the common photo blocks (hotel cards, gallery
   tiles, blog/portfolio images) fill their column cleanly and stay sharp.
   ====================================================================== */
@media (max-width: 767px) {

    .adventure-img img,
    .list .adventure-img img,
    .single-adventure img,
    .single-portfolio img,
    .single-gallery-item .gallery-image a img,
    .blog-image img,
    .blog-carousel .blog-image img,
    .team-image img,
    .best-sell-area img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Hotel list cards: let the image sit flush above the text column */
    .single-list-item .adventure-img {
        margin-bottom: 0;
    }
}


/* ======================================================================
   5. HOMEPAGE "CSR INITIATIVE" PHOTO  (<= 767px)
   -------------------------------------------------------------------------
   On desktop the CSR photo is painted as a side-background filling the right
   50% of the section at full height (background-size: 50% 100%), which
   STRETCHES / squishes the image. The theme clears this kind of side image on
   mobile for other sections but missed `.csr`, so on phones the photo stays
   distorted behind the text.
   Fix: drop the stretched side image, then reveal the (otherwise empty) right
   column as a clean, full-width photo band below the text, using `cover` so
   the image keeps its real proportions and is never distorted.
   ====================================================================== */
@media (max-width: 767px) {

    .csr {
        background: #edecec none;        /* remove the stretched 50% side image */
        padding-top: 45px;
        padding-bottom: 0;
    }

    .csr .col-md-6.hidden-xs {
        display: block !important;        /* un-hide the empty right column... */
        min-height: 220px;
        margin-top: 28px;
        /* ...and show the CSR photo in it, full width, correct proportions.
           Path is relative to this file (css/ -> ../images/). */
        background: #edecec url("../images/csr.png") no-repeat center center / cover;
    }
}


/* ======================================================================
   6. "TRIP INFORMATION" PLACE SECTIONS  (<= 767px)
   -------------------------------------------------------------------------
   Every `.trip-information<place>` section (Golden Triangle, Tiger's Abode,
   Agra, Jaipur, Kerala, ...) paints its photo as a stretched side-background
   (background-size: 50% 100%) with the text column sitting on top of it. On a
   phone the text ends up over a squished image and becomes hard to read.

   Same fix as the CSR section:
     a) clear the stretched side image -> text sits on a clean panel, readable;
     b) reveal the (empty) right column as a full-width photo band below the
        text, using `cover` so the photo keeps its real proportions.

   `[class*="trip-information"]` matches all the place variants at once.
   (It does NOT match `.trip-info-left-text`, which has no "trip-information".)
   ====================================================================== */
@media (max-width: 767px) {

    /* a) neutralise the stretched side background on every variant */
    [class*="trip-information"] {
        background-image: none !important;
        background-color: #edecec !important;
        padding-top: 45px !important;
        padding-bottom: 0 !important;
    }

    /* b) turn the empty right column into a full-width photo band */
    [class*="trip-information"] .col-md-5.hidden-xs,
    [class*="trip-information"] .col-md-6.hidden-xs {
        display: block !important;
        min-height: 210px;
        margin-top: 26px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }

    /* per-place photo for each band (paths are relative to css/) */
    .trip-informationagra            .col-md-5.hidden-xs { background-image: url("../images/experiences/right/agra.png"); }
    .trip-informationamritsar        .col-md-5.hidden-xs { background-image: url("../images/experiences/right/amritsar.png"); }
    .trip-informationgoa             .col-md-5.hidden-xs { background-image: url("../images/experiences/right/goa.png"); }
    .trip-informationjaipur          .col-md-5.hidden-xs { background-image: url("../images/experiences/right/jaipur.png"); }
    .trip-informationjodhpur         .col-md-5.hidden-xs { background-image: url("../images/experiences/right/jodhpur.png"); }
    .trip-informationmumbai          .col-md-5.hidden-xs { background-image: url("../images/experiences/right/mumbai.png"); }
    .trip-informationnewdelhi        .col-md-5.hidden-xs { background-image: url("../images/experiences/right/delhi.png"); }
    .trip-informationpushkar         .col-md-5.hidden-xs { background-image: url("../images/experiences/right/pushkar.png"); }
    .trip-informationudaipur         .col-md-5.hidden-xs { background-image: url("../images/experiences/right/udaipur.png"); }
    .trip-informationnepal           .col-md-5.hidden-xs { background-image: url("../images/experiences/right/nepal.png"); }
    .trip-informationnepaltour       .col-md-5.hidden-xs { background-image: url("../images/experiences/right/nepaltour.png"); }
    .trip-informationbhutan          .col-md-5.hidden-xs { background-image: url("../images/experiences/right/bhutan.png"); }
    .trip-informationkeraladelight   .col-md-5.hidden-xs { background-image: url("../images/experiences/right/kerala-delight.png"); }
    .trip-informationlehladakh       .col-md-5.hidden-xs { background-image: url("../images/experiences/right/leh-ladakh.png"); }
    .trip-informationgtnamaste       .col-md-5.hidden-xs { background-image: url("../images/experiences/right/namaste.png"); }
    .trip-informationculinarydelight .col-md-5.hidden-xs { background-image: url("../images/experiences/right/culinarydelight.png"); }
    .trip-informationtiger           .col-md-5.hidden-xs { background-image: url("../images/experiences/right/golden-tiger.png"); }
    .trip-informationkerala          .col-md-5.hidden-xs { background-image: url("../images/tours/kerala.png"); }
    .trip-information1               .col-md-5.hidden-xs { background-image: url("../images/experiences/1.png"); }
    .trip-information2               .col-md-5.hidden-xs { background-image: url("../images/experiences/right/contact.png"); }
    .trip-information3               .col-md-5.hidden-xs { background-image: url("../images/thanks1.png"); }
}