/* =============================================================================
   Newsletter page: publication covers.
   A cover is the whole item: nothing sits beside it. Clicking opens the piece
   in a dialog (newsletter-shelf.js); without JS the cover links to the page.
   ============================================================================= */

/* ---- Page layout: issues in the left two-thirds, subscribing in the right third ---- */
.nl-page-grid {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2.5rem; align-items: start;
}
/* Feature cover beside the dated issues, inside the left column. */
.nl-main {
  display: grid; grid-template-columns: 336px minmax(0, 1fr);
  gap: 1.5rem; align-items: start;
}
.nl-side { display: flex; flex-direction: column; gap: 2rem; }
.nl-side .nl-card { max-width: none; }
.nl-side .nl-copy h2 { margin-top: 0; }
@media (max-width: 1080px) { .nl-main { grid-template-columns: 1fr; } .nl-main .pub-cover { width: min(100%, 340px); } }
@media (max-width: 860px) { .nl-page-grid { grid-template-columns: 1fr; } }

/* ---- Newsletter banner: trimmed, copy lifted into the dark space ---- */
.hero-banner.hero-banner--compact { min-height: clamp(17rem, 34vh, 22rem); align-items: center; }
.hero-banner--compact .hero-banner-copy { padding-block: var(--sp-6, 2.5rem); }

/* ---- The cover ------------------------------------------------------------ */
.pub-cover {
  position: relative;
  display: flex; flex-direction: column;
  width: min(100%, 340px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 6px;
  background: var(--i4-teal-deep, #003a38);
  color: #fff; text-decoration: none;
  box-shadow: 0 18px 40px -18px rgba(0, 38, 36, .55), 0 2px 6px rgba(0, 38, 36, .18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pub-cover:hover, .pub-cover:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -18px rgba(0, 38, 36, .6), 0 4px 10px rgba(0, 38, 36, .2);
}
.pub-cover:focus-visible { outline: 3px solid var(--i4-orange, #f7941e); outline-offset: 4px; }

.pub-cover-top {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem 0;
  align-items: center;
  font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
}
.pub-cover-logo { width: 128px; height: auto; display: block; }
.pub-cover-kicker {
  margin: 1.4rem 1.25rem 0;
  font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #ffa033;   /* 4.7:1 on the deep teal, AA */
}
.pub-cover-title {
  margin: .35rem 1.25rem 0;
  max-width: 9ch;
  font-size: 2.35rem; line-height: .98; font-weight: 800;
  letter-spacing: -.02em; text-transform: uppercase;
  text-wrap: balance;
}
.pub-cover-by {
  margin: .7rem 1.25rem 0;
  font-size: .875rem; line-height: 1.35; color: rgba(255, 255, 255, .9);
}

/* Cover text always sits above the photo layer. */
.pub-cover-top, .pub-cover-kicker, .pub-cover-title, .pub-cover-by { position: relative; z-index: 1; }

/* Photo fills the lower half, fading up into the cover colour. */
.pub-cover-photo {
  position: absolute; inset: auto 0 0 0; height: 52%;
}
.pub-cover-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-cover-photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--i4-teal-deep, #003a38) 0%, rgba(0, 58, 56, 0) 38%);
}

/* Orange contents block, as on a magazine cover: one numbered line per
   section, right-aligned, so it reads as a list and not as one sentence. */
.pub-cover-contents {
  position: absolute; right: 0; bottom: 1.25rem;
  display: flex; flex-direction: column; align-items: flex-end; gap: .45rem;
  padding: .85rem 1rem .9rem 1.1rem;
  max-width: 70%;
  background: var(--i4-orange-dark, #d97a0a);
  color: #1a1206; text-align: right;
  font-size: .875rem; font-weight: 700; line-height: 1.25;
}
.pub-cover-contents > span { display: flex; align-items: baseline; justify-content: flex-end; gap: .5rem; }
.pub-cover-contents b { font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .pub-cover, .pub-cover:hover, .pub-cover:focus-visible { transition: none; transform: none; }
}

/* ---- The dialog ------------------------------------------------------------- */
.letter-dialog {
  width: min(760px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  padding: 0; border: 0; border-radius: 8px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
}
.letter-dialog::backdrop { background: rgba(0, 30, 29, .72); }
.letter-dialog-close {
  position: sticky; top: .75rem; float: right; z-index: 2;
  border: 2px solid #fff !important;
  margin: .75rem .75rem 0 0;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--i4-teal-deep, #003a38); color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.letter-dialog-close:focus-visible { outline: 3px solid var(--i4-orange, #f7941e); outline-offset: 2px; }
.letter-dialog .board-letter { padding: 1.25rem clamp(1rem, 4vw, 2.25rem) 2.25rem; }
.letter-dialog .letter-head { margin-top: .25rem; }

/* ---- Dated items: the running list beside the feature cover ---------------- */
.pub-list { display: flex; flex-direction: column; gap: 1rem; }
.pub-item {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 1.25rem;
  padding: 1.1rem 1.25rem 1.2rem 1.1rem;
  border: 1px solid var(--line, #d5e0de); border-radius: 10px;
  background: #fff; color: inherit; text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pub-item:hover, .pub-item:focus-visible {
  border-color: var(--i4-teal, #00b0ad);
  box-shadow: 0 10px 24px -14px rgba(0, 58, 56, .45);
}
.pub-item:focus-visible { outline: 3px solid var(--i4-orange, #f7941e); outline-offset: 3px; }
.pub-item-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  align-self: start; min-height: 84px; padding: .5rem .25rem;
  border-radius: 8px; background: var(--i4-teal-deep, #003a38); color: #fff; text-align: center;
}
.pub-item-date .d { font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.pub-item-date .m { margin-top: .3rem; font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffa033; }
.pub-item-body { display: flex; flex-direction: column; gap: .3rem; }
.pub-item-type { font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--i4-orange-dark, #d97a0a); }
.pub-item-title { font-family: var(--font-serif, "Source Serif 4", Georgia, serif); font-size: 1.375rem; line-height: 1.25; font-weight: 700; color: var(--i4-teal-deep, #003a38); }
.pub-item-excerpt { font-size: 1rem; line-height: 1.55; color: var(--ink-soft, #3d5250); }
.pub-item-more { margin-top: .35rem; font-size: 1rem; font-weight: 700; color: var(--i4-teal-dark, #004d4b); }
@media (prefers-reduced-motion: reduce) { .pub-item { transition: none; } }