/* ==========================================================================
   Newsletter edition sections (inc/newsletter-sections.php), shared by the
   online edition (single-newsletter.php) and the print view
   (template-parts/newsletter-print.php, + newsletter-print.css).
   Section colours follow the PDF (orange / purple / cyan) in darker tones so
   white text keeps 4.5:1 contrast.
   ========================================================================== */

.nl-section {
  --nl-accent: var(--purple);
  --nl-soft: var(--purple-tint);
}

.nl-section.is-orange { --nl-accent: var(--orange-deep); --nl-soft: var(--orange-tint); }
.nl-section.is-cyan { --nl-accent: var(--cyan-ink); --nl-soft: var(--cyan-tint); }
.nl-section.is-purple { --nl-accent: var(--purple); --nl-soft: var(--purple-tint); }

/* Online layout: contents rail + sections. */
.nl-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 40px;
  align-items: center;
}

.nl-hero-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 210 / 297;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

.nl-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-top: 56px;
  padding-bottom: 72px;
}

/* Grid items may shrink below their content (the chip row scrolls instead of
   widening the page). */
.nl-layout > * {
  min-width: 0;
}

.nl-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* Never wider than the column on phones. */
  gap: 56px;
  min-width: 0;
}

/* Section header band. */
.nl-section {
  scroll-margin-top: calc(var(--nav-height) + 20px);
}

.nl-section-head {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 22px 26px;
  border-radius: var(--radius-lg);
  background: var(--nl-accent);
  color: #fff;
}

.nl-section-number {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--ds-icon-lg);
  height: var(--ds-icon-lg);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .16);
  font-size: var(--text-xl);
  font-weight: 700;
}

.news-page .nl-section-head h2,
.nl-section-head h2 {
  margin: 2px 0 4px;
  color: #fff;
  font-size: var(--text-h3);
  line-height: 1.1;
}

.nl-section-summary {
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: var(--text-md);
}

.nl-section-body {
  margin-top: 22px;
}

.nl-to-contents {
  display: inline-block;
  margin-top: 16px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.nl-to-contents:hover {
  color: var(--purple);
}

.nl-intro {
  margin: 0 0 16px;
  color: var(--muted);
}

/* Sub-sections ("Ongoing all quarter", "The quarter at a glance"). The
   .news-page variant beats news-media.css's ".news-page h3 { margin: 0 }". */
.nl-subhead,
.news-page .nl-section .nl-subhead {
  margin: 40px 0 14px;
  color: var(--nl-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.news-page .nl-section h3.nl-subhead {
  font-size: var(--text-sm);
}

/* Save the Date: two events a row (a shorter list); a lone event, or the odd
   last one, spans the row. In a half-width card the action goes under the
   text; a full-width card keeps it on the right. */
.nl-events {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nl-event {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  align-content: start;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--mist);
}

.nl-event-date {
  display: grid;
  place-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--nl-soft);
  color: var(--nl-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.nl-event-date b {
  color: var(--ink);
  font-size: var(--text-xl);
}

.nl-event-meta,
.nl-event-people {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.nl-event h3 {
  margin: 3px 0;
  font-size: var(--text-base);
  line-height: 1.3;
}

.nl-event h3 a {
  color: var(--ink);
}

.nl-event h3 a:hover {
  color: var(--purple);
  text-decoration: underline;
}

.nl-event-link {
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--nl-accent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.nl-event-link {
  grid-column: 2;
  justify-self: start;
}

.nl-event-date {
  align-self: start;
}

/* .is-wide: a lone last event (odd count), set by pmilc_newsletter_render_events(). */
.nl-event.is-wide .nl-event-date {
  align-self: center;
}

.nl-event.is-wide {
  grid-column: 1 / -1;
  grid-template-columns: 64px minmax(0, 1fr) auto;
}

.nl-event.is-wide .nl-event-link {
  grid-column: auto;
}

.nl-ongoing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.nl-ongoing-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--purple-tint);
}

.nl-ongoing-card b {
  color: var(--ink);
}

.nl-ongoing-card p {
  margin: 4px 0 12px;
  color: var(--muted);
  font-size: var(--text-md);
}

.nl-ongoing-card a {
  margin-top: auto;
  color: var(--purple);
  font-size: var(--text-md);
  font-weight: 700;
}

/* By the Numbers / Certifications tiles. */
.nl-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.nl-figure {
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: var(--nl-soft);
}

/* Print view: every second and third tile of a row in orange / teal, set as classes by the renderers (Paged.js, which
   lays out the print view, mishandles :nth-child(3n+2)). */
.nl-figure.is-tint-orange { background: var(--orange-tint); }
.nl-figure.is-tint-cyan { background: var(--cyan-tint); }

.nl-figure b {
  display: block;
  color: var(--nl-accent);
  font-size: var(--text-3xl);
  line-height: 1.05;
}

.nl-figure span {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-weight: 700;
}

.nl-figure small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--text-sm);
}

.nl-figures--credentials .nl-figure {
  text-align: center;
}

.nl-glance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.nl-glance-month {
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--mist);
}

.nl-glance-month span {
  display: block;
  color: var(--nl-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.nl-glance-month b {
  display: block;
  margin: 4px 0 6px;
  color: var(--ink);
}

.nl-glance-month ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--muted);
  font-size: var(--text-md);
}

.nl-total {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-bottom: 14px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.nl-total > b {
  color: var(--nl-accent);
  font-size: var(--text-4xl);
  line-height: 1;
}

.nl-total strong {
  display: block;
  color: var(--ink);
  font-size: var(--text-lead);
}

.nl-total span {
  display: block;
  color: var(--muted);
  font-size: var(--text-md);
}

/* Word from the Chapter. */
.nl-letter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 32px;
  align-items: start;
}

.nl-letter-body h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: var(--text-xl);
}

