/**
 * Weather page — full layout styles (Figma: Breakpoints body).
 */
.weather-page {
  /* Figma --ui-bg / background/surface/primary — static; gradients are chip-only */
  --weather-page-bg: #000024;
  --weather-elevated-bg: #0c1f46;
  --weather-border: #0c1f46;
  --weather-border-accent: #1c3b7a;
  min-height: 0;
  padding: 0 32px 24px;
  background-color: var(--weather-page-bg);
  color: var(--weather-ui-text, #e1e3e9);
}

/*
 * Sticky footer on weather: when clips are hidden and content is short,
 * pin the footer to the bottom of the viewport (copyright near the bottom edge).
 */
body:has(#weather-page-app) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body:has(#weather-page-app) .superUniqueName {
  flex: 1 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/*
 * Nav is position:fixed only at ≤1049 (nav-handoff). Desktop (≥1050) keeps the
 * bar in normal flow, so extra top padding would create a visible gap under the nav.
 */
@media (max-width: 1049px) {
  body:has(#weather-page-app) .superUniqueName {
    padding-top: 64px;
  }
}

body:has(#weather-page-app) #weather-page-app {
  flex: 1 0 auto;
}

body:has(#weather-page-app) .footer {
  flex-shrink: 0;
  margin-top: auto;
}

.weather-page__inner {
  max-width: 1376px;
  margin: 0 auto;
  position: relative;
}

.weather-page__state {
  max-width: 640px;
  margin: 48px auto;
  padding: 32px 24px;
  text-align: center;
  border-radius: 12px;
  background: var(--weather-elevated-bg);
  border: 1px solid var(--weather-border-accent);
}

.weather-page__state h2 {
  margin: 0 0 8px;
  font-size: 24px;
}

.weather-page__state p {
  margin: 0;
  color: var(--weather-ui-text-toned, #c2c6d3);
}

/* Error marquee copy — Figma Error section 13696:30639 */

.weather-marquee__icon-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px !important;
  height: 128px !important;
  font-size: 64px !important;
  line-height: 128px !important;
  color: var(--weather-ui-text, #e1e3e9);
}

.weather-marquee__error-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-width: 0;
}

.weather-marquee__error-title {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  color: var(--weather-ui-text, #e1e3e9);
}

.weather-marquee__error-subtitle {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--weather-ui-text-toned, #c2c6d3);
}

.weather-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 12px 20px;
  border: 1px solid var(--weather-border, #0c1f46);
  border-radius: 12px;
  background: var(--weather-page-bg, #000024);
  color: var(--weather-ui-text, #e1e3e9);
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  cursor: pointer;
}

.weather-retry-btn i {
  font-size: 20px;
  width: 24px;
  text-align: center;
}

.weather-retry-btn:hover:not(:disabled),
.weather-retry-btn:focus-visible:not(:disabled) {
  outline: none;
  border-color: var(--weather-border-accent, #1c3b7a);
}

.weather-retry-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.weather-forecast-unavailable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 290px;
  height: 100%;
  padding: 24px;
  border-radius: 8px;
  background: var(--weather-elevated-bg);
  box-sizing: border-box;
  text-align: center;
}

.weather-forecast-unavailable__icon {
  display: block;
  width: 36px;
  height: 36px;
  color: var(--weather-ui-text, #e1e3e9);
}

.weather-forecast-unavailable__icon svg {
  display: block;
  width: 36px;
  height: 36px;
}

.weather-forecast-unavailable p {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  color: var(--weather-ui-text, #e1e3e9);
}

/* Current conditions marquee */
.weather-marquee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 32px;
  border-radius: 22px;
  background: var(--weather-elevated-bg);
  margin-bottom: 24px;
}

.weather-marquee__brief {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

/* Error: vertically center copy with the 128px icon (Figma y=32 in 128 frame).
   Must follow .weather-marquee__brief so align-items: flex-start does not win. */
.weather-marquee--error {
  min-height: 176px;
  box-sizing: border-box;
}

.weather-marquee__brief.weather-marquee__brief--error {
  align-items: center;
}

.weather-marquee__icon {
  flex: 0 0 128px;
  width: 128px;
  height: 128px;
}

.weather-marquee__icon img {
  display: block;
  width: 128px;
  height: 128px;
}

.weather-marquee__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.weather-marquee__date {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--weather-ui-text-toned, #c2c6d3);
}

.weather-marquee__conditions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.weather-marquee__temp {
  font-family: var(--font-mono, "DM Mono", ui-monospace, monospace);
  font-size: 72px;
  line-height: 72px;
  font-weight: 500;
  color: var(--weather-ui-text, #e1e3e9);
}

.weather-marquee__temp-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.weather-marquee__temp-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.weather-marquee__unit {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  line-height: 28px;
  color: var(--weather-ui-text-toned, #c2c6d3);
}

/* ℉ ligature (U+2109) often missing from Poppins subsets — compose ° + F instead */
.weather-marquee__unit-deg,
.weather-meta-card__unit-deg {
  font-family: inherit;
}

.weather-marquee__high-low {
  display: flex;
  align-items: center;
  gap: 4px;
}

.weather-marquee__hl-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono, "DM Mono", ui-monospace, monospace);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400; /* Component Specs: DM Mono Regular */
  color: var(--weather-ui-text-toned, #c2c6d3);
}

.weather-marquee__hl-item i {
  font-size: 14px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}

.weather-marquee__condition {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  line-height: 28px;
  color: var(--weather-ui-text, #e1e3e9);
}

/* Metadata grid */
.weather-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 343px;
  flex-shrink: 0;
}

.weather-meta-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #000024;
  border: 1px solid var(--weather-border, #0c1f46);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.weather-meta-card__label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--weather-ui-text-toned, #c2c6d3);
}

.weather-meta-card__label .material-symbols-rounded,
.weather-meta-card__label .weather-icon-windsock {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}

/* Material Symbols — Rounded, FILL 0, wght 400 (ticket / Blake) */
.material-symbols-rounded {
  font-family: "Material Symbols Rounded", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  overflow: hidden;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  color: inherit;
  user-select: none;
}

.weather-marquee__hl-item .material-symbols-rounded {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
}

.weather-icon-windsock {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
  background-color: currentColor;
  -webkit-mask: url("/images/weather/windsock.svg") center / contain no-repeat;
  mask: url("/images/weather/windsock.svg") center / contain no-repeat;
}

.weather-forecast-unavailable .material-symbols-rounded {
  width: 36px;
  height: 36px;
  font-size: 36px;
  line-height: 36px;
  color: var(--weather-ui-text, #e1e3e9);
}

.weather-retry-btn .material-symbols-rounded {
  width: 24px;
  height: 24px;
  font-size: 20px;
  line-height: 24px;
}

.weather-forecast-row__stat .material-symbols-rounded {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

.weather-meta-card__value {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono, "DM Mono", ui-monospace, monospace);
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
}

.weather-meta-card__unit {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--weather-ui-text-toned, #c2c6d3);
  font-weight: 400;
}

/* Video + forecast — Desktop/Laptop: ~737:615 with 24px gutter
 * Figma: video width fills + 16:9 height; forecast width + height fill (match video). */
.weather-main-row {
  display: grid;
  grid-template-columns: minmax(0, 737fr) minmax(0, 615fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 24px;
}

.weather-video-slot,
.weather-video {
  min-height: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* Intrinsic 16:9 sizes the grid row; forecast fills that same height */
  align-self: start;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  background: #000012;
  border: none;
  padding: 0;
  display: block;
  color: var(--weather-ui-text, #e1e3e9);
  text-align: left;
}

.weather-video__frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #000012;
}

.weather-video__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.weather-video__player .video-js {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
}

.weather-video__player .video-js .vjs-tech {
  object-fit: contain;
}

/*
 * Inline (small) view: custom mute + expand only.
 * Fullscreen: publisher-style Video.js control bar (bar lives inside .video-js).
 */
.weather-video .vjs-control-bar,
.weather-video .vjs-big-play-button,
.weather-video .vjs-loading-spinner {
  display: none !important;
}

.weather-video .video-js.vjs-fullscreen .vjs-control-bar {
  display: flex !important;
}

.weather-video__player .video-js {
  z-index: 1;
}

.weather-video__chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Hide custom chrome while Video.js is fullscreen (VJS bar takes over) */
.weather-video--fullscreen .weather-video__chrome,
.weather-video .video-js.vjs-fullscreen ~ .weather-video__chrome {
  visibility: hidden;
  pointer-events: none;
}

.weather-video__hover-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(0, 0, 18, 0.72) 0%, rgba(0, 0, 18, 0) 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.weather-video__logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.08);
}

.weather-video__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.weather-video__title {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #e1e3e9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weather-video__sub,
.weather-video__description {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #c2c6d3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weather-video__description {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.weather-video__btn {
  pointer-events: auto;
  position: absolute;
  bottom: 8px;
  width: 36px;
  height: 36px;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000024;
  color: #e1e3e9;
  cursor: pointer;
  line-height: 1;
  box-sizing: border-box;
}

.weather-video__mute {
  left: 8px;
}

.weather-video__fullscreen {
  right: 8px;
}

.weather-video__btn .material-symbols-rounded {
  font-size: 20px;
  width: 20px;
  height: 20px;
  line-height: 1;
  overflow: hidden;
}

.weather-video__unavailable {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 36, 0.85);
  color: var(--weather-ui-text-toned, #c2c6d3);
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  text-align: center;
  padding: 24px;
}

.weather-video__unavailable[hidden] {
  display: none !important;
}

.weather-forecast-section {
  min-width: 0;
  /* height:0 + min-height:100% → don't expand the grid row; fill video's 16:9 height */
  height: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Forecast — stacked horizontal rows (Figma Desktop 1440 / Laptop 1280)
 * Height fills the grid cell (same as video 16:9); rows share that space. */
.weather-forecast-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.weather-forecast-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 0;
  min-height: 0; /* shrink to share video height (was fixed ~66px) */
  padding: 4px 16px;
  border-radius: 8px;
  background: var(--weather-elevated-bg);
  border: 1px solid var(--weather-border-accent);
  box-sizing: border-box;
}

.weather-forecast-row__date {
  display: flex;
  flex-direction: column;
  flex: 0 0 52px;
  width: 52px;
}

.weather-forecast-row__day {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--weather-ui-text, #e1e3e9);
}

.weather-forecast-row__month-day {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--weather-ui-text-toned, #c2c6d3);
}

.weather-forecast-row__data {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.weather-forecast-row__condition {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.weather-forecast-row__icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  overflow: hidden;
}

.weather-forecast-row__icon img {
  display: block;
  width: 32px;
  height: 32px;
}

.weather-forecast-row__condition-text {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: var(--weather-ui-text-toned, #c2c6d3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weather-forecast-row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.weather-forecast-row__temps {
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.weather-forecast-row__high {
  display: inline-flex;
  align-items: flex-start;
  color: var(--weather-ui-text, #e1e3e9);
}

.weather-forecast-row__high-value {
  font-family: var(--font-mono, "DM Mono", ui-monospace, monospace);
  font-size: 20px;
  line-height: 32px;
  font-weight: 500;
}

.weather-forecast-row__high-unit {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 24px;
}

.weather-forecast-row__divider {
  font-family: var(--font-mono, "DM Mono", ui-monospace, monospace);
  font-size: 16px;
  line-height: 24px;
  color: var(--weather-ui-text-toned, #c2c6d3);
}

.weather-forecast-row__low {
  display: inline-flex;
  align-items: flex-start;
  color: var(--weather-ui-text-toned, #c2c6d3);
}

.weather-forecast-row__low-value {
  font-family: var(--font-mono, "DM Mono", ui-monospace, monospace);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

.weather-forecast-row__low-unit {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  line-height: 16px;
}

.weather-forecast-row__stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.weather-forecast-row__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--weather-ui-text-toned, #c2c6d3);
  white-space: nowrap;
}

.weather-forecast-row__stat i {
  font-size: 14px;
  width: 16px;
  height: 16px;
  text-align: center;
  line-height: 16px;
}

.weather-forecast-row__stat-values {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.weather-forecast-row__stat-value {
  font-family: var(--font-mono, "DM Mono", ui-monospace, monospace);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.weather-forecast-row__stat-unit {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  line-height: 16px;
}

/* Component Specs Default row: wind mph is text-sm (14/20); precip % stays text-xs */
.weather-forecast-row__stat-unit--mph {
  font-size: 14px;
  line-height: 20px;
}

/* Clips slot — Figma shelf ~280 */
.weather-clips-slot {
  min-height: 280px;
  border-radius: 12px;
  background: rgba(0, 0, 36, 0.35);
  border: 1px dashed rgba(225, 227, 233, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--weather-ui-text-toned, #c2c6d3);
  font-size: 14px;
  padding: 24px;
  margin-bottom: 24px;
}

/* Loading skeletons */
.weather-skeleton {
  background: rgba(225, 227, 233, 0.1);
  border-radius: 8px;
  animation: weather-chip-pulse 1.5s ease-in-out infinite;
}

.weather-skeleton--marquee {
  height: 176px;
  margin-bottom: 24px;
}

.weather-skeleton--forecast-row {
  min-height: 66px;
}

.weather-forecast-list--loading .weather-skeleton--forecast-row {
  background: rgba(225, 227, 233, 0.08);
  border: 1px solid rgba(28, 59, 122, 0.5);
}

/* Location label kept in markup but hidden — nav chip covers location on all breakpoints */
.weather-page__location-mobile {
  display: none;
  margin-bottom: 16px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 24px;
}

/*
 * Figma: Weather on Zeam Breakpoints (Full Page) — 13696:25158
 *   Desktop 1440 / Laptop 1280 — marquee row; video | stacked forecast rows
 *   Laptop (Min) 1024          — marquee row; video | 3×2 day cards
 *   Tablet 768                 — stacked marquee; video; 6-col day strip
 *   Mobile ~350                — icon-above-text; 2-col meta; peek-scroll strip
 */

/* Laptop (Min) 1024–1279: video | 3×2 cards (~510 : 425) */
@media (max-width: 1279px) {
  .weather-main-row {
    grid-template-columns: minmax(0, 510fr) minmax(0, 425fr);
  }

  .weather-forecast-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-height: 0;
    height: 100%;
  }

  .weather-forecast-list .weather-forecast-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: unset;
    min-height: 0;
    height: 100%;
    padding: 8px;
  }

  .weather-forecast-list .weather-forecast-row__date {
    flex-direction: row;
    flex: 0 0 auto;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .weather-forecast-list .weather-forecast-row__day {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
  }

  .weather-forecast-list .weather-forecast-row__data {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    flex: 1 1 auto;
  }

  .weather-forecast-list .weather-forecast-row__condition {
    flex-direction: column;
    align-items: center;
  }

  .weather-forecast-list .weather-forecast-row__condition-text {
    display: none;
  }

  .weather-forecast-list .weather-forecast-row__icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
  }

  .weather-forecast-list .weather-forecast-row__icon img {
    width: 48px;
    height: 48px;
  }

  .weather-forecast-list .weather-forecast-row__meta {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
  }

  .weather-forecast-list .weather-forecast-row__temps {
    justify-content: center;
    gap: 2px;
  }

  .weather-forecast-list .weather-forecast-row__high-value {
    font-size: 18px;
    line-height: 24px;
  }

  .weather-forecast-list .weather-forecast-row__high-unit {
    font-size: 14px;
    line-height: 20px;
  }

  .weather-forecast-list .weather-forecast-row__divider {
    font-size: 14px;
    line-height: 20px;
    margin: 0;
  }

  .weather-forecast-list .weather-forecast-row__low-value {
    font-size: 14px;
    line-height: 20px;
  }

  .weather-forecast-list .weather-forecast-row__stats {
    justify-content: center;
    gap: 4px;
  }

  .weather-forecast-list .weather-forecast-row__stat {
    gap: 2px;
  }

  .weather-forecast-list .weather-forecast-row__stat-value {
    font-size: 14px;
    line-height: 16px;
  }

  /* Card variants: both % and mph are text-xs */
  .weather-forecast-list .weather-forecast-row__stat-unit--mph {
    font-size: 12px;
    line-height: 16px;
  }

  .weather-skeleton--forecast-row {
    min-height: 141px;
  }
}

/* Tablet ≤1023 (Figma 768): stacked marquee; full-width video; equal day strip */
@media (max-width: 1023px) {
  .weather-page {
    padding: 0 24px 48px;
  }

  .weather-page__inner {
    max-width: none;
  }

  .weather-marquee {
    flex-direction: column;
    align-items: center;
    padding: 16px 24px; /* Figma py-16 px-24 */
    gap: 16px;
  }

  .weather-marquee--error {
    min-height: 0;
  }

  .weather-marquee__brief.weather-marquee__brief--error {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .weather-marquee__error-text {
    align-items: center;
  }

  .weather-forecast-unavailable {
    min-height: 220px;
  }

  .weather-marquee__brief {
    justify-content: center;
  }

  .weather-meta-grid {
    width: 343px;
    max-width: 100%;
  }

  .weather-main-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .weather-video-slot,
  .weather-video {
    height: auto;
    align-self: stretch;
  }

  .weather-video__frame {
    aspect-ratio: 16 / 9;
  }

  /* Stacked layout: forecast is its own row — don't use the side-by-side height match trick */
  .weather-forecast-section {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .weather-forecast-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    min-height: 0;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox — swipe still works */
    padding-bottom: 0;
  }

  .weather-forecast-list::-webkit-scrollbar {
    display: none; /* Chrome / Safari / Edge */
    width: 0;
    height: 0;
  }

  .weather-forecast-list .weather-forecast-row {
    flex: 1 1 0;
    width: auto;
    min-width: 104px;
    min-height: 160px;
    height: auto;
  }

  .weather-forecast-list .weather-forecast-row__stats {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .weather-skeleton--forecast-row {
    flex: 1 1 0;
    min-width: 104px;
    min-height: 160px;
  }
}

/* Mobile ≤767 (Figma ~350): icon above text; 2-col meta; peek-scroll cards */
@media (max-width: 767px) {
  .weather-page {
    padding: 0 16px 48px;
  }

  .weather-marquee {
    align-items: stretch;
    padding: 16px 24px; /* Figma py-16 px-24 */
  }

  .weather-marquee__brief {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

  .weather-marquee__conditions {
    flex-wrap: wrap;
  }

  /* Figma mobile keeps 72px temp — do not shrink */
  .weather-marquee__temp {
    font-size: 72px;
    line-height: 72px;
  }

  .weather-meta-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weather-forecast-list .weather-forecast-row {
    flex: 0 0 90px;
    width: 90px;
    min-width: 90px;
  }

  .weather-skeleton--forecast-row {
    flex: 0 0 90px;
    width: 90px;
    min-width: 90px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .weather-skeleton {
    animation: none;
  }
}

@keyframes weather-chip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}