/* =========================================================
   FOLLOWMYTRAVELS — HOME
   Uses global variables from theme.css
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.travel-hero {
    background: var(--color-bg);

    padding: 34px 0 72px;
}


.travel-hero__inner {
    width: min(
        calc(var(--container-wide) + 40px),
        calc(100% - 64px)
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(560px, 1.18fr);

    gap: 62px;

    align-items: center;
}


.travel-hero__content {
    padding-left: 34px;
}


.travel-hero__eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 27px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.6px;

    text-transform: uppercase;

    color: var(--text-secondary);
}


.travel-hero__eyebrow span {
    width: 35px;
    height: 2px;

    background: var(--color-yellow);
}


.travel-hero h1 {
    max-width: 650px;

    margin: 0;

    color: var(--text-primary);

    font-family: var(--font-primary);

    font-size: clamp(64px, 6vw, 105px);
    font-weight: 700;

    line-height: 0.89;

    letter-spacing: -6px;
}


.travel-hero h1 span {
    display: block;

    color: var(--text-primary);

    font-family: var(--font-editorial);

    font-style: italic;
    font-weight: 600;

    letter-spacing: -4px;
}


.travel-hero__lead {
    max-width: 560px;

    margin: 36px 0 0;

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.75;
}


.travel-hero__actions {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 35px;
}



/* =========================================================
   GLOBAL HOME BUTTONS
   ========================================================= */

.home-btn {
    min-height: 58px;

    padding: 0 23px;

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

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 22px;

    font-family: var(--font-primary);

    font-size: 13px;
    font-weight: 700;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.home-btn--dark {
    background: var(--color-dark);

    color: var(--text-light);

    box-shadow: var(--shadow-soft);
}


.home-btn--dark:hover {
    transform: translateY(-3px);

    box-shadow: var(--shadow-medium);
}


.home-btn--plain {
    min-height: auto;

    padding: 12px 0;

    border-radius: 0;

    color: var(--text-primary);
}


.home-btn__arrow {
    font-size: 17px;
}



/* =========================================================
   HERO META
   ========================================================= */

.travel-hero__meta {
    max-width: 620px;

    margin-top: 62px;

    padding-top: 25px;

    border-top:
        1px solid
        color-mix(
            in srgb,
            var(--color-dark) 10%,
            transparent
        );

    display: grid;

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

    gap: 22px;
}


.travel-hero__meta strong,
.travel-hero__meta span {
    display: block;
}


.travel-hero__meta strong {
    color: var(--text-primary);

    font-size: 13px;
    font-weight: 700;
}


.travel-hero__meta span {
    margin-top: 5px;

    color: var(--text-secondary);

    font-size: 11px;
}



/* =========================================================
   HERO VISUAL
   ========================================================= */

.travel-hero__visual {
    position: relative;

    min-width: 0;

    padding-right: 28px;
}


.travel-hero__image {
    position: relative;

    height: 670px;

    overflow: hidden;

    border-radius:
        var(--radius-small)
        74px
        var(--radius-small)
        var(--radius-small);

    background:
        linear-gradient(
            to top,
            color-mix(
                in srgb,
                var(--color-dark) 34%,
                transparent
            ),
            color-mix(
                in srgb,
                var(--color-dark) 3%,
                transparent
            )
            60%
        ),
        url("../images/home/hero-travel.jpg")
        center / cover no-repeat,
        linear-gradient(
            135deg,
            var(--color-aqua),
            var(--color-mint)
        );

    box-shadow: var(--shadow-strong);
}


.travel-hero__image-top {
    position: absolute;

    top: 28px;
    left: 30px;
    right: 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--text-light);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}


.travel-hero__image-top > div {
    width: 44px;
    height: 44px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-white) 55%,
            transparent
        );

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
}


.travel-hero__location {
    position: absolute;

    left: 30px;
    bottom: 30px;

    display: flex;
    align-items: center;

    gap: 14px;

    color: var(--text-light);
}


.travel-hero__location-icon {
    width: 48px;
    height: 48px;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--color-white) 18%,
            transparent
        );

    backdrop-filter: blur(12px);

    display: flex;
    align-items: center;
    justify-content: center;
}


.travel-hero__location small,
.travel-hero__location strong {
    display: block;
}


.travel-hero__location small {
    margin-bottom: 3px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}


.travel-hero__location strong {
    font-family: var(--font-editorial);

    font-size: 28px;
    font-weight: 600;
}


.travel-note {
    position: absolute;

    left: -45px;
    top: 88px;

    width: 205px;

    padding: 20px 22px;

    border-radius: 3px;

    background: var(--color-yellow);

    color: var(--text-primary);

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

    transform: rotate(-3deg);

    z-index: 5;
}


.travel-note__line {
    display: block;

    width: 32px;
    height: 2px;

    margin-bottom: 13px;

    background: var(--color-dark);
}


