/*
 * @file
 * Provides layout styles for the UVA Program two-column layout plugin.
 *
 * Column width variants are controlled by modifier classes added in
 * uva_programs_preprocess_layout(). Sidebar position (left/right) is
 * controlled by a separate modifier class set from module configuration.
 */

/* Base: stack all regions full-width on small screens. */
.layout--uva-program .layout__region--content-aside {
  display: flex;
  flex-wrap: wrap;
}

/*
 * Regions declare border-box explicitly rather than relying on the global
 * `box-sizing: inherit` rule. The column variants below sum to exactly 100%,
 * so if border-box is not in effect the horizontal padding applied by the
 * sidebar-position rules pushes the line past 100% and the aside wraps.
 *
 * `min-width: 0` overrides the automatic minimum size on flex items. Without
 * it, wide unbreakable content (tables, oEmbed iframes, long URLs, fixed-width
 * images) inflates the content region past its flex-basis and wraps the aside.
 */
.layout--uva-program .layout__region--content-aside > .layout__region {
  box-sizing: border-box;
  flex: 0 1 100%;
  min-width: 0;
}

/* Column widths: apply side-by-side layout at 640px and above. */
@media screen and (min-width: 40em) {
  .layout--uva-program.layout--uva-program--50-50
    .layout__region--content-aside
    > .layout__region--content,
  .layout--uva-program.layout--uva-program--50-50
    .layout__region--content-aside
    > .layout__region--aside {
    flex: 0 1 50%;
  }

  .layout--uva-program.layout--uva-program--33-67
    .layout__region--content-aside
    > .layout__region--content,
  .layout--uva-program.layout--uva-program--67-33
    .layout__region--content-aside
    > .layout__region--aside {
    flex: 0 1 33%;
  }

  .layout--uva-program.layout--uva-program--33-67
    .layout__region--content-aside
    > .layout__region--aside,
  .layout--uva-program.layout--uva-program--67-33
    .layout__region--content-aside
    > .layout__region--content {
    flex: 0 1 67%;
  }

  .layout--uva-program.layout--uva-program--25-75
    .layout__region--content-aside
    > .layout__region--content,
  .layout--uva-program.layout--uva-program--75-25
    .layout__region--content-aside
    > .layout__region--aside {
    flex: 0 1 25%;
  }

  .layout--uva-program.layout--uva-program--25-75
    .layout__region--content-aside
    > .layout__region--aside,
  .layout--uva-program.layout--uva-program--75-25
    .layout__region--content-aside
    > .layout__region--content {
    flex: 0 1 75%;
  }
}

/*
 * Sidebar position ordering.
 *
 * The aside region always renders after content in the DOM. When the sidebar
 * is configured left, order: 1 on the aside pulls it visually ahead of the
 * content region (order: 2). Sidebar right keeps DOM order.
 *
 * On mobile the regions stack full-width and order is irrelevant, so the
 * order declarations live inside the min-width: 40em breakpoint below.
 */

/* Mobile: stacked regions get a gap instead of the side-by-side gutter. */
.layout--uva-program.layout--uva-program--sidebar-left
  .layout__region--content-aside,
.layout--uva-program.layout--uva-program--sidebar-right
  .layout__region--content-aside {
  gap: 1.5rem;
}

@media screen and (min-width: 40em) {
  /*
   * Gap must be zero here: the column variants above sum to 100%, leaving no
   * room for a gap. The gutter is created by padding on the content region
   * instead, which stays inside the flex basis under border-box.
   */
  .layout--uva-program.layout--uva-program--sidebar-left
    .layout__region--content-aside,
  .layout--uva-program.layout--uva-program--sidebar-right
    .layout__region--content-aside {
    gap: 0;
  }

  .layout--uva-program.layout--uva-program--sidebar-left
    .layout__region--content-aside
    > .layout__region--content {
    order: 2;
    padding-left: clamp(2rem, 5vw, 5rem);
    margin-top: 2.5rem;
  }

  .layout--uva-program.layout--uva-program--sidebar-left
    .layout__region--content-aside
    > .layout__region--aside {
    order: 1;
    padding-top: 2.5rem;
    background: #e8edf5;
  }

  .layout--uva-program.layout--uva-program--sidebar-right
    .layout__region--content-aside
    > .layout__region--content {
    order: 1;
    padding-right: clamp(2rem, 5vw, 5rem);
    margin-top: 2.5rem;
  }

  .layout--uva-program.layout--uva-program--sidebar-right
    .layout__region--content-aside
    > .layout__region--aside {
    order: 2;
    padding-top: 2.5rem;
  }
}