/* News on the home page (FrontPage.astro, "Neuigkeiten der Wolfram Industrie"), after the
   design "Frame 5". Two sections, open positions and news, each a banner with the general
   text, then rows with the picture on one side and the text on a green panel with a
   slanted edge. Every second row is mirrored. Counted with :nth-child on the list, so the rows still
   alternate when the Site Editor adds, removes or reorders news. */
.news-split {
  --ns-green: #00847e;
  /* where the panel's edge meets the top and the bottom of the row */
  --ns-top: 44%;
  --ns-bottom: 62%;
  padding: 75px 0 100px;
}
/* width: home.css */
.news-split__list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* One row */
.news-split__item {
  position: relative;
  display: flex;
  min-height: 420px;
  overflow: hidden;
  isolation: isolate;
}
/* The picture fills the part right of where the slant starts, so it is shown nearly whole
   instead of being cut down to the strip beside the panel. */
.news-split__img {
  position: absolute;
  inset: 0 0 0 var(--ns-top);
  z-index: -1;
  background-size: cover;
  background-position: center;
}
.news-split__panel {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--ns-green);
  clip-path: polygon(0 0, var(--ns-top) 0, var(--ns-bottom) 100%, 0 100%);
}
.news-split__text {
  width: calc(var(--ns-top) - 40px);
  padding: 44px 0 44px 64px;
  color: #fff;
}
/* Text sizes as in the full-screen pictures at the top of the page */
.news-split .news-split__headline {
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  color: #fff;
}
.news-split .news-split__headline:empty {
  display: none;
}
.news-split .news-split__text p {
  margin: 20px 0 0;
  font-size: 23px;
  font-weight: 400;
  line-height: 30px;
  color: #fff;
}
.news-split .news-split__text p a {
  color: #fff;
  text-decoration: underline;
}
.news-split .news-split__btn {
  display: inline-block;
  margin-top: 34px;
  padding: 14px 28px;
  background: #fff;
  color: var(--ns-green);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}
.news-split .news-split__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Mirrored rows */
.news-split__item:nth-child(even) {
  justify-content: flex-end;
}
.news-split__item:nth-child(even) .news-split__img {
  inset: 0 var(--ns-top) 0 0;
}
.news-split__item:nth-child(even) .news-split__panel {
  justify-content: flex-end;
  clip-path: polygon(calc(100% - var(--ns-top)) 0, 100% 0, 100% 100%, calc(100% - var(--ns-bottom)) 100%);
}
.news-split__item:nth-child(even) .news-split__text {
  padding: 44px 64px 44px 0;
}

/* Cards on the home page (FrontPage.astro): no green panel. The picture takes the 62% of
   the card away from the text, so the mostly upright photos are not zoomed in far and
   heads stay in view, and a gradient fades it into the text side: light grey with black
   text, in dark mode the dark theme's grey (dark.css). The career page keeps the green
   panels above. */
.news-split--cards {
  --nc-bg: 240, 242, 242;
  --nc-text: #000;
}
html[data-theme="dark"] .news-split--cards {
  --nc-bg: 35, 41, 41;
  --nc-text: #fff;
}
.news-split--cards .news-split__item {
  background: rgb(var(--nc-bg));
}
.news-split--cards .news-split__img {
  inset: 0 0 0 38%;
  background-position: center 30%;
}
.news-split--cards .news-split__item:nth-child(even) .news-split__img {
  inset: 0 38% 0 0;
}
.news-split--cards .news-split__panel {
  background: linear-gradient(90deg, rgb(var(--nc-bg)) 0%, rgb(var(--nc-bg)) 38%, rgba(var(--nc-bg), 0.6) 48%, rgba(var(--nc-bg), 0) 66%);
  clip-path: none;
}
.news-split--cards .news-split__item:nth-child(even) .news-split__panel {
  background: linear-gradient(270deg, rgb(var(--nc-bg)) 0%, rgb(var(--nc-bg)) 38%, rgba(var(--nc-bg), 0.6) 48%, rgba(var(--nc-bg), 0) 66%);
  clip-path: none;
}
.news-split--cards .news-split__text,
.news-split--cards .news-split__headline,
.news-split--cards .news-split__text p,
.news-split--cards .news-split__text p a {
  color: var(--nc-text);
}
/* On the light grey the button is green; in dark mode it stays white. */
html:not([data-theme="dark"]) .news-split--cards .news-split__btn {
  background: #00847e;
  color: #fff;
}
html:not([data-theme="dark"]) .news-split--cards .news-split__btn:focus-visible {
  outline-color: #00847e;
}

/* Banner above the rows: the picture across the whole screen, the text on a see-through
   green panel with the slanted edge, lined up with the rows below. Sizes are in cqw (the
   banner's width), because the panel spans the whole banner and the text sits in the
   narrower page column. */
