/* ====================================
   Locations Page
==================================== */

.locations-hero {

    padding: 70px 0;

    text-align: center;

    background: var(--background);

}

.locations-hero .container {

    max-width: 800px;

}

.locations-hero h1 {

    margin-bottom: 20px;

    font-size:
        clamp(2.2rem, 5vw, 3.5rem);

}

.locations-hero p:last-child {

    max-width: 650px;

    margin:
        0 auto;

    line-height: 1.6;

    font-size: 1.1rem;

}


.locations-section {

    padding: 60px 0 80px;

}


.location-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px, 1fr)
        );

    gap: 25px;

}


.location-card {

    display: block;

    padding: 25px;

    background: #fff;

    border: 1px solid #ddd;

    border-radius: var(--radius);

    text-decoration: none;

    color: inherit;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.location-card:hover,
.location-card:focus-visible {

    transform:
        translateY(-4px);

    box-shadow:
        0 8px 20px
        rgba(0, 0, 0, .12);

}


.location-card h2 {

    margin-bottom: 10px;

}


.location-region {

    margin-bottom: 12px;

    font-size: .9rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .08em;

}


.location-waterbody {

    margin-bottom: 15px;

    font-weight: 600;

}


.location-description {

    line-height: 1.5;

}


.locations-message {

    max-width: 650px;

    margin:
        40px auto 0;

    padding: 25px;

    text-align: center;

    background:
        rgba(255, 255, 255, .7);

    border-radius:
        var(--radius);

    line-height: 1.6;

}


.locations-message:empty {

    display: none;

}

/* ====================================
   Locations Intro
==================================== */

.locations-intro{

    padding:50px 0;

}

.intro-grid{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:40px;

    align-items:center;

}

.intro-text p{

    margin-bottom:18px;

    line-height:1.7;

}

.intro-features{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.intro-feature{

    display:flex;

    gap:16px;

    align-items:flex-start;

    padding:18px;

    background:#fff;

    border:1px solid #ddd;

    border-radius:var(--radius);

}

.intro-feature span{

    font-size:1.5rem;

}

.intro-feature h3{

    margin-bottom:6px;

}

@media (max-width:768px){

    .intro-grid{

        grid-template-columns:1fr;

    }

}