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

.ua-tour-hero {

    position: relative;

    padding: var(--space-2xl) 0 var(--space-4xl);

    background: var(--background);

}

.ua-tour-hero .container {

    max-width: var(--container);

}

/*
|--------------------------------------------------------------------------
| Breadcrumb
|--------------------------------------------------------------------------
*/

.ua-breadcrumb {

    margin-bottom: var(--space-xl);
    padding: 0;

}

.ua-breadcrumb ol {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: var(--space-md);

    margin: 0;

    padding: 0;

    list-style: none;

}

.ua-breadcrumb li {

    display: flex;

    align-items: center;

    color: var(--text-muted);

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

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

    letter-spacing: var(--ls-wide);

}

.ua-breadcrumb li:not(:last-child)::after {

    content: "/";

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

    color: var(--border-dark);

}

.ua-breadcrumb a {

    color: inherit;

    text-decoration: none;

    transition: var(--transition-fast);

}

.ua-breadcrumb a:hover {

    color: var(--primary);

}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.ua-tour-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: var(--space-5xl);

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

}

.ua-tour-content {

    width: 100%;

    max-width: 760px;

}

/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.ua-tour-title {

    max-width: 14ch;

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

    color: var(--text);

    font-size: clamp(2.75rem, 4vw, 4.25rem);

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

    line-height: 1.05;

    letter-spacing: -0.01em;

    text-wrap: balance;

}

/*
|--------------------------------------------------------------------------
| Meta
|--------------------------------------------------------------------------
*/

.ua-tour-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: var(--space-2xl);

    margin-bottom: var(--space-xl);

}

.ua-tour-rating,
.ua-tour-location {

    display: flex;

    align-items: center;

    gap: var(--space-sm);

    color: var(--text-light);

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

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

}

.ua-tour-rating i {

    color: var(--secondary);

    font-size: 1.05em;

}

.ua-tour-rating small {

    color: var(--text-muted);

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

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

}

.ua-tour-location i {

    color: var(--primary);

    font-size: 1.05em;

}

/*
|--------------------------------------------------------------------------
| Description
|--------------------------------------------------------------------------
*/

.ua-tour-description {

    max-width: 700px;

    margin: 0;

    color: var(--text-light);

    font-size: 1.05rem;

    line-height: 1.9;

}

/*
|--------------------------------------------------------------------------
| Actions
|--------------------------------------------------------------------------
*/

.ua-tour-actions {

    display: flex;

    flex-wrap: wrap;

    gap: var(--space-xl);

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

}

.ua-tour-actions .ua-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-sm);

    min-width: 200px;

    height: 56px;

    padding: 0 var(--space-2xl);

    border-radius: var(--radius);

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

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

    text-decoration: none;

    transition: var(--transition);

}

.ua-btn-primary {

    color: var(--white);

    background: var(--primary);

    box-shadow: var(--shadow);

}

.ua-btn-primary:hover {

    color: var(--white);

    transform: translateY(-2px);

    box-shadow: var(--shadow-lg);

}

.ua-btn-outline {

    color: var(--success);

    background: var(--surface);

    border: var(--border-thin) solid #D1FAE5;

}

.ua-btn-outline:hover {

    color: #15803D;

    background: #F0FDF4;

    border-color: var(--success);

    transform: translateY(-2px);

}

/*
|--------------------------------------------------------------------------
| Focus
|--------------------------------------------------------------------------
*/

.ua-tour-actions .ua-btn:focus-visible {

    outline: 3px solid rgba(15, 118, 110, .25);

    outline-offset: 4px;

}

/*
|--------------------------------------------------------------------------
| Tour Info
|--------------------------------------------------------------------------
*/

.ua-tour-info {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 0;

    padding: var(--space-sm);

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

    background: var(--surface);

    border: var(--border-thin) solid var(--border);

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

    box-shadow: var(--shadow);

}

.ua-info-card {

    position: relative;

    display: flex;

    align-items: center;

    gap: var(--space-lg);

    padding: var(--space-xl);

    transition: var(--transition);

}

.ua-info-card:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 20px;

    right: 0;

    width: 1px;

    height: calc(100% - 40px);

    background: var(--border);

}

.ua-info-card:hover {

    transform: translateY(-2px);

}

.ua-info-card i {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 56px;

    height: 56px;

    border-radius: var(--radius);

    background: var(--background);

    color: var(--primary);

    font-size: 1.35rem;

}

.ua-info-card div {

    display: flex;

    flex-direction: column;

    gap: var(--space-xs);

}

.ua-info-card strong {

    color: var(--text);

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

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

    line-height: 1.35;

}

.ua-info-card span {

    color: var(--text-muted);

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

    line-height: 1.6;

}

