/*
 * Theme fixes: a short list of rules on top of the mockup stylesheets — the phone layout (most of this file) and
 * spacing for rich text that came from the old site (the mockups' demo text is a single paragraph, the real tours
 * have several, and the mockup CSS gives paragraphs no spacing).
 *
 * Mobile part — phones only (max-width:700px / 600px). Desktop and tablet are untouched: the mockups' desktop layout
 * is the approved design and every rule here lives inside a phone media query.
 *
 * Why this file exists: the mockup stylesheets already collapse most grids on phones (.why, .single, .pane, .tips …),
 * but the sections carry the mockups' own inline `style="grid-template-columns:…"`, and an inline style beats a
 * stylesheet rule — so on a phone those sections kept their desktop columns and the page scrolled sideways
 * (390 px viewport vs up to 628 px of content). The `!important` below is only there to beat those inline styles.
 * Loaded after the page's family stylesheet; see inc/setup.php.
 */

@media (max-width: 700px) {
    /* Multi-column sections → one column (the mockup CSS asks for this already; inline styles were overriding it) */
    .why, .single, .pane, .pane.is-active, .stats, .cgrid, .prog2 > .single { grid-template-columns: 1fr !important; }
    .why > div, .single > div, .pane > .f { min-width: 0; }
    .f:first-child, .f:nth-last-child(1) { grid-column: span 1 !important; }

    /* Wide tables scroll inside their box instead of stretching the whole page */
    .pguide, .cmpw, .rates, .prose table, .art__body table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .prose table, .art__body table { display: block; max-width: 100%; }
    .cmp, .pguide table { min-width: 500px; }

    /* Tab / chip rows scroll horizontally (they already use white-space:nowrap) */
    .subnav__tabs, .ctabs2, .stabs, .tabs2, .ftabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; min-width: 0; }
    .head, .head > div, .subnav .wrap { min-width: 0; }
    .subnav__tabs::-webkit-scrollbar, .ctabs2::-webkit-scrollbar, .stabs::-webkit-scrollbar, .tabs2::-webkit-scrollbar { display: none; }

    /* The fixed booking bar covered the last ~75 px of the page, and the WhatsApp button sat on top of it */
    body:has(.mbar) { padding-bottom: 76px; }
    body:has(.mbar) .fab { bottom: 92px; }

    /* Home mosaic: the cards are min-height:320px inside 260px rows, so every card overlapped the next one */
    .mosaic { grid-auto-rows: minmax(240px, auto) !important; }

    /* City / category tiles: 3 columns at 390 px left 105 px squares with clipped text */
    .pcats { grid-template-columns: 1fr 1fr !important; }
    .pcat { aspect-ratio: auto !important; min-height: 190px; }

    /* Long words (URLs, emails) must not push the layout out */
    .prose, .art__body, .rev p, .tc h3, .vc h3 { overflow-wrap: anywhere; }
}

@media (max-width: 600px) {
    .tips, .stopsg, .fld2, .q2, .q3 { grid-template-columns: 1fr !important; }
    .tip { grid-template-columns: 44px minmax(0, 1fr); }
    /* contact cards: their padding + the e-mail address made the card wider than a 360 px screen */
    .ccard { min-width: 0; padding-left: 16px; padding-right: 16px; }
    .ccard *, .tip * { min-width: 0; overflow-wrap: anywhere; }
}

/* ---- Collapsible filter panel (phones only) --------------------------------------------------
 * The sidebar holds 5–6 filter boxes; fully expanded it pushed the tour grid far down the page.
 * On a phone it is now closed behind a "Filters" button and opens as a sheet over the page.        */
.fbtn { display: none; }

@media (max-width: 1100px) {   /* same breakpoint where the design stacks the sidebar above the grid */
    .fbtn {
        display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 12px 18px;
        border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink);
        font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer;
    }
    .fbtn svg { width: 16px; height: 16px; }
    .fbtn__n { display: none; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--gold, #a97c50); color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
    .fbtn__n.is-on { display: inline-block; }

    .cols > .side { display: none; }
    .cols > .side.is-open {
        display: block; position: fixed; inset: 0; z-index: 120; margin: 0; padding: 18px 18px 96px;
        background: var(--bg, #fff); overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .side.is-open .fbtn__done {
        position: fixed; left: 18px; right: 18px; bottom: 18px; width: auto; justify-content: center; text-align: center;
    }
    .fbtn__done { display: none; }
    .side.is-open .fbtn__done { display: inline-flex; }
    body.filters-open { overflow: hidden; }
}

/* Migrated rich text: the live tours' day descriptions are several paragraphs; the mockups' demo text is one, so the
   design has no paragraph spacing. Only the gap BETWEEN paragraphs is added — a single-paragraph day is untouched. */
.dayx__b p + p,
.prose p + p,
.art__body p + p,
.stp__c p + p { margin-top: 12px; }

/* "Load more": the mockup CSS only hides tour cards (.tgrid .tc.is-hidden). Article cards and search results use the same
   mechanism now, so the rule is generalised to every card inside the grid the button controls. */
#pgrid > .is-hidden { display: none; }