/* ======================================================
   TRAVEL
   Loaded after main.css on Travel pages.
   ====================================================== */

/* ==========================================================
   TRAVEL CATEGORY PAGE
   Append to the VERY END of /css/main.css
   ========================================================== */

.travel-page {
    --travel-blue: #4f76a8;
    --travel-blue-dark: #365f93;
    --travel-blue-light: #eaf0f9;
}

/* ---------- Category identity ---------- */

.travel-page .topic-kicker {
    background: var(--travel-blue);
    color: #fff;
}

.travel-page .section-kicker,
.travel-page .topic-question-mark,
.travel-page .topic-question-label,
.travel-page .topic-question-link {
    color: var(--travel-blue-dark);
}

.travel-page .topic-question-card {
    border-top-color: var(--travel-blue);
}

.travel-page .travel-intro-icon {
    color: var(--travel-blue-dark);
    background: var(--travel-blue-light);
}


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

.travel-page .topic-hero {
    min-height: 415px;
}

.travel-page .topic-hero-inner {
    padding-top: 58px;
    padding-bottom: 58px;
}

.travel-page .topic-hero-content {
    max-width: 800px;
}

.travel-page .topic-hero h1 {
    font-size: clamp(46px, 5.2vw, 66px);
    line-height: 1.01;
}

.travel-page .topic-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.travel-page .topic-hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(16, 43, 74, .92) 0%,
            rgba(34, 72, 113, .76) 42%,
            rgba(50, 88, 130, .28) 72%,
            rgba(50, 88, 130, .08) 100%
        );
}


/* ---------- Questions ---------- */

.travel-page .topic-questions {
    padding-top: 66px;
    padding-bottom: 70px;
}

.travel-page .travel-question-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 820px;
}

.travel-page .travel-question-card {
    min-height: 275px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .travel-page .topic-hero {
        min-height: 405px;
    }

    .travel-page .topic-hero h1 {
        font-size: clamp(43px, 7vw, 57px);
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

    .travel-page .topic-hero {
        min-height: 0;
    }

    .travel-page .topic-hero-inner {
        padding-top: 46px;
        padding-bottom: 48px;
    }

    .travel-page .topic-hero-content {
        max-width: 100%;
    }

    .travel-page .topic-hero h1 {
        font-size: clamp(39px, 9.5vw, 49px);
        line-height: 1.04;
        letter-spacing: -1.7px;
    }

    .travel-page .topic-hero-desktop-break {
        display: none;
    }

    .travel-page .topic-hero-content > p:last-child {
        margin-top: 18px;
        font-size: 16px;
        line-height: 1.5;
    }

    .travel-page .topic-hero-media img {
        content: url("/images/travel-hero-mobile.jpg");
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .travel-page .topic-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(16, 43, 74, .78) 0%,
                rgba(34, 72, 113, .58) 58%,
                rgba(50, 88, 130, .18) 100%
            );
    }

    .travel-page .topic-questions {
        padding-top: 48px;
        padding-bottom: 52px;
    }

    .travel-page .travel-question-grid {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .travel-page .travel-question-card {
        min-height: 0;
    }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 520px) {

    .travel-page .topic-hero-inner {
        padding-top: 40px;
        padding-bottom: 42px;
    }

    .travel-page .topic-hero h1 {
        font-size: 40px;
        line-height: 1.05;
        letter-spacing: -1.4px;
    }

    .travel-page .topic-hero-content > p:last-child {
        font-size: 16px;
        line-height: 1.48;
    }

    .travel-page .topic-hero-media img {
        object-position: 62% center;
    }

}