@charset "utf-8";

/* ==================================================
 * ==================================================
 * single-news
 * ==================================================
 * ================================================== */
.single-news > .section{
  min-height: 100svh;
}
.single-news > .section > .section__panel{
  --section-space-top: calc(var(--layout-header-height) + var(--space-panel-block));
}

/* ==================================================
 * ==================================================
 * news-article
 * ==================================================
 * ================================================== */
.news-article{
  --news-article-date-color: var(--color-fg-base);
  --news-article-date-color-updated: rgba(0,0,0,.40);

  min-width: 0;
}
.news-article__inner{
  display: grid;
  row-gap: clamp(2rem, 4vw, 4rem);
  width: min(100%, 48rem);
  min-width: 0;
  margin-inline: auto;
}
.news-article__main{
  display: grid;
  row-gap: clamp(2rem, 4vw, 4rem);
  min-width: 0;
}

/* ==================================================
 * news-article header
 * ================================================== */
.news-article__header{
  display: grid;
  row-gap: clamp(0.75rem, 1.5vw, 1.5rem);
  min-width: 0;
}
.news-article__meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  min-width: 0;
}
.news-article__date{
  color: var(--news-article-date-color);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.news-article__date--updated{
  color: var(--news-article-date-color-updated);
}
.news-article__date-icon{
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
}
.news-article__date-icon > svg{
  width: 100%;
}
.news-article__date-text{
  min-width: 0;
}
.news-article__title{
  font-size: var(--fs-5xl);
  font-weight: 500;
  line-height: 1.4;
  min-width: 0;
}

/* ==================================================
 * news-article media
 * ================================================== */
.news-article__media{
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.news-article__image{
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* ==================================================
 * news-article content
 * ================================================== */
.news-article__content{
  font-size: var(--fs-lg);
  display: grid;
  row-gap: 1rem;
  min-width: 0;
}
.news-article__content > *{
  min-width: 0;
}

/* ==================================================
 * news-article sections
 * ================================================== */
.news-article__sections{
  display: grid;
  row-gap: clamp(2rem, 4vw, 4rem);
  min-width: 0;
}
.news-article__lead{
  font-size: var(--fs-lg);
  display: grid;
  row-gap: 1rem;
  min-width: 0;
}
.news-article__lead > *{
  min-width: 0;
}
.news-article__section{
  display: grid;
  row-gap: clamp(1rem, 2vw, 2rem);
  min-width: 0;
}
.news-article__section-title{
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.6;
  min-width: 0;
  text-wrap: balance;
}
.news-article__section-content{
  font-size: var(--fs-lg);
  display: grid;
  row-gap: 1rem;
  min-width: 0;
}
.news-article__section-content > *{
  min-width: 0;
}

/* ==================================================
 * news-article footer
 * ================================================== */
.news-article__footer{
  display: grid;
  row-gap: clamp(2rem, 4vw, 4rem);
  min-width: 0;
}

/* ==================================================
 * news-article back
 * ================================================== */
.news-article__back{
  display: flex;
  justify-content: flex-start;
}
.news-article__back-link{
  font-size: var(--fs-sm);
  display: inline-flex;
  align-items: center;
  column-gap: 0.5rem;
}
.news-article__back-link-icon{
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
}
.news-article__back-link-icon > svg{
  width: 100%;
}