/* GCT Public Weather 1.0 · public-safe official-source continuity surface */

.weather-public-hero,
.weather-offline-note {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(17rem,.7fr);
  gap:clamp(1rem,3vw,2.4rem);
  align-items:stretch;
  padding:clamp(1.2rem,4vw,3rem);
  border-bottom:1px solid var(--line,#c9c5ba);
}

.weather-public-hero h1,
.weather-offline-note h2 {
  max-width:18ch;
  margin:.25rem 0 .8rem;
}

.weather-source-card,
.weather-panel,
.weather-safety-rule,
.weather-offline-note {
  background:#fff;
  border:1px solid #c6c2b7;
  box-shadow:0 .8rem 2.4rem rgba(25,31,35,.06);
}

.weather-source-card {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.55rem;
  padding:1.1rem;
}

.weather-source-card strong,
.weather-source-card p,
.weather-source-card small,
.weather-panel header span,
.weather-caveat {
  overflow-wrap:anywhere;
}

.weather-state {
  width:max-content;
  max-width:100%;
  padding:.38rem .62rem;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.08em;
}

.weather-state.current { color:#165f3d; background:#e8f5ed; }
.weather-state.stale { color:#7b4b00; background:#fff2d6; }
.weather-state.unavailable,
.weather-state.unknown { color:#7a2525; background:#fdeaea; }

.weather-safety-rule {
  display:grid;
  grid-template-columns:minmax(13rem,.6fr) minmax(0,1.4fr);
  gap:1rem;
  margin:clamp(1rem,3vw,2rem);
  padding:1rem 1.2rem;
  border-left:.45rem solid #a52626;
}

.weather-safety-rule a { font-weight:800; }

.weather-public-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.4rem);
  margin:clamp(1rem,3vw,2rem);
}

.weather-panel {
  margin:clamp(1rem,3vw,2rem);
  padding:clamp(1rem,2.5vw,1.5rem);
}

.weather-public-grid .weather-panel { margin:0; }

.weather-panel header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  padding-bottom:.8rem;
  border-bottom:1px solid #d9d6cc;
}

.weather-panel header h2 { margin:.2rem 0 0; }

.weather-count {
  display:grid;
  place-items:center;
  min-width:2.4rem;
  min-height:2.4rem;
  border:1px solid #9ea3a6;
  border-radius:50%;
  font-weight:900;
}

.weather-alert-list,
.weather-tropical-list {
  display:grid;
  gap:.8rem;
  margin-top:1rem;
}

.weather-alert,
.weather-tropical-card {
  padding:.9rem;
  border:1px solid #d2cec2;
  border-left:.35rem solid #596269;
  background:#fbfaf6;
}

.weather-alert[data-severity="Extreme"] { border-left-color:#8a1616; }
.weather-alert[data-severity="Severe"] { border-left-color:#c14e12; }
.weather-alert[data-severity="Moderate"] { border-left-color:#a87600; }

.weather-alert h3,
.weather-tropical-card h3 { margin:.2rem 0 .5rem; }

.weather-alert-meta,
.weather-tropical-meta {
  display:flex;
  flex-wrap:wrap;
  gap:.4rem .8rem;
  color:#4f585d;
  font-size:.85rem;
}

.weather-alert details { margin-top:.7rem; }
.weather-alert details p { white-space:pre-line; }

.weather-condition {
  display:flex;
  flex-direction:column;
  gap:.25rem;
  margin:1rem 0;
  padding:1rem;
  background:#eef2f3;
}

.weather-condition strong { font-size:clamp(1.6rem,4vw,2.6rem); }

.weather-hourly-source {
  display:grid;
  gap:.3rem;
  margin:1rem 0 .7rem;
  padding:.75rem .85rem;
  border:1px solid #d4d1c8;
  background:rgba(255,255,255,.62);
}
.weather-hourly-source span { color:var(--muted); font-size:.78rem; line-height:1.45; }
.weather-hourly-state { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.weather-hourly-state.current { color:#17633a; }
.weather-hourly-state.stale { color:#8a4f00; }
.weather-hourly-state.unavailable { color:#8f1d24; }

.weather-hourly {
  display:grid;
  grid-template-columns:repeat(4,minmax(7rem,1fr));
  gap:.65rem;
  overflow-x:auto;
  padding:.2rem 0 .5rem;
}

.weather-hourly article {
  min-width:7rem;
  padding:.75rem;
  border:1px solid #d4d1c8;
  background:#fff;
}

.weather-hourly article strong,
.weather-hourly article span { display:block; }
.weather-hourly article strong { margin:.35rem 0; font-size:1.3rem; }

.weather-imagery-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  margin-top:1rem;
}

.weather-imagery-grid figure { margin:0; }
.weather-imagery-grid img {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border:1px solid #b9b6ac;
  background:#e8e8e5;
}
.weather-imagery-grid figcaption { margin-top:.45rem; font-size:.86rem; }

.weather-empty,
.weather-caveat {
  padding:.8rem;
  border:1px dashed #a6a49d;
  background:#f5f3ed;
}

.weather-offline-note {
  margin:clamp(1rem,3vw,2rem);
  align-items:center;
}

.weather-csoki-button {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:5.5rem;
  padding:1rem;
  border:2px solid #14191c;
  background:#14191c;
  color:#fff;
  text-align:center;
  text-decoration:none;
  font-weight:900;
  letter-spacing:.04em;
}

.weather-csoki-button span { margin-top:.35rem; font-size:.72rem; color:#d8dde0; }
.weather-csoki-button:focus-visible { outline:.25rem solid #e3a829; outline-offset:.2rem; }

@media (max-width:780px) {
  .weather-public-hero,
  .weather-offline-note,
  .weather-public-grid,
  .weather-safety-rule { grid-template-columns:1fr; }
  .weather-imagery-grid { grid-template-columns:1fr; }
  .weather-panel header { flex-direction:column; }
}

@media (max-width:380px) {
  .weather-public-hero,
  .weather-offline-note,
  .weather-panel,
  .weather-safety-rule { margin-left:.55rem; margin-right:.55rem; padding:.85rem; }
  .weather-public-hero { margin:0; }
  .weather-public-grid { margin:.55rem; }
}

@media (prefers-reduced-motion:reduce) {
  .weather-csoki-button { scroll-behavior:auto; }
}