.nl-letter-body p {
  color: var(--muted);
}

.nl-letter-body blockquote {
  margin: 20px 0;
  padding: 16px 20px;
  border-left: 4px solid var(--nl-accent);
  background: var(--nl-soft);
  color: var(--nl-accent);
  font-size: var(--text-lead);
  font-style: italic;
  font-weight: 700;
}

.nl-letter-body blockquote p {
  margin: 0;
  color: inherit;
}

.nl-letter-quote cite {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 600;
}

.nl-letter-author {
  display: grid;
  gap: 4px;
  padding: 12px 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
}

.nl-letter-author img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-md);
}

.nl-letter-author b {
  margin-top: 6px;
  color: var(--ink);
}

.nl-letter-author span {
  color: var(--muted);
  font-size: var(--text-sm);
}

.nl-letter-author .button {
  margin-top: 10px;
  justify-self: center;
}

/* Meet Your Board. */
.nl-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 18px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nl-board a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--ink);
  text-align: center;
}

.nl-board img,
.nl-initials {
  width: 92px;
  height: 92px;
  margin-bottom: 6px;
  border-radius: var(--radius-round);
  object-fit: cover;
}

/* Match About's portraits: retain the top of the photo inside each frame. */
.nl-board img {
  object-position: center top;
}

.nl-initials {
  display: grid;
  place-items: center;
  background: var(--purple);
  color: #fff;
  font-weight: 700;
}

.nl-board b {
  font-size: var(--text-md);
  line-height: 1.25;
}

.nl-board span {
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.nl-board a:hover b {
  color: var(--purple);
  text-decoration: underline;
}

/* Monthly Talks. */
.nl-talk {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 22px;
  padding: 20px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--nl-accent);
  border-radius: var(--radius-lg);
  background: #fff;
}

.nl-talk + .nl-talk {
  margin-top: 16px;
}

.nl-talk-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  align-content: start;
}

