/* =========================================================
   TEMASHIKA TRAVEL & TOURS
   Homepage Styles
   ========================================================= */


/* =========================================================
   1. HERO
   ========================================================= */

.hero {
    position: relative;

    min-height: 100svh;

    overflow: hidden;

    display: flex;

    align-items: flex-end;

    color: var(--color-white);

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


.hero__media {
    position: absolute;

    inset: 0;
}


.hero__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    animation:
        heroZoom 12s
        ease-out
        both;
}


@keyframes heroZoom {

    from {
        transform: scale(1.08);
    }

    to {
        transform: scale(1);
    }

}


.hero__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            105deg,
            rgba(10, 35, 29, 0.9) 0%,
            rgba(10, 35, 29, 0.68) 42%,
            rgba(10, 35, 29, 0.2) 100%
        );
}


.hero__container {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    width: 100%;

    min-height: 100svh;

    padding-top:
        calc(
            var(--header-height) +
            5rem
        );

    padding-bottom: 2.25rem;
}


.hero__content {
    max-width: 850px;

    margin-top: auto;

    margin-bottom: auto;

    padding-block: 5rem;
}


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

.hero__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 0.75rem;

    margin-bottom: 1.5rem;

    color:
        var(--color-gold-light);

    font-size: 0.67rem;

    font-weight: 800;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}


.hero__eyebrow-line {
    width: 34px;

    height: 2px;

    background:
        currentColor;
}


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

.hero h1 {
    max-width: 900px;

    color:
        var(--color-white);

    font-size:
        clamp(
            4rem,
            9vw,
            8.5rem
        );

    line-height: 0.88;

    letter-spacing:
        -0.055em;
}


.hero h1 span {
    display: block;

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


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

.hero__description {
    max-width: 580px;

    margin-top: 2rem;

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );

    font-size:
        clamp(
            1rem,
            1.5vw,
            1.2rem
        );

    line-height: 1.75;
}


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

.hero__actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 0.8rem;

    margin-top: 2rem;
}


.hero__btn-outline {
    color:
        var(--color-white);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.55
        );

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    backdrop-filter:
        blur(8px);
}


.hero__btn-outline:hover {
    color:
        var(--color-primary);

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

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


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

.hero__footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    padding-top: 1.5rem;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.2
        );
}


.hero__location,
.hero__scroll {
    display: flex;

    align-items: center;

    gap: 0.65rem;

    color:
        rgba(
            255,
            255,
            255,
            0.7
        );

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.hero__location i {
    color:
        var(--color-gold-light);
}


.hero__scroll i {
    animation:
        scrollArrow 1.8s
        ease-in-out
        infinite;
}


@keyframes scrollArrow {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(4px);
    }

}


/* =========================================================
   2. INTRODUCTION
   ========================================================= */

.intro {
    background:
        var(--color-cream);
}


.intro__grid {
    display: grid;

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

    gap:
        clamp(
            3rem,
            9vw,
            9rem
        );

    align-items: center;
}


.intro__heading h2 {
    max-width: 650px;
}


.intro__content {
    max-width: 520px;
}


.intro__lead {
    margin-bottom: 1.25rem;

    color:
        var(--color-primary);

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

    font-size: 1.8rem;

    line-height: 1.25;
}


.intro__content p:not(.intro__lead) {
    margin-bottom: 1rem;

    font-size: 0.9rem;

    line-height: 1.9;
}


.intro__content .text-link {
    margin-top: 1.2rem;
}


/* =========================================================
   3. TRIPS SECTION
   ========================================================= */

.trips {
    overflow: hidden;

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


.section-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 3rem;
}


.section-heading h2 {
    max-width: 650px;
}


.section-heading__link {
    flex-shrink: 0;

    margin-bottom: 0.5rem;
}


/* =========================================================
   TRIP GRID
   ========================================================= */

.trip-grid {
    display: grid;

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

    gap: 1rem;
}


.trip-card {
    position: relative;

    min-height: 440px;

    overflow: hidden;

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

    color:
        var(--color-white);

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


.trip-card--large {
    grid-row:
        span 2;

    min-height: 700px;
}


.trip-card__image {
    position: absolute;

    inset: 0;
}


.trip-card__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 900ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.trip-card:hover
.trip-card__image img {
    transform:
        scale(1.06);
}


.trip-card__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(
                10,
                35,
                29,
                0.94
            ) 0%,
            rgba(
                10,
                35,
                29,
                0.42
            ) 48%,
            rgba(
                10,
                35,
                29,
                0.08
            ) 100%
        );
}


.trip-card__content {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    padding:
        clamp(
            1.5rem,
            3vw,
            2.5rem
        );
}


.trip-card__tag {
    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding:
        0.35rem
        0.7rem;

    margin-bottom: 1rem;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.28
        );

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

    color:
        var(--color-gold-light);

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    font-size: 0.58rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    backdrop-filter:
        blur(8px);
}


.trip-card h3 {
    max-width: 480px;

    color:
        var(--color-white);

    font-size:
        clamp(
            2rem,
            3.5vw,
            3.3rem
        );

    line-height: 0.98;
}


.trip-card:not(.trip-card--large) h3 {
    font-size:
        clamp(
            1.8rem,
            2.5vw,
            2.5rem
        );
}


.trip-card p {
    max-width: 430px;

    margin-top: 0.8rem;

    color:
        rgba(
            255,
            255,
            255,
            0.7
        );

    font-size: 0.78rem;

    line-height: 1.7;
}


