/* MeteoLab SK — stránka obce */

.ob-body { display: block; overflow-y: auto; height: auto; min-height: 100dvh; background: var(--paper); }

.ob-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px clamp(12px, 3vw, 24px);
  background: linear-gradient(180deg, var(--card) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
}
.ob-top .brand { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--ink); text-decoration: none; }
.ob-top .brand span { color: var(--azure); }
.ob-top .spacer { flex: 1; }
.ob-top a.nav, .ob-top button.nav {
  font-family: var(--font-display); font-size: .72rem; font-weight: 600;
  color: var(--azure); text-decoration: none; background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; cursor: pointer;
}

.ob-wrap { max-width: 940px; margin: 0 auto; padding: clamp(14px, 3vw, 26px) clamp(12px, 3vw, 22px) 40px; }

.ob-crumb { font-size: .7rem; color: var(--ink-soft); margin-bottom: 10px; }
.ob-crumb a { color: var(--azure); text-decoration: none; }
.ob-crumb a:hover { text-decoration: underline; }

.ob-h1 { font-family: var(--font-display); font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 800; letter-spacing: -.02em; }
.ob-meta { font-size: .78rem; color: var(--ink-soft); margin: 4px 0 14px; }

.ob-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(13px, 3vw, 18px); margin-bottom: 14px; box-shadow: var(--shadow);
}
.ob-card h2 {
  font-family: var(--font-display); font-size: .98rem; font-weight: 700;
  margin-bottom: 9px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.ob-stamp { font-size: .6rem; color: var(--ink-soft); font-weight: 500; margin-left: auto; }

.ob-now-main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ob-ico { font-size: clamp(2.6rem, 9vw, 3.6rem); line-height: 1; }
.ob-temp { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 7vw, 2.6rem); display: block; line-height: 1.05; }
.ob-desc { font-size: .82rem; color: var(--ink-soft); }

.ob-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px; margin-top: 14px;
}
.ob-grid > div {
  background: var(--paper); border: 1px solid var(--line); border-radius: 11px;
  padding: 9px 10px; text-align: center;
}
.ob-grid b { font-family: var(--font-display); font-size: .86rem; display: block; }
.ob-grid span { font-size: .62rem; color: var(--ink-soft); }

.ob-rain { font-size: .8rem; line-height: 1.5; padding: 9px 12px; border-radius: 11px;
  background: #e8f2fb; border: 1px solid #c9dff2; margin-top: 12px; }
[data-theme="dark"] .ob-rain { background: #14263a; border-color: #2a4562; }

.ob-hours { display: flex; gap: 4px; overflow-x: auto; padding: 2px 0 8px; scroll-snap-type: x proximity; }
.ob-hcell {
  flex: 0 0 54px; scroll-snap-align: start; text-align: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 3px; display: flex; flex-direction: column; gap: 2px;
}
.ob-hcell.is-now { border-color: var(--azure); background: #e8f2fb; }
[data-theme="dark"] .ob-hcell.is-now { background: #14263a; }
.ob-hcell .hh { font-family: var(--font-display); font-size: .56rem; font-weight: 700; color: var(--ink-soft); }
.ob-hcell .hi { font-size: 1.05rem; }
.ob-hcell .ht { font-family: var(--font-display); font-size: .74rem; font-weight: 700; }
.ob-hcell .hp { font-size: .54rem; color: var(--azure); min-height: 10px; }

.ob-days { width: 100%; border-collapse: collapse; font-size: .8rem; }
.ob-days td { padding: 8px 4px; border-top: 1px solid var(--line); }
.ob-days tr:first-child td { border-top: 0; }
.ob-days td.d { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }
.ob-days td.i span { color: var(--ink-soft); font-size: .74rem; }
.ob-days td.t { text-align: right; white-space: nowrap; }
.ob-days td.r { text-align: right; color: var(--azure); white-space: nowrap; font-size: .74rem; }
.ob-days td.r small { color: var(--ink-soft); }

.ob-text { font-size: .82rem; line-height: 1.62; color: var(--ink); }
.ob-text p { margin-bottom: 8px; }
.ob-err { font-size: .8rem; color: #99330a; }

.ob-links { display: flex; flex-wrap: wrap; gap: 7px; }
.ob-links a {
  font-size: .74rem; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 12px;
}
.ob-links a:hover { border-color: var(--azure); color: var(--azure); }

.ob-cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  font-family: var(--font-display); font-size: .82rem; font-weight: 700;
  background: linear-gradient(90deg, var(--azure), var(--cyan)); color: #fff;
  text-decoration: none; border-radius: 12px; padding: 11px 17px;
}

.ob-foot { font-size: .64rem; color: var(--ink-soft); line-height: 1.6; margin-top: 18px; }
.ob-foot a { color: var(--azure); }