.nl-talk-photos img,
.nl-talk-photos .nl-initials {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.nl-talk-photos > :only-child {
  grid-column: 1 / -1;
}

/* "PMILC Events" cards: the event's type above the facts (as the event cards' type label). */
.nl-talk-type {
  display: block;
  margin: 0 0 8px;
  color: var(--nl-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.nl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.nl-chips li {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--nl-soft);
  color: var(--nl-accent);
  font-size: var(--text-xs);
  font-weight: 700;
}

.nl-talk h3,
.nl-spotlight h3 {
  margin: 0 0 4px;
  font-size: var(--text-lg);
  line-height: 1.25;
}

.nl-talk h3 a,
.nl-spotlight h3 a {
  color: var(--ink);
}

.nl-talk h3 a:hover,
.nl-spotlight h3 a:hover {
  color: var(--purple);
  text-decoration: underline;
}

.nl-talk-by {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: var(--text-md);
  font-style: italic;
}

/* "and 8 more speakers →" (to the event page's speaker cards). */
.nl-talk-by a {
  color: var(--purple);
  font-weight: 700;
}

/* "Organized with …", under the speakers. */
.nl-talk-org {
  margin: -6px 0 10px;
  color: var(--muted);
  font-size: var(--text-sm);
}

.nl-quote {
  margin: 10px 0;
  padding: 10px 14px;
  border-left: 4px solid var(--nl-accent);
  background: var(--nl-soft);
  color: var(--ink);
  font-style: italic;
  font-weight: 700;
}

.nl-takeaways-title {
  margin: 12px 0 4px;
  color: var(--nl-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.nl-takeaways {
  margin: 0;
  padding-left: 1.2em;
  color: var(--muted);
  font-size: var(--text-md);
}

.nl-more {
  display: inline-block;
  margin-top: 12px;
  color: var(--purple);
  font-weight: 700;
}

.nl-more:hover {
  text-decoration: underline;
}

/* Volunteer Spotlights (formerly Community Thoughts). */
.nl-spotlight {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* Portraits are usually upright (4:5): keep the top of the photo so the head is not cut, as the letter's author.
   Each photo's own crop (a small even space above the hair) is set on the image by pmilc_portrait_square_focus(). */
.nl-spotlight img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-lg);
}

.nl-spotlight p {
  color: var(--muted);
}

/* Name lists (print view only). */
.nl-names {
  columns: 4;
  column-gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.nl-names li {
  break-inside: avoid;
  padding: 1px 0;
}

/* "Featured in Newsletter …" on events and stories. */
.nl-featured-in {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 20px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--mist);
  color: var(--muted);
  font-size: var(--text-md);
}

.nl-featured-in a {
  color: var(--purple);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media screen and (max-width: 1000px) {
  .nl-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 24px;
  }

  .nl-section {
    scroll-margin-top: calc(var(--nav-height) + 70px);
  }
}

@media screen and (max-width: 760px) {
  .nl-hero-grid {
    grid-template-columns: 1fr;
  }

  .nl-hero-cover {
    display: none;
  }

  .nl-ongoing,
  .nl-glance,
  .nl-letter,
  .nl-spotlight {
    grid-template-columns: 1fr;
  }

  .nl-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nl-letter-author {
    max-width: 260px;
  }

  .nl-spotlight img {
    max-width: 190px;
  }

  .nl-talk {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Up to 64px each, smaller on the narrowest phones. */
  .nl-talk-photos {
    grid-template-columns: repeat(4, minmax(0, 64px));
  }

  .nl-talk-photos > :only-child {
    grid-column: auto;
  }

  .nl-events {
    grid-template-columns: minmax(0, 1fr);
  }

  .nl-event,
  .nl-event.is-wide {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .nl-event.is-wide .nl-event-link {
    grid-column: 2;
  }

  .nl-event-date {
    width: var(--ds-icon-lg);
    height: var(--ds-icon-lg);
  }

  .nl-event-link {
    display: none;
  }

  .nl-section-head {
    padding: 16px 18px;
  }

  .nl-section-number {
    width: var(--ds-icon-sm);
    height: var(--ds-icon-sm);
    font-size: var(--text-lead);
  }
}