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

.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 750px;
    background-image: url("../images/homepage.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.guide-button {
    position: absolute;
    top: 53%;
    right: 14%;
    display: flex;
    width: 265px;
    height: 82px;
    align-items: center;
    justify-content: center;

    background-color: var(--color-yellow);
    border: 2px solid var(--color-yellow);

    color: var(--color-black);

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;

    transform: translateY(-50%);
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.guide-button:hover {
    opacity: 0.9;
    transform: translateY(-53%);
}
/* ==================================================
   MOBILE HERO
================================================== */

@media (max-width: 760px) {

    .hero {
    height: calc(100vh - var(--header-height)+20px);
    min-height: 720px;

    background-position:  center;
    background-size: 186%;
}

    .guide-button {
    position: absolute;

    left: 50%;
    top: auto;
    bottom: 92px;

    width: 265px;
    height: 72px;

    transform: translateX(-50%);
}

    .guide-button:hover {
    transform: translateX(-50%) translateY(-3px);
}

}

/* ==================================================
   SECTION COLOR ASSIGNMENTS

   These rules choose from the five global colors.
   The wave automatically matches the section color.
================================================== */

.guide-one {
    --section-color: var(--color-yellow);
    --section-text: var(--color-black);
}

.guide-two {
    --section-color: var(--color-grey);
    --section-text: var(--color-black);
}

.guide-three {
    --section-color: var(--color-pink);
    --section-text: var(--color-white);
}

.guide-four {
    --section-color: var(--color-grey);
    --section-text: var(--color-black);
}

.guide-five {
    --section-color: var(--color-white);
    --section-text: var(--color-black);
}

.guide-six {
    --section-color: var(--color-black);
    --section-text: var(--color-yellow);
}

.guide-seven {
    --section-color: var(--color-grey);
    --section-text: var(--color-black);
}


/* ==================================================
   GUIDE SECTIONS
================================================== */

.guide-section {
    position: relative;
    width: 100%;
    min-height: 1000px;
    padding: 100px var(--page-padding) 130px;
    overflow: visible;
    background-color: var(--section-color);
    color: var(--section-text);
}

.guide-layout {
    position: relative;
    z-index: 5;
    display: grid;
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.15fr);
    gap: clamp(70px, 8vw, 145px);
    align-items: center;
}

.guide-layout-reversed {
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 1fr);
}

.guide-copy {
    width: 100%;
    max-width: 650px;
}


/* ==================================================
   GUIDE TYPOGRAPHY
================================================== */

.guide-introduction {
    max-width: 650px;
    margin-bottom: 62px;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 4vw, 4.5rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.025em;
    text-transform: uppercase;
}

.guide-title {
    max-width: 760px;
    margin-bottom: 42px;
}

.guide-description {
    max-width: 650px;
    margin-bottom: 48px;
}


/* ==================================================
   GUIDE IMAGES
================================================== */

.guide-image-wrapper {
    width: 100%;
}

.guide-image {
    display: block;
    width: 100%;
    height: clamp(420px, 38vw, 580px);
    object-fit: cover;
    object-position: center;
}

.guide-image-wide {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 420px;
}


/* ==================================================
   GUIDE BUTTONS
================================================== */

.guide-start-button {
    display: inline-flex;
    width: 265px;
    min-height: 82px;
    align-items: center;
    justify-content: center;
    border: 2px solid currentColor;
    color: inherit;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.guide-start-button:hover {
    background-color: var(--color-black);
    color: var(--color-white);
    transform: translateY(-3px);
}

.guide-three .guide-title,
.guide-three .guide-start-button {
    color: var(--color-yellow);
}

.guide-three .guide-start-button:hover {
    background-color: var(--color-yellow);
    color: var(--color-black);
}

.guide-six .guide-start-button:hover {
    background-color: var(--color-yellow);
    color: var(--color-black);
}


/* ==================================================
   QUOTE SECTION
================================================== */

.quote-section {
    position: relative;
    min-height: 760px;
    overflow: visible;
    padding: 130px var(--page-padding);
    background-color: var(--color-white);
    color: var(--color-black);
}

.quote-layout {
    position: relative;
    z-index: 5;
    display: grid;
    width: 100%;
    max-width: 1550px;
    margin: 0 auto;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: clamp(80px, 10vw, 180px);
    align-items: center;
}

.quote-image-wrapper {
    width: 100%;
}

.quote-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.quote-content {
    margin: 0;
}

.quote-text {
    max-width: 1100px;
    margin-bottom: 70px;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.1vw, 4.8rem);
    font-style: normal;
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.025em;
    text-transform: uppercase;
}

.quote-author {
    display: block;
    margin-left: 65%;
    font-size: 1.15rem;
    font-style: normal;
}


/* ==================================================
   TABLETS
================================================== */

