/* ================================================================
   Article styling — shared by every blog post (one source of truth).
   Premium reading layout: brand-navy hero, comfortable measure,
   generous rhythm, gold accents.
   ================================================================ */

/* ── Hero ── */
.post-hero { position: relative; overflow: hidden; padding: 72px 0 52px;
  background: linear-gradient(140deg, #0B3C5D 0%, #061A2E 72%); }
.post-hero-img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.14; z-index: 0; }
.post-hero-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent); }
.post-hero-inner { position: relative; z-index: 2; max-width: 860px; }
.post-cat { display: inline-block; background: linear-gradient(135deg, #E8AD1A, #C8930A);
  color: #061A2E; padding: 5px 15px; border-radius: 20px; font-size: 0.72rem;
  font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; }
.post-hero h1 { font-family: 'Syne', sans-serif; font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 800; color: #fff; margin-bottom: 16px; line-height: 1.18; letter-spacing: -0.01em; }
.post-meta { display: flex; align-items: center; gap: 8px 22px; font-size: 0.85rem;
  color: rgba(255,255,255,.72); flex-wrap: wrap; }
.post-meta span { display: inline-flex; align-items: center; gap: 6px; }
.post-hero .breadcrumb a { color: rgba(255,255,255,.7); }
.post-hero .breadcrumb span { color: rgba(255,255,255,.5); }

/* ── Article body — comfortable measure and rhythm ── */
/* 640px, not 860px. At this size and face the old width ran to 99 characters a
   line; the eye loses its place returning to the left margin much past 75. The
   48px of horizontal padding is inside the figure, so the text itself measures
   592px, which is 72 characters. The hero above stays wider — a headline can
   carry a longer line than body copy. */
.post-body { max-width: 640px; margin: 0 auto; padding: 52px 24px 40px; }
.post-body h2 { font-family: 'Syne', sans-serif; font-weight: 800; color: var(--navy);
  font-size: 1.35rem; margin: 38px 0 14px; line-height: 1.28; }
.post-body h3 { font-family: 'Syne', sans-serif; font-weight: 700; color: var(--navy);
  font-size: 1.06rem; margin: 26px 0 10px; }
.post-body p, .post-body li { font-size: 1rem; color: #33465a; line-height: 1.75; margin-bottom: 14px; }
.post-body ul, .post-body ol { padding-left: 22px; margin: 8px 0 20px; }
.post-body li { margin-bottom: 10px; }
.post-body ul li { list-style: none; position: relative; padding-left: 4px; }
.post-body ul li::before { content: ''; position: absolute; left: -16px; top: 0.72em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.post-body ol li { list-style: decimal; }
.post-body strong { color: var(--navy); font-weight: 700; }
.post-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.post-body blockquote { margin: 26px 0; padding: 16px 24px; border-left: 4px solid var(--gold);
  background: var(--off-white); border-radius: 0 12px 12px 0; font-size: 1rem;
  color: var(--navy); font-style: italic; }

/* ── In-article CTA ── */
.post-cta-box { background: linear-gradient(140deg, #0B3C5D, #061A2E); border-radius: var(--radius-lg);
  padding: 40px 34px; text-align: center; margin: 52px 0; box-shadow: var(--shadow-md); }
.post-cta-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.3rem; color: #fff; margin-bottom: 10px; }
.post-cta-sub { font-size: 0.95rem; color: rgba(255,255,255,.62); margin: 0 auto 24px; max-width: 460px; }

/* ── Share row ── */
.share-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(0,0,0,.08); }
.share-btn { padding: 10px 18px; border-radius: 10px; font-size: 0.84rem; font-weight: 700;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; transition: var(--transition); }
/* Scoped to .share-row, which these always sit in. They are anchors inside
   .post-body, and `.post-body a { color: var(--blue) }` is (0,1,1) against the
   (0,1,0) of a bare `.share-wa` — so the white never applied and the WhatsApp
   button drew blue-on-green at 1.45:1. It was doing that before the icons went
   in; the emoji simply brought their own colour and hid it. */
.share-row .share-wa { background: #128C7E; color: #fff; border: none; }
.share-row .share-wa:hover { filter: brightness(1.05); transform: translateY(-1px); }
.share-row .share-email { background: var(--off-white); color: var(--text-dark); border: 1px solid rgba(0,0,0,.12); }
.share-row .share-email:hover { border-color: var(--blue); color: var(--blue); }

@media (max-width: 600px) {
  .post-hero { padding: 60px 0 42px; }
  .post-body { padding: 42px 20px 30px; }
  .post-body p, .post-body li { font-size: 1rem; line-height: 1.85; }
}