/* ═══════════════════════════════════════════════════════════════════════
   News page — the latest Renovation News email on a "paper" card
   (page top uses the shared .page-hero in css/site.css)
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes nw-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } }

.nw-hero-img { object-position: 50% 58%; } /* the lit church, not the sky */
.nw-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.page-hero:has(.page-hero__img) .nw-hero-actions .btn--ghost { background: rgba(10, 10, 10, 0.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.nw { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.nw__wrap { width: min(720px, 100% - var(--gutter) * 2); margin-inline: auto; }
.nw__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.nw__title {
  margin-top: 0.5rem;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.nw__meta { margin-top: 0.6rem; color: var(--fg-muted); }
.nw__meta:empty { display: none; }
.nw-ghost {
  display: block;
  width: 70%;
  height: 0.9em;
  border-radius: 10px;
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  animation: nw-pulse 1.6s ease-in-out infinite;
}

/* The email itself. */
.nw__paper {
  margin-top: 1.75rem;
  border-radius: 26px;
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: background-color 0.6s var(--ease);
}
.nw__paper[hidden] { display: none; }
.nw__paper.is-loading {
  min-height: 560px;
  background: color-mix(in srgb, var(--gold) 14%, var(--bg));
  animation: nw-pulse 1.6s ease-in-out infinite;
}
.nw__paper.is-loading .nw__frame { opacity: 0; }
.nw__frame {
  display: block;
  width: 100%;
  height: 600px; /* replaced with the email's real height once it loads */
  border: 0;
  transition: opacity 0.5s var(--ease);
}

.nw__error { margin-top: 1.5rem; color: var(--fg-muted); font-size: 1.05rem; }
.nw__error[hidden] { display: none; }
.nw__link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--gold); cursor: pointer; }
.nw__link:hover { text-decoration: underline; text-underline-offset: 0.2em; }

@media (prefers-reduced-motion: reduce) {
  .nw-ghost, .nw__paper.is-loading { animation: none; opacity: 0.6; }
}

/* ── Hero wall: the email's pictures on a tilted, tiled plane ────────── */
.nw-wall {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  perspective: 1100px;
  perspective-origin: 50% 30%;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
}
.page-hero.has-wall .nw-wall { opacity: 1; }
.page-hero.has-wall .page-hero__img { opacity: 0; transition: opacity 1.2s var(--ease); }
.nw-wall__plane {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(180%, 1700px);
  display: grid;
  grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
  transform: translate(-50%, -46%) rotateX(52deg) rotateZ(-24deg);
  transform-origin: 50% 50%;
  animation: nw-drift 60s linear infinite alternate;
}
.nw-wall__plane img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
  background: #1c1d1c;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
/* A slow drift so the wall feels alive. */
@keyframes nw-drift {
  from { transform: translate(-50%, -46%) rotateX(52deg) rotateZ(-24deg); }
  to   { transform: translate(-46%, -52%) rotateX(52deg) rotateZ(-24deg); }
}
/* A touch more shade than a photo needs, since the tiles are busy. */
.page-hero.has-wall::before {
  background:
    linear-gradient(to right, rgba(8, 9, 8, 0.75) 0%, rgba(8, 9, 8, 0.35) 55%, rgba(8, 9, 8, 0.15) 100%),
    linear-gradient(to bottom, rgba(8, 9, 8, 0.5) 0%, rgba(8, 9, 8, 0.15) 30%, rgba(8, 9, 8, 0.55) 72%, var(--bg) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .nw-wall__plane { animation: none; }
}