@media (max-width: 1000px) {

    .guide-section {
        min-height: auto;
        padding-top: 120px;
        padding-bottom: 110px;
    }

    .guide-layout,
    .guide-layout-reversed {
        grid-template-columns: 1fr 1fr;
        gap: 55px;
    }

    .guide-introduction {
        margin-bottom: 45px;
    }

    .guide-title {
        margin-bottom: 30px;
    }

    .guide-image {
        height: 470px;
    }

    .quote-section {
        min-height: auto;
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .quote-layout {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 70px;
    }

    .quote-author {
        margin-left: 45%;
    }

}


/* ==================================================
   PHONES
================================================== */

@media (max-width: 760px) {

    .hero {
        min-height: 650px;
    }

    .guide-button {
        right: 6%;
        width: 220px;
        height: 70px;
    }

    .guide-section {
        padding-top: 90px;
        padding-bottom: 85px;
    }

    .guide-layout,
    .guide-layout-reversed {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    .guide-copy {
        max-width: none;
    }

    .guide-introduction {
        margin-bottom: 42px;
        font-size: clamp(2.35rem, 11vw, 3.4rem);
    }

    .guide-title {
        margin-bottom: 28px;
    }

    .guide-description {
        margin-bottom: 38px;
    }

    .guide-image {
        height: 430px;
    }

    .guide-start-button {
        width: 235px;
        min-height: 72px;
    }

    .quote-section {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .quote-layout {
        display: flex;
        flex-direction: column;
        gap: 50px;
        align-items: flex-start;
    }

    .quote-image-wrapper {
        width: min(70%, 300px);
    }

    .quote-text {
        margin-bottom: 40px;
        font-size: clamp(2.1rem, 10vw, 3.4rem);
    }

    .quote-author {
        margin-left: 0;
        font-size: 1rem;
    }

}


/* ==================================================
   SMALL PHONES
================================================== */

@media (max-width: 480px) {

    .hero {
        min-height: 600px;
        background-position: 42% center;
    }

    .guide-button {
        right: 5%;
        width: 190px;
        height: 64px;
        font-size: 12px;
    }

    .guide-section {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .guide-image {
        height: 340px;
    }

    .guide-start-button {
        width: 100%;
    }

    .quote-section {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .quote-image-wrapper {
        width: min(82%, 280px);
    }

    .quote-text {
        font-size: 2.25rem;
    }

}
/* ==================================================
   DESTINATIONS
================================================== */

.destinations {
    position: relative;
    z-index: 1;
    padding: 160px var(--page-padding) 280px;
    overflow: visible;
    background-color: var(--color-grey);
}

.destinations-inner {
    max-width: 1700px;
    margin: 0 auto;
}

.destinations-header {
    margin-bottom: 80px;
}

.destinations-title {
    margin: 0;
}

.destinations-subtitle {
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.8vw, 2rem);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.destination-grid {

    display: grid;

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

    gap: 60px;

}

.destination-card {

    position: relative;

    display: block;

    overflow: hidden;

    border-radius: 22px;

    aspect-ratio: 16 / 9;

    text-decoration: none;

}

.destination-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;

}

.destination-card:hover img {

    transform: scale(1.05);

}

.destination-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.destination-brand {

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

    font-size: clamp(3rem,4vw,5rem);

    font-weight: 900;

    line-height: 1;

    letter-spacing: -.03em;

    text-transform: uppercase;

    color: var(--color-yellow);

    text-shadow:
        5px 5px 0 var(--color-pink);

    margin-bottom: 18px;

}
.destination-name {

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

    font-size: clamp(3rem,4vw,5rem);

    color: white;

    text-transform: uppercase;

    text-align: center;

}
.photo-gallery {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 800px;
    padding-top: 120px;
    overflow: visible;
    background-color: var(--color-white);
    grid-template-columns: 45% 55%;
    align-items: center;
}

.photo-gallery::before {
    content: "";
    position: absolute;

    left: 0;
    top: -150px;

    width: 100%;
    height: 150px;

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

    clip-path: polygon(
        0 100%,
        50% 0,
        100% 100%
    );
}
.photo-gallery-copy{
    padding:0 var(--page-padding);
}

.photo-gallery-image img{
    display:block;
    width:100%;
    height:800px;
    object-fit:cover;
}
.photo-gallery h2 {
    margin-bottom: 3rem;
}

.gallery-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: min(265px, 100%);
    min-height: 82px;

    border: 2px solid var(--color-black);
    background: transparent;

    color: var(--color-black);

    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;

    box-sizing: border-box;

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

.gallery-button:hover {
    background: var(--color-black);
    color: var(--color-white);
    transform: translateY(-3px);
}

/* ==================================================
   MOBILE HOMEPAGE — REMOVE HEADER GAP
================================================== */

@media (max-width: 760px) {

    main {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .hero {
        margin-top: 0 !important;
    }

}

/* ==================================================
   TABLET + MOBILE HERO FIX
================================================== */

@media (max-width: 1000px) {

    main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .hero {
        margin-top: 0 !important;
        padding-top: 0 !important;
        background-position: left center;
    }
}

/* ==================================================
   DESTINATION CARDS — TABLET + MOBILE TYPE
================================================== */

@media (max-width: 1000px) {

    .destination-brand {
        margin-bottom: 10px;
        font-size: clamp(2rem, 5vw, 3.2rem);
        text-shadow:
            3px 3px 0 var(--color-pink);
    }

    .destination-name {
        font-size: clamp(1.8rem, 5.5vw, 3rem);
        line-height: 0.95;
    }

}

@media (max-width: 760px) {

    .destination-grid {
        gap: 28px;
    }

    .destination-brand {
        margin-bottom: 6px;
        font-size: clamp(1.45rem, 7vw, 2.2rem);
        line-height: 0.9;
        text-shadow:
            2px 2px 0 var(--color-pink);
    }

    .destination-name {
        max-width: 90%;
        font-size: clamp(1.35rem, 7.5vw, 2.1rem);
        line-height: 0.9;
    }

}

@media (max-width: 480px) {

    .destination-brand {
        font-size: clamp(1.2rem, 6vw, 1.75rem);
    }

    .destination-name {
        font-size: clamp(1.15rem, 6.5vw, 1.7rem);
    }

}