/*
 * Styling for the news lists:
 * - the front page's carousel (patterns/news-carousel.php)
 * - the cards on the Aktuellt page and under single posts
 *   (patterns/news-cards.php, patterns/latest-news-cards.php, inc/news-card.php)
 *
 * The shared values are in theme.json, under settings.custom.news.
 */

/*
 * Images: the same aspect ratio everywhere, cropped from the bottom so faces
 * and headlines at the top stay visible. Posts without a featured image get
 * a placeholder of the same size.
 */
.vif-news-carousel .wp-block-post-featured-image,
.vif-news-row .wp-block-post-featured-image,
.vif-news-card .wp-block-post-featured-image {
  margin: 0;
}
.vif-news-carousel .wp-block-post-featured-image img,
.vif-news-row .wp-block-post-featured-image img,
.vif-news-card .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--wp--custom--news--image-ratio);
  object-fit: cover;
  object-position: top center;
}
.vif-news-carousel
  .wp-block-post-template
  > li:not(:has(.wp-block-post-featured-image))::before,
.vif-news-row:not(:has(.wp-block-post-featured-image))::before,
.vif-news-card:not(:has(.wp-block-post-featured-image))::before {
  content: "";
  display: block;
  aspect-ratio: var(--wp--custom--news--image-ratio);
  background-color: var(--wp--custom--news--placeholder);
}

/*
 * Carousel
 */
.vif-news-carousel {
  --vif-carousel-visible: 1.15;
}
@media (min-width: 600px) {
  .vif-news-carousel {
    --vif-carousel-visible: 2;
  }
}
@media (min-width: 1000px) {
  .vif-news-carousel {
    --vif-carousel-visible: 3;
  }
}

.vif-news-carousel .wp-block-post-template {
  display: flex;
  gap: var(--wp--custom--news--card-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  padding-bottom: var(--wp--preset--spacing--30);
}
/* Hide the scrollbar once the previous/next buttons are there instead. */
.vif-news-carousel.has-nav .wp-block-post-template {
  scrollbar-width: none;
  padding-bottom: 0;
}
.vif-news-carousel.has-nav .wp-block-post-template::-webkit-scrollbar {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .vif-news-carousel .wp-block-post-template {
    scroll-behavior: auto;
  }
}

.vif-news-carousel .wp-block-post-template > li {
  flex: 0 0
    calc(
      (
          100% - (var(--vif-carousel-visible) - 1) *
            var(--wp--custom--news--card-gap)
        ) / var(--vif-carousel-visible)
    );
  margin: 0;
  scroll-snap-align: start;
}
.vif-news-carousel .wp-block-post-template > li > * + *,
.vif-news-carousel .wp-block-post-template > li > .wp-block-post-date {
  /* The date is the first element when the image is the ::before stand-in,
     which "* + *" doesn't match, so name it too. */
  margin-block-start: var(--wp--preset--spacing--30);
}

/* The date sits above the title. Its extra height is the gap to the title,
   so the title has no top margin. */
.vif-news-carousel .wp-block-post-template > li > .wp-block-post-title {
  margin-block: 0;
}
.vif-news-carousel .wp-block-post-template > li > .wp-block-post-date {
  /* One line plus spacing|20 tall, date centred vertically, aligned left. */
  font-size: 0.75rem;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: calc(1lh + var(--wp--preset--spacing--20));
}

/* Equal-height cards: stretch the excerpt and pin "Läs mer..." to the bottom. */
.vif-news-carousel .wp-block-post-template > li {
  display: flex;
  flex-direction: column;
}
.vif-news-carousel .wp-block-post-template > li > .wp-block-post-excerpt {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Cut long titles by lines too. */
.vif-news-carousel .wp-block-post-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Core makes the title link inline-block, which hides its lines from the clamp. */
.vif-news-carousel .wp-block-post-title a {
  display: inline;
}

/* Cut the excerpt by lines, not words (the pattern lets through up to 60). */
.vif-news-carousel .wp-block-post-excerpt__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.vif-news-carousel .wp-block-post-excerpt__more-text {
  margin-block-start: auto;
  padding-block-start: var(--wp--preset--spacing--30);
  text-align: start;
}

/*
 * Rows (Aktuellt): one post per row, image on the left, title and excerpt on
 * the right. Stacked on narrow screens.
 */
.vif-news-row {
  display: grid;
  /* The image is 35% of the width left after the gap. */
  grid-template-columns:
    calc((100% - var(--wp--custom--news--card-gap)) * 0.35)
    minmax(0, 1fr);
  gap: var(--wp--custom--news--card-gap);
  align-items: start;
}
@media (max-width: 599px) {
  .vif-news-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.vif-news-row > * {
  margin: 0;
}
.vif-news-row__body > * {
  margin: 0;
}
.vif-news-row__body > * + * {
  margin-block-start: var(--wp--preset--spacing--30);
}
.vif-news-row .wp-block-post-date {
  font-size: 0.75rem;
  font-style: italic;
}
.vif-news-row .wp-block-post-title {
  font-size: 1.875rem; /* 1.5 x the large preset (1.25rem) it had */
}

/*
 * Previous/next buttons, added by assets/js/news-carousel.js to the header
 * row, to the right of the heading.
 */
.vif-news-carousel__nav {
  display: flex;
  flex-shrink: 0;
  gap: var(--wp--preset--spacing--20);
}
.vif-news-carousel__nav[hidden] {
  display: none;
}
.vif-news-carousel__nav button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--wp--preset--color--red);
  color: var(--wp--preset--color--base);
  cursor: pointer;
}
.vif-news-carousel__nav svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}
.vif-news-carousel__nav button:disabled {
  opacity: 0.35;
  cursor: default;
}

/*
 * Cards: image on top, then title and excerpt, then the footer at the bottom.
 */
.vif-news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.vif-news-card > * {
  margin: 0;
}

.vif-news-card__body {
  flex: 1;
  padding: var(--wp--preset--spacing--40);
}
.vif-news-card__body > * {
  margin: 0;
}
.vif-news-card__body > * + * {
  margin-block-start: var(--wp--preset--spacing--30);
}

.vif-news-card__footer {
  display: flex;
  justify-content: flex-end;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  border-top: 2px solid var(--wp--preset--color--pink);
}
.vif-news-card__footer .wp-block-read-more {
  font-weight: 700;
}