/* assets/css/skc-lake-blocks.css - updated for responsive 7-day and mobile scroll */
.skc-block { box-sizing: border-box; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
.skc-weather-lake-card { display:flex; gap:18px; align-items:flex-start; justify-content:center; padding:16px; background: rgba(255,255,255,0.05); border-radius:14px; flex-wrap:wrap; }
.skc-card { background: rgba(255,255,255,0.96); border-radius:16px; padding:16px; width:210px; box-shadow: 0 6px 14px rgba(15,23,42,0.16); text-align:left; margin:6px; }
.skc-card .skc-title { font-weight:700; margin-bottom:6px; color:#193b5c; font-size:15px; letter-spacing:0.01em; }
.skc-temp, .skc-elev { font-size:26px; font-weight:800; color:#0b64d6; margin:6px 0; }
.skc-meta { color:#3c4a5d; font-size:11px; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.08em; }
.skc-line { color:#1f2933; font-size:13px; margin-top:4px; display:flex; justify-content:space-between; gap:8px; }
.skc-line span { font-weight:600; }

.skc-weather-7day { padding:12px; background:transparent; }
.skc-7day-inner { display:flex; flex-direction:row; gap:12px; padding-bottom:6px; flex-wrap:wrap; overflow-x:auto; -webkit-overflow-scrolling: touch; }
.skc-day { flex:0 0 auto; min-width:0; background:rgba(255,255,255,0.95); border-radius:12px; padding:10px; text-align:left; font-size:13px; box-shadow: 0 4px 12px rgba(15,23,42,0.12); }
.skc-day-date { font-weight:600; margin-bottom:6px; white-space:nowrap; }
.skc-day-icon img { display:block; margin:0 auto; }
.skc-day-temps { margin-top:6px; font-weight:700; display:flex; gap:6px; }
.skc-day-precip { font-size:12px; color:#3d4a5f; margin-top:6px; }

@media (min-width: 600px) {
    .skc-day { min-width:150px; }
}

/* Larger screens: show as 7-column row */
@media (min-width: 960px) {
    .skc-7day-inner { display:grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap:12px; overflow:visible; }
    .skc-day { min-width:0; }
}

/* Accessibility: reduce motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .skc-7day-inner { -webkit-overflow-scrolling: auto; }
}