/* Maps - weather page of the new design.
   The maps of the 1st tab reuse the album tiles & lightbox of gallery.css. */

/* — header map, full width under the site header — */
.maps-hero { height: 360px; z-index: 0; border-bottom: 1px solid var(--color-divider); }
.maps-hero__bar { max-width: 1240px; margin: 0 auto; padding: 12px 24px 0; display: flex; justify-content: center; }

/* — tabs: centred under the map; buttons, so mark the selected one like a checked option — */
.maps-tabs { display: flex; justify-content: center; }
.seg-opt[role='tab'] { border: 0; background: none; color: inherit; font: inherit; font-size: 13px; }
.seg-opt[role='tab'] + .seg-opt[role='tab'] { border-left: 1px solid var(--color-divider); }
.seg-opt[aria-selected='true'],
.seg-opt[aria-selected='true']:hover { background: var(--color-accent); color: var(--color-bg); }
.seg-opt[role='tab']:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.maps-panel { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-divider); }
.maps-lede { margin: 0; max-width: 84ch; font-size: 16px; line-height: 1.65; color: var(--color-neutral-800); }

/* — tab 1: the maps, as larger tiles — */
.maps-photos { --row: 300px; margin-top: 24px; padding-top: 0; border-top: 0; }

/* — tab 2: topographic map — */
.maps-topo__head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.maps-topo {
    display: block; max-width: 1190px; margin: 0 auto;
    padding: 4px; background: #fff; border: 1px solid var(--color-divider); box-shadow: var(--shadow-sm);
}
.maps-topo img { display: block; width: 100%; height: auto; }

/* — tab 3: weather, meteoblue's forecast for the village, then the small widgets (village & towns) 2 x 2 — */
.maps-weather__lede { margin-bottom: 24px; }
.maps-weather { padding: 22px; margin: 6px; }
.maps-weather .card-title { font-size: 24px; }
.maps-weather__meteoblue { display: block; width: 100%; height: 600px; border: 1px solid var(--color-divider); }
.maps-weather__credit { align-self: flex-end; font-size: 11px; opacity: 0.6; }
/* the small widgets fill their card; their content stays a 318px square in the middle,
   with the background photo stretched around it (as on the homepage) */
.maps-weather__frame { border-radius: 8px; overflow: hidden; }
.maps-weather__frame iframe { display: block; width: 100%; height: 318px; border: 0; }
.maps-weather__towns {
    margin-top: 24px;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
.maps-weather__towns .card-title { font-size: 20px; }

@media (max-width: 860px) {
    .maps-weather__towns { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .maps-hero { height: 260px; }
    .maps-photos { --row: 200px; }
}