/*
 * Alongside page styling.
 * Auto-loaded by header.php's cache-busting stylesheet helper.
 *
 * Direct mirror of catalogue.css — same idioms, same treatments. The
 * visual rhythm comes from the shared .shop-grid + .book-card styles
 * in index.css. This file just handles the alongside-specific bits:
 * hidden h1, intro paragraph, and the editorial footnote treatment
 * for the curator's note.
 */


/* === Hide the redundant "Alongside" h1 — all viewports =================
   Same idiom as .shop > .h1, .contact > .h1, .about > .h1, .catalogue > .h1.
   The URL and the intro paragraph carry the editorial identity;
   the raw title reads redundant. Visually hidden but kept in markup
   for SEO + screen readers. */
.alongside > .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 grid ================================== */
.alongside-intro {
  max-width: 36rem;
  margin: 0 0 2rem;
  line-height: 1.5;
}


/* === Alongside grid ====================================================
   Inherits from .shop-grid — this class is for future targeted overrides
   only. No rules needed today; the shared grid styles handle layout,
   gaps, and the cover aspect ratio (with contain). */
.alongside-grid {
  /* placeholder for future alongside-specific grid overrides */
}


/* === Curator's note / suggestion invitation ===========================
   Editorial footnote treatment — thin top-rule above, lighter text.
   Same pattern as the /about page's footnote block and .catalogue-rights.
   Tells the reader this is meta-information about the selection, not
   the selection itself. Capped at body-text width. */
.alongside-note {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-light);
  max-width: 36rem;
  font-size: .9rem;
  color: var(--color-text-grey);
  line-height: 1.5;
}
.alongside-note a {
  color: inherit;
  border-bottom: 1px solid currentColor;
  transition: opacity .2s;
}
.alongside-note a:hover {
  opacity: .6;
}