/* Two side by side clickable image panels with hover reveal */
.region-picker {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
width: 100%;
max-width: 1400px;
margin: 0 auto;
}
.region-picker .rp-panel {
position: relative;
display: block;
height: 56vh;
min-height: 380px;
overflow: hidden;
text-decoration: none;
outline: none;
}
.region-picker .rp-panel img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.001);
transition: filter 0.35s ease, transform 0.35s ease;
}
.region-picker .rp-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 0.35em 0.7em;
font: 700 2rem/1.1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: center;
color: #fff;
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
white-space: nowrap;
}
/* Hover and keyboard focus: lighten image and show text */
.region-picker .rp-panel:hover img,
.region-picker .rp-panel:focus img {
filter: brightness(65%);
transform: scale(1.03);
}
.region-picker .rp-panel:hover .rp-text,
.region-picker .rp-panel:focus .rp-text {
opacity: 1;
}
/* Mobile: stack and keep labels visible */
@media (max-width: 767px) {
.region-picker { grid-template-columns: 1fr; }
.region-picker .rp-panel { height: 44vh; min-height: 280px; }
.region-picker .rp-text { opacity: 1; text-shadow: 0 0 10px rgba(0,0,0,0.55); }
.region-picker .rp-panel:active img { filter: brightness(65%); transform: scale(1.03); }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.region-picker .rp-panel img, .region-picker .rp-text { transition: none; }
}
.region-picker { outline: 2px solid red; }
