/* ═══════════════════════════════════════════════════════════════════════
   Advent — the devotional's evergreen, cream and gold on the dark site
   (page top uses the shared .page-hero in css/site.css)
   ═══════════════════════════════════════════════════════════════════════ */

.ad { --pine: #2f9a73; --cream: #f4ecd8; --star: #e9c74a; }

/* Hero: words left, the devotional cover right */
.ad-hero { background: radial-gradient(60% 120% at 100% 20%, color-mix(in srgb, var(--pine) 30%, transparent), transparent 65%); }
.ad-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.ad-hero .eyebrow { color: var(--star); }
.ad-hero .page-hero__title { color: var(--cream); }
.ad-hero__art { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); transform: rotate(1.5deg); }
.ad-day { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem; font-weight: 700; color: var(--star); }
.ad-day[hidden] { display: none; }
.ad-day::before { content: '✦'; }
.ad-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.ad-btn-ico { width: 18px; height: 18px; margin-right: 0.15rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.ad-title { margin-top: 0.4rem; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.025em; }
.ad-lead { margin-top: 0.9rem; color: var(--fg-muted); font-size: 1.05rem; line-height: 1.6; max-width: 58ch; }

/* What is Advent */
.ad-what__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.25rem, 4vw, 3.5rem); align-items: start; }
.ad-what__text p { color: var(--fg-muted); font-size: 1.1rem; line-height: 1.65; max-width: 58ch; }
.ad-what__text p + p { margin-top: 0.9rem; }
.ad-call { margin-top: 1.25rem !important; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.8rem, 4.5vw, 3rem) !important; line-height: 1.05 !important; letter-spacing: -0.02em; color: var(--cream) !important; }
.ad-call span:nth-child(2) { color: var(--pine); }
.ad-call span:nth-child(3) { color: var(--star); }

/* Four weeks */
.ad-weeks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.ad-weeks li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-card);
}
.ad-weeks__n { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.ad-weeks b { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; color: var(--cream); }
.ad-weeks__date { font-size: 0.88rem; color: var(--fg-muted); }
.ad-weeks li.is-now { border-color: var(--pine); background: radial-gradient(100% 140% at 0% 0%, color-mix(in srgb, var(--pine) 26%, transparent), transparent 70%), var(--bg-card); }
.ad-weeks__now { position: absolute; top: 0.9rem; right: 0.9rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--pine); color: #fff; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

/* How to engage */
.ad-steps { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ad-steps li { padding: 1.3rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-card); }
.ad-steps__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--pine) 22%, transparent); color: var(--cream); font-weight: 800; }
.ad-steps__bonus .ad-steps__n { background: var(--star); color: #111; font-size: 1.3rem; }
.ad-steps h3 { margin-top: 0.9rem; font-size: 1.15rem; }
.ad-steps p { margin-top: 0.35rem; color: var(--fg-muted); line-height: 1.5; }

.ad-get { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.ad-get__opt {
  display: flex;
  gap: 1rem;
  padding: 1.3rem;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--pine) 45%, transparent);
  background: radial-gradient(100% 140% at 0% 0%, color-mix(in srgb, var(--pine) 16%, transparent), transparent 65%), var(--bg-card);
}
.ad-get__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--pine) 24%, transparent); }
.ad-get__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--cream); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ad-get h3 { font-size: 1.15rem; }
.ad-get p { margin-top: 0.3rem; color: var(--fg-muted); line-height: 1.5; }
.ad-get__link { display: inline-block; margin-top: 0.5rem; font-weight: 700; color: var(--star); word-break: break-word; }

/* Mercy Partnerships */
.ad-mercy__list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 1rem; }
.ad-partner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--pine);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}
.ad-partner__week { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pine); }
.ad-partner h3 { font-size: 1.3rem; }
.ad-partner p:not(.ad-partner__week) { color: var(--fg-muted); line-height: 1.55; }
.ad-partner__when { color: var(--fg) !important; font-weight: 700; }
.ad-partner__help { margin-top: auto; padding-top: 0.4rem; color: var(--fg) !important; font-weight: 600; }
.ad-partner__link { font-weight: 700; color: var(--star); }

/* Christmas Eve */
.ad-eve {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem 2.5rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, #ffb347 40%, transparent);
  background:
    radial-gradient(80% 140% at 100% 50%, color-mix(in srgb, #ff8a2a 22%, transparent), transparent 60%),
    var(--bg-card);
}
.ad-eve__tag { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #ffb347; }
.ad-eve__title { margin-top: 0.4rem; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.05; letter-spacing: -0.025em; }
.ad-eve__text > p:last-child { margin-top: 0.8rem; max-width: 60ch; color: var(--fg-muted); line-height: 1.6; }
.ad-eve__text b { color: var(--fg); }
.ad-eve__actions { display: flex; flex-direction: column; gap: 0.6rem; }

@media (max-width: 1000px) {
  .ad-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ad-hero__grid, .ad-what__grid { grid-template-columns: minmax(0, 1fr); }
  .ad-hero__art { order: -1; max-width: 520px; transform: none; }
  .ad-weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-get { grid-template-columns: minmax(0, 1fr); }
  .ad-eve { grid-template-columns: minmax(0, 1fr); }
  .ad-eve__actions { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .ad-steps { grid-template-columns: minmax(0, 1fr); }
}