/* The Longform blog template: Journal, with the posts of a list as a deck of large cards, and
   a post that opens on its first picture. */

.longform .post,
.longform .entries,
.longform .archive,
.longform .not-found {
  margin: 0 auto;
}

/* The deck. Each card piles onto the ones before it as the reader scrolls. */
.longform .deck {
  --x-scroll-stack-gap: var(--x-space-xl, 1.5rem);
}

.longform .deck-card {
  position: relative;
  overflow: hidden;
  border: var(--x-border-width, 1px) solid var(--x-color-border, #d0d7de);
  border-radius: var(--x-radius-lg, 1rem);
  background: var(--x-color-surface, #fff);
  box-shadow: var(--x-shadow-md, 0 10px 24px rgba(15, 23, 42, 0.10));
}

.longform .deck-card .cover {
  aspect-ratio: 3 / 2;
}

.longform .deck-card h2 {
  font-size: 1.75rem;
}

.longform .deck-card .summary {
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

/* The opening of a post. With a picture, the title stands at the foot of it. The title keeps
   its place in the page and gives the opening its height, and the picture lies behind it. */
.longform .hero {
  display: block;
}

.longform .hero.with-picture {
  position: relative;
  margin-bottom: calc(var(--x-space-xl, 1.5rem) * 1.5);
  border-radius: var(--x-radius-lg, 1rem);
  overflow: hidden;
}

.longform .hero-picture {
  position: absolute;
  inset: -15% 0 auto;
  width: 100%;
  height: 130%;
  object-fit: cover;
}

.longform .hero-picture[hidden] {
  display: none;
}

.longform .hero.with-picture .hero-text {
  position: relative;
}

.longform .hero.with-picture .post-header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  min-height: 60vh;
  margin: 0;
  padding: calc(var(--x-space-xl, 1.5rem) * 3) var(--x-space-xl, 1.5rem) var(--x-space-xl, 1.5rem);
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.7));
  color: #fff;
}

.longform .hero.with-picture .post-header .meta,
.longform .hero.with-picture .post-header .tags a {
  color: rgba(255, 255, 255, 0.85);
}