/* EL-08: reserve the chapter bar, then lay out copy before photography.
   A short viewport scrolls the panel instead of placing text over the photo. */
body.el-08-home .mobile-cover-layout {
  display: contents;
}

@media (max-width: 900px) {
  body.el-08-home .journey-six .gallery-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    height: var(--el08-viewport-height, 100svh);
  }

  body.el-08-home .journey-six .gallery-track {
    min-width: 0;
    min-height: 0;
  }

  body.el-08-home .journey-six .gallery-panel {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.el-08-home .journey-six .gallery-panel:not(.home-panel) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(160px, 1fr);
    gap: 20px;
    padding: calc(var(--header-height) + 20px) 7vw 16px;
  }

  body.el-08-home .journey-six .panel-number {
    position: static;
    margin: 0;
    line-height: 1.2;
  }

  body.el-08-home .journey-six .gallery-panel:not(.home-panel) .panel-copy {
    position: static;
    inset: auto;
    width: auto;
    margin: 0;
  }

  body.el-08-home .journey-six .gallery-panel .panel-copy .text-link {
    min-height: 44px;
    margin-top: 16px;
    padding: 8px 0;
  }

  body.el-08-home .journey-six .sea-image,
  body.el-08-home .journey-six .air-image,
  body.el-08-home .journey-six .table-image {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    min-height: 160px;
    margin: 0;
  }

  body.el-08-home .journey-six .home-panel {
    display: block;
    padding: 0;
  }

  body.el-08-home .mobile-cover-layout {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 100%;
    padding: calc(var(--header-height) + 100px) 6vw 24px;
  }

  body.el-08-home .journey-six .home-panel .panel-copy {
    position: relative;
    inset: auto;
    flex-shrink: 0;
    width: auto;
    margin: auto 0 0;
  }

  body.el-08-home .journey-six .home-panel .image-caption {
    position: relative;
    inset: auto;
    z-index: 3;
    flex-shrink: 0;
    margin: 12px 0 0;
  }

  body.el-08-home .journey-six .chapter-nav {
    position: relative;
    inset: auto;
    height: auto;
    min-height: 56px;
    margin: 0;
    padding: 6px 4vw max(6px, env(safe-area-inset-bottom, 0px));
  }

  body.el-08-home .journey-six .chapter-buttons {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    width: 100%;
    gap: 6px;
  }

  body.el-08-home .journey-six .chapter-buttons button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 0;
    line-height: 1.4;
  }
}

@media (max-width: 360px) {
  body.el-08-home .journey-six .gallery-panel:not(.home-panel) {
    padding-inline: 3vw;
  }

  body.el-08-home .journey-six .chapter-buttons button {
    font-size: var(--el08-support);
  }
}