/* v31.4.4: media stays in its own containing block, including inside main. */
body.xionia-satellite-page {
  --xionia-media-width: 1180px;
  --xionia-media-gutter: 0px;
}
html body.xionia-satellite-page > .xionia-weather-media,
html body.xionia-satellite-page > .xionia-snowly,
html body.xionia-legacy.xionia-satellite-page .xionia-legacy-main > .xionia-weather-media,
html body.xionia-legacy.xionia-satellite-page .xionia-legacy-main > .xionia-snowly {
  box-sizing: border-box;
  width: calc(100% - var(--xionia-media-gutter));
  max-width: var(--xionia-media-width);
  margin: 24px auto;
}
.xionia-weather-frame {
  position: relative;
  min-width: 0;
  overflow: hidden;
  height: clamp(360px, 75vh, 800px);
  height: clamp(360px, 75svh, 800px);
  background: #dce8f1;
}
html body.xionia-satellite-page .xionia-weather-frame > iframe {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0;
  aspect-ratio: auto;
}
html body.xionia-satellite-page .xionia-weather-image > img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain;
}
/* A passive map keeps one geographic viewport on every screen size. */
html body.xionia-satellite-page .xionia-passive-map {
  position: relative;
  height: auto;
  aspect-ratio: 6 / 5;
  overflow: hidden;
}
html body.xionia-satellite-page .xionia-passive-map.is-fitted > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1200px !important;
  height: 1000px !important;
  transform: scale(var(--xionia-passive-scale));
  transform-origin: top left;
  border-radius: 0;
  pointer-events: none;
}
@media (max-width: 600px) {
  body.xionia-satellite-page { --xionia-media-gutter: 0px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .xionia-satellite-page .xionia-weather-frame:not(.xionia-passive-map) {
    height: clamp(240px, 85vh, 540px);
    height: clamp(240px, 85svh, 540px);
  }
}
