/**
 * Palace Tours Display - Page-Scoped Banner Styles
 * Version: 21.1.0
 * 
 * IMPORTANT: This file loads LAST to override WP Custom CSS.
 * Each page type has its own scoped banner rules so changes
 * to one page type cannot break another.
 * 
 * Page wrappers:
 *   Tour page:     .ptd-tour-container
 *   Category page: .ptd-category-page
 *   Region page:   .ptd-region-page
 *   Home page:     .ptd-home-page
 */

/* ============================================================
   SHARED BANNER MIXINS (via common selectors)
   These define the breakout technique used by ALL page types.
   ============================================================ */

/* Base breakout pattern - full viewport width */
.ptd-tour-container .ptd-banner-with-title.ptd-banner-with-title,
.ptd-tour-container .ptd-banner-carousel.ptd-banner-carousel,
.ptd-category-page .ptd-category-banner-carousel.ptd-category-banner-carousel,
.ptd-category-page .ptd-category-banner.ptd-category-banner,
.ptd-region-page .ptd-region-banner-carousel.ptd-region-banner-carousel,
.ptd-region-page .ptd-region-banner.ptd-region-banner,
.ptd-home-page .ptd-home-banner-carousel.ptd-home-banner-carousel {
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw !important;
    max-width: none !important;
    overflow: hidden !important;
    background: transparent !important;
    margin-top: 0 !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Smart Crop - all banner images */
.ptd-tour-container .ptd-banner-slide img,
.ptd-category-page .ptd-category-banner-carousel img,
.ptd-category-page .ptd-category-banner img,
.ptd-region-page .ptd-region-banner-carousel img,
.ptd-region-page .ptd-region-banner img,
.ptd-home-page .ptd-home-banner-carousel img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* Internal wrappers fill parent height */
.ptd-tour-container .ptd-banner-wrapper,
.ptd-tour-container .ptd-banner-slide,
.ptd-category-page .ptd-banner-wrapper,
.ptd-category-page .ptd-banner-slide,
.ptd-region-page .ptd-banner-wrapper,
.ptd-region-page .ptd-banner-slide,
.ptd-home-page .ptd-banner-wrapper,
.ptd-home-page .ptd-banner-slide {
    height: 100% !important;
    width: 100% !important;
}

/* Navigation arrows centered */
.ptd-tour-container .ptd-banner-nav,
.ptd-category-page .ptd-banner-nav,
.ptd-region-page .ptd-banner-nav,
.ptd-home-page .ptd-banner-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
}

/* Parent container overrides - allow overflow for breakout */
.is-layout-constrained,
.elementor-shortcode,
.elementor-widget-shortcode,
.elementor-widget-container {
    overflow: visible !important;
}


/* ============================================================
   1. TOUR PAGE BANNER
   Scoped to: .ptd-tour-container
   ============================================================ */

.ptd-tour-container .ptd-banner-with-title {
    height: 50vh !important;
    min-height: 320px;
}

.ptd-tour-container .ptd-banner-carousel {
    height: 100% !important;
}

/* Centered text overlay */
.ptd-tour-container .ptd-banner-title-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 20px !important;
    z-index: 10 !important;
}

/* Typography */
.ptd-tour-container .ptd-banner-title-content .ptd-tour-title {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(1.5rem, 6vw, 3.5rem) !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-align: center !important;
    text-shadow: 2px 2px 15px rgba(0,0,0,0.5) !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    width: 90% !important;
}

/* Hide meta/duration for clean look */
.ptd-tour-container .ptd-banner-title-content .ptd-tour-meta,
.ptd-tour-container .ptd-banner-title-content .ptd-tour-duration {
    display: none !important;
}

