/* Matches Live's .news-latest-item (background/margin-top) and
   .news-latest-text (padding) 1:1 — source: fileadmin/.../main.css */
.news.-latest {
  position: relative;
  margin-top: 10px;

  --swiper-navigation-sides-offset: 0;

  & .swiper-slide {
    height: auto;
    width: 100%;
  }

  & .swiper-button-disabled {
    display: none;
  }

  /* Live's .news-latest-item is display:grid;grid-template-columns:1fr 1fr
     (text | image) — the image column is unused here (no image set on this
     news item), so the text only ever occupies the LEFT half, not the full
     row width. Match that on .article itself; .article__text is its only
     child, so it auto-places into the first column and simply leaves the
     second one empty, without needing an actual image element. */
  & .article {
    background: rgb(var(--c-neutral-lighter));
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  & .article__text {
    background: transparent;
    padding: 2em 20px;
  }

  & .headline h3 {
    /* Live's .news-latest-title is font-size:133% of Live's own baseline
       text (17.6px at 1440) = 23.4px. Our baseline text sits at 126% of
       root (--f-size, applied on body) instead of 100%, so the equivalent
       here is 133% * (100/126) = ~106% of that already-applied context —
       same compounding pattern as everywhere else in this project. */
    font-size: 106%;
    color: rgb(var(--c-neutral));
    font-weight: var(--f-weight-b);
    text-transform: uppercase;
    margin-bottom: var(--g-gap-s);
  }

  & .article__teaser {
    /* Live's baseline text is 17.6px vs. our 126%-context 22px — same 80%
       conversion used site-wide for standard body text (tables, footer,
       sitemap, …). */
    font-size: 80%;
    color: rgb(var(--c-neutral-darker));
    line-height: 1.6;
  }

  & .article__more {
    background: rgb(var(--c-primary));
    color: rgb(var(--c-neutral-lightest));
    text-transform: uppercase;
    text-decoration: none;
    font-weight: var(--f-weight-b);
    /* User asked for one consistent size across every button on the site
       instead of matching each one to its own Live counterpart — same
       canonical fixed size as firstload.css's button/.font__button rule
       (was font-size:70% + padding 0.5em 1em, sized to match Live's smaller
       "more" link specifically; superseded by that later, site-wide
       request). */
    font-size: 18px;
    line-height: 1.4;
    padding: 11px 22px;
    transition: background-color 0.2s ease;
  }
}

@media (hover: hover) {
  .news.-latest .article__more:hover {
    background: rgb(var(--c-primary-dark));
  }
}

.news.-latest .grid__main {
  display: grid;
}

.grid__main .news.-latest.grid__main {
  margin-left: -4%;
  margin-right: -4%;
}

.news.-list .article {
  margin-bottom: var(--g-gap);
}

.news.-list .article__text {
  background: rgb(var(--c-neutral-lightest));
  padding: var(--g-gap-s);
}

.news.-list .headline h3 {
  font-size: 106%;
  color: rgb(var(--c-neutral));
  font-weight: var(--f-weight-b);
  text-transform: uppercase;
  margin-bottom: var(--g-gap-s);
}

.news.-list .article__teaser {
  font-size: 80%;
  color: rgb(var(--c-neutral-darker));
  line-height: 1.6;
}

.article__more {
  display: inline-block;
  margin-top: 1rem;
}

.news.-list .article__more {
  background: rgb(var(--c-primary));
  color: rgb(var(--c-neutral-lightest));
  text-transform: uppercase;
  text-decoration: none;
  font-weight: var(--f-weight-b);
  /* Same canonical size as every other button on the site, see
     firstload.css's button/.font__button rule. */
  font-size: 18px;
  line-height: 1.4;
  padding: 11px 22px;
  transition: background-color 0.2s ease;
}

@media (hover: hover) {
  .news.-list .article__more:hover {
    background: rgb(var(--c-primary-dark));
  }
}

@media (min-width: 800px) {
  .news.-list .article__text {
    padding: var(--g-gap);
  }
}

.article__footer {
  padding-top: var(--g-gap-s);
  border-top: 1px solid rgb(var(--c-neutral-lighter));
}

.media__item {
  margin-bottom: var(--g-gap);
}

.media__item:last-child {
  margin-bottom: 0;
}

.media__image {
  position: relative;
  overflow: hidden;
}

.article__backlink .font__button::before {
  content: '\f323';
  font-family: "FaRegular", sans-serif;
  font-size: var(--f-size-s-2);
  margin-right: 0.4rem;
}

.article__backlink .font__button {
  text-transform: uppercase;
}

.news.-single .article__headline h1 {
  /* Live's .news-single-title (39.072px) matches the site's generic page-
     title size exactly (e.g. Contact page "Contact" h1, same 39.072px) —
     no special override needed, it already inherits the same --f-size-l-4
     sizing as every other h1 site-wide (measured earlier as 17.6px, but
     that was a bad selector match on the wrapping .news-single-title DIV,
     not the actual h1 — corrected). */
  color: rgb(var(--c-neutral));
  font-weight: var(--f-weight-b);
  text-transform: uppercase;
}

.news.-single .article__text {
  /* Live's .news-single-text sits at the plain 17.6px baseline; our
     content context is already at 126% (--f-size on body) → 80% brings it
     back down to that baseline. */
  font-size: 80%;
}


/* =============================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 400px) {
  [data-ce-columns="6"] .gallery__item {
    grid-column: span 4;
  }

  .news.-single .article__media {
    grid-column: span 4;
  }

  .news.-single .article__extra,
  .news.-single .article__text {
    grid-column: span 8;
  }

}

/* Live's own .news-latest-item switches from the 1fr/1fr text|image split
   back to a single full-width column below 640px (source: Live's merged
   CSS) — the 50/50 split only makes sense once there's room for it. */
@media (max-width: 640px) {
  .news.-latest .article {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 640px) {
  .news.-latest {
    & .swiper-slide {
      margin-right: 20px;
      width: calc(50% - 10px);
    }
  }
}

@media (min-width: 700px) {
  .news.-latest .article__text {
    padding: 2em 30px;
  }
}

@media (min-width: 1180px) {
  .news.-latest .article__text {
    padding: 2em 45px;
  }
}

@media (min-width: 800px) {
  .news.-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--g-gap);

    & .f3-widget-paginator {
      grid-column: span 2;
    }
  }
}

@media (min-width: 1024px) {
  .news.-latest {
    & .swiper-slide {
      width: calc(33.33% - 13px);
    }
  }
}

@media (min-width: 1580px) {
  .news.-latest {
    padding: 0 60px;
    margin-right: -60px;
    margin-left: -60px;
  }
}