/* Covenant Church — styles for the static, crawlable Message (sermon) pages.
   Loaded alongside location.css (which defines the design tokens, header,
   footer, and buttons). */

.msg-hero{ background:var(--ink); color:#fff; padding:64px 0 52px; position:relative; overflow:hidden; }
.msg-hero::before{ content:""; position:absolute; top:-60px; right:-60px; width:260px; height:260px; background:radial-gradient(circle, rgba(205,32,39,.35) 0%, rgba(205,32,39,0) 70%); }
.msg-hero .wrap{ position:relative; max-width:860px; }
.msg-hero .eyebrow{ color:#ff8f8f; }
.msg-hero .eyebrow::before{ background:url("/cc-mark-white.png") center/contain no-repeat; }
.msg-hero h1{ font-size:clamp(2rem,4.6vw,3.1rem); line-height:1.06; font-weight:800; margin:0 0 16px; letter-spacing:-.02em; }
.msg-hero .msg-sub{ font-size:1.15rem; color:rgba(255,255,255,.82); margin:0 0 22px; font-weight:500; }
.msg-meta{ display:flex; flex-wrap:wrap; gap:10px 22px; margin:0 0 26px; font-size:.95rem; color:rgba(255,255,255,.72); }
.msg-meta b{ color:#fff; font-weight:700; }
.msg-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }

.msg-wrap{ max-width:820px; margin:0 auto; padding:0 22px; }
.msg-section{ padding:clamp(44px,6vw,72px) 0; }

.msg-banner{ margin:0 0 34px; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-md); }
.msg-banner img{ width:100%; height:auto; display:block; }

.msg-bigidea{ display:flex; gap:13px; align-items:flex-start; background:var(--red-light); border-left:4px solid var(--red); border-radius:0 14px 14px 0; padding:18px 20px; font-size:1.08rem; font-weight:600; color:var(--ink-soft); line-height:1.55; margin:0 0 26px; }
.msg-bigidea svg{ width:22px; height:22px; flex-shrink:0; color:var(--red); margin-top:3px; }

.msg-ask{ background:var(--bg-soft); border:1px solid var(--border); border-radius:14px; padding:16px 20px; margin:0 0 30px; }
.msg-ask b{ display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--red); margin:0 0 4px; }
.msg-ask p{ margin:0; font-size:1.05rem; color:var(--ink-soft); font-weight:600; }

.msg-outline-title{ font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-weight:700; margin:0 0 18px; font-family:"Inter",sans-serif; }

.point{ border:1px solid var(--border); border-radius:16px; padding:24px 24px 8px; margin:0 0 18px; box-shadow:var(--shadow-sm); background:var(--card); }
.point-head{ display:flex; align-items:flex-start; gap:14px; margin:0 0 12px; }
.point-num{ flex-shrink:0; width:36px; height:36px; border-radius:10px; background:var(--red); color:#fff; font-family:"Sora",sans-serif; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.point-head h3{ margin:0; font-size:1.28rem; font-weight:800; line-height:1.25; }
.point-summary{ font-size:1.04rem; color:var(--ink-soft); margin:0 0 16px; }

.verse{ border-left:3px solid var(--border-strong); padding:2px 0 2px 16px; margin:0 0 14px; }
.verse-ref{ display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--red); text-decoration:none; font-size:.92rem; }
.verse-ref:hover{ text-decoration:underline; }
.verse-ref svg{ width:13px; height:13px; }
.verse-text{ color:var(--ink-soft); font-size:1rem; margin-top:4px; font-style:italic; }

.remember{ display:flex; gap:12px; align-items:flex-start; background:var(--bg-soft); border-radius:12px; padding:15px 17px; margin:4px 0 20px; }
.remember svg{ width:20px; height:20px; color:var(--red); flex-shrink:0; margin-top:2px; }
.remember b{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--red); margin:0 0 3px; }
.remember p{ margin:0; color:var(--ink-soft); font-size:1rem; }

.response{ background:var(--ink); color:#fff; border-radius:18px; padding:30px 28px; margin:34px 0 0; }
.response h3{ margin:0 0 14px; font-size:1.4rem; font-weight:800; }
.response .rlead{ font-size:1.06rem; color:rgba(255,255,255,.86); margin:0 0 18px; }
.response ul{ list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:12px; }
.response li{ display:flex; gap:11px; align-items:flex-start; color:rgba(255,255,255,.92); font-size:1.02rem; }
.response li svg{ width:20px; height:20px; color:#ff8f8f; flex-shrink:0; margin-top:2px; }
.response-closing p{ font-size:1.06rem; color:#fff; font-weight:600; margin:14px 0 0; font-family:"Sora",sans-serif; }

.series-note{ font-size:.98rem; color:var(--muted); border-top:1px solid var(--border); margin-top:34px; padding-top:22px; }
.msg-watchline{ font-size:1rem; color:var(--ink-soft); margin:22px 0 0; }
.msg-watchline a{ color:var(--red); font-weight:700; text-decoration:none; }

/* related / archive cards */
.related{ background:var(--bg-soft); }
.related-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.related-card{ display:block; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:22px; text-decoration:none; color:inherit; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
.related-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.related-card .when{ font-size:.82rem; font-weight:700; color:var(--red); }
.related-card h3{ margin:6px 0 6px; font-size:1.18rem; font-weight:800; line-height:1.25; }
.related-card p{ margin:0; color:var(--muted); font-size:.98rem; }
@media (min-width:720px){ .related-grid{ grid-template-columns:1fr 1fr; } }