/*
 * Distribution page styling.
 * Auto-loaded by header.php's cache-busting stylesheet helper.
 *
 * Mirrors the /catalogue and /alongside idioms — hidden h1, editorial
 * intro at top, shop-grid for the book sections. Distribution-specific
 * bits: section headings (quiet grey label style, matching the home
 * strip headings so the whole site reads as one system), and the
 * bottom CTA block leading through to the auth-gated /trade portal.
 */


/* === Hide the redundant "Distribution" h1 — all viewports =================
   Same idiom as .shop > .h1, .catalogue > .h1, .alongside > .h1: the
   URL, footer link, and About-page "distribute" link already tell the
   visitor where they are. The intro paragraph carries the editorial
   identity. Visually hidden but kept in markup for SEO + screen readers. */
.distribution > .h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* === Editorial intro above the sections ============================== */
.distribution-intro {
  max-width: 36rem;
  margin: 0 0 3rem;
  line-height: 1.5;
}


/* === Section headings ================================================
   Matches the .home-strip-title idiom — small, quiet grey, an
   editorial label rather than a shouty h2. Reads as one system across
   the home strips and this page. */
.distribution-section {
  margin: 0 0 3rem;
}
.distribution-section-title {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-grey);
  letter-spacing: .01em;
  margin: 0 0 1rem;
}


/* === Grid ============================================================
   Inherits from the global .shop-grid — cover aspect ratio, caption
   spacing, hover. This class is a hook for future distribution-
   specific overrides only; nothing needed today. */
.distribution-grid {
  /* placeholder for future distribution-specific grid overrides */
}


/* === CTA to wholesale portal =========================================
   Sits at the bottom of the page. Editorial footnote treatment above
   (thin top-rule, muted intro line) leading into a clear black button.
   Same solid-black button idiom as the wood-issue "Open the poster
   edition" CTA — reads consistently across the site as "primary
   action, opens the next surface". */
.distribution-cta {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-light);
  max-width: 36rem;
}
.distribution-cta-copy {
  margin: 0 0 1rem;
  color: var(--color-text-grey);
  line-height: 1.5;
}
.distribution-cta-link {
  margin: 0;
}
.distribution-cta-link a {
  display: inline-block;
  padding: .75rem 1.25rem;
  background: var(--color-black);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  transition: opacity .18s ease;
}
.distribution-cta-link a:hover,
.distribution-cta-link a:focus {
  opacity: .8;
}