/* Covenant Church — "Just One More" devotional blog.
   Loaded alongside location.css (design tokens, header, footer, buttons) and
   messages.css (shared card/hero helpers). This file styles the feed, the
   single-post layout, the media frame, and the follow form. */

.jom-hero{ background:var(--ink); color:#fff; padding:70px 0 58px; position:relative; overflow:hidden; }
.jom-hero::before{ content:""; position:absolute; top:-80px; right:-70px; width:300px; height:300px; background:radial-gradient(circle, rgba(205,32,39,.38) 0%, rgba(205,32,39,0) 70%); }
.jom-hero::after{ content:""; position:absolute; bottom:-120px; left:-90px; width:320px; height:320px; background:radial-gradient(circle, rgba(201,162,39,.20) 0%, rgba(201,162,39,0) 70%); }
.jom-hero .wrap{ position:relative; max-width:820px; }
.jom-hero .eyebrow{ color:#ffb0a0; }
.jom-hero .eyebrow::before{ background:url("/cc-mark-white.png") center/contain no-repeat; }
.jom-hero h1{ font-family:"Sora",sans-serif; font-size:clamp(2.3rem,5.4vw,3.6rem); line-height:1.02; font-weight:800; margin:0 0 16px; letter-spacing:-.02em; }
.jom-hero .lede{ font-size:1.18rem; line-height:1.55; color:rgba(255,255,255,.85); margin:0 0 14px; max-width:640px; }
.jom-hero .prayer{ font-size:1.02rem; font-style:italic; color:#ffcf9a; margin:0 0 26px; }
.jom-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---- feed ---- */
.jom-feed{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:640px){ .jom-feed{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .jom-feed{ grid-template-columns:1fr 1fr 1fr; } }

.jom-card{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:18px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
.jom-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.jom-card-thumb{ position:relative; aspect-ratio:16/9; background:var(--bg-soft) center/cover no-repeat; overflow:hidden; }
.jom-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.jom-card-thumb .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.jom-card-thumb .play span{ width:56px; height:56px; border-radius:50%; background:rgba(205,32,39,.92); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.3); }
.jom-card-thumb .play svg{ width:22px; height:22px; fill:#fff; margin-left:3px; }
.jom-badge{ position:absolute; top:12px; left:12px; z-index:2; font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#fff; background:rgba(17,16,19,.72); padding:5px 10px; border-radius:100px; backdrop-filter:blur(4px); }
.jom-card-body{ padding:18px 20px 22px; display:flex; flex-direction:column; flex:1; }
.jom-card .when{ font-size:.78rem; font-weight:700; color:var(--red); letter-spacing:.02em; }
.jom-card h3{ font-family:"Sora",sans-serif; margin:7px 0 8px; font-size:1.2rem; font-weight:700; line-height:1.24; }
.jom-card p{ margin:0; color:var(--muted); font-size:.96rem; line-height:1.5; }
.jom-card .scripture{ margin-top:12px; font-size:.82rem; font-weight:700; color:var(--red-dark); letter-spacing:.02em; }

/* ---- single post ---- */
.jom-post-hero{ background:var(--ink); color:#fff; padding:58px 0 40px; position:relative; overflow:hidden; }
.jom-post-hero::before{ content:""; position:absolute; top:-70px; right:-60px; width:260px; height:260px; background:radial-gradient(circle, rgba(205,32,39,.32) 0%, rgba(205,32,39,0) 70%); }
.jom-post-hero .wrap{ position:relative; max-width:820px; }
.jom-post-hero .kicker{ display:inline-flex; align-items:center; gap:8px; font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#ffb0a0; margin:0 0 14px; }
.jom-post-hero h1{ font-family:"Sora",sans-serif; font-size:clamp(2rem,4.8vw,3.2rem); line-height:1.06; font-weight:800; margin:0 0 14px; letter-spacing:-.02em; }
.jom-post-hero .sub{ font-size:1.12rem; color:rgba(255,255,255,.82); margin:0 0 14px; }
.jom-post-hero .meta{ display:flex; flex-wrap:wrap; gap:8px 20px; font-size:.9rem; color:rgba(255,255,255,.66); }
.jom-post-hero .meta b{ color:#fff; }

.jom-wrap{ max-width:820px; margin:0 auto; padding:0 22px; }
.jom-section{ padding:clamp(36px,5vw,56px) 0; }

.jom-media{ position:relative; margin:0 auto 30px; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-md); background:#000; }
.jom-media.ratio{ aspect-ratio:16/9; }
.jom-media iframe,.jom-media video{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.jom-media.photo{ background:var(--bg-soft); box-shadow:var(--shadow-md); }
.jom-media.photo img{ width:100%; height:auto; display:block; }

.jom-scripture{ 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:16px 20px; font-size:1.06rem; font-weight:600; color:var(--ink-soft); line-height:1.55; margin:0 0 26px; }
.jom-scripture svg{ width:20px; height:20px; flex-shrink:0; color:var(--red); margin-top:3px; }

.jom-body{ font-size:1.14rem; line-height:1.75; color:var(--ink-soft); }
.jom-body p{ margin:0 0 1.25em; }
.jom-body h2{ font-family:"Sora",sans-serif; font-size:1.5rem; font-weight:700; margin:1.6em 0 .5em; line-height:1.2; }
.jom-body h3{ font-family:"Sora",sans-serif; font-size:1.22rem; font-weight:700; margin:1.4em 0 .4em; }
.jom-body blockquote{ margin:1.4em 0; padding:4px 0 4px 20px; border-left:3px solid var(--red); color:var(--ink); font-style:italic; font-size:1.18rem; }
.jom-body a{ color:var(--red); font-weight:600; }
.jom-body ul,.jom-body ol{ margin:0 0 1.25em; padding-left:1.3em; }
.jom-body li{ margin:0 0 .5em; }

.jom-byline{ display:flex; align-items:center; gap:11px; margin:30px 0 0; padding-top:22px; border-top:1px solid var(--border); }
.jom-byline .avatar{ width:42px; height:42px; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-family:"Sora",sans-serif; font-weight:800; font-size:1.02rem; flex-shrink:0; }
.jom-byline .who small{ display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; }
.jom-byline .who b{ font-size:1.05rem; color:var(--ink); font-weight:700; }

.jom-cta-inline{ margin:30px 0 0; }
.jom-share{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:34px 0 0; padding-top:24px; border-top:1px solid var(--border); }
.jom-share span{ font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.jom-share a,.jom-share button{ display:inline-flex; align-items:center; gap:7px; font-size:.9rem; font-weight:600; border:1px solid var(--border-strong); background:var(--card); color:var(--ink); border-radius:100px; padding:9px 16px; cursor:pointer; text-decoration:none; transition:border-color .15s, color .15s; }
.jom-share a:hover,.jom-share button:hover{ border-color:var(--red); color:var(--red); }
.jom-share svg{ width:16px; height:16px; }

/* ---- follow / subscribe ---- */
.jom-follow{ background:linear-gradient(160deg,#161418 0%,#241016 100%); color:#fff; border-radius:22px; padding:clamp(28px,4vw,44px); position:relative; overflow:hidden; box-shadow:var(--shadow-lg); }
.jom-follow::before{ content:""; position:absolute; top:-90px; right:-70px; width:280px; height:280px; background:radial-gradient(circle, rgba(201,162,39,.24) 0%, rgba(201,162,39,0) 70%); }
.jom-follow .inner{ position:relative; max-width:560px; }
.jom-follow .eyebrow{ color:#ffcf9a; }
.jom-follow .eyebrow::before{ background:url("/cc-mark-white.png") center/contain no-repeat; }
.jom-follow h2{ font-family:"Sora",sans-serif; font-size:clamp(1.7rem,3.6vw,2.3rem); font-weight:800; margin:0 0 10px; line-height:1.1; }
.jom-follow p.say{ color:rgba(255,255,255,.82); font-size:1.04rem; line-height:1.55; margin:0 0 22px; }
.jom-field{ margin:0 0 14px; }
.jom-field label{ display:block; font-size:.82rem; font-weight:600; color:rgba(255,255,255,.8); margin:0 0 6px; }
.jom-input{ width:100%; box-sizing:border-box; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); border-radius:12px; color:#fff; font-size:1rem; padding:13px 15px; font-family:inherit; }
.jom-input::placeholder{ color:rgba(255,255,255,.45); }
.jom-input:focus{ outline:none; border-color:#ffb0a0; background:rgba(255,255,255,.12); }
.jom-row{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:560px){ .jom-row{ grid-template-columns:1fr 1fr; } }
.jom-check{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:rgba(255,255,255,.82); line-height:1.45; margin:2px 0 0; cursor:pointer; }
.jom-check input{ margin-top:3px; width:17px; height:17px; flex-shrink:0; accent-color:var(--red-bright); }
.jom-consent{ font-size:.78rem; color:rgba(255,255,255,.6); line-height:1.5; margin:14px 0 18px; }
.jom-consent a{ color:#ffcf9a; }
.jom-follow .btn-primary{ width:100%; justify-content:center; font-size:1.05rem; padding:15px 20px; }
.jom-follow .result{ margin-top:16px; font-size:.98rem; font-weight:600; padding:12px 16px; border-radius:12px; display:none; }
.jom-follow .result.ok{ display:block; background:rgba(46,160,90,.18); border:1px solid rgba(46,160,90,.5); color:#c9f5d8; }
.jom-follow .result.err{ display:block; background:rgba(205,32,39,.2); border:1px solid rgba(205,32,39,.55); color:#ffd7d9; }

.jom-empty{ text-align:center; padding:60px 20px; color:var(--muted); }
.jom-empty svg{ width:46px; height:46px; color:var(--border-strong); margin-bottom:14px; }

/* related strip on a post */
.jom-more{ background:var(--bg-soft); }

/* ---- top share bar (light, right above the title) ---- */
.jom-sharebar{ background:#fff; border-bottom:1px solid var(--border); }
.jom-sharebar .wrap{ display:flex; align-items:center; gap:14px; padding:11px 22px; }
.jom-sharebar .lbl{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.jom-sharebar .sb-icons{ display:flex; gap:8px; flex-wrap:wrap; }
.jom-share-btn{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--border-strong); color:var(--ink); background:#fff; cursor:pointer; text-decoration:none; transition:transform .14s ease, border-color .14s, color .14s, background .14s; font-size:.9rem; font-weight:800; }
.jom-share-btn:hover{ transform:translateY(-2px); }
.jom-share-btn svg{ width:17px; height:17px; }
.sb-fb:hover{ color:#fff; background:#1877f2; border-color:#1877f2; }
.sb-x:hover{ color:#fff; background:#000; border-color:#000; }
.sb-wa:hover{ color:#fff; background:#25d366; border-color:#25d366; }
.sb-sms:hover{ color:#fff; background:var(--red); border-color:var(--red); }
.sb-em:hover{ color:#fff; background:#555; border-color:#555; }
.sb-copy:hover{ color:#fff; background:var(--ink); border-color:var(--ink); }
@media (max-width:520px){ .jom-sharebar .lbl{ display:none; } .jom-sharebar .wrap{ justify-content:center; gap:10px; } }