/* Weather feature page (/about/features/weather_app/), loaded after about-mapping-tools.css and scoped under body.weather-app */
.weather-app .mt-hero { background-image: url(../../i/trailforks/about/features/weather/hero_map_bg.webp); }

/* Weather layer cards: screenshot, name, description, access + map link */
.weather-app .wx-layers { display: grid; gap: 28px; margin-bottom: 48px; }
.weather-app .wx-layers--2 { grid-template-columns: repeat(2, 1fr); }
.weather-app .wx-layers--3 { grid-template-columns: repeat(3, 1fr); }
.weather-app .wx-layer { display: flex; flex-direction: column; }
.weather-app .wx-layer .tf-screenshot { margin: 0 0 14px; }
.weather-app .wx-layer p { flex: 1; margin: 0 0 12px; font-size: 15px; }
.weather-app .wx-layer__foot { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.weather-app .mt-section--dark .wx-layer p { color: rgba(255, 255, 255, .72); }
.weather-app .mt-section--dark .wx-layer__foot a { color: var(--mt-cyan); }

/* region weather block screenshot is small, keep it at its natural size */
.weather-app #pages .mt-split__media .tf-screenshot { max-width: 442px; }

@media screen and (max-width: 980px) {
    .weather-app .wx-layers--3 { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 768px) {
    .weather-app .wx-layers--2,
    .weather-app .wx-layers--3 { grid-template-columns: 1fr; }
}