/* basic page title from top */
.it-page-title__wrapper {
  padding-top: 6rem;
  position: relative;
}

@media (min-width: 992px) {
  .it-page-title__wrapper {
    padding-top: 2rem;
  }
}

@media (min-width: 1200px) {
  .it-page-title__wrapper {
    padding-top: 4rem;
  }
}

/* scale container bc of the side menu  */
@media (min-width: 1024px) and (max-width: 1500px) {
  body .container,
  body .container-fluid,
  body .container-lg,
  body .container-md,
  body .container-sm,
  body .container-xl,
  body .container-xxl {
    width: calc(100vw - 200px);
  }
}

@media (min-width: 1400px) {
  body .container,
  body .container-lg,
  body .container-md,
  body .container-sm,
  body .container-xl,
  body .container-xxl {
    max-width: 1360px;
  }
}

/* all events page */
.next-event-container:empty {
  display: none;
}

/* ---------------------------------------------------------------------------
   Detail split layout — event, procurement (tender), job opportunity,
   teaching module
   ---------------------------------------------------------------------------
   Content in one column with a metadata card beside it, and the card starting
   level with the TOP OF THE TITLE. That last part is why this is a GRID and not
   the Bootstrap flex row it still looks like in the markup: a flex item cannot
   span two flex lines, so under flexbox the card could only ever begin where the
   body begins — under the title. As a grid, column 1 carries three rows
   (back-link, title, body) and the card spans the title and body rows in
   column 2.

   That is also why these detail templates render the page <h1> themselves
   instead of leaving it to the page-title block: a card that starts at the title
   has to be a sibling of the title. The block is switched off for those bundles
   in block.block.pt_base_page_title_view_mode_block — switch it back on and
   those pages get two h1s.

   ⚠️ Below 992px NONE of this applies: the element is the flex `.row` it always
   was, and the mobile order (back-link, title, card, body) comes from the
   `order-*` classes in the templates. Keep these rules inside the media query.

   The card column is wider than `col-lg-4`: it has to fill the noise band. Both
   widths are computed from the same numbers at every breakpoint, so the `:before`
   and the `__aside` rules below are edited together or not at all.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .pt-page--application-opportunity:before,
  .pt-page--job-opportunity:before,
  .pt-page--tender:before,
  .pt-page--teaching-module:before,
  .pt-page--student-project:before,
  .pt-event--full:before {
    background-image: url(/themes/custom/pt_base/images/bg-dark-noise.png);
    position: absolute;
    content: "";
    background-size: 400px;
    background-repeat: repeat;
    width: calc((((100vw - 960px) / 2) + (960px * 0.33) - 20px));
    height: 100%;
    z-index: 0;
    right: 0;
    top: 0;
  }


  .pt-page--application-opportunity .row,
  .pt-page--job-opportunity .row,
  .pt-page--tender .row,
  .pt-page--teaching-module .row,
  .pt-page--student-project .row,
  .pt-event--full .row {
    flex-wrap: nowrap;
  }

  /* The grid itself. `minmax(0, 1fr)` and not `1fr`: a bare `1fr` has a
     min-content floor, and one long unbreakable word in the body would then
     push the card out of the container. The second track is sized `auto`, i.e.
     from the width declared on the card column below. */
  .row.pt-detail-split {
    display: grid;
    grid-template-columns:  66.66666667%; auto;
  }

  /* `.col-*` declare a percentage width, which inside a grid area would be a
     percentage OF THAT AREA — the tracks give the columns their width here. The
     gutters still come from Bootstrap's `.row > *` padding, so the geometry is
     the same as the flex row's. */
  .pt-detail-split > .pt-detail-split__backlink,
  .pt-detail-split > .pt-detail-split__header,
  .pt-detail-split > .pt-detail-split__body {
    width: auto;
    max-width: none;
  }

  .pt-detail-split > .pt-detail-split__backlink {
    grid-column: 1;
    grid-row: 1;
  }
  .pt-detail-split > .pt-detail-split__header {
    grid-column: 1;
    grid-row: 2;
  }
  .pt-detail-split > .pt-detail-split__body {
    grid-column: 1;
    grid-row: 3;
  }

  /* ⚠️ This is the line that decides where the card starts: row 2 puts its top
     level with the title, row 1 would put it level with the back-link. It spans
     down to the end of the body so the column is full height — `position: sticky`
     on the card inside it has nowhere to travel otherwise. */
  .pt-detail-split > .pt-detail-split__aside {
    grid-column: 2;
    grid-row: 2 / span 2;
    position: relative;
    transform: translateX(20px);
    width: calc((((100vw - 960px) / 2) + (960px * 0.33) - 40px));
  }
}

@media (min-width: 1024px) {
  .pt-page--application-opportunity:before,
  .pt-page--job-opportunity:before,
  .pt-page--tender:before,
  .pt-page--teaching-module:before,
  .pt-page--student-project:before,
  .pt-event--full:before {
    width: calc((((100vw - 960px) / 2) + (960px * 0.33) - -10px));
  }

  .pt-detail-split > .pt-detail-split__aside {
    width: calc((((100vw - 960px) / 2) + (960px * 0.33) - 10px));
  }
}

@media (min-width: 1024px) and (max-width: 1500px) {
  .pt-page--application-opportunity:before,
  .pt-page--job-opportunity:before,
  .pt-page--tender:before,
  .pt-page--teaching-module:before,
  .pt-page--student-project:before,
  .pt-event--full:before {
    width: calc(
      (((100vw - (100vw - 200px)) / 2) + ((100vw - 200px) * 0.33) - 30px)
    );
  }
  .pt-detail-split > .pt-detail-split__aside {
    width: calc(
      (((100vw - (100vw - 200px)) / 2) + ((100vw - 200px) * 0.33) - 60px)
    );
  }
}

@media (min-width: 1500px) {
  .pt-page--application-opportunity:before,
  .pt-page--job-opportunity:before,
  .pt-page--tender:before,
  .pt-page--teaching-module:before,
  .pt-page--student-project:before,
  .pt-event--full:before {
    width: calc((((100vw - 1360px) / 2) + (1360px * 0.33) - 30px));
  }

  .pt-detail-split > .pt-detail-split__aside {
    transform: translateX(60px);
    width: calc((((100vw - 1360px) / 2) + (1360px * 0.33) - 100px));
  }
}

@media (min-width: 1680px) {
  .pt-page--application-opportunity:before,
  .pt-page--job-opportunity:before,
  .pt-page--tender:before,
  .pt-page--teaching-module:before,
  .pt-page--student-project:before,
  .pt-event--full:before {
    width: calc((((100vw - 1360px) / 2) + (1360px * 0.26) - 0px));
  }
  .pt-detail-split > .pt-detail-split__aside {
    transform: translateX(140px);
    width: calc((((100vw - 1360px) / 2) + (1360px * 0.26) - 100px));
  }
}