/*
-----------------------------------------
TEASERS
Inläggskort i tre kolumner (källans .section.teasers), filterknappar för kategorier och sidnumrering.
Korten har samma höjd på rubrik och text i hela sektionen: main.js mäter och sätter --teaser-title-height och --teaser-text-height på listan.
-----------------------------------------
*/

.teasers {
  --teaser-title-height: auto;
  --teaser-text-height: auto;
}

.teasers__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-30);
  padding: 0 var(--space-15) var(--space-30);
}

@media (width >= 768px) {
  .teasers__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.teaser-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-card);
  color: var(--text-inverse);
  text-align: left;
}

.teaser-card__media {
  display: block;
  flex: none;
  block-size: var(--size-teaser-image);
  background: var(--surface-image-empty);
}

.teaser-card__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.teaser-card__header {
  margin-block-end: var(--space-10);
  padding-block: var(--space-20) var(--space-5);
}

.teaser-card__title {
  min-block-size: var(--teaser-title-height);
  margin: var(--space-20) var(--space-20) var(--space-10);
  font: var(--font-title-card);
}

.teaser-card__categories {
  margin: 0 var(--space-20);
  font: var(--font-label);
  color: var(--text-inverse);
}

.teaser-card__categories .icon {
  margin-inline-end: var(--space-5);
  font-size: var(--fs-14);
}

.teaser-card__text {
  flex: 1 0 auto; /* texten tar upp lediga höjden, så "Läs mer" ligger längst ned också när korten har olika höjd */
  min-block-size: var(--teaser-text-height);
  margin: 0 var(--space-20);
  font: var(--font-card-text);
}

/* Läs mer behåller sin färg i hover (bara understrykning), som på källsajten */
.teaser-card__more:hover,
.teaser-card__more:focus {
  color: var(--text-link);
}

.teaser-card__more {
  display: block;
  margin-block-start: var(--space-10);
  padding: var(--space-10) var(--space-20);
  border-block-start: var(--border-width) solid var(--border-card);
  font: var(--font-link-more);
  text-transform: uppercase;
}

/* Filterknappar för kategorier (källans .filter .nav-pills) */
.pill-nav {
  margin-block: var(--space-5) var(--space-30);
  text-align: center;
}

/* Som Bootstraps nav-pills: en inline-block-lista med flytande poster. Raden blir 6 px högre än knapparna (listans baslinje är nederkanten), som på källsajten. */
.pill-nav__list {
  display: inline-block;
}

.pill-nav__item {
  float: left;
  margin-inline-end: 0.3rem;
}

.pill-nav__item + .pill-nav__item {
  margin-inline-start: 0.2rem; /* Bootstraps nav-pills > li + li */
}

.pill-nav__link {
  display: block;
  padding: 0.4rem var(--space-20);
  border: var(--border-width) solid var(--border-pill);
  border-radius: var(--radius-pill);
  font: var(--font-weight-regular) var(--fs-18) / 2.7rem var(--font-family-heading);
  color: var(--text-link);
}

.pill-nav__link:hover,
.pill-nav__link:focus {
  background: var(--color-grey-ee);
  text-decoration: none;
}

.pill-nav__link[aria-current] {
  background: var(--text-link);
  color: var(--text-inverse);
}

/* Sidnumrering: orangea rutor med en pixels mellanrum (källans .pagination) */
.pager {
  text-align: center;
}

/* Som Bootstraps pagination: en inline-block-lista med flytande rutor och 24 px marginal ovanför och under (raden blir 6 px högre än rutorna, som på källsajten) */
.pager__list {
  display: inline-block;
  margin-block: var(--space-24);
}

.pager__list > li {
  display: inline;
}

.pager__link,
.pager__current,
.pager__gap {
  float: left;
  margin-inline-end: 0.1rem;
  padding: 0.6rem 1.2rem;
  background: var(--text-link);
  color: var(--text-inverse);
  font: var(--font-weight-regular) var(--fs-16) / 2.4rem var(--font-family-heading);
}

/* Ingen hover: i källans regel för sista listposten (alla länkar ligger i en enda li) skriver färg, bakgrund och kant över Bootstraps hover */
.pager__link:hover,
.pager__link:focus {
  color: var(--text-inverse);
  text-decoration: none;
}

.teasers__empty {
  text-align: center;
}