/* Public news pages (/news, /news/{slug}). Builds on site.css. */
.news-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.news-rss { font-size: .9rem; color: var(--muted); }
.news-feature-row { display: grid; grid-template-columns: 1.75fr 1fr; gap: 24px; margin-bottom: 24px; }
@media (max-width: 900px) { .news-feature-row { grid-template-columns: 1fr; } }
.news-feature { display: grid; grid-template-columns: 1fr 1fr; }
.news-feature .thumb { aspect-ratio: auto; min-height: 100%; }
.news-feature .body { padding: 30px; }
.news-feature h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
@media (max-width: 640px) { .news-feature { grid-template-columns: 1fr; } .news-feature .thumb { aspect-ratio: 1 / 1; } }
.news-card h3 { margin-top: 12px; }
.news-card .thumb img { aspect-ratio: 1 / 1; }
.news-grid .news-card .thumb { aspect-ratio: 4 / 3; }

/* picture-less posts: a branded tile with the category icon */
.news-card .thumb-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 100% 0%, rgba(239, 125, 34, .45) 0%, transparent 55%), linear-gradient(160deg, #3a2e29, var(--ink)); }
.news-card .thumb-fallback::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--flame-grad); }
.news-card .thumb-community, .news-card .thumb-centre, .news-card .thumb-events { background: radial-gradient(120% 120% at 100% 0%, rgba(42, 154, 166, .55) 0%, transparent 55%), linear-gradient(160deg, var(--sea), var(--sea-deep)); }
.tf-icon .ic { width: 54px; height: 54px; color: var(--gold); }
.thumb-community .tf-icon .ic, .thumb-centre .tf-icon .ic, .thumb-events .tf-icon .ic { color: var(--foam); }
.tf-label { font: 700 .78rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; opacity: .85; }

.verse-card { border-radius: var(--radius); padding: 30px; color: #e9e0d6; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(110% 110% at 0% 100%, rgba(239, 125, 34, .35) 0%, transparent 60%), linear-gradient(160deg, #3a2e29, var(--ink)); box-shadow: var(--shadow); }
.verse-card blockquote { margin: 0; font: 400 1.3rem/1.45 var(--font-head); color: #fff; }
.verse-card cite { display: block; margin-top: 16px; font: 700 .8rem var(--font-head); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }

.news-sub { display: flex; gap: 8px; min-width: min(420px, 100%); flex-wrap: wrap; }
.news-sub input[type=email] { flex: 1; min-width: 200px; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
.news-sub input::placeholder { color: #b3a79d; }

/* article */
.article-head h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.article-date { margin-top: 18px !important; font-size: .95rem !important; opacity: .75 !important; display: flex; align-items: center; gap: 8px; }
.article-body { margin-top: 10px; }
.article-body > :first-child { margin-top: 0; }
.prose .quote.verse-q { border-left-color: var(--sea); background: linear-gradient(90deg, var(--sea-soft), #fff 70%); }
.prose .quote.verse-q small { color: var(--sea-deep); }
.prose .prayer-note { background: var(--sea-soft); border-color: #bfe0e1; }
.prose .prayer-note strong { display: block; font-family: var(--font-head); color: var(--sea-deep); margin-bottom: 6px; }
.shared-on { margin-bottom: 24px; }
.article-share { margin-bottom: 36px; }
.share-row .ic { width: 17px; height: 17px; }
.help-callout { display: grid; grid-template-columns: auto 1fr; gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); }
.help-callout h2 { font-size: 1.4rem; }
@media (max-width: 560px) { .help-callout { grid-template-columns: 1fr; } }
.preview-bar { background: var(--gold-soft); border-bottom: 1px solid #f3d999; padding: 10px 0; font-size: .92rem; }
.preview-bar .wrap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.related .section-head { margin-bottom: 26px; }