.news-split__banner {
  /* where the panel's edge meets the top and the bottom, in % of the banner's width */
  --nb-top: 45;
  --nb-bottom: 63;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 540px;
  margin-bottom: 40px;
  isolation: isolate;
  container-type: inline-size;
}
.news-split__banner-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
}
.news-split__banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 132, 126, 0.85);
  clip-path: polygon(0 0, calc(var(--nb-top) * 1%) 0, calc(var(--nb-bottom) * 1%) 100%, 0 100%);
}
.news-split__banner > .news-split__inner {
  position: relative;
}
/* indented like the text in the rows below, and ending 48px before the slanted edge */
.news-split__banner-text {
  max-width: min(824px, calc(var(--nb-top) * 1cqw - 112px - max(var(--home-gutter, 32px), (100cqw - 1600px) / 2)));
  padding: 64px 0 64px 64px;
  color: #fff;
}
.news-split .news-split__banner-headline {
  margin: 0;
  font-size: 50px;
  line-height: 60px;
  color: #fff;
}
.news-split .news-split__banner-text p {
  margin: 20px 0 0;
  font-size: 23px;
  font-weight: 400;
  line-height: 30px;
  color: #fff;
}
.news-split--news {
  padding-top: 0;
}

/* Smaller screens */
@media (max-width: 1100px) {
  .news-split {
    --ns-top: 52%;
    --ns-bottom: 68%;
  }
  .news-split__banner {
    --nb-top: 55;
    --nb-bottom: 73;
  }
  .news-split__text,
  .news-split__banner-text {
    padding-left: 40px;
  }
  .news-split__item:nth-child(even) .news-split__text {
    padding-right: 40px;
  }
}
/* Phones: the picture on top, the panel (career page) or the text (home cards) below it. */
@media (max-width: 767px) {
  .news-split {
    padding: 50px 0 70px;
  }
  .news-split__list {
    gap: 32px;
  }
  .news-split__item,
  .news-split__item:nth-child(even) {
    flex-direction: column;
    min-height: 0;
  }
  .news-split__img,
  .news-split__item:nth-child(even) .news-split__img {
    position: relative;
    inset: auto;
    height: 62vw;
    max-height: 360px;
  }
  .news-split__panel,
  .news-split__item:nth-child(even) .news-split__panel {
    margin-top: -36px;
    clip-path: polygon(0 36px, 100% 0, 100% 100%, 0 100%);
  }
  .news-split__item:nth-child(even) .news-split__panel {
    clip-path: polygon(0 0, 100% 36px, 100% 100%, 0 100%);
  }
  .news-split__text,
  .news-split__item:nth-child(even) .news-split__text {
    width: auto;
    padding: 60px 24px 36px;
  }
  /* Home cards: the picture on top, fading into the text below it. */
  .news-split--cards .news-split__img,
  .news-split--cards .news-split__item:nth-child(even) .news-split__img {
    position: absolute;
    inset: 0 0 auto 0;
    height: 80vw;
    max-height: none;
  }
  .news-split--cards .news-split__panel,
  .news-split--cards .news-split__item:nth-child(even) .news-split__panel {
    margin-top: 0;
    padding-top: 70vw;
    background: linear-gradient(180deg, rgba(var(--nc-bg), 0) 0, rgba(var(--nc-bg), 0) 40vw, rgba(var(--nc-bg), 0.85) 66vw, rgb(var(--nc-bg)) 80vw);
    clip-path: none;
  }
  .news-split--cards .news-split__text,
  .news-split--cards .news-split__item:nth-child(even) .news-split__text {
    padding: 0 24px 36px;
  }
  /* Banner: the picture on top, the panel below it with a slanted top edge. The picture
     only fills the top, so the wide photos are not zoomed in far; the people in them
     stand right of the middle. */
  .news-split__banner {
    flex-direction: column;
    align-items: stretch;
    min-height: 380px;
    margin-bottom: 32px;
    padding-top: 46vw;
    background: #00847e;
  }
  .news-split__banner-img {
    inset: 0 0 auto 0;
    height: 56vw;
    background-position: 72% center;
  }
  .news-split__banner::before {
    top: calc(46vw - 36px);
    clip-path: polygon(0 36px, 100% 0, 100% 100%, 0 100%);
  }
  .news-split__banner-text {
    max-width: none;
    padding: 24px 24px 40px;
  }
  .news-split .news-split__banner-headline {
    font-size: 30px;
    line-height: 38px;
  }
  .news-split .news-split__headline {
    font-size: 26px;
  }
  .news-split .news-split__text p,
  .news-split .news-split__banner-text p {
    font-size: 17px;
    line-height: 27px;
  }
  .news-split .news-split__btn {
    font-size: 15px;
  }
}