/*
|--------------------------------------------------------------------------
| Tour Facts
|--------------------------------------------------------------------------
*/

.ua-tour-facts {

    display: grid;

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

    gap: var(--space-md);

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

}

.ua-tour-fact {

    display: flex;

    align-items: center;

    gap: var(--space-md);

    padding: var(--space-md);

    background: var(--surface);

    border: var(--border-thin) solid var(--border);

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

    transition: var(--transition);

}

.ua-tour-fact:hover {

    border-color: var(--border-dark);

    box-shadow: var(--shadow-sm);

    transform: translateY(-2px);

}

.ua-tour-fact i {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 42px;

    height: 42px;

    border-radius: var(--radius);

    background: rgba(245, 158, 11, .10);

    color: var(--primary);

    font-size: 1rem;

}

.ua-tour-fact div {

    display: flex;

    flex-direction: column;

    gap: 2px;

}

.ua-tour-fact strong {

    color: var(--text);

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

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

    line-height: 1.35;

}

.ua-tour-fact span {

    color: var(--text-light);

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

    line-height: 1.5;

}

/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion:reduce) {

    .ua-info-card,
    .ua-tour-fact,
    .ua-btn {

        transition: none;

    }

}

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

/* ==========================
   Tablet
========================== */

@media (max-width:991.98px) {

    .ua-tour-hero {

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

    }

    .ua-breadcrumb {

        margin-bottom: var(--space-xl);

    }

    .ua-breadcrumb li {

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

    }

    .ua-tour-header {

        gap: var(--space-3xl);

        margin-bottom: var(--space-2xl);

    }

    .ua-tour-content {

        max-width: 100%;

    }

    .ua-tour-title {

        max-width: 16ch;

        margin-bottom: var(--space-xl);

        font-size: 2.5rem;

        line-height: 1.08;

    }

    .ua-tour-meta {

        gap: var(--space-xl);

        margin-bottom: var(--space-lg);

    }

    .ua-tour-rating,
    .ua-tour-location {

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

    }

    .ua-tour-rating small {

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

    }

    .ua-tour-description {

        max-width: 100%;

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

        line-height: 1.8;

    }

    .ua-tour-actions {

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

    }

    .ua-tour-info {

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

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

    }

    .ua-info-card {

        padding: var(--space-lg);

        gap: var(--space-md);

    }

    .ua-info-card:nth-child(2)::after,
    .ua-info-card:nth-child(4)::after {

        display: none;

    }

    .ua-tour-facts {

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

        gap: var(--space-lg);

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

    }

    .ua-tour-fact {

        padding: var(--space-lg);

        gap: var(--space-md);

    }

}

/* ==========================
   Mobile
========================== */

@media (max-width:767.98px) {

    .ua-tour-hero {

        padding: var(--space-2xl) 0 var(--space-2xl);

    }

    .ua-breadcrumb {

        margin-bottom: var(--space-lg);

    }

    .ua-breadcrumb ol {

        gap: var(--space-xs);

    }

    .ua-tour-header {

        display: block;

        margin-bottom: var(--space-xl);

    }

    .ua-tour-content {

        max-width: 100%;

    }

    .ua-tour-title {

        max-width: none;

        margin-bottom: var(--space-lg);

        font-size: 2rem;

        line-height: 1.12;

        letter-spacing: -0.02em;

    }

    .ua-tour-meta {

        gap: var(--space-lg);

        margin-bottom: var(--space-md);

    }

    .ua-tour-rating,
    .ua-tour-location {

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

    }

    .ua-tour-rating small {

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

    }

    .ua-tour-description {

        max-width: 100%;

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

        line-height: 1.8;

    }

    .ua-tour-actions {

        flex-direction: column;

        gap: var(--space-md);

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

    }

    .ua-tour-actions .ua-btn {

        width: 100%;

        min-width: 0;

        height: 52px;

    }

    .ua-tour-info {

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

        padding: 0;

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

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

    }

    .ua-info-card {

        gap: var(--space-md);

        padding: var(--space-lg);

    }

    .ua-info-card::after {

        display: none;

    }

    .ua-info-card:not(:last-child) {

        border-bottom: var(--border-thin) solid var(--border);

    }

    .ua-info-card i {

        width: 48px;

        height: 48px;

        font-size: 1.15rem;

    }

    .ua-info-card strong {

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

    }

    .ua-info-card span {

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

    }

    .ua-tour-facts {

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

        gap: var(--space-sm);

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

    }

    .ua-tour-fact {

        gap: var(--space-md);

        padding: var(--space-sm);

    }

    .ua-tour-fact i {

        width: 38px;

        height: 38px;

        font-size: .95rem;

    }

    .ua-tour-fact strong {

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

    }

    .ua-tour-fact span {

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

    }

}