.travel-note small {
    display: block;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.8px;
}


.travel-note strong {
    display: block;

    margin-top: 7px;

    font-family: var(--font-editorial);

    font-size: 18px;
    font-style: italic;
    font-weight: 600;

    line-height: 1.25;
}


.travel-hero__number {
    position: absolute;

    right: -2px;
    bottom: -28px;

    color:
        color-mix(
            in srgb,
            var(--color-dark) 6%,
            transparent
        );

    font-family: var(--font-editorial);

    font-size: 100px;
    font-weight: 600;

    line-height: 1;

    user-select: none;
}



/* =========================================================
   TRAVEL STATEMENT / MARQUEE
   ========================================================= */

.travel-statement {
    width: 100%;

    overflow: hidden;

    padding: 24px 0;

    background: var(--color-dark);

    color: var(--text-light);
}


.travel-statement__track {
    width: max-content;

    display: flex;
    align-items: center;

    will-change: transform;

    animation:
        travel-statement-scroll
        32s
        linear
        infinite;
}


.travel-statement__group {
    min-width: 100vw;

    padding: 0 42px;

    display: flex;
    align-items: center;
    justify-content: space-around;

    gap: 34px;

    flex-shrink: 0;

    white-space: nowrap;
}


.travel-statement__word {
    color: var(--text-light);

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 6px;
}


.travel-statement__star {
    color: var(--color-yellow);

    font-size: 14px;

    flex: 0 0 auto;
}


@keyframes travel-statement-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* stop animation for users who prefer reduced motion */

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

    .travel-statement__track {
        animation: none;
    }

}



/* =========================================================
   SECTION HEAD
   ========================================================= */

.home-destinations {
    width: min(
        var(--container-wide),
        calc(100% - 64px)
    );

    margin: 0 auto;

    padding: 115px 0;
}


.home-section-head {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    margin-bottom: 46px;
}


.section-label {
    display: block;

    margin-bottom: 13px;

    color: var(--text-secondary);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2.4px;
}


.home-section-head h2 {
    max-width: 760px;

    margin: 0;

    color: var(--text-primary);

    font-size: clamp(44px, 4.5vw, 72px);
    font-weight: 700;

    line-height: 1;

    letter-spacing: -3px;
}


.home-section-head h2 em,
.featured-story__content h2 em,
.home-final-cta h2 em {
    color: var(--text-primary);

    font-family: var(--font-editorial);

    font-style: italic;
    font-weight: 600;
}


.section-link {
    padding-bottom: 7px;

    border-bottom:
        1px solid var(--color-dark);

    display: flex;
    align-items: center;

    gap: 12px;

    color: var(--text-primary);

    font-size: 12px;
    font-weight: 700;
}



/* =========================================================
   DESTINATION EDITORIAL GRID
   ========================================================= */

.destination-editorial-grid {
    display: grid;

    grid-template-columns:
        1.25fr
        0.875fr
        0.875fr;

    gap: 18px;
}


.editorial-destination {
    min-width: 0;
}


.destination-photo {
    position: relative;

    height: 480px;

    overflow: hidden;

    border-radius: 4px;

    background-color: var(--color-surface);

    background-position: center;
    background-size: cover;

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}


.editorial-destination--large .destination-photo {
    height: 580px;
}


.editorial-destination:hover .destination-photo {
    transform: translateY(-5px);

    box-shadow: var(--shadow-medium);
}


.destination-photo--santorini {
    background:
        linear-gradient(
            to top,
            color-mix(
                in srgb,
                var(--color-dark) 57%,
                transparent
            ),
            transparent 55%
        ),
        url("../images/home/santorini.jpg")
        center / cover no-repeat,
        var(--color-aqua);
}


.destination-photo--bali {
    background:
        linear-gradient(
            to top,
            color-mix(
                in srgb,
                var(--color-dark) 57%,
                transparent
            ),
            transparent 55%
        ),
        url("../images/home/bali.jpg")
        center / cover no-repeat,
        var(--color-mint);
}


.destination-photo--dolomites {
    background:
        linear-gradient(
            to top,
            color-mix(
                in srgb,
                var(--color-dark) 57%,
                transparent
            ),
            transparent 55%
        ),
        url("../images/home/dolomites.jpg")
        center / cover no-repeat,
        var(--color-surface);
}


.destination-topline {
    position: absolute;

    left: 22px;
    right: 22px;
    top: 20px;

    display: flex;
    justify-content: space-between;

    color: var(--text-light);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}


.destination-bottom {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 22px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    color: var(--text-light);
}


.destination-bottom small {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}


.destination-bottom h3 {
    margin: 5px 0 0;

    font-family: var(--font-editorial);

    font-size: 38px;
    font-weight: 600;

    line-height: 1;
}


