/* ==========================================================================
   UrbanPeak, responsive rules
   ========================================================================== */

/* Tablet / small desktop */
@media (max-width: 1024px) {
    .tours-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
}

/* Tablet */
@media (max-width: 900px) {
    .site-nav { display: none; }
    .nav-toggle { display: flex; }

    .experiences-grid { grid-template-columns: 1fr; gap: 44px; }
    .experiences-copy { order: 2; }
    .experiences-map { order: 1; max-width: 520px; margin: 0 auto; }

    .transfers-collection { grid-template-columns: 1fr; }
    .transfers-stage { min-height: 340px; order: 1; }
    .transfers-panel { order: 2; }

    .footer-inner { grid-template-columns: 1fr; gap: 44px; }
}

/* Large phone */
@media (max-width: 600px) {
    .tours-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }

    .hero-line-1 { letter-spacing: 0.04em; }

    .feature-list li { font-size: 1.15rem; }

    .footer-cols { grid-template-columns: 1fr; gap: 34px; }
    .footer-base-inner { flex-direction: column; align-items: flex-start; gap: 8px; }

    .transfers-tab-name { font-size: 1.3rem; }
    .rate-row { flex-wrap: wrap; gap: 4px 20px; }
}

/* Small phone */
@media (max-width: 380px) {
    .brand-suffix { display: none; }
    .testimonial-card { padding: 32px 26px; }
}

/* ==========================================================================
   Mobile-only edits. Everything below is scoped away from desktop and must
   stay that way, see the request thread. Breakpoint: phones/small tablets.
   ========================================================================== */
@media (max-width: 768px) {

    /* Line-break helpers: show mobile breaks, drop desktop-only ones */
    .br-mobile  { display: inline; }
    .br-desktop { display: none; }

    /* Smaller header brand logo on mobile */
    .brand-logo { height: 48px; }

    /* Signature Experiences: centre the list as a block, but keep the rows
       left-aligned so the check marks line up in a column (not wobbly). */
    .feature-list { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
    .feature-list li { justify-content: flex-start; text-align: left; }

    /* Signature Private Tours: centre all copy below each image */
    .tour-body { text-align: center; align-items: center; }

    /* Seamless Transfers: hide the top stage image and reveal each
       transfer's own photo inline as its card opens, so there is no need to
       scroll back up. Info is centred. */
    .transfers-stage { display: none; }

    /* Tabs stay left-aligned so the 01-04 index numbers line up in a column.
       Suppress the active/hover indent here so the active tab's number does
       not shift out of that column. Only the revealed detail is centred. */
    .transfers-tab:hover,
    .transfers-tab.is-active { padding-left: 4px; }
    .transfers-content-inner { text-align: center; }
    .transfers-inline-photo {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border: 1px solid var(--line);
        margin-bottom: 22px;
    }
    .transfers-blurb { max-width: none; margin-left: auto; margin-right: auto; }
    .rate-list { max-width: 420px; margin: 0 auto; }

    /* Footer: centre the logo + description at the top, keep Visit and
       Reservations side by side as two columns, and centre the base row. */
    .footer-brand { text-align: center; }
    .footer-logo { margin-left: auto; margin-right: auto; }
    .footer-blurb { margin-left: auto; margin-right: auto; }
    /* Subtle hairline separating the description from the two link columns */
    .footer-cols {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        border-top: 1px solid var(--line-light);
        padding-top: 34px;
    }
    /* Nudge the Visit column in off the screen edge */
    .footer-cols .footer-col:first-child { padding-left: 72px; }
    .footer-col li { overflow-wrap: anywhere; }
    .footer-base-inner { flex-direction: column; align-items: center; text-align: center; gap: 8px; }

    /* Booking summary: centre everything above the "Per person" rows. The rows,
       total, button and fine print below are left exactly as they are. */
    .summary-kicker,
    .summary-tour,
    .summary-length { text-align: center; }
    /* Centre the two lists as one block and keep the rows left-aligned, so all
       the check / cross marks line up in a single column (not wonky). */
    .summary-list { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
    .summary-list h3 { text-align: center; }

    /* Contact page (stacked mobile): breathing room + centred form intro. */
    .contact-columns { padding-top: 44px; }
    /* Centre the form intro: "Have a question? / Send us a message / lead" */
    .contact-form-head { text-align: center; }
    .contact-form-lead { margin-left: auto; margin-right: auto; }
    .contact-form { margin-top: 34px; }                   /* space between the description and the form */
    .contact-form-actions { text-align: center; padding-bottom: 30px; }
}