/* Marcellus = main heading (same as the home page headings) */
@import url("https://fonts.googleapis.com/css2?family=Marcellus&display=swap");

/* =========================================================================
   News / Events page — full card grid

   Typography matches the home page (colours unchanged):
     main heading = Marcellus, capitals, weight 400, underline
     card names   = Cormorant Garamond (var(--font-head)), bold
     paragraphs   = var(--font-body), weight 400 + 0.15px stroke
   ========================================================================= */

/* ---------- Intro (from the shared kit): breadcrumb, title, line under it ---------- */
.sp-page [class*="intro"] h1 {
  display: inline-block;
  font-family: "Marcellus", var(--font-head);
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 3px solid currentColor;     /* underline = text width, same colour as the title */
}
.sp-page [class*="intro"] p:not([class*="crumb"]) {
  font-family: var(--font-body);
  font-size: 1.22rem;
  font-weight: 400;
  line-height: 1.9;
  -webkit-text-stroke: 0.15px currentColor;
}
/* breadcrumb on its own line, title below it */
.sp-page [class*="intro"] [class*="crumb"] {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 400;
  -webkit-text-stroke: 0.15px currentColor;
}
/* small gradient line under the title: removed */
.sp-page [class*="intro"] h1::before,
.sp-page [class*="intro"] h1::after,
.sp-page [class*="intro"] hr,
.sp-page [class*="intro"] [class*="rule"],
.sp-page [class*="intro"] [class*="bar"],
.sp-page [class*="intro"] [class*="divider"],
.sp-page [class*="intro"] [class*="underline"] {
  display: none !important;
}

/* ---------- Card grid ---------- */
.news-grid-full { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.news-card-full { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow); }
.news-card-full .thumb { aspect-ratio: 1/1; overflow: hidden; position: relative; }
.news-card-full .thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-card-full .body { padding: 22px 24px 26px; }

/* Tag pill (now inside the card text, so it always shows) */
.news-card-full .tag {
  display: inline-block;
  color: #fff;
  font-family: var(--font-head);
  font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.2;
  padding: 4px 14px; border-radius: 999px;
  margin-bottom: 12px;
}
.news-card-full:nth-child(6n+1) .tag { background: var(--blue); }
.news-card-full:nth-child(6n+2) .tag { background: var(--orange); }
.news-card-full:nth-child(6n+3) .tag { background: var(--forest); }
.news-card-full:nth-child(6n+4) .tag { background: var(--brinjal); }
.news-card-full:nth-child(6n+5) .tag { background: var(--blue); }
.news-card-full:nth-child(6n+6) .tag { background: var(--orange); }

.news-card-full .date {
  display: flex; gap: 8px; align-items: center;
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 400;
  -webkit-text-stroke: 0.15px currentColor;
  color: var(--ink-soft);
}
.news-card-full h4 {
  margin-top: 8px;
  font-family: var(--font-head);
  font-size: 1.6rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.01em;
  -webkit-text-stroke: 0.3px currentColor;
  color: var(--ink);
}
.news-card-full p {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 1.12rem; font-weight: 400; line-height: 1.8;
  -webkit-text-stroke: 0.15px currentColor;
}
.news-card-full .more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-family: var(--font-head);
  font-weight: 700; font-size: 1.3rem; letter-spacing: 0.01em;
  color: var(--blue);
}

@media (max-width: 900px) { .news-grid-full { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .sp-page [class*="intro"] p:not([class*="crumb"]) { font-size: 1.05rem; }
  .news-card-full h4 { font-size: 1.4rem; }
  .news-card-full p { font-size: 1.02rem; }
}

/* ---------- Type filter (All / Events / Announcements / Celebrations) ---------- */
.news-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 30px; }
.nf-btn {
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 8px 22px; border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--ink); border: 2px solid var(--line);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nf-btn:hover { border-color: var(--brinjal); }
.nf-btn.active { background: var(--brinjal); color: #fff; border-color: var(--brinjal); }