/* ==========================================================================
   YogaPänz – Blog: Artikelseite, Brotkrumen, Quellen
   ========================================================================== */

.breadcrumb ol {
  list-style: none;
  margin: 0 0 var(--space-m);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--fg-soft);
}

.breadcrumb li + li::before {
  content: '›';
  margin-right: 0.35rem;
  color: var(--leaf-deep);
}

.breadcrumb a {
  color: inherit;
}

.post__head {
  padding-bottom: var(--space-xl);
}

.post__head .lead {
  max-width: 60ch;
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem var(--space-m);
  margin: var(--space-m) 0 0;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--fg-soft);
}

.post__hero {
  background: var(--sand);
}

.post__hero img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 48rem) {
  .post__hero img {
    aspect-ratio: 21 / 9;
  }
}

.post__layout {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
}

@media (min-width: 58rem) {
  .post__layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--space-2xl);
    align-items: start;
  }

  .post__aside {
    position: sticky;
    top: 5.5rem;
  }
}

.post__body {
  max-width: 42rem;
}

.post__body h2 {
  font-size: var(--step-3);
  margin-top: var(--space-xl);
}

.post__body h3 {
  margin-top: var(--space-l);
}

.post__body ol {
  padding-left: 1.4rem;
}

.post__body ol li + li {
  margin-top: var(--space-xs);
}

.post__body .figure {
  margin-block: var(--space-l);
}

.post__note {
  border-left: 4px solid var(--leaf);
  background: var(--paper);
  padding: var(--space-s) var(--space-m);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.post__note p {
  margin: 0;
}

.post__sources {
  font-size: var(--step--1);
  color: var(--ink-soft);
  padding-left: 1.4rem;
}

.post__sources li + li {
  margin-top: var(--space-xs);
}

.post__sources a {
  overflow-wrap: anywhere;
}

.post__author {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--space-m);
  align-items: start;
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--line);
}

.post__author img {
  width: 6rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 100% 0 100% 0;
}

.post__author p {
  margin: 0;
}

.post__box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--petal-sm);
  padding: var(--space-m);
}

.post__box + .post__box {
  margin-top: var(--space-m);
}

.post__box .h3-like {
  font-size: var(--step-1);
  margin-bottom: var(--space-s);
}

.post__box ul {
  margin: 0;
}

.post__box--cta {
  background: var(--leaf-soft);
  border-color: var(--ink);
}

.post__box--cta p {
  margin-bottom: var(--space-s);
}

.post__box--cta .btn + .btn {
  margin-top: var(--space-xs);
}

/* --- Blog-Übersicht ---------------------------------------------------- */

.post-card--featured {
  flex-direction: column;
}

@media (min-width: 58rem) {
  .post-card--featured {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .post-card--featured .post-card__media img {
    height: 100%;
    aspect-ratio: auto;
    min-height: 24rem;
  }

  .post-card--featured .post-card__body {
    padding: var(--space-l);
    justify-content: center;
  }

  .post-card--featured h3 {
    font-size: var(--step-3);
  }
}