/*===========================
MAPS / exChanges HERO SECTION
=============================*/

.maps-hero-container {
max-width: 1000px;
margin: 0 auto;
margin-top: 5px;
margin-bottom: 6px;
display: flex;
flex-direction: row;
align-items: stretch;
gap: 6px;
}

/*================
MAPS SIDE NAV BARS
=================*/

.maps-nav-left,
.maps-nav-right {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 0 0 auto;
width: 125px; /* matches your button PNG width */
}

.maps-nav-left a,
.maps-nav-right a {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}

.maps-nav-left a img,
.maps-nav-right a img {
width: 117px;
height: auto;
object-fit: contain;
display: block;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
transition: filter 0.2s ease, transform 0.2s ease;
}

.maps-nav-left a:hover img,
.maps-nav-right a:hover img {
filter: drop-shadow(0 0 4px rgba(255, 255, 255, 1));
transform: scale(1.05);
}

/*=====================
Exchanges SIDE NAV BARS
======================*/

.exchanges-nav-left,
.exchanges-nav-right {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 0 0 auto;
width: 125px; /* matches your button PNG width */
}

.exchanges-nav-left a,
.exchanges-nav-right a {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}

.exchanges-nav-left a img,
.exchanges-nav-right a img {
width: 125px;
height: auto;
object-fit: contain;
display: block;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
transition: filter 0.2s ease, transform 0.2s ease;
}

.exchanges-nav-left a:hover img,
.exchanges-nav-right a:hover img {
filter: drop-shadow(0 0 4px rgba(255, 255, 255, 1));
transform: scale(1.05);
}

/*=====================
HERO IMAGE | CENTRAL MAP
======================*/

.maps-hero-image {
flex: 1;
min-width: 0;
display: flex;
align-items: stretch;
}

.maps-hero-image img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
border: 3.25px solid #a15f2e;
border-radius: 20px;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

/*====================
HERO IMAGE | CENTRAL ExChange
======================*/

.exchanges-hero-image {
flex: 1;
min-width: 0;
display: flex;
align-items: stretch;
}

.exchanges-hero-image img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
border: 3.25px solid #a15f2e;
border-radius: 20px;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

.large-image {
max-width: 1000px;
width: 100%;
margin: 0 auto;
padding-top: 10px;
padding-bottom: 8px;
}

.large-image img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
}

.still-link img {
display: block;
max-width: 100%;
height: auto;
transition: transform 0.3s ease;
}

.still-link:hover img {
transform: scale(1.02);
}

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

@media (max-width: 768px) {

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

.maps-hero-container {
flex-direction: column;
align-items: center;
gap: 8px;
}

.maps-hero-image {
width: 100%;
order: 1;
width: calc(100% - 10px);
margin-top: 4px;
}

.maps-nav-left,
.maps-nav-right {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 100%;
gap: 2px;
}

.maps-nav-left {
order: 2;
margin-top: 2px;
}

.maps-nav-right {
order: 3;
margin-bottom: 4px;
}

.maps-nav-left a,
.maps-nav-right a {
flex: 0 0 calc(20% - 4px); /* 5 columns */
}

.maps-nav-left a img,
.maps-nav-right a img {
width: 100%;
height: auto;
}

.large-image {
max-width: 98%;
width: 100%;
}
}