/*
|--------------------------------------------------------------------------
| Tours Layout
|--------------------------------------------------------------------------
*/

.ua-tours {

    padding-top: calc(var(--header-height) + var(--space-3xl));

    padding-bottom: var(--space-4xl);

}

/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.ua-tours-hero {

    max-width: 760px;

    margin: 0 auto;

    padding: 3rem 0 2rem;

    text-align: center;

}

.ua-tours-eyebrow {

    display: inline-flex;

    margin-bottom: 1rem;

    color: var(--primary);

    font-size: var(--font-sm);

    font-weight: var(--fw-bold);

    letter-spacing: .12em;

    text-transform: uppercase;

}

.ua-tours-title {

    margin-bottom: 1.25rem;

    font-size: clamp(2.25rem, 5vw, 3.5rem);

    font-weight: var(--fw-extra-bold);

    line-height: 1.15;

}

.ua-tours-description {

    max-width: 720px;

    margin: 0 auto;

    color: var(--text-light);

    font-size: 1.05rem;

    line-height: 1.8;

}

/*
|--------------------------------------------------------------------------
| Filter
|--------------------------------------------------------------------------
*/

.ua-tour-filter {

    margin: var(--space-xl) 0 var(--space-3xl);

}

.ua-tour-filter-wrapper {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: .75rem;

}

.ua-tour-filter-button {

    padding: .75rem 1.25rem;

    border: 1px solid var(--border);

    border-radius: var(--radius-pill);

    background: var(--surface);

    color: var(--text-light);

    font-size: var(--font-sm);

    font-weight: var(--fw-medium);

    transition: var(--transition);

}

.ua-tour-filter-button:hover {

    border-color: var(--primary);

    color: var(--primary);

}

.ua-tour-filter-button.is-active {

    border-color: var(--primary);

    background: var(--primary);

    color: var(--white);

}

/*
|--------------------------------------------------------------------------
| Grid
|--------------------------------------------------------------------------
*/

.ua-tour-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 2rem;

}

/*
|--------------------------------------------------------------------------
| Empty State
|--------------------------------------------------------------------------
*/

.ua-tour-empty {

    padding: var(--space-6xl);

    text-align: center;

}

.ua-tour-empty-title {

    margin: var(--space-xl) 0 var(--space-md);

    font-size: var(--font-3xl);

}

.ua-tour-empty-description {

    max-width: 520px;

    margin: 0 auto;

    color: var(--text-light);

    line-height: 1.7;

}

/*
|--------------------------------------------------------------------------
| Pagination
|--------------------------------------------------------------------------
*/

.ua-tour-pagination {

    margin-top: var(--space-5xl);

}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width:991.98px) {

    .ua-tours {

        padding-top: calc(var(--header-height) + var(--space-4xl));

        padding-bottom: var(--space-4xl);

    }

    .ua-tour-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}

@media (max-width:767.98px) {

    .ua-tours {

        padding-top: calc(var(--header-height) + var(--space-3xl));

    }

    .ua-tours-hero {

        padding: 2rem 0 1.5rem;

    }

    .ua-tours-title {

        font-size: 2rem;

    }

    .ua-tours-description {

        font-size: .95rem;

        line-height: 1.7;

    }

    .ua-tour-filter {

        margin: var(--space-lg) 0 var(--space-2xl);

    }

    .ua-tour-grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

}