/*
 * ═══════════════════════════════════════════════════════
 * Tours Listing — Silk Route Stays
 * ═══════════════════════════════════════════════════════
 */

/* ─── PAGE BANNER ──────────────────────────────────── */
.page-banner {
    position: relative;
    padding: calc(var(--sp-24) + 80px) 0 var(--sp-16);
    overflow: hidden;
    color: #fff;
}

.page-banner__bg {
    position: absolute;
    inset: 0;
}

.page-banner__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.page-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(15, 33, 25, 0.6) 0%,
        rgba(15, 33, 25, 0.8) 100%
    );
}

.page-banner__content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.page-banner__title {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-bold);
    color: #fff;
    margin-bottom: var(--sp-4);
}

.page-banner__subtitle {
    font-size: var(--fs-md);
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto var(--sp-6);
    line-height: var(--lh-relaxed);
}

.page-banner .breadcrumb {
    display: flex;
    justify-content: center;
}

.page-banner .breadcrumb li {
    color: rgba(255, 255, 255, 0.5);
}

.page-banner .breadcrumb li::after {
    color: rgba(255, 255, 255, 0.3);
}

.page-banner .breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
}

.page-banner .breadcrumb a:hover {
    color: var(--c-gold);
}


/* ─── TOURS LAYOUT ─────────────────────────────────── */
.tours-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--sp-8);
    align-items: start;
}


/* ─── SIDEBAR FILTERS ──────────────────────────────── */
.tours-sidebar {
    position: sticky;
    top: 100px;
    background: #fff;
    border-radius: var(--radius-lg);
    border: var(--border);
    padding: var(--sp-5);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: var(--border);
}

.sidebar-title {
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--c-night);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.sidebar-title i {
    color: var(--c-gold);
}

.sidebar-reset {
    font-size: var(--fs-xs);
    color: var(--c-rose);
    text-decoration: none;
}

.sidebar-reset:hover {
    text-decoration: underline;
    color: var(--c-rose);
}

.sidebar-close {
    display: none;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--c-slate);
    font-size: var(--fs-sm);
}

.sidebar-close:hover {
    background: var(--c-cream);
}

/* Filter Groups */
.filter-group {
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--c-cream);
}

.filter-group:last-of-type {
    border-bottom: none;
    margin-bottom: var(--sp-4);
}

.filter-group__title {
    font-family: var(--ff-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--c-slate);
    margin-bottom: var(--sp-3);
}

.filter-group__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

/* Checkbox/Radio Styles */
.filter-check {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    padding: var(--sp-2) var(--sp-2);
    border-radius: var(--radius-sm);
    transition: background var(--t-fast);
}

.filter-check:hover {
    background: var(--c-cream);
}

.filter-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--c-forest);
    cursor: pointer;
    flex-shrink: 0;
    border: none;
    padding: 0;
}

.filter-check input:focus {
    box-shadow: none;
}

.filter-check__label {
    flex: 1;
    font-size: var(--fs-sm);
    color: var(--c-charcoal);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.filter-check__icon {
    color: var(--c-stone);
    font-size: var(--fs-xs);
    width: 16px;
    text-align: center;
}

.filter-check__count {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--c-stone);
    background: var(--c-cream);
    padding: 1px 6px;
    border-radius: var(--radius-full);
}

/* Price Inputs */
.filter-price-inputs {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.filter-price-field {
    flex: 1;
    display: flex;
    align-items: center;
    border: var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.filter-price-field__prefix {
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
    color: var(--c-stone);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    background: var(--c-cream);
}

.filter-price-field input {
    border: none;
    border-radius: 0;
    padding: var(--sp-2) var(--sp-2);
    font-size: var(--fs-sm);
    width: 100%;
}

.filter-price-field input:focus {
    box-shadow: none;
}

.filter-price-sep {
    color: var(--c-stone);
    flex-shrink: 0;
}

.filter-submit {
    width: 100%;
    justify-content: center;
}


/* ─── TOURS MAIN ───────────────────────────────────── */
.tours-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-4);
    border-bottom: var(--border);
}

.tours-toolbar__left {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.filter-toggle {
    display: none;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--c-forest);
    border: var(--border);
    border-radius: var(--radius-md);
    background: #fff;
}

