/* Roomier lessons and reachable navigation, without changing learning gates. */
@media screen {
  html {
    --lesson-bottom-space: 120px;
    scroll-padding-bottom: calc(var(--lesson-bottom-space) + env(safe-area-inset-bottom, 0px));
  }

  #world-platform .w-main.w-lesson-shell {
    max-width: 1680px;
    padding-bottom: calc(var(--lesson-bottom-space) + env(safe-area-inset-bottom, 0px));
  }

  body[data-world-mode="legacy"] > .shell {
    max-width: 1680px;
    padding-bottom: calc(var(--lesson-bottom-space) + env(safe-area-inset-bottom, 0px));
  }

  #world-platform #w-guide-footer,
  #world-platform .w-vpr-footer,
  body[data-world-mode="legacy"] #guide-footer {
    position: fixed;
    inset: auto auto 0 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 64px), 1616px);
    box-sizing: border-box;
    margin: 0;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    border: 1px solid #c8e0e6;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: #f5fcff;
    box-shadow: 0 -5px 24px #21445e1a;
    z-index: 11;
  }

  #world-platform #w-guide-footer .w-btn,
  #world-platform .w-vpr-footer .w-btn {
    min-height: 48px;
  }

  #world-platform .w-stage,
  body[data-world-mode="legacy"] #guided-stage {
    scroll-margin-bottom: calc(var(--lesson-bottom-space) + env(safe-area-inset-bottom, 0px));
  }
}

@media screen and (min-width: 1000px) {
  /* The page header already shows the brand and subject during a lesson. */
  body[data-world-stage="travel"] #world-platform .w-lesson-masthead {
    display: none;
  }

  #world-platform .w-main.w-lesson-shell {
    padding-left: 32px;
    padding-right: 32px;
  }

  /* Let photographs fit short laptop screens; full-size viewing stays available. */
  #world-platform .w-rich-story > .w-reading-media > .w-photo:not(.w-photo-collage) img {
    height: clamp(210px, 29vh, 300px);
  }

  #world-platform .w-rich-story .w-photo.w-photo-collage .w-photo-opener img {
    height: clamp(240px, 34vh, 360px);
    object-fit: contain;
    background: white;
  }
}

@media screen and (max-width: 700px) {
  html { --lesson-bottom-space: 170px; }

  #world-platform #w-guide-footer,
  #world-platform .w-vpr-footer,
  body[data-world-mode="legacy"] #guide-footer {
    width: calc(100% - 20px);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-radius: 15px 15px 0 0;
  }

  #world-platform .w-vpr-footer {
    gap: 10px;
  }

  #world-platform .w-vpr-footer .w-btn {
    min-width: 0;
    font-size: 15px;
    padding: 10px 12px;
  }
}