.trip-card__link {
    display: inline-flex;

    align-items: center;

    gap: 0.6rem;

    margin-top: 1.2rem;

    color:
        var(--color-white);

    font-size: 0.7rem;

    font-weight: 800;

    text-transform: uppercase;
}


.trip-card__link i {
    color:
        var(--color-gold-light);

    transition:
        transform var(--transition);
}


.trip-card__link:hover i {
    transform:
        translateX(4px);
}


/* =========================================================
   4. EXPERIENCES
   ========================================================= */

.experiences {
    background:
        var(--color-cream);
}


.experience-grid {
    display: grid;

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

    gap: 1px;

    margin-top: 1rem;

    overflow: hidden;

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

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

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


.experience-card {
    position: relative;

    min-height: 340px;

    padding:
        clamp(
            1.75rem,
            4vw,
            3rem
        );

    background:
        var(--color-cream);

    transition:
        background var(--transition),
        transform var(--transition);
}


.experience-card:hover {
    z-index: 1;

    background:
        var(--color-white);

    transform:
        translateY(-4px);

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


.experience-card__icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 56px;

    height: 56px;

    margin-bottom: 3.5rem;

    border-radius:
        50%;

    color:
        var(--color-white);

    background:
        var(--color-primary);

    font-size: 1rem;

    transition:
        background var(--transition),
        transform var(--transition);
}


.experience-card:hover
.experience-card__icon {
    background:
        var(--color-accent);

    transform:
        rotate(-5deg)
        scale(1.05);
}


.experience-card__number {
    position: absolute;

    top: 2rem;

    right: 2rem;

    color:
        var(--color-border);

    font-size: 0.7rem;

    font-weight: 800;
}


.experience-card h3 {
    margin-bottom: 0.8rem;

    font-size:
        clamp(
            1.6rem,
            2.5vw,
            2.2rem
        );
}


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

    font-size: 0.8rem;

    line-height: 1.8;
}


/* =========================================================
   5. FINAL CTA
   ========================================================= */

.cta {
    position: relative;

    min-height: 620px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color:
        var(--color-white);

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


.cta__background {
    position: absolute;

    inset: 0;
}


.cta__background img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.cta__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(
                10,
                35,
                29,
                0.94
            ) 0%,
            rgba(
                10,
                35,
                29,
                0.72
            ) 48%,
            rgba(
                10,
                35,
                29,
                0.22
            ) 100%
        );
}


.cta .container {
    position: relative;

    z-index: 2;
}


.cta__content {
    max-width: 720px;
}


.cta .section-label {
    color:
        var(--color-gold-light);
}


.cta h2 {
    color:
        var(--color-white);

    font-size:
        clamp(
            3.2rem,
            6vw,
            6.5rem
        );
}


.cta p {
    max-width: 500px;

    margin-top: 1.25rem;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size: 1rem;

    line-height: 1.8;
}


.cta .btn {
    margin-top: 2rem;
}


/* =========================================================
   6. TABLET
   ========================================================= */

@media (max-width: 900px) {

    .hero h1 {
        font-size:
            clamp(
                4rem,
                12vw,
                7rem
            );
    }


    .intro__grid {
        grid-template-columns:
            1fr;

        gap: 3rem;
    }


    .intro__content {
        max-width: 650px;
    }


    .trip-grid {
        grid-template-columns:
            1fr;
    }


    .trip-card--large {
        grid-row: auto;

        min-height: 600px;
    }


    .trip-card {
        min-height: 460px;
    }


    .experience-grid {
        grid-template-columns:
            1fr;
    }


    .experience-card {
        min-height: 280px;
    }

}


/* =========================================================
   7. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .hero {
        min-height: 100svh;
    }


    .hero__container {
        padding-top:
            calc(
                var(--header-height) +
                2rem
            );

        padding-bottom: 1.25rem;
    }


    .hero__content {
        padding-block: 3rem;
    }


    .hero__eyebrow {
        max-width: 300px;

        font-size: 0.58rem;

        line-height: 1.5;
    }


    .hero h1 {
        font-size:
            clamp(
                3.8rem,
                18vw,
                6rem
            );
    }


    .hero__description {
        margin-top: 1.5rem;

        font-size: 0.9rem;
    }


    .hero__actions {
        align-items:
            stretch;

        flex-direction:
            column;

        max-width: 280px;
    }


    .hero__actions .btn {
        width: 100%;
    }


    .hero__footer {
        padding-top: 1rem;
    }


    .hero__scroll {
        display: none;
    }


    .hero__location {
        font-size: 0.58rem;
    }


    .section-heading {
        align-items:
            flex-start;

        flex-direction:
            column;

        margin-bottom: 2rem;
    }


    .section-heading__link {
        margin-bottom: 0;
    }


    .trip-card--large {
        min-height: 560px;
    }


    .trip-card {
        min-height: 420px;
    }


    .trip-card__content {
        padding: 1.5rem;
    }


    .trip-card h3 {
        font-size: 2.2rem;
    }


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

        padding: 1.75rem;
    }


    .experience-card__icon {
        margin-bottom: 3rem;
    }


    .cta {
        min-height: 560px;
    }


    .cta h2 {
        font-size:
            clamp(
                3rem,
                15vw,
                5rem
            );
    }

}


/* =========================================================
   8. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .hero__eyebrow-line {
        width: 24px;
    }


    .hero__location span {
        max-width: 180px;
    }


    .trip-card--large {
        min-height: 500px;
    }


    .trip-card {
        min-height: 390px;
    }


    .trip-card h3 {
        font-size: 2rem;
    }


    .cta {
        min-height: 500px;
    }

}