/* No top gap - banner and sticky bar flush against header */
.ptd-tour-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.ptd-tour-container .ptd-banner-with-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Sticky wrapper (gold tab bar) - flush with no gap */
.ptd-tour-container .ptd-sticky-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* When banner is hidden, remove any residual space it leaves */
.ptd-tour-container .ptd-banner-with-title[style*="display: none"],
.ptd-tour-container .ptd-banner-with-title:empty {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure Elementor wrappers don't add spacing above tour */
.elementor-widget-container > .ptd-tour-container,
.elementor-shortcode > .ptd-tour-container,
.elementor-element .ptd-tour-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Elementor section/container padding that creates the gap */
.elementor-element:has(.ptd-tour-container) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.e-con:has(.ptd-tour-container),
.e-con-inner:has(.ptd-tour-container) {
    padding-top: 0 !important;
    margin-top: 0 !important;
    gap: 0 !important;
}

.ptd-tour-container.ptd-tour-full-page > .ptd-banner-with-title:first-child {
    margin-top: 0 !important;
}

/* Tour page responsive */
@media (max-width: 1024px) {
    .ptd-tour-container.ptd-tour-full-page {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .ptd-tour-container .ptd-banner-with-title.ptd-banner-with-title {
        height: 50vh !important;
        min-height: 300px !important;
        margin-top: 0 !important;
    }
    
    .ptd-tour-container .ptd-banner-carousel.ptd-banner-carousel,
    .ptd-tour-container .ptd-banner-with-title.ptd-banner-with-title,
    .ptd-tour-container .ptd-banner-wrapper.ptd-banner-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
    }
    
    /* Sticky gold bar - flush */
    .ptd-tour-container .ptd-sticky-wrapper {
        top: 0 !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 768px) {
    /* Remove gap at top of tour container */
    .ptd-tour-container.ptd-tour-full-page {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Force banner flush with header */
    .ptd-tour-container .ptd-banner-with-title.ptd-banner-with-title {
        height: 40vh !important;
        min-height: 250px !important;
        margin-top: 0 !important;
    }
    
    /* Force banner breakout on mobile */
    .ptd-tour-container .ptd-banner-carousel.ptd-banner-carousel,
    .ptd-tour-container .ptd-banner-with-title.ptd-banner-with-title {
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        width: 100vw !important;
        position: relative !important;
    }
    
    .ptd-tour-container .ptd-banner-carousel.ptd-banner-carousel,
    .ptd-tour-container .ptd-banner-wrapper.ptd-banner-wrapper,
    .ptd-tour-container .ptd-banner-slide.ptd-banner-slide,
    .ptd-tour-container .ptd-banner-nav.ptd-banner-nav {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Smart crop on mobile */
    .ptd-tour-container .ptd-banner-slide img {
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
    
    /* Sticky gold bar - flush under header */
    .ptd-tour-container .ptd-sticky-wrapper {
        top: 0 !important;
        margin-top: 0 !important;
        z-index: 9998 !important;
    }
    
    .ptd-tour-container .ptd-banner-title-overlay {
        position: absolute !important;
        background: rgba(0, 0, 0, 0.3) !important;
    }

    .ptd-tour-container .ptd-banner-nav {
        width: 35px !important;
        height: 35px !important;
    }
    
    /* Reduce overview top padding */
    .ptd-tour-full-page .ptd-tab-panel:first-child .ptd-tab-inner {
        padding-top: 15px !important;
    }
}

@media (max-width: 480px) {
    .ptd-tour-container .ptd-banner-with-title {
        height: 35vh !important;
        min-height: 200px !important;
    }
}


/* ============================================================
   1b. MODERN MINIMALIST STICKY BAR (Tour Page Only)
   Scoped to: .ptd-tour-container
   ============================================================ */

/* The Sticky Wrapper - Flush under site header */
.ptd-tour-container .ptd-sticky-wrapper {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    top: var(--ptd-sticky-offset, 0px) !important;
    z-index: 99 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #eee !important;
    transition: box-shadow 0.3s ease, background 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

/* Glassmorphism when stuck */
.ptd-tour-container .ptd-sticky-wrapper.is-stuck {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    border-bottom: 1px solid #d4a853 !important;
}

/* Sticky tour title - shown when sticky wrapper is stuck */
.ptd-tour-container .ptd-sticky-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #c9a227 !important;
    background: #fbfbfb !important;
    padding: 5px 20px !important;
    letter-spacing: 0.5px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    text-align: center !important;
    margin: 0 !important;
    /* display is handled by base CSS: none by default, block when is-stuck */
}

/* Keep tour title visible when stuck - the gold bar */
.ptd-tour-container .ptd-sticky-wrapper.is-stuck .ptd-sticky-title {
    display: block !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #c9a227 !important;
    background: #fbfbfb !important;
    padding: 5px 20px !important;
    letter-spacing: 0.5px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    text-align: center !important;
    margin: 0 !important;
}

/* Tab navigation - DO NOT set display here, let responsive rules handle it */
.ptd-tour-container .ptd-tabs-nav-desktop {
    border-bottom: none !important;
    background: transparent !important;
    min-height: 50px !important;
}

/* Tabs buttons container */
.ptd-tour-container .ptd-tabs-buttons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Sleek tab buttons */
.ptd-tour-container .ptd-tab-btn {
    padding: 15px 25px !important;
    font-family: var(--ptd-font-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #4a5568 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    position: relative !important;
    transition: color 0.2s ease;
    cursor: pointer;
}

/* Active tab - gold text */
.ptd-tour-container .ptd-tab-btn.active {
    color: #c9a227 !important;
    font-weight: 600 !important;
}

/* Active tab - centered gold underline */
.ptd-tour-container .ptd-tab-btn.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 15% !important;
    right: 15% !important;
    height: 3px !important;
    background: #c9a227 !important;
    border-radius: 2px 2px 0 0 !important;
    display: block !important;
}

/* Hover effect */
.ptd-tour-container .ptd-tab-btn:hover {
    color: #c9a227 !important;
    background: rgba(201, 162, 39, 0.05) !important;
}

/* PDF download button - vertical separator */
.ptd-tour-container a.ptd-tab-btn-download,
.ptd-tour-container a.ptd-tab-btn-download:visited {
    border-left: 1px solid #e2e8f0 !important;
    margin-left: 10px !important;
    padding: 15px 25px 15px 30px !important;
    color: #1a1a2e !important;
    font-family: var(--ptd-font-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    border-radius: 0 !important;
    text-decoration: none !important;
}

.ptd-tour-container a.ptd-tab-btn-download:hover {
    color: #c9a227 !important;
}

/* Mobile handled by tour-display-mobile-booking.css */


/* ============================================================
   2. CATEGORY PAGE BANNER
   Scoped to: .ptd-category-page
   ============================================================ */

.ptd-category-page .ptd-category-banner-carousel,
.ptd-category-page .ptd-category-banner {
    height: 50vh !important;
    min-height: 320px;
}

/* Category overlay */
.ptd-category-page .ptd-category-banner-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 20px !important;
    z-index: 10 !important;
}

.ptd-category-page .ptd-category-banner-overlay h1,
.ptd-category-page .ptd-category-banner-overlay h2 {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(1.5rem, 6vw, 3.5rem) !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-align: center !important;
    text-shadow: 2px 2px 15px rgba(0,0,0,0.5) !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    width: 90% !important;
}

/* Category page responsive */
@media (max-width: 1024px) {
    .ptd-category-page .ptd-category-banner-carousel,
    .ptd-category-page .ptd-category-banner {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
    }
}

@media (max-width: 768px) {
    .ptd-category-page .ptd-category-banner-carousel,
    .ptd-category-page .ptd-category-banner {
        height: 40vh !important;
        min-height: 250px !important;
    }
    
    .ptd-category-page .ptd-category-banner-carousel .ptd-banner-wrapper,
    .ptd-category-page .ptd-category-banner-carousel .ptd-banner-slide,
    .ptd-category-page .ptd-category-banner-carousel .ptd-banner-nav,
    .ptd-category-page .ptd-category-banner-overlay {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .ptd-category-page .ptd-category-banner-overlay {
        position: absolute !important;
        background: rgba(0, 0, 0, 0.3) !important;
        display: flex !important;
    }
    
    .ptd-category-page .ptd-banner-nav {
        width: 35px !important;
        height: 35px !important;
    }
}

@media (max-width: 480px) {
    .ptd-category-page .ptd-category-banner-carousel,
    .ptd-category-page .ptd-category-banner {
        height: 35vh !important;
        min-height: 200px !important;
    }
}


/* ============================================================
   3. REGION PAGE BANNER
   Scoped to: .ptd-region-page
   ============================================================ */

.ptd-region-page .ptd-region-banner-carousel,
.ptd-region-page .ptd-region-banner {
    height: 50vh !important;
    min-height: 320px;
}

/* Region overlay - NOTE: Region page HTML uses .ptd-category-banner-overlay class */
.ptd-region-page .ptd-category-banner-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 20px !important;
    z-index: 10 !important;
}

.ptd-region-page .ptd-category-banner-overlay h1,
.ptd-region-page .ptd-category-banner-overlay h2 {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(1.5rem, 6vw, 3.5rem) !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-align: center !important;
    text-shadow: 2px 2px 15px rgba(0,0,0,0.5) !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    width: 90% !important;
    background: transparent !important;
}

/* Region page responsive */
@media (max-width: 1024px) {
    .ptd-region-page .ptd-region-banner-carousel,
    .ptd-region-page .ptd-region-banner {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
    }
}

@media (max-width: 768px) {
    .ptd-region-page .ptd-region-banner-carousel,
    .ptd-region-page .ptd-region-banner {
        height: 40vh !important;
        min-height: 250px !important;
    }
    
    .ptd-region-page .ptd-region-banner-carousel .ptd-banner-wrapper,
    .ptd-region-page .ptd-region-banner-carousel .ptd-banner-slide,
    .ptd-region-page .ptd-region-banner-carousel .ptd-banner-nav,
    .ptd-region-page .ptd-category-banner-overlay {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .ptd-region-page .ptd-category-banner-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .ptd-region-page .ptd-banner-nav {
        width: 35px !important;
        height: 35px !important;
    }
}

@media (max-width: 480px) {
    .ptd-region-page .ptd-region-banner-carousel,
    .ptd-region-page .ptd-region-banner {
        height: 35vh !important;
        min-height: 200px !important;
    }
}


/* ============================================================
   4. HOME PAGE BANNER
   Scoped to: .ptd-home-page
   ============================================================ */

.ptd-home-page .ptd-home-banner-carousel {
    height: 50vh !important;
    min-height: 320px;
}

/* Home page responsive */
@media (max-width: 1024px) {
    .ptd-home-page .ptd-home-banner-carousel {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
    }
}

@media (max-width: 768px) {
    .ptd-home-page .ptd-home-banner-carousel {
        height: 40vh !important;
        min-height: 250px !important;
    }
    
    .ptd-home-page .ptd-home-banner-carousel .ptd-banner-wrapper,
    .ptd-home-page .ptd-home-banner-carousel .ptd-banner-slide,
    .ptd-home-page .ptd-home-banner-carousel .ptd-banner-nav {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .ptd-home-page .ptd-banner-nav {
        width: 35px !important;
        height: 35px !important;
    }
    
    /* Home category cards - single column on mobile */
    .ptd-home-page .ptd-category-cards.ptd-columns-2,
    .ptd-home-page .ptd-category-cards.ptd-columns-3,
    .ptd-home-page .ptd-category-cards.ptd-columns-4 {
        grid-template-columns: 1fr !important;
    }
    
    .ptd-home-page .ptd-category-card {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .ptd-home-page .ptd-home-banner-carousel {
        height: 35vh !important;
        min-height: 200px !important;
    }
}


/* ============================================================
   5. EDITORIAL HERO BANNER
   Scoped to: .ptd-category-editorial
   ============================================================ */

.ptd-category-editorial .ptd-editorial-hero {
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw !important;
    max-width: none !important;
    height: 50vh !important;
    min-height: 320px;
    overflow: hidden !important;
}

.ptd-category-editorial .ptd-editorial-hero img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

.ptd-category-editorial .ptd-editorial-hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: rgba(0, 0, 0, 0.3) !important;
    z-index: 10 !important;
}

.ptd-category-editorial .ptd-editorial-hero-overlay h1 {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(1.5rem, 6vw, 3.5rem) !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-shadow: 2px 2px 15px rgba(0,0,0,0.5) !important;
    margin: 0 !important;
    width: 90% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 768px) {
    .ptd-category-editorial .ptd-editorial-hero {
        height: 40vh !important;
        min-height: 250px !important;
    }
}

@media (max-width: 480px) {
    .ptd-category-editorial .ptd-editorial-hero {
        height: 35vh !important;
        min-height: 200px !important;
    }
}