/* Travel guides use the existing dark resort palette and shared typography. */
.banner-header.travel-hero {
    block-size: auto;
    min-block-size: 380px;
    padding-block: 160px 72px;
    background-position: center;
    background-size: cover;
}
.travel-hero .container {
    position: relative;
}
.travel-hero h1 {
    max-inline-size: 22ch;
    margin-block: 16px 24px;
    font-size: clamp(32px, 4.5vw, 58px);
    line-height: 1.18;
    text-wrap: balance;
}
.travel-hero .section-subtitle {
    color: var(--resort-gold-light);
}
.travel-hero .travel-summary {
    max-inline-size: 68ch;
    color: #f3f3f3;
    font-size: 19px;
    line-height: 1.65;
}
.travel-main {
    color: var(--resort-text);
}
.travel-layout,
.travel-article,
.travel-hub-intro,
.travel-grid,
.travel-card {
    min-inline-size: 0;
}
.travel-article {
    max-inline-size: 78ch;
    margin-inline: auto;
}
.travel-main .travel-tagline {
    margin-block: 32px 0;
    color: #b9b9b9;
    font-size: 16px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}
figure.travel-photo {
    min-inline-size: 0;
    max-inline-size: 100%;
    margin-block: 32px;
    margin-inline: 0;
    background: var(--resort-surface);
}
figure.travel-photo-portrait {
    max-inline-size: min(100%, 520px);
    margin-inline: auto;
}
.travel-photo img {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: auto;
}
.travel-photo figcaption {
    padding-block: 16px;
    padding-inline: 20px;
    border-inline-start: 3px solid var(--resort-gold);
    text-align: start;
}
.travel-photo .travel-photo-caption {
    margin: 0;
    color: var(--resort-text);
    font-size: 16px;
    line-height: 1.65;
}
.travel-photo-credits {
    min-inline-size: 0;
    margin-block-start: 48px;
    padding-block: 20px;
    border-block-start: 1px solid #494133;
    text-align: start;
}
.travel-photo-credits summary {
    min-block-size: 44px;
    padding-block: 8px;
    color: var(--resort-gold-light);
    font-size: 18px;
    line-height: 1.6;
    cursor: pointer;
}
.travel-photo-credits summary:focus-visible {
    outline: 3px solid var(--resort-gold-light);
    outline-offset: 4px;
}
.travel-photo-credits ul {
    margin-block: 16px 0;
    padding-inline-start: 24px;
}
.travel-photo-credits .travel-photo-credit {
    margin-block: 0 12px;
    padding-inline-start: 4px;
    list-style: disc;
    color: #b9b9b9;
    font-size: 14px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}
.travel-photo-credits .travel-photo-credit:last-child {
    margin-block-end: 0;
}
.travel-photo-credits .travel-photo-credit a {
    max-inline-size: 100%;
    min-block-size: 24px;
    padding-block: 2px;
    color: var(--resort-gold-light);
}
.travel-main p,
.travel-main li {
    color: var(--resort-text);
    font-size: 18px;
    line-height: 1.8;
}
.travel-main a {
    color: var(--resort-gold-light);
    text-decoration: underline;
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
}
.travel-main a:hover {
    color: #fff;
}
.travel-main a:focus-visible {
    outline: 3px solid var(--resort-gold-light);
    outline-offset: 4px;
}
.travel-breadcrumbs {
    margin-block-end: 16px;
}
.travel-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0;
    padding: 0;
}
.travel-breadcrumbs li {
    font-size: 15px;
    list-style: none;
}
.travel-breadcrumbs li + li::before {
    content: '/';
    display: inline-block;
    margin-inline-end: 12px;
    color: #999;
}
.travel-main .travel-meta {
    margin-block-end: 32px;
    color: #b9b9b9;
    font-size: 15px;
    line-height: 1.65;
}
.travel-highlights,
.travel-tips,
.travel-cta {
    margin-block: 32px;
    padding: 28px;
    background: var(--resort-surface);
    border-inline-start: 3px solid var(--resort-gold);
}
.travel-main h2 {
    margin-block: 0 20px;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.3;
    text-wrap: balance;
}
.travel-main h3 {
    font-size: 24px;
    line-height: 1.35;
    text-wrap: balance;
}
.travel-highlights ul,
.travel-tips ul,
.travel-section ul,
.travel-sources ul,
.travel-related ul,
.travel-toc ul {
    margin-block: 16px 0;
    padding-inline-start: 24px;
}
.travel-highlights li,
.travel-tips li,
.travel-section li,
.travel-sources li,
.travel-related li,
.travel-toc li {
    margin-block-end: 12px;
    padding-inline-start: 4px;
    list-style: disc;
}
.travel-highlights li:last-child,
.travel-tips li:last-child,
.travel-cta p:last-child {
    margin-block-end: 0;
}
.travel-toc {
    margin-block: 32px 48px;
    padding-block: 24px;
    border-block: 1px solid #494133;
}
.travel-toc a,
.travel-related a,
.travel-read {
    min-block-size: 44px;
    padding-block: 8px;
}
.travel-section,
.travel-sources,
.travel-related,
.travel-group {
    margin-block: 48px;
    scroll-margin-block-start: calc(var(--resort-header-height) + 24px);
}
.travel-section p:last-child {
    margin-block-end: 0;
}
.travel-sources li,
.travel-sources a {
    overflow-wrap: anywhere;
}
.travel-sources li {
    font-size: 16px;
}
.travel-related ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
}
.travel-cta a {
    margin-inline-end: 16px;
    min-block-size: 44px;
    padding-block: 8px;
}
.travel-hub-intro {
    max-inline-size: 78ch;
    margin-inline: auto;
    margin-block-end: 48px;
}
.travel-hub-intro .travel-toc {
    margin-block-end: 0;
}
.travel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.travel-card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid #494133;
    background: var(--resort-surface);
}
.travel-card h3 {
    margin-block-end: 16px;
}
.travel-main .travel-card-link {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
    text-decoration: none;
}
.travel-card-image {
    display: block;
    flex: none;
    aspect-ratio: 16 / 10;
    inline-size: 100%;
    margin-block-end: 24px;
    overflow: hidden;
    background: var(--resort-surface);
}
.travel-card-photo {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}
.travel-card-link h3 {
    color: #fff;
}
.travel-card-link:hover h3,
.travel-card-link:focus-visible h3 {
    color: var(--resort-gold-light);
    text-decoration: underline;
}
.travel-card p {
    margin-block-end: 20px;
    font-size: 16px;
    line-height: 1.75;
}
.travel-card .travel-read {
    align-self: flex-start;
    margin-block-start: auto;
    color: var(--resort-gold-light);
    text-decoration: underline;
}

@media (max-width: 991px) {
    .banner-header.travel-hero {
        padding-block: 128px 56px;
    }
    .travel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 575px) {
    .travel-photo figcaption {
        padding-inline: 16px;
    }
    .banner-header.travel-hero {
        min-block-size: 0;
        padding-block: 120px 44px;
    }
    .travel-hero .travel-summary,
    .travel-main p,
    .travel-main li {
        font-size: 17px;
    }
    .travel-main {
        padding-block: 48px;
    }
    .travel-highlights,
    .travel-tips,
    .travel-cta,
    .travel-card {
        padding: 22px;
    }
    .travel-grid,
    .travel-related ul {
        grid-template-columns: minmax(0, 1fr);
    }
    .travel-section,
    .travel-sources,
    .travel-related,
    .travel-group {
        margin-block: 36px;
    }
    .travel-main .travel-meta,
    .travel-breadcrumbs li,
    .travel-sources li {
        font-size: 15px;
    }
}