/* ==========================================
   GOOGLE MAP SECTION
========================================== */

.map{

    padding:120px 0;

    background:#f8f9fb;

}


/* ==========================================
   MAP LAYOUT
========================================== */

.map-wrapper{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;

    align-items:stretch;

    margin-top:70px;

}


/* ==========================================
   MAP FRAME
========================================== */

.map-frame{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    box-shadow:0 20px 50px rgba(0,0,0,.10);

    min-height:500px;

    background:#ddd;

}


/* ==========================================
   GOOGLE MAP IFRAME
========================================== */

.map-frame iframe{

    width:100%;

    height:100%;

    min-height:500px;

    border:none;

    display:block;

}


/* ==========================================
   MAP INFO CARD
========================================== */

.map-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:40px;

    background:#ffffff;

    border-radius:24px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}


/* ==========================================
   MAP INFO TITLE
========================================== */

.map-info h3{

    font-size:30px;

    color:var(--dark);

    margin-bottom:25px;

}


/* ==========================================
   MAP INFO TEXT
========================================== */

.map-info p{

    margin-bottom:22px;

    color:var(--gray);

    line-height:1.8;

    font-size:16px;

}


/* ==========================================
   MAP LINKS
========================================== */

.map-info a{

    color:var(--primary);

    font-weight:600;

    transition:.3s ease;

}

.map-info a:hover{

    color:var(--secondary);

}


/* ==========================================
   BUTTON
========================================== */

.map-info .btn{

    margin-top:15px;

    width:fit-content;

    color:var(--white);

    text-decoration:none;

}

.map-info .btn:hover,
.map-info .btn:focus-visible{

    color:var(--white);

}


/* ==========================================
   CARD HOVER
========================================== */

.map-frame,
.map-info{

    transition:.35s ease;

}

.map-frame:hover{

    transform:translateY(-6px);

    box-shadow:0 28px 60px rgba(0,0,0,.15);

}

.map-info:hover{

    transform:translateY(-6px);

    box-shadow:0 28px 60px rgba(0,0,0,.12);

}


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

@media (max-width:992px){

    .map{

        padding:100px 0;

    }

    .map-wrapper{

        grid-template-columns:1fr;

    }

    .map-frame{

        min-height:420px;

    }

    .map-frame iframe{

        min-height:420px;

    }

}


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

@media (max-width:768px){

    .map{

        padding:80px 0;

    }

    .map-wrapper{

        gap:30px;

    }

    .map-info{

        padding:30px;

    }

    .map-info h3{

        font-size:26px;

    }

    .map-frame{

        min-height:350px;

        border-radius:20px;

    }

    .map-frame iframe{

        min-height:350px;

    }

}


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

@media (max-width:480px){

    .map{

        padding:70px 0;

    }

    .map-info{

        padding:24px;

        border-radius:18px;

    }

    .map-frame{

        min-height:300px;

        border-radius:18px;

    }

    .map-frame iframe{

        min-height:300px;

    }

    .map-info h3{

        font-size:22px;

    }

    .map-info p{

        font-size:15px;

    }

    .map-info .btn{

        width:100%;

        text-align:center;

    }

}


/* ==========================================
   ACCESSIBILITY
========================================== */

.map-info a:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:4px;

    border-radius:6px;

}


/* ==========================================
   REDUCE MOTION
========================================== */

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

    .map-frame,
    .map-info{

        transition:none !important;

    }

}