/* =============================================================================
   Newsletter — scoped to body.news-page (news.php)
   -----------------------------------------------------------------------------
   Every colour here comes from the tokens in custom.css, so dark mode needs no
   rules of its own: [data-bs-theme="dark"] redefines the tokens and this file
   follows. Nothing is hardcoded except the A4 aspect ratio.

   The filter rail is not here: news.php reuses .ev-filters / .ev-pill / .seg-thumb
   from custom.css, because it is the same control the events page has — the only
   difference is that these segments are links and the server decides which is
   active (see initSegRail in site.js).

   The grid does NOT reuse .bl-card either, for one real reason: a blog cover is a
   16:9 photograph that should fill its frame, while a newsletter cover is a
   portrait A4 page that must be shown whole. Cropping a magazine cover cuts the
   masthead off it.
   ========================================================================== */

/* ---- The shelf ----------------------------------------------------------- */

.news-page .nw-card {
  display: flex; flex-direction: column; height: 100%;
  transition: transform .2s ease;
}
.news-page .nw-card:not(.is-soon):hover { transform: translateY(-3px); }

.news-page .nw-cover {
  display: block; position: relative;
  /* A4 portrait, exactly. The covers arrive at 595 × 842 and are shown whole, so
     the box has to be the same shape as the artwork or there is letterboxing. */
  aspect-ratio: 1 / 1.414;
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.news-page .nw-card:not(.is-soon):hover .nw-cover {
  border-color: var(--accent); box-shadow: 0 .75rem 1.5rem rgba(23, 48, 77, .12);
}
/* contain, not cover: a cover that is not exactly A4 is shown smaller rather than
   cropped, because the top of a magazine cover is the part that identifies it. */
.news-page .nw-cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.news-page .nw-cover .ph { position: absolute; inset: 0; border-radius: 0; }

/* The volume badge, borrowed from .ev-type on the events rows. */
.news-page .nw-vol {
  position: absolute; left: .55rem; bottom: .55rem;
  padding: .3rem .65rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--nav-font); font-size: .72rem; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.news-page .nw-body { padding: .7rem .15rem 0; }
.news-page .nw-body h3 { font-size: .98rem; line-height: 1.35; margin: 0 0 .2rem; text-wrap: balance; }
.news-page .nw-body h3 a { color: var(--ink); text-decoration: none; }
.news-page .nw-card:hover .nw-body h3 a { color: var(--accent); }
.news-page .nw-body time { font-size: .82rem; color: var(--ink-soft); }

/* ---- Not out yet --------------------------------------------------------
   An unlinked tile has to LOOK unlinked, or it reads as a broken link. The live
   site shipped three broken <img> tags in this slot; this is the same intent,
   done so that it is obviously deliberate. */
.news-page .nw-card.is-soon .nw-cover {
  border-style: dashed; background: transparent;
}
/* Only the artwork is held back, not the "Coming soon" chip sitting on top of it:
   dimming the whole box would dim the one thing that explains the box. */
.news-page .nw-card.is-soon .nw-cover img,
.news-page .nw-card.is-soon .nw-cover .ph { opacity: .45; filter: saturate(.35); }
.news-page .nw-card.is-soon .nw-body h3 { color: var(--ink-soft); }
.news-page .nw-soon {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: .35rem .8rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft);
  font-family: var(--nav-font); font-size: .74rem; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; white-space: nowrap;
}

.news-page .nw-empty {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 2.5rem 1.5rem; text-align: center; color: var(--ink-soft);
}

/* ---- The breadcrumb trail -------------------------------------------------
   custom.css styles .breadcrumbs inside .page-hero and .story-hero, but the
   .story-hero rule (which is the one this page gets) sets only the alignment
   and the link colours — not the size. So the size is set here. */
.news-page .breadcrumbs { font-size: .88rem; color: var(--ink-soft); }
.news-page .breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.news-page .breadcrumbs a:hover { color: var(--accent); }

/* An issue opens on heyzine, in a new tab — the glyph beside the title says so.
   Sized in em so it follows the heading down at the 575px step below. */
.news-page .nw-body h3 a .nw-ext {
  font-size: .72em; margin-left: .3em; opacity: .55; vertical-align: baseline;
}

/* ---- Narrow screens ------------------------------------------------------ */
@media (max-width: 575.98px) {
  .news-page .nw-body h3 { font-size: .9rem; }
  .news-page .nw-vol { font-size: .66rem; padding: .25rem .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .news-page .nw-card, .news-page .nw-cover { transition: none; }
  .news-page .nw-card:not(.is-soon):hover { transform: none; }
}