/* Shared pieces of the three listing pages (shop, journal, gatherings):
   hero image + intro paragraph.
   Intro inset matches .chips exactly so the two left edges line up. */

/* bottom padding is half the top on purpose — the intro sits closer to
   the hero than the hero does to the header */
.collection-hero {
  display: block;
  width: 100%;
  height: auto;
  padding-block: 1rem 0.5rem;
}

@media (min-width: 72rem) {
  .collection-hero {
    max-width: 61.875rem; /* 990px — never upscaled past the artwork */
    margin-inline: auto;
    padding-block: 3.75rem 1.875rem;
  }
}

.collection-intro {
  margin: calc(var(--space-3) / 2) 0 calc(var(--space-2) + 0.625rem); /* 10px past the token, to clear the chips */
  padding-inline: calc(var(--gutter) + 1%);
}

.collection-intro p {
  /* 45-75 characters per line is the readable measure, 66 the classic ideal;
     WCAG 1.4.8 caps it at 80. ch tracks the local font, so it holds under zoom. */
  max-width: 66ch;
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  font-style: italic;
  line-height: 1.45;
}

.collection-intro p + p {
  margin-top: var(--space-2);
}

@media (min-width: 72rem) {
  .collection-intro p {
    max-width: 52.8ch; /* 66ch less 20%, still inside the 45-75 readable range */
  }
}