.filter-toggle i {
    color: var(--c-gold);
}

.tours-toolbar__count {
    font-size: var(--fs-sm);
    color: var(--c-slate);
}

.tours-toolbar__right {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.tours-sort select {
    padding: var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    border: var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    color: var(--c-charcoal);
}

.tours-view-toggle {
    display: flex;
    gap: 2px;
    border: var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.view-btn {
    padding: var(--sp-2) var(--sp-3);
    color: var(--c-stone);
    background: #fff;
    font-size: var(--fs-sm);
    transition: all var(--t-fast);
}

.view-btn.active,
.view-btn:hover {
    background: var(--c-forest);
    color: #fff;
}


/* ─── ACTIVE FILTERS ───────────────────────────────── */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.active-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    background: var(--c-cream);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--c-forest);
}

.active-filter__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--c-slate);
    font-size: 9px;
    transition: all var(--t-fast);
}

.active-filter__remove:hover {
    background: var(--c-rose);
    color: #fff;
}


/* ─── TOURS GRID ───────────────────────────────────── */
.tours-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6);
}

/* Tour card places-covered line */
.tour-card__places {
    font-size: var(--fs-xs);
    color: var(--c-sage);
    margin-bottom: var(--sp-3);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
}

.tour-card__places i {
    margin-top: 2px;
    color: var(--c-gold);
}

/* ─── LIST VIEW ────────────────────────────────────── */
.tours-grid--list {
    grid-template-columns: 1fr;
}

.tours-grid--list .tour-card__link {
    display: grid;
    grid-template-columns: 300px 1fr;
}

.tours-grid--list .tour-card__img {
    height: 100%;
}

.tours-grid--list .tour-card__img img {
    height: 100%;
    object-fit: cover;
}

.tours-grid--list .tour-card__body {
    display: flex;
    flex-direction: column;
}

.tours-grid--list .tour-card__excerpt {
    flex: 1;
}


/* ─── EMPTY STATE ──────────────────────────────────── */
.tours-empty {
    text-align: center;
    padding: var(--sp-20) var(--sp-8);
}

.tours-empty__icon {
    font-size: var(--fs-5xl);
    color: var(--c-sand);
    margin-bottom: var(--sp-6);
}

.tours-empty h3 {
    font-size: var(--fs-2xl);
    margin-bottom: var(--sp-3);
}

.tours-empty p {
    color: var(--c-slate);
    max-width: 400px;
    margin: 0 auto var(--sp-6);
}


/* ─── CTA STRIP ────────────────────────────────────── */
.cta-strip {
    padding: var(--sp-12) 0;
}

.cta-strip__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8);
}

.cta-strip h3 {
    font-size: var(--fs-2xl);
    color: #fff;
    margin-bottom: var(--sp-2);
}

.cta-strip p {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fs-sm);
    margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .tours-layout {
        grid-template-columns: 1fr;
    }

    /* Sidebar becomes mobile drawer */
    .tours-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 320px;
        max-width: 85vw;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        z-index: var(--z-overlay);
        border-radius: 0;
        border: none;
        transition: left var(--t-slow) var(--ease-out);
        padding: var(--sp-6);
    }

    .tours-sidebar.open {
        left: 0;
    }

    .sidebar-close {
        display: flex;
    }

    .filter-toggle {
        display: flex;
    }

    .page-banner__title {
        font-size: var(--fs-4xl);
    }
}

@media (max-width: 768px) {
    .page-banner {
    position: relative;
    padding: calc(var(--sp-24) + 80px) 0 var(--sp-16);
    overflow: hidden;
    color: #fff;
}

    .page-banner__title {
        font-size: var(--fs-3xl);
    }

    .tours-grid {
        grid-template-columns: 1fr;
    }

    .tours-grid--list .tour-card__link {
        grid-template-columns: 1fr;
    }

    .cta-strip__inner {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .page-banner {
    position: relative;
    padding: calc(var(--sp-24) + 80px) 0 var(--sp-16);
    overflow: hidden;
    color: #fff;
}

    .page-banner__title {
        font-size: var(--fs-2xl);
    }

    .tours-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .tours-toolbar__right {
        width: 100%;
        justify-content: space-between;
    }

    .tours-sort select {
        flex: 1;
    }
}