/*
 * tour-v4-responsive.css
 * Tour Detail V4 — Responsive breakpoints
 * Loaded alongside tour-v4.css when TOURS_V4=true
 *
 * Breakpoints:
 * - 1199px: Large tablet
 * - 991px:  Tablet / sidebar collapse
 * - 767px:  Mobile landscape
 * - 575px:  Mobile portrait
 * - 479px:  Small mobile
 */

/* ==========================================================================
   LARGE TABLET — max 1199px
   ========================================================================== */

@media (max-width: 1199px) {

    .tour-v4-container {
        padding-left: 60px;
        padding-right: 60px;
    }

    .tour-v4-hero-overlay {
        padding: 0 60px 68px;  /* align with container 60px padding */
    }

    /* Long titles: allow full text-wrap width at this viewport */
    .tour-v4-hero-title.tv4-title--long {
        font-size: clamp(1.85rem, 2.9vw, 2.75rem);
    }

    .tour-v4-facts-grid-v5 {
        flex-wrap: wrap;
        gap: 0;
    }

    .tour-v4-blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* ==========================================================================
   TABLET — max 991px
   ========================================================================== */

@media (max-width: 991px) {

    .tour-v4-container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .tour-v4-hero-overlay {
        padding: 0 24px 52px;
    }

    .tour-v4-hero-wrap {
        height: 70vh;
        min-height: 460px;
    }

    /* Dynamic title: tablet — reduce all tiers proportionally */
    .tour-v4-hero-title.tv4-title--short {
        font-size: clamp(2rem, 4.5vw, 2.8rem);
    }

    .tour-v4-hero-title.tv4-title--medium {
        font-size: clamp(1.7rem, 3.8vw, 2.3rem);
    }

    .tour-v4-hero-title.tv4-title--long {
        font-size: clamp(1.5rem, 3.2vw, 2rem);
        max-width: 100%;
    }

    .tour-v4-fact-v5 {
        padding: 20px 20px 20px 0;
        margin-right: 20px;
    }

    /* Sidebar: remove left gap when stacked below main content */
    .tour-v4-sidebar-wrap {
        padding-left: 0;
        margin-top: 32px;
    }

    /* Hero overlay */

    /* Facts bar: wrap into 2 columns */
    .tour-v4-facts-list {
        gap: 10px 18px;
    }

    .tour-v4-fact {
        font-size: 0.88rem;
    }

    /* Sidebar: normal flow at all screen sizes (no sticky) */

    /* Inclusions: single column on tablet */
    .tour-v4-incl-grid {
        grid-template-columns: 1fr;
    }

    /* Location: 3-column layout at tablet (preserved) */
    .tour-v4-location-grid {
        grid-template-rows: 520px; /* Explicit row height for Mapbox */
    }

    .tour-v4-location-info {
        padding: 32px 24px;
    }

    .tour-v4-location-map-wrap {
        height: 520px; /* Explicit height — overrides desktop 620px */
    }

    .tour-v4-location-destinations {
        padding: 32px 20px;
    }

    .tour-v4-dest-img-wrap {
        height: 90px; /* Slightly shorter at large-tablet, full-width preserved */
    }

    .tour-v4-dest-name {
        font-size: 0.88rem;
    }

    /* Recommended: slightly shorter portrait cards on tablet */
    .tour-v4-rec-card-img-wrap {
        height: 400px;
    }

    /* Recommended nav buttons: smaller on tablet */
    .tour-v4-rec-section .owl-nav button {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .tour-v4-rec-section .owl-nav button.owl-prev {
        left: 12px;
    }

    .tour-v4-rec-section .owl-nav button.owl-next {
        right: 12px;
    }

    /* Blog: 2 columns on tablet, shorter image */
    .tour-v4-blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .tour-v4-blog-img-wrap,
    .tour-v4-blog-img {
        height: 240px;
    }

    /* CTA contacts: stack */
    .tour-v4-cta-contacts {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    /* Resources: slightly smaller thumbnails on tablet */
    .tour-v4-resource-img-wrap {
        width: 110px;
        height: 74px;
    }

    .tour-v4-resource-title {
        font-size: 0.88rem;
    }

    .tour-v4-resource-desc {
        font-size: 0.7rem;
    }

    /* Private Tours card: reduce image height on tablet */
    .tour-v4-private-img-wrap {
        height: 240px;
    }

    .tour-v4-private-overlay {
        padding: 20px 18px;
    }

    .tour-v4-private-title {
        font-size: 1.3rem;
    }

    .tour-v4-private-text {
        font-size: 0.84rem;
    }

    /* Body padding */
    .tour-v4-body {
        padding: 32px 0 48px;
    }

    .tour-v4-full-section {
        padding: 48px 0;
    }

    /* Gallery — tablet */
    .tour-v4-gallery-list .lslide img,
    .tour-v4-gallery-list .lslide video {
        height: 420px;
    }

    .tour-v4-gallery-list .lslide > div {
        height: 420px;
    }

    .tour-v4-gallery-section .lSSlideOuter .lSPrev,
    .tour-v4-gallery-section .lSSlideOuter .lSNext {
        top: 210px !important;
    }

}

/* ==========================================================================
   MOBILE LANDSCAPE — max 767px
   ========================================================================== */

@media (max-width: 767px) {

    .tour-v4-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .tour-v4-hero-overlay {
        padding: 0 16px 40px;
    }

    .tour-v4-hero-wrap {
        height: 65vh;
        min-height: 380px;
        max-height: 560px;
    }

    /* Dynamic title: mobile — all tiers collapse to mobile-safe sizes */
    .tour-v4-hero-title.tv4-title--short {
        font-size: clamp(1.75rem, 7vw, 2.4rem);
        letter-spacing: -0.01em;
    }

    .tour-v4-hero-title.tv4-title--medium {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .tour-v4-hero-title.tv4-title--long {
        font-size: clamp(1.35rem, 5.5vw, 1.85rem);
        line-height: 1.18;
        max-width: 100%;
    }

    /* Facts bar: 2-column layout on mobile — editorial clarity over cramped stack */
    .tour-v4-facts-grid-v5 {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .tour-v4-fact-v5 {
        width: 50%;
        padding: 16px 14px 16px 0;
        margin-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    }

    /* Right-column item: left border as column separator */
    .tour-v4-fact-v5:nth-child(even) {
        padding-left: 14px;
        padding-right: 0;
        border-left: 1px solid rgba(0, 0, 0, 0.07);
    }

    /* 5th (lone) item: span full width, no left border */
    .tour-v4-fact-v5:last-child:nth-child(odd) {
        width: 100%;
        border-left: none;
    }

    /* Last row: no bottom border */
    .tour-v4-fact-v5:last-child {
        border-bottom: none;
    }

    /* Left-column item of last two-item row: also no bottom border */
    .tour-v4-fact-v5:nth-last-child(2):nth-child(odd) {
        border-bottom: none;
    }

    /* Disable hover underline animation on touch devices */
    .tour-v4-fact-value-v5::after {
        display: none;
    }

    /* Hide desktop vertical tick separator */
    .tour-v4-fact-v5:not(:last-child)::after {
        display: none;
    }

    .tour-v4-facts-cta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* CTA: full width on mobile for comfortable tap target */
    .tour-v4-cta-link {
        padding: 11px 20px;
    }

    .tour-v4-hero-eyebrow {
        font-size: 0.72rem;
    }

    /* Carousel controls: smaller, safe position on mobile */
    .tour-v4-hero-wrap .carousel-control-prev,
    .tour-v4-hero-wrap .carousel-control-next {
        width: 32px;
        height: 32px;
        top: 30%;  /* well above title area at 65vh */
        opacity: 0.62;
    }

    .tour-v4-hero-wrap .carousel-control-prev { left: 14px; }
    .tour-v4-hero-wrap .carousel-control-next { right: 14px; }

    /* Slightly smaller chevron at mobile */
    .tour-v4-hero-wrap .carousel-control-prev-icon,
    .tour-v4-hero-wrap .carousel-control-next-icon {
        width: 7px;
        height: 7px;
    }

    .tour-v4-hero-overlay {
        padding-bottom: 18px;
    }

    /* Facts bar: single column stack */
    .tour-v4-facts-bar {
        padding: 16px 0;
    }

    .tour-v4-facts-list {
        flex-direction: column;
        gap: 10px;
    }

    .tour-v4-facts-actions {
        flex-direction: column;
        gap: 10px;
    }

    .tour-v4-btn {
        text-align: center;
        justify-content: center;
    }

    /* Availability dates: full width */
    .tour-v4-date-chips {
        flex-direction: column;
        align-items: stretch;
    }

    .tv4-date-chip {
        min-width: 0;
    }

    /* Main body */
    .tour-v4-body {
        padding: 24px 0 36px;
    }

    /* Section titles */
    .tour-v4-section-title {
        font-size: 1.3rem;
    }

    /* Gallery */
    .tour-v4-gallery-list .lslide img,
    .tour-v4-gallery-list .lslide video {
        height: 300px;
    }

    .tour-v4-gallery-list .lslide > div {
        height: 300px;
    }

    .tour-v4-gallery-section .lSPager.lSGallery li {
        flex: 0 0 68px !important;
        width: 68px !important;
        height: 46px !important;
    }

    .tour-v4-gallery-section .lSPager.lSGallery li img {
        width: 68px !important;
        height: 46px !important;
    }

    .tour-v4-gallery-section .lSSlideOuter .lSPrev,
    .tour-v4-gallery-section .lSSlideOuter .lSNext {
        top: 150px !important;
    }

    /* Location: stack vertical at mobile landscape */
    .tour-v4-location-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto; /* Each stacked row auto-sizes */
    }

    .tour-v4-location-info {
        border-right: none;
        border-bottom: 1px solid rgba(210, 205, 195, 0.60);
        padding: 28px 20px;
    }

    .tour-v4-location-map-wrap {
        height: 380px; /* Explicit height for stacked mobile view */
        border-right: none;
        border-bottom: 1px solid rgba(210, 205, 195, 0.60);
    }

    .tour-v4-location-destinations {
        padding: 28px 20px;
    }

    .tour-v4-location-dest-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 20px; /* Horizontal gap between 2-column cards; vertical uses border-top */
    }

    /* Recommended: compact portrait at mobile landscape */
    .tour-v4-rec-section {
        padding: 48px 0 40px;
    }

    /* Nav buttons: reduce size to fit within narrow viewport */
    .tour-v4-rec-section .owl-nav button {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }

    .tour-v4-rec-section .owl-nav button.owl-prev {
        left: 8px;
    }

    .tour-v4-rec-section .owl-nav button.owl-next {
        right: 8px;
    }

    .tour-v4-rec-card-img-wrap {
        height: 360px;
    }

    /* Properties: center the prev/next nav below carousel on mobile */
    .tour-v4-properties-section .owl-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }

    /* Itinerary accordion */
    .tour-v4-accord-header {
        padding: 20px 0;
    }

    .tour-v4-accord-body {
        padding: 0 0 28px 0;
    }

    .tour-v4-itin-img img {
        height: 200px;
    }

    /* Blog: single column, shorter image */
    .tour-v4-blog-grid {
        grid-template-columns: 1fr;
    }
    .tour-v4-blog-img-wrap,
    .tour-v4-blog-img {
        height: 220px;
    }

    /* Resources: compact thumbnails at mobile landscape */
    .tour-v4-resource-links {
        gap: 22px;
    }

    .tour-v4-resource-img-wrap {
        width: 100px;
        height: 68px;
    }

    .tour-v4-resource-title {
        font-size: 0.86rem;
    }

    .tour-v4-resource-desc {
        font-size: 0.68rem;
        line-height: 1.5;
    }

    /* Private Tours card: compact image at mobile landscape */
    .tour-v4-private-img-wrap {
        height: 220px;
    }

    .tour-v4-private-overlay {
        padding: 18px 16px;
    }

    .tour-v4-private-title {
        font-size: 1.2rem;
    }

    .tour-v4-private-text {
        font-size: 0.82rem;
    }

    /* Full-width sections */
    .tour-v4-full-section {
        padding: 36px 0;
    }

    .tour-v4-full-section-title {
        font-size: 1.4rem;
    }

    /* CTA section */
    .tour-v4-cta-section {
        padding: 60px 0;
        background-attachment: scroll;
    }

    .tour-v4-cta-title {
        font-size: 1.4rem;
    }

    .tour-v4-cta-sub {
        font-size: 0.93rem;
    }

    .tour-v4-cta-btn {
        padding: 12px 28px;
        font-size: 0.92rem;
    }

}

/* ==========================================================================
   MOBILE PORTRAIT — max 575px
   ========================================================================== */

@media (max-width: 575px) {

    /* Sidebar cards */
    .tour-v4-sidebar-card {
        padding: 18px;
    }

    /* Price display */
    .tour-v4-price-amount {
        font-size: 1.8rem;
    }

    /* Half fields: stack on small mobile */
    .tour-v4-field-half {
        display: block;
        width: 100%;
        margin-right: 0;
    }

    /* Adults/Kids row: stack columns on small mobile */
    .tour-v4-field-row {
        flex-direction: column;
        gap: 0;
    }

    /* Private banner */
    .tour-v4-private-img-wrap {
        height: 200px;
    }

    .tour-v4-private-overlay {
        padding: 16px 14px;
    }

    .tour-v4-private-title {
        font-size: 1.15rem;
        margin-bottom: 6px;
    }

    .tour-v4-private-text {
        font-size: 0.8rem;
    }

    /* Inclusions */
    .tour-v4-incl-heading {
        font-size: 0.92rem;
    }

    /* Location: compact mobile portrait */
    .tour-v4-location-info {
        padding: 24px 18px;
    }

    .tour-v4-location-map-wrap {
        height: 320px; /* Explicit height for smallest breakpoint */
    }

    .tour-v4-location-destinations {
        padding: 24px 18px;
    }

    .tour-v4-location-dest-list {
        grid-template-columns: 1fr;
        gap: 0; /* Single column uses border-top separators */
    }

    .tour-v4-dest-img-wrap {
        height: 90px; /* Compact height at small mobile */
    }

    /* Recommended: single item, shorter card on small mobile */
    .tour-v4-rec-header {
        padding: 0 20px;
    }

    .tour-v4-rec-card-img-wrap {
        height: 300px;
    }

    /* Itinerary */
    .tour-v4-day-number {
        font-size: 0.68rem;
    }

    .tour-v4-day-title {
        font-size: 0.92rem;
    }

    /* Tour cards */
    .tour-v4-tour-card-img-wrap,
    .tour-v4-tour-card-img {
        height: 170px;
    }

    /* Property cards */
    .tour-v4-prop-img-wrap,
    .tour-v4-prop-img {
        height: 200px;
    }

    /* Gallery — small mobile */
    .tour-v4-gallery-list .lslide img,
    .tour-v4-gallery-list .lslide video {
        height: 240px;
    }

    .tour-v4-gallery-list .lslide > div {
        height: 240px;
    }

    .tour-v4-gallery-section .lSPager.lSGallery li {
        flex: 0 0 58px !important;
        width: 58px !important;
        height: 40px !important;
    }

    .tour-v4-gallery-section .lSPager.lSGallery li img {
        width: 58px !important;
        height: 40px !important;
    }

    .tour-v4-gallery-section .lSSlideOuter .lSPrev,
    .tour-v4-gallery-section .lSSlideOuter .lSNext {
        top: 120px !important;
    }

    /* Resources: smaller thumbnails on mobile portrait */
    .tour-v4-resource-links {
        gap: 20px;
    }

    .tour-v4-resource-img-wrap {
        width: 90px;
        height: 62px;
    }

    .tour-v4-resource-title {
        font-size: 0.84rem;
    }

    .tour-v4-resource-desc {
        font-size: 0.66rem;
        line-height: 1.48;
    }

}

/* ==========================================================================
   SMALL MOBILE — max 479px
   ========================================================================== */

@media (max-width: 479px) {

    .tour-v4-hero-title {
        font-size: 1.25rem;
    }

    .tour-v4-section-title {
        font-size: 1.15rem;
    }

    .tour-v4-full-section-title {
        font-size: 1.25rem;
    }

    .tour-v4-facts-bar .container {
        padding: 0 14px;
    }

    .tour-v4-fact {
        font-size: 0.82rem;
    }

    .tour-v4-accord-day {
        gap: 8px;
    }

    .tour-v4-submit-btn {
        font-size: 0.9rem;
        padding: 11px 16px;
    }

    .tv4-date-chip {
        font-size: 0.84rem;
        padding: 10px 14px;
    }

}