/*
 * Section size system
 * -------------------
 * --sm  Fixed-height band (e.g. quick links)
 * --md  Content-driven; in a page stack, does not stretch vertically on resize
 * --lg  One section = full viewport below header + ticker
 *
 * Desktop/tablet: heights use fixed px — resizing the window wider does NOT
 * grow section height. Mobile uses separate rules in layout.css.
 */

:root {
  --viewport-content: calc(100dvh - var(--ticker-height) - var(--header-height));
  --section-sm-height: 132px;
  --section-padding-y: 2rem;
}

/* Small — compact horizontal band */
.section--sm {
  flex-shrink: 0;
}

/* Medium — natural content height on desktop (no flex stretch) */
.section--md {
  flex: 0 0 auto;
}

/* Large — fills the viewport */
.section--lg {
  min-height: var(--viewport-content);
  display: flex;
  flex-direction: column;
}

.section--lg > .container {
  flex: 1 1 auto;
  min-height: 0;
}

/* Page stack: sm + md = one viewport; fixed vertical footprint */
@media (min-width: 768px) {
  .section-stack--page {
    height: var(--viewport-content);
    min-height: var(--viewport-content);
    max-height: var(--viewport-content);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .section-stack--page .section--md {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .section-stack--page .section--sm {
    flex: 0 0 auto;
  }

  .section-stack--page .section--sm {
    min-height: var(--section-sm-height);
    max-height: var(--section-sm-height);
  }

  /* Lock large sections to viewport height (width can change freely) */
  .section--lg {
    height: var(--viewport-content);
    min-height: var(--viewport-content);
    max-height: var(--viewport-content);
  }
}

@media (max-width: 767px) {
  :root {
    --section-padding-y: 1.5rem;
  }

  .section-stack--page {
    height: auto;
    min-height: 0;
    max-height: none;
    justify-content: flex-start;
  }

  .section--lg {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .section--md {
    flex: none;
  }
}