.destination-arrow {
    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: var(--color-white);

    color: var(--text-primary);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
}



/* =========================================================
   PHILOSOPHY
   ========================================================= */

.travel-philosophy {
    padding: 110px 0;

    background: var(--color-surface);
}


.travel-philosophy__inner {
    width: min(
        var(--container),
        calc(100% - 64px)
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        180px
        1fr
        250px;

    gap: 65px;

    align-items: center;
}


.travel-philosophy__label {
    align-self: flex-start;

    padding-top: 9px;

    color: var(--text-primary);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
}


.travel-philosophy__copy p {
    margin: 0 0 15px;

    color: var(--text-secondary);

    font-size: 15px;
}


.travel-philosophy__copy h2 {
    max-width: 760px;

    margin: 0;

    color: var(--text-primary);

    font-size: clamp(48px, 5vw, 80px);

    line-height: 0.98;

    letter-spacing: -4px;
}


.travel-philosophy__copy h2 em {
    display: block;

    font-family: var(--font-editorial);

    font-style: italic;
    font-weight: 600;
}


.travel-philosophy__accent {
    position: relative;

    min-height: 220px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.accent-sun {
    position: absolute;

    width: 170px;
    height: 170px;

    border-radius: 50%;

    background: var(--color-yellow);
}


.travel-philosophy__accent span {
    position: relative;

    z-index: 2;

    transform: rotate(-8deg);

    color: var(--text-primary);

    font-family: var(--font-editorial);

    font-size: 30px;
    font-style: italic;
    font-weight: 600;

    text-align: center;
}



/* =========================================================
   FEATURED STORY
   ========================================================= */

.featured-story {
    padding: 120px 0;

    background: var(--color-bg);
}


.featured-story__inner {
    width: min(
        var(--container),
        calc(100% - 64px)
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.05fr
        0.95fr;

    gap: 80px;

    align-items: center;
}


.featured-story__visual {
    position: relative;
}


.featured-story__image {
    height: 620px;

    border-radius: 4px;

    background:
        linear-gradient(
            to top,
            color-mix(
                in srgb,
                var(--color-dark) 20%,
                transparent
            ),
            transparent
        ),
        url("../images/home/cinque-terre.jpg")
        center / cover no-repeat,
        var(--color-aqua);
}


.featured-story__badge {
    position: absolute;

    left: -22px;
    bottom: 35px;

    padding: 16px 18px;

    background: var(--color-yellow);

    color: var(--text-primary);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;

    transform: rotate(-3deg);
}


.featured-story__content h2 {
    margin: 0 0 30px;

    color: var(--text-primary);

    font-size: clamp(48px, 4.6vw, 73px);

    line-height: 1;

    letter-spacing: -3px;
}


.featured-story__content h2 em {
    display: block;
}


.featured-story__content p {
    max-width: 550px;

    margin: 0 0 17px;

    color: var(--text-secondary);

    font-size: 16px;

    line-height: 1.75;
}


.featured-story__content .home-btn {
    margin-top: 20px;
}



/* =========================================================
   EXPERIENCE CARDS
   ========================================================= */

.travel-experience {
    width: min(
        var(--container),
        calc(100% - 64px)
    );

    margin: 0 auto;

    padding-bottom: 120px;
}


.travel-experience__grid {
    display: grid;

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

    gap: 15px;
}


.experience-card {
    min-height: 290px;

    padding: 32px;

    border-radius: 4px;

    background: var(--color-surface);

    color: var(--text-primary);

    display: flex;
    flex-direction: column;

    justify-content: flex-end;
}


.experience-card--mint {
    background: var(--color-mint);
}


.experience-card--yellow {
    background: var(--color-yellow);
}


.experience-card__number {
    margin-bottom: auto;

    font-size: 11px;
    font-weight: 700;
}


.experience-card h3 {
    margin: 0 0 9px;

    font-family: var(--font-editorial);

    font-size: 36px;
    font-weight: 600;
}


.experience-card p {
    max-width: 300px;

    margin: 0;

    color: var(--text-secondary);

    font-size: 13px;

    line-height: 1.6;
}



/* =========================================================
   FINAL CTA
   ========================================================= */

.home-final-cta {
    padding: 0 0 90px;

    background: var(--color-bg);
}


.home-final-cta__inner {
    position: relative;

    width: min(
        var(--container-wide),
        calc(100% - 64px)
    );

    min-height: 410px;

    margin: 0 auto;

    padding: 65px;

    overflow: hidden;

    border-radius: 5px;

    background:
        linear-gradient(
            115deg,
            var(--color-aqua),
            var(--color-mint)
        );

    display: grid;

    grid-template-columns:
        1.3fr
        0.7fr;

    gap: 80px;

    align-items: center;
}


.home-final-cta__inner::after {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -90px;
    top: -140px;

    border-radius: 50%;

    border:
        55px solid
        color-mix(
            in srgb,
            var(--color-white) 26%,
            transparent
        );
}


.home-final-cta__copy {
    position: relative;

    z-index: 2;
}


.home-final-cta__copy > span {
    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}


.home-final-cta h2 {
    margin: 14px 0 0;

    color: var(--text-primary);

    font-size: clamp(55px, 6vw, 90px);

    line-height: 0.92;

    letter-spacing: -5px;
}


.home-final-cta h2 em {
    display: block;
}


.home-final-cta__right {
    position: relative;

    z-index: 2;
}


.home-final-cta__right p {
    max-width: 430px;

    margin: 0 0 25px;

    color: var(--text-primary);

    font-size: 15px;

    line-height: 1.7;
}



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

@media (max-width: 1100px) {

    .travel-hero__inner {
        grid-template-columns: 1fr 1fr;

        gap: 35px;
    }


    .travel-hero__content {
        padding-left: 0;
    }


    .travel-hero h1 {
        font-size: 72px;
    }


    .travel-hero__image {
        height: 600px;
    }


    .travel-note {
        left: -20px;
    }


    .destination-editorial-grid {
        grid-template-columns:
            1.2fr
            0.8fr;
    }


    .editorial-destination:last-child {
        grid-column: 1 / -1;
    }


    .editorial-destination:last-child .destination-photo {
        height: 430px;
    }


    .travel-philosophy__inner {
        grid-template-columns:
            130px
            1fr;
    }


    .travel-philosophy__accent {
        display: none;
    }

}



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

@media (max-width: 820px) {

    .travel-hero {
        padding-top: 25px;
    }


    .travel-hero__inner,
    .home-destinations,
    .travel-philosophy__inner,
    .featured-story__inner,
    .travel-experience,
    .home-final-cta__inner {
        width: calc(100% - 30px);
    }


    .travel-hero__inner {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .travel-hero h1 {
        font-size: clamp(58px, 15vw, 80px);

        letter-spacing: -4px;
    }


    .travel-hero__image {
        height: 560px;

        border-radius:
            var(--radius-small)
            45px
            var(--radius-small)
            var(--radius-small);
    }


    .travel-note {
        left: 15px;
        top: 20px;
    }


    .travel-hero__meta {
        margin-top: 42px;
    }


    .home-section-head {
        align-items: flex-start;
        flex-direction: column;
    }


    .destination-editorial-grid {
        grid-template-columns: 1fr 1fr;
    }


    .editorial-destination--large {
        grid-column: 1 / -1;
    }


    .travel-philosophy__inner {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .featured-story__inner {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .featured-story__image {
        height: 540px;
    }


    .travel-experience__grid {
        grid-template-columns: 1fr;
    }


    .home-final-cta__inner {
        grid-template-columns: 1fr;

        padding: 45px 35px;

        gap: 45px;
    }

}



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

@media (max-width: 560px) {

    .travel-hero {
        padding-bottom: 50px;
    }


    .travel-hero h1 {
        font-size: 59px;

        line-height: 0.92;
    }


    .travel-hero__lead {
        font-size: 16px;
    }


    .travel-hero__meta {
        grid-template-columns: 1fr 1fr;
    }


    .travel-hero__meta > div:last-child {
        grid-column: 1 / -1;
    }


    .travel-hero__visual {
        padding-right: 0;
    }


    .travel-hero__image {
        height: 470px;
    }


    .travel-hero__number {
        display: none;
    }


    .travel-note {
        width: 175px;
    }

    .travel-statement {
        padding: 20px 0;
    }


    .travel-statement__group {
        min-width: 150vw;

        padding: 0 24px;

        gap: 25px;
    }


    .travel-statement__word {
        font-size: 11px;

        letter-spacing: 4px;
    }


    .travel-statement__star {
        font-size: 11px;
    }


    .home-destinations {
        padding: 80px 0;
    }


    .home-section-head h2,
    .travel-philosophy__copy h2,
    .featured-story__content h2 {
        font-size: 44px;

        letter-spacing: -2px;
    }


    .destination-editorial-grid {
        grid-template-columns: 1fr;
    }


    .editorial-destination,
    .editorial-destination--large,
    .editorial-destination:last-child {
        grid-column: auto;
    }


    .destination-photo,
    .editorial-destination--large .destination-photo,
    .editorial-destination:last-child .destination-photo {
        height: 470px;
    }


    .travel-philosophy {
        padding: 75px 0;
    }


    .featured-story {
        padding: 80px 0;
    }


    .featured-story__image {
        height: 470px;
    }


    .featured-story__badge {
        left: 15px;
    }


    .travel-experience {
        padding-bottom: 80px;
    }


    .home-final-cta h2 {
        font-size: 55px;
    }

}