/*
 * @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;
}

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

/* 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.
 *
 * When sidebar is on the left, the aside region renders first in the DOM but
 * is visually ordered first via order: 1. Content gets order: 2.
 *
 * On mobile the regions stack full-width, so order is reset — re-applied
 * 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) {
  /* Remove the stacking gap — flex ordering takes over at this width. */
  .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;
  }
}