/* blog-post page — styles copied unchanged from blog-post.html */

.progress { position: fixed; top: 0; left: 0; z-index: 120; width: 100%; height: 4px; background: transparent; }
.progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--red), var(--orange)); }
.post-hero { position: relative; min-height: min(78vh, 640px); display: flex; align-items: flex-end; background: var(--navy-deep) center 25% / cover no-repeat; color: var(--white); }
.post-hero::before { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,16,48,.15) 0%, rgba(8,16,48,.55) 45%, rgba(8,16,48,.95) 100%); content: ""; }
.post-hero .wrap { position: relative; padding: 120px 0 clamp(40px, 6vw, 64px); }
.post-hero h1 { max-width: 900px; margin: 16px 0 0; color: var(--white); font-size: clamp(32px, 5vw, 56px); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; }
.post-hero .post-meta { margin-top: 22px; color: #D6DDF0; font-size: 14px; }
.post-hero .post-meta a { color: var(--orange); font-weight: 700; text-decoration: none; }
.post-hero .post-meta a:hover { text-decoration: underline; }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(40px, 6vw, 72px); align-items: start; padding: clamp(48px, 6vw, 80px) 0; }
.article { max-width: 740px; font-size: 18px; line-height: 1.85; color: #2B3349; }
.article > p { margin: 0 0 24px; }
.article > p.lead { color: var(--navy); font-size: 21px; font-weight: 500; line-height: 1.7; }
.article > p.lead::first-letter { float: left; margin: 8px 12px 0 0; color: var(--red); font-size: 68px; font-weight: 800; line-height: .8; }
.article h2 { margin: 44px 0 16px; font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; }
.article blockquote { position: relative; margin: 36px 0; padding: 28px 28px 28px 72px; border-radius: var(--radius); background: var(--soft); color: var(--navy); font-size: 21px; font-weight: 700; line-height: 1.55; }
.article blockquote::before { position: absolute; top: 10px; left: 22px; color: var(--red); content: "“"; font-family: Georgia, serif; font-size: 72px; line-height: 1; }
.article blockquote cite { display: block; margin-top: 10px; color: var(--red); font-size: 14px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.article figure { margin: 36px 0; }
.article figure img { display: block; width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.article figcaption { display: flex; gap: 8px; align-items: center; margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.article ul.checks { display: grid; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
.article ul.checks li { display: flex; gap: 12px; align-items: flex-start; }
.article ul.checks svg { flex: none; margin-top: 6px; padding: 3px; border-radius: 50%; background: #FDE7E7; color: var(--red); }
.article .post-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 32px; }
.article .post-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; transition: filter .2s ease; }
.article .post-gallery img:hover { filter: brightness(1.08); }
.zoom-tip { display: flex; align-items: center; gap: 8px; margin: -8px 0 32px; color: var(--muted); font-size: 14px; }
.inline-give { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; margin: 40px 0; padding: 28px; border-radius: var(--radius); background: linear-gradient(120deg, var(--navy), #1A2F78); color: #D6DDF0; }
.inline-give .icon { display: grid; width: 60px; height: 60px; place-items: center; border-radius: 50%; background: var(--red); color: var(--white); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212,7,11,.5); } 50% { box-shadow: 0 0 0 12px rgba(212,7,11,0); } }
.inline-give h3 { margin: 0; color: var(--white); font-size: 21px; }
.inline-give p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; }
.inline-give .button { margin-top: 14px; }
.article-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share strong { margin-right: 4px; color: var(--navy); font-size: 14px; }
.share a, .share button { display: inline-grid; width: 42px; height: 42px; place-items: center; border: 2px solid #DDE3F0; border-radius: 50%; background: var(--white); color: var(--navy); cursor: pointer; text-decoration: none; transition: all .15s ease; }
.share a:hover, .share button:hover { border-color: var(--navy); background: var(--navy); color: var(--white); }
.copied { color: #1E5B3A; font-size: 13px; font-weight: 700; }
.author { display: flex; gap: 16px; align-items: center; margin-top: 32px; padding: 22px; border-radius: var(--radius); background: var(--soft); }
.author img { width: 60px; height: 60px; object-fit: contain; padding: 4px; border-radius: 50%; background: var(--white); }
.author strong { display: block; color: var(--navy); }
.author span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.sidebar { position: sticky; top: 108px; display: grid; gap: 20px; }
.sidebar .give-card { border-top: 5px solid var(--red); }
.ministry-card { display: flex; gap: 14px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color .2s ease; }
.ministry-card:hover { border-color: var(--navy); }
.ministry-card img { width: 64px; height: 64px; flex: none; object-fit: cover; border-radius: 10px; }
.ministry-card small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ministry-card strong { display: block; margin-top: 2px; color: var(--navy); }
.ministry-card em { display: block; margin-top: 2px; color: var(--red); font-size: 13px; font-style: normal; font-weight: 700; }
.post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.post-nav a { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color .2s ease; }
.post-nav a:hover { border-color: var(--navy); }
.post-nav a.next { text-align: right; }
.post-nav small { color: var(--muted); font-size: 13px; font-weight: 700; }
.post-nav strong { color: var(--navy); font-size: 15px; line-height: 1.4; }
.related { padding: clamp(56px, 7vw, 88px) 0; background: var(--soft); }
.related-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.related-head h2 { margin: 0; font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; }
.not-found { max-width: 640px; margin: 0 auto; padding: 96px 0; text-align: center; }
.not-found h1 { font-size: clamp(32px, 5vw, 44px); }
.not-found p { color: var(--muted); }
@media (max-width: 1040px) {
  .post-layout { grid-template-columns: 1fr; }
  .article { max-width: none; }
  .sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar .give-card { display: none; }
}
@media (max-width: 620px) {
  .article { font-size: 17px; }
  .article blockquote { padding: 56px 22px 22px; font-size: 19px; }
  .sidebar, .post-nav, .inline-give { grid-template-columns: 1fr; }
  .post-nav a.next { text-align: left; }
  .article .post-gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
}