/* =========================================================
   MOBILE FIXES STYLESHEET
   Loaded AFTER style.css and treeker.css so these rules win.
   Purpose:
   1) Remove the "Read More" button on mobile and show full
      content (readmore-content / readmore-container).
   2) Normalize/tighten section padding & margin on small
      screens so the layout isn't overly spaced out or
      cramped, and nothing overflows horizontally.
   ========================================================= */

/* -----------------------------------------------------------
   0. SAFETY NET — prevent any horizontal scroll on mobile
   ----------------------------------------------------------- */
* {
    box-sizing: border-box;
}
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}
img,
svg,
video,
iframe {
    max-width: 100%;
    height: auto;
}
.trustpilot-widget,
.tp {
    max-width: 100%;
}

/* -----------------------------------------------------------
   1. READ MORE — always show full content on mobile,
      hide the button and the fade/gradient overlay.
      (Overrides the 300px max-height cap that otherwise
      only opens up at the "open-md" / "open-lg" / "open-xl"
      breakpoints of 765px / 992px / 1200px.)
   ----------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .readmore-container .readmore-content,
    .readmore-container.open .readmore-content {
        max-height: none !important;
        overflow: visible !important;
    }
    .readmore-content:before,
    .readmore-container.open .readmore-content:before {
        display: none !important;
        content: none !important;
    }
    .readmore-btn,
    .readmore-container .readmore-btn {
        display: none !important;
    }
}

/* -----------------------------------------------------------
   2. GLOBAL CONTAINER / SPACING RULES FOR MOBILE
   ----------------------------------------------------------- */
@media screen and (max-width: 767px) {

    /* Keep readable side padding everywhere content sits
       directly inside a full-width wrapper */
    .container,
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Base rhythm: reduce default section spacing so pages
       don't feel too tall/empty on small screens */
    body {
        line-height: 1.55;
    }

    h1, .page-heading.large { font-size: 1.9rem !important; line-height: 1.25; }
    h2, .page-heading        { font-size: 1.6rem !important; line-height: 1.3; }
    h3                        { font-size: 1.25rem !important; line-height: 1.35; }

    .intro-section h2 {
        font-size: 1.6rem !important;
        margin-bottom: 0.75rem;
    }
    .intro-section {
        padding: 2.5rem 0 !important;
    }

    /* Big vertical-padding "hero"/marketing sections:
       cut them down considerably on phones */
    .padded-section            { padding: 1.5rem 0 !important; }
    .itinerary-section         { padding: 1.75rem 0 !important; }
    .page-title-section        { padding: 2.5rem 0 !important; }
    .confirmed-title-section   { padding: 2.5rem 0 !important; padding-top: 2.5rem !important; }
    .front-page-hero-section   { padding: 3rem 0 !important; }
    .display-image-block       { padding: 2rem 0 !important; }
    .values-section             { padding: 2rem 0 !important; }
    .footer-top-wrapper        { padding: 1.5rem 0 !important; }
    .copyright-section         { padding: 1.25rem 0 !important; }
    .team-grid-section         { padding: 2.5rem 0 !important; }
    .contact-section           { padding: 2.5rem 0 !important; }
    .partner-with-trekker-section { padding: 1.5rem 0 !important; }
    .archive-grid-section       { padding: 2rem 0 !important; }

    /* Cards / boxes: tighten inner padding a touch so
       content isn't cramped against oversized whitespace */
    .box,
    .tour-card-grid,
    .rounded-card {
        padding: 1rem !important;
    }

    /* Buttons: make full-width primary actions easier to tap
       and keep consistent side margins */
    .readmore-btn.w-full,
    .primary-btn.w-full,
    .btn.w-full {
        margin-left: 0;
        margin-right: 0;
    }

    /* Grids: default to a single, legible column on very
       narrow phones where a 2-up grid gets too tight */
    .archive-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

@media screen and (max-width: 480px) {
    .archive-grid,
    .team-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    .intro-section {
        padding: 2rem 0 !important;
    }
    .front-page-hero-section {
        padding: 2.25rem 0 !important;
    }
}

/* -----------------------------------------------------------
   3. MISC MOBILE POLISH
   ----------------------------------------------------------- */
@media screen and (max-width: 767px) {
    /* Keep the Trustpilot alignment tweak from pulling
       content off-screen on narrow viewports */
    .tp {
        margin-left: 0 !important;
    }
}