/* Data-driven editorial hub: /news. Mobile-first, flat and image-led. */

.news-page{
  --news-shell:min(74rem,calc(100% - 2rem));
  background:var(--pn-off-white,#fafafa);
  color:var(--pn-primary,#06324a);
}
.news-shell{width:var(--news-shell);margin-inline:auto}

/* Editorial chrome is deliberately plain: the legacy footer bitmap contains
   scattered paw trails, while the brand direction permits one mark at most. */
.pn-footer--editorial{background-image:none}
.pn-footer--editorial .pn-footer__logo{height:auto;min-height:97px;overflow:visible}
.pn-footer--editorial .pn-footer__logo img{
  display:block;
  box-sizing:content-box;
  max-width:100%;
  padding-block-end:.5rem;
}

.news-hero{
  padding:clamp(7.5rem,19vw,10rem) 0 clamp(3.5rem,9vw,6.5rem);
  background:var(--pn-primary,#06324a);
  color:#fff;
}
.news-hero__inner{display:grid;gap:2.5rem}
.news-breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
  margin:0;
  padding:0;
  list-style:none;
  color:rgba(255,255,255,.72);
  font-size:.9rem;
}
.news-breadcrumb li+li::before{content:"←";margin-inline-end:.5rem;color:var(--pn-coral,#e85e46)}
.news-breadcrumb a{display:inline-flex;align-items:center;min-height:2.75rem;color:#fff;text-decoration:underline;text-underline-offset:.25rem}
.news-hero__title h1{
  margin:0;
  color:#fff;
  font-family:var(--pn-font-head);
  font-size:clamp(3.5rem,18vw,7.5rem);
  font-weight:700;
  letter-spacing:-.045em;
  line-height:.9;
}
.news-hero__title p{
  max-width:32rem;
  margin:1.5rem 0 0;
  color:var(--pn-cream,#f2e3ce);
  font-size:clamp(1.08rem,4.8vw,1.45rem);
  font-weight:500;
  line-height:1.65;
  text-wrap:balance;
}
.news-hero__count{
  display:flex;
  align-items:baseline;
  gap:.65rem;
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:.95rem;
}
.news-hero__count strong{color:var(--pn-coral,#e85e46);font-size:2.4rem;font-variant-numeric:tabular-nums;line-height:1}

.news-filter{background:var(--pn-cream,#f2e3ce)}
.news-filter__inner{display:grid;gap:1.25rem;padding-block:1.5rem}
.news-filter h2{margin:0;font-family:var(--pn-font-head);font-size:1.2rem;font-weight:700}
.news-filter p{margin:.2rem 0 0;color:rgba(6,50,74,.72);font-size:16px}
.news-filter__options{
  display:flex;
  gap:.5rem;
  max-width:100%;
  padding:.15rem .1rem .35rem;
  overflow-x:auto;
  scrollbar-width:thin;
}
.news-filter__options button{
  flex:0 0 auto;
  min-height:2.75rem;
  padding:.6rem 1.15rem;
  border:1px solid rgba(6,50,74,.28);
  border-radius:999px;
  background:transparent;
  color:var(--pn-primary,#06324a);
  font:inherit;
  font-size:.92rem;
  font-weight:700;
  transition:background-color .16s cubic-bezier(.25,1,.5,1),color .16s cubic-bezier(.25,1,.5,1),border-color .16s cubic-bezier(.25,1,.5,1);
}
.news-filter__options button:hover{border-color:var(--pn-primary,#06324a)}
.news-filter__options button[aria-pressed="true"]{border-color:var(--pn-primary,#06324a);background:var(--pn-primary,#06324a);color:#fff}

.news-feed{padding:clamp(3.5rem,9vw,8rem) 0 clamp(5rem,11vw,9rem)}
.news-feed__grid{display:grid;gap:3.5rem;margin-top:clamp(4.5rem,9vw,7.5rem)}

.article-card{min-width:0}
.article-card[hidden]{display:none}
.article-card__media{display:block;overflow:hidden;border-radius:20px;background:var(--pn-cream,#f2e3ce)}
.article-card__media img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.16,1,.3,1),filter .25s cubic-bezier(.25,1,.5,1);
}
.article-card__copy{padding-top:1.4rem}
.article-card__meta{display:flex;flex-wrap:wrap;gap:.55rem 1rem;align-items:center;color:rgba(6,50,74,.7);font-size:14px;font-weight:650;line-height:1.5}
.article-card__meta span:first-child{color:var(--pn-coral-ink,#ab4533);font-weight:800}
.article-card__meta time{font-variant-numeric:tabular-nums}
.article-card h2,.article-card h3{
  margin:.8rem 0 0;
  font-family:var(--pn-font-head);
  font-size:clamp(1.65rem,7vw,2.4rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
  text-wrap:balance;
}
.article-card h2 a,.article-card h3 a{color:var(--pn-primary,#06324a)}
.article-card__copy>p{margin:.8rem 0 0;color:#365d70;font-size:1rem;line-height:1.75;text-wrap:pretty}
.article-card__read{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  min-height:2.75rem;
  margin-top:.9rem;
  color:var(--pn-primary,#06324a);
  font-size:.93rem;
  font-weight:800;
  text-decoration:underline;
  text-decoration-color:var(--pn-coral,#e85e46);
  text-decoration-thickness:2px;
  text-underline-offset:.28rem;
}
.article-card__read span{color:var(--pn-coral,#e85e46);transition:transform .2s cubic-bezier(.25,1,.5,1)}
.article-card__read:hover span{transform:translateX(calc(var(--pn-inline,1) * -.25rem))}
.article-card__media:hover img,.article-card:focus-within .article-card__media img{transform:scale(1.018);filter:saturate(1.05)}

@media (min-width:700px){
  .news-page{--news-shell:min(74rem,calc(100% - 3rem))}
  .news-hero__inner{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .news-breadcrumb{grid-column:1/-1}
  .news-hero__count{justify-self:end;padding-bottom:.6rem}
  .news-filter__inner{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2.5rem;padding-block:1.2rem}
  .news-filter__options{justify-content:flex-end}
  .news-feed__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,4.5rem)}
}

@media (min-width:960px){
  .news-hero__title h1{font-size:clamp(6rem,9vw,8rem)}
  .article-card--featured{display:grid;grid-template-columns:minmax(0,7fr) minmax(21rem,5fr);gap:clamp(2.5rem,6vw,6.5rem);align-items:center}
  .article-card--featured .article-card__media img{aspect-ratio:5/4}
  .article-card--featured .article-card__copy{padding:0}
  .article-card--featured h2{font-size:clamp(2.7rem,4.8vw,4.6rem);line-height:1.02}
  .article-card--featured .article-card__copy>p{font-size:1.12rem;line-height:1.8}
}

@media (prefers-reduced-motion:reduce){
  .article-card__media img,.article-card__read span,.news-filter__options button{transition:none}
  .article-card__media:hover img,.article-card:focus-within .article-card__media img,.article-card__read:hover span{transform:none}
}