/* =====================================================================
   News — press coverage.
   Deliberately plain: white throughout, rows of
   four, each card just an image, a headline and a date. No rules, no eyebrow.
   ===================================================================== */

.nw-top .page-head { align-items: flex-start; }
.nw-top .page-head__lead { max-width: 52ch; }

/* Head and grid are consecutive white sections: drop the grid's top padding
   so the gap is one section's worth, not two stacked. */
.nw-press { padding-top: 0; }

.nw-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(4rem, 7vw, 6rem) clamp(1.75rem, 3.5vw, 3rem);
}

/* The whole card is the link. Flex column so the date can sit at the bottom,
   keeping every date on a row aligned regardless of title length. */
.nw-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Placeholder until the artwork lands: assets/images/news/<slug>.jpg */
.nw-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--color-surface, #f3f3ef);
  overflow: hidden;
}
.nw-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Some entries are a logo, not a photo: sit it on white, contained with air */
.nw-card__media--logo { background: #fff; }
.nw-card__media--logo .nw-card__img {
  object-fit: contain;
  padding: clamp(1.75rem, 5vw, 3.25rem);
}
.nw-card__title {
  position: relative;
  display: inline;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  /* underline draws in on hover, same easing as .btn-line */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}
.nw-card:hover .nw-card__title,
.nw-card:focus-visible .nw-card__title { background-size: 100% 1px; }

/* Title needs a block wrapper since the title itself is inline (for the rule) */
.nw-card__head { margin: clamp(1rem, 2vw, 1.4rem) 0 0; }

.nw-card__meta {
  margin: 0;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: auto;               /* pin to the bottom of the card */
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .nw-card__title,
  .nw-card { transition: none; }
  .nw-card.is-enter { opacity: 1; transform: none; }
}

/* Progressive reveal (See more / See less) */
.nw-card.is-hidden { display: none; }
/* Newly revealed cards fade + rise into place */
.nw-card {
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}
.nw-card.is-enter {
  opacity: 0;
  transform: translateY(18px);
}
.nw-more {
  display: flex;
  justify-content: center;
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
}
.nw-more__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: none;
  border: 0;
  cursor: pointer;
}
.nw-more__chev {
  flex: none;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.nw-more__btn.is-expanded .nw-more__chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .nw-more__chev { transition: none; }
}
.nw-more__btn[hidden] { display: none; }

/* Closing band: follow on LinkedIn. Flows straight into the footer (same black). */
.nw-social {
  background: var(--color-footer);
  color: #fff;
}
.nw-social__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.75rem, 5vw, 5rem);
  flex-wrap: wrap;
}
.nw-social__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.3rem + 3vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.006em;
  color: #fff;
}
.nw-social__lead {
  margin: clamp(1.1rem, 2.2vw, 1.6rem) 0 0;
  max-width: 46ch;
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.6;
  color: #ffffff;
}
.nw-social__cta { flex: none; }

@media (max-width: 1000px) {
  .nw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .nw-social__row { align-items: flex-start; }
}
@media (max-width: 560px) {
  .nw-grid { grid-template-columns: 1fr; }
}