/*
-----------------------------------------
ARTICLE
Inlägget (källans article.post): en spalt i containerns bredd med tunna sidolinjer, utvald bild överst, rubrik, kategorietikett, delningsknappar,
texten (ingressen) och två spalter under den, Föregående och Nästa och inläggssektionerna (Tips och Inspiration) längst ned i samma ram.
-----------------------------------------
*/

/* Bred bild överst (källans figure.featured-image-full): direkt under sidhuvudet i fönstrets bredd, beskuren till en fast höjd som växer med fönstret. Inlägget följer direkt under. */
.article-hero__image {
  inline-size: 100%;
  block-size: var(--size-article-hero-sm);
  object-fit: cover;
}

@media (width >= 768px) {
  .article-hero__image {
    block-size: var(--size-article-hero-md);
  }
}

@media (width >= 1085px) {
  .article-hero__image {
    block-size: var(--size-article-hero-lg);
  }
}

@media (width >= 1200px) {
  .article-hero__image {
    block-size: var(--size-article-hero-xl);
  }
}

.article {
  border-inline: var(--border-width) solid var(--border-article);
  text-align: left;
}

.article__image {
  inline-size: 100%;
  block-size: auto;
}

.article__header {
  padding: var(--space-20) var(--space-20) var(--space-30);
}

.article__title {
  margin: 0 0 var(--space-10);
  font-size: var(--fs-40);
  font-weight: var(--font-weight-medium);
  line-height: 4.4rem;
}

.article__categories {
  margin: 0;
  font: var(--font-label);
}

.article__categories .icon {
  color: var(--text-muted);
  font-size: var(--fs-14);
}

.share {
  margin-block-start: var(--space-10);
}

.share__list {
  display: flex;
}

.share__item {
  margin: var(--space-5);
}

.share__link {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-share);
  block-size: var(--size-share);
  border-radius: var(--radius-round);
  color: var(--text-inverse);
}

.share__link:hover,
.share__link:focus {
  color: var(--text-inverse);
  text-decoration: none;
}

/* I hover tar länken färgen som Shariff-knappen (ramen runt länken) har bakom sig */
.share__link--twitter {
  background: var(--color-twitter);
}

.share__link--twitter:hover {
  background: var(--color-twitter-hover);
}

.share__link--facebook {
  background: var(--color-facebook);
}

.share__link--facebook:hover {
  background: var(--color-facebook-hover);
}

/* Källans Shariff-SVG är 32 x 20 px (symbolen skalas in i höjden och ligger i mitten) */
.share__icon {
  inline-size: 3.2rem;
  block-size: 2rem;
}

/* Texten: ingressen (hela bredden) och sedan två spalter som flyter bredvid varandra. Innehållet rymmer flytet (overflow). */
.article__content {
  overflow: hidden;
  padding: 0 var(--space-20) var(--space-20);
}

/* Luften under ingressen finns bara när spalter följer: ett inlägg med bara ingress har innehållets 20 px och inget mer (källans .ingress finns bara i inlägg med spalter) */
.article__lead:not(:last-child) {
  padding-block-end: var(--space-20);
}

.article__column {
  float: left;
  inline-size: 46%;
}

.article__column--left {
  margin-inline-end: 8%;
}

@media (width < 768px) {
  .article__column {
    inline-size: 100%;
    margin: 0;
  }
}

/* Föregående och Nästa: på samma rad, utan egen höjd. Raden ligger i övre kanten av sektionen som följer, som på källsajten. */
.article__nav {
  display: flex;
  justify-content: space-between;
  block-size: 0;
  overflow: visible;
}

.article__nav--alone {
  block-size: auto;
  padding-block-end: var(--space-30);
}

.article__sections {
  margin-inline: calc(-1 * var(--space-15));
}

/* Under 1085 px flyter inte kolumnerna (källans col-md-4) utan ligger under varandra: Föregående, en tom rad (24 px) och Nästa, så raden tar plats före sektionen */
@media (width < 1085px) {
  .article__nav {
    display: block;
    block-size: auto;
  }

  .article__nav-prev {
    display: block;
    min-block-size: 0.1rem;
  }

  .article__nav-next {
    display: block;
    min-block-size: 0.1rem;
    margin-block-start: 2.4rem;
    text-align: right;
  }
}