/*
 * Contained scrolling for list screens (vanilla prototype only; not in the React version).
 * Used by Teljes repertoár and Saját kottáim.
 *
 * The app header, title block, toolbar and item count stay in place; only the list scrolls,
 * below its column headings. While such a screen is shown, js/layout/containedScroll.js puts
 * `has-contained-scroll` on <body>. The screen marks its parts with:
 *
 *   .contained-scroll         the page (PageLayout) element
 *   .contained-scroll__list   the card holding the column headings and the list
 *   .contained-scroll__head   the column headings (stay visible)
 *   .contained-scroll__body   the <ul> that scrolls
 *
 * Applied only where there is room for it. On narrow (≤ 40rem, the existing mobile breakpoint)
 * or short (< 36rem) viewports the whole page scrolls as before, so the list never gets squeezed.
 */

@media (min-width: 40.0625rem) and (min-height: 36rem) {
  /* The page is exactly one viewport tall: header on top, <main> takes the rest */
  body.has-contained-scroll {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
  }

  body.has-contained-scroll > .app-header {
    flex-shrink: 0;
  }

  body.has-contained-scroll > main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  body.has-contained-scroll .contained-scroll {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    padding-bottom: var(--space-6);
  }

  /* Title block, toolbar, count and messages keep their natural height */
  body.has-contained-scroll .contained-scroll > * {
    flex-shrink: 0;
  }

  /* Buttons placed directly on the page (e.g. "Vissza a kezdőlapra") keep their own width */
  body.has-contained-scroll .contained-scroll > .btn {
    align-self: flex-start;
  }

  /* The list card is as tall as its content, but shrinks to the space that is left */
  body.has-contained-scroll .contained-scroll > .contained-scroll__list {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 10rem;
  }

  body.has-contained-scroll .contained-scroll__head {
    flex-shrink: 0;
  }

  body.has-contained-scroll .contained-scroll__body {
    /* Contains the absolutely positioned screen-reader texts, which would otherwise
       stretch the page below the viewport (a second scrollbar) */
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}