/* Keep API location names together beside the weather icon at every size. */
#section-header .layer-left-temp-block .temp-location {
  white-space: nowrap;
  overflow-wrap: normal;
  flex-shrink: 0;
}
#section-header .layer-left-temp-block .temp-icon {
  flex-shrink: 0;
}

/* Let mobile hero content determine its height, including longer Hindi slogans
   and the optional AQI row, instead of overlapping absolute-positioned bands. */
@media (max-width: 767px) {
  #section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto !important;
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    padding: 72px 16px 72px;
  }

  #section-header .layer-left-temp-block,
  #section-header .layer-slogan-block,
  #section-header .layer-right-temp-block {
    position: relative;
    inset: auto;
    flex-shrink: 0;
  }

  #section-header .layer-left-temp-block {
    width: 100%;
    gap: 10px;
  }
  #section-header .layer-left-temp-block > .ms-3 {
    margin-left: 0 !important;
    min-width: 0;
  }
  #section-header .layer-left-temp-block .temp-degree {
    font-size: clamp(40px, 13vw, 52px);
    line-height: 1.2;
    white-space: nowrap;
  }
  #section-header .layer-left-temp-block .temp-location {
    overflow-wrap: normal;
  }

  #section-header .layer-slogan-block {
    width: 100%;
    padding: 32px 0 0;
    margin-top: auto;
    margin-bottom: 24px;
    transform: none;
  }

  #section-header .layer-right-temp-block {
    width: min(100%, 300px);
    margin-bottom: clamp(12px, 4vh, 32px);
  }
  #section-header .layer-right-temp-block .inner-block {
    padding: 12px 16px;
  }
  #section-header .layer-right-temp-block .tempblock {
    gap: 12px;
  }
  #section-header .layer-right-temp-block .tempblock .val {
    text-align: right;
  }
}

/* Tablets also use native scrolling: reserve space for every weather row and
   warning instead of pinning three bands to a fixed viewport. */
@media (max-width: 1250px) {
  .home #fullpage > .section {
    height: auto !important;
    min-height: 100svh;
    position: relative;
  }
  .home #fullpage .fp-overflow {
    height: auto !important;
    max-height: none !important;
    overflow: visible;
  }
  #section-header > .fp-overflow { display: contents; }
  #section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto !important;
    min-height: 100svh;
  }
  #section-header #bmsk-af {
    position: relative;
    inset: auto;
    flex-shrink: 0;
    width: min(360px, 100%);
    min-height: 180px;
    margin: 24px 0 0;
    animation: none;
    z-index: 5;
  }
  #section-header #bmsk-af .af-ribbon {
    width: calc(100% - var(--af-bal-w) * .62);
  }
  #section-header .layer-news-scroller {
    flex-shrink: 0;
    max-width: 100%;
  }
  .home-hamburger, .home-lang-btn {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
  .home-lang-btn { display: inline-flex; }
  .home-mobile-logo-wrap { min-width: 0; }
  .home-mobile-logo-wrap span { white-space: normal; }
}

@media (min-width: 768px) and (max-width: 1250px) {
  #section-header { padding: 96px 32px 92px; }
  #section-header .layer-left-temp-block,
  #section-header .layer-slogan-block,
  #section-header .layer-right-temp-block {
    position: relative;
    inset: auto;
    flex-shrink: 0;
    transform: none;
  }
  #section-header .layer-slogan-block {
    width: 100%;
    padding: 32px 0;
    margin-top: auto;
  }
  #section-header .layer-right-temp-block {
    width: min(100%, 760px);
    margin-bottom: 24px;
  }
  #section-header .layer-right-temp-block .tempblock { gap: 12px; }
  #section-header .layer-right-temp-block .val { text-align: right; }
}