/* ═══════════════════════════════════════════════════════
   BatWin.io — Blog stylesheet (shared)
   Powers the blog listing page AND every article page.
   Same palette & components as the main site.
   ═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. BLOG LISTING PAGE (blog.html)
   ───────────────────────────────────────────── */
.blog-hero { padding: 64px 0 20px; text-align: center; position: relative; overflow: hidden; }
.blog-hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 70% 55% at 50% -10%, rgba(245,166,35,0.09), transparent 66%);
  pointer-events:none;
}
.blog-hero .bh-eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 15px; border-radius:50px; margin-bottom:20px;
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.9px;
  background:rgba(245,166,35,0.1); color:var(--gold); border:1px solid rgba(245,166,35,0.25);
}
.blog-hero h1 { font-size:clamp(2rem,4.2vw,3.2rem); font-weight:900; letter-spacing:-1px; line-height:1.1; margin-bottom:18px; color:var(--white); }
.blog-hero h1 span { background:linear-gradient(135deg,#f5a623,#ffd166,#c8841a); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.blog-hero p { color:var(--gray-light); font-size:1.06rem; line-height:1.75; max-width:600px; margin:0 auto; }

/* Category filter pills */
.blog-filters { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:36px 0 8px; }
.blog-filter {
  padding:9px 20px; border-radius:50px; font-size:.82rem; font-weight:700; cursor:pointer;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); color:var(--gray-light);
  transition:all .25s ease; font-family:inherit;
}
.blog-filter:hover { border-color:rgba(245,166,35,0.3); color:var(--gold); transform:translateY(-1px); }
.blog-filter.active { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#0a0e1a; border-color:transparent; box-shadow:0 4px 16px rgba(245,166,35,0.28); }

/* ── FEATURED (latest) POST — big card ── */
.featured-post-section { padding: 40px 0 24px; }
.featured-post {
  display:grid; grid-template-columns:1.05fr 1fr; gap:0; overflow:hidden;
  background:linear-gradient(145deg,rgba(17,30,53,0.92),rgba(13,21,42,0.85));
  border:1px solid rgba(245,166,35,0.16); border-radius:26px;
  transition:all .4s cubic-bezier(0.34,1.2,0.64,1);
}
.featured-post:hover { border-color:rgba(245,166,35,0.3); box-shadow:0 28px 70px rgba(0,0,0,0.5); }
.fp-thumb { position:relative; min-height:320px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse 60% 80% at 35% 25%,rgba(245,166,35,0.18),transparent 60%),linear-gradient(145deg,#16294a,#0d1a30); }
.fp-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fp-thumb .fp-ph-icon { font-size:4.5rem; opacity:.85; }
.fp-badge { position:absolute; top:18px; left:18px; z-index:2; padding:6px 14px; border-radius:50px; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  background:rgba(245,166,35,0.95); color:#0a0e1a; box-shadow:0 4px 14px rgba(245,166,35,0.4); }
.fp-body { padding:44px 42px; display:flex; flex-direction:column; justify-content:center; }
.fp-cat { font-size:.72rem; font-weight:800; color:var(--gold); text-transform:uppercase; letter-spacing:.9px; margin-bottom:14px; }
.fp-body h2 { font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:900; line-height:1.2; letter-spacing:-.5px; margin-bottom:14px; color:var(--white); }
.fp-body h2 a { color:inherit; }
.fp-body h2 a:hover { color:var(--gold); }
.fp-excerpt { color:var(--gray-light); font-size:.96rem; line-height:1.75; margin-bottom:22px; }
.fp-meta { display:flex; align-items:center; gap:12px; font-size:.78rem; color:var(--gray); margin-bottom:26px; flex-wrap:wrap; }
.fp-meta .meta-dot { width:4px; height:4px; border-radius:50%; background:rgba(245,166,35,0.4); }
.fp-actions { display:flex; gap:12px; flex-wrap:wrap; }

/* ── ARTICLE GRID ── */
.blog-grid-section { padding: 40px 0 96px; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }

.post-card {
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(145deg,rgba(17,30,53,0.92),rgba(13,21,42,0.85));
  border:1px solid rgba(245,166,35,0.1); border-radius:20px;
  transition:all .38s cubic-bezier(0.34,1.2,0.64,1);
}
.post-card:hover { transform:translateY(-8px); border-color:rgba(245,166,35,0.28); box-shadow:0 24px 56px rgba(0,0,0,0.5); }

/* Thumbnail — the whole thumb is a clickable link */
.pc-thumb { position:relative; display:block; aspect-ratio:16/10; overflow:hidden;
  background:radial-gradient(ellipse 70% 90% at 40% 20%,rgba(245,166,35,0.14),transparent 60%),linear-gradient(145deg,#16294a,#0d1a30); }
.pc-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.post-card:hover .pc-thumb img { transform:scale(1.06); }
.pc-thumb .pc-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.8rem; opacity:.85; }
.pc-thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(7,11,24,0.5),transparent 55%); pointer-events:none; }
.pc-cat { position:absolute; top:12px; left:12px; z-index:2; padding:4px 11px; border-radius:8px; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  background:rgba(7,11,24,0.85); color:var(--gold); border:1px solid rgba(245,166,35,0.3); backdrop-filter:blur(6px); }

.pc-body { padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.pc-meta { display:flex; align-items:center; gap:9px; font-size:.72rem; color:var(--gray); margin-bottom:12px; }
.pc-meta .meta-dot { width:3px; height:3px; border-radius:50%; background:rgba(245,166,35,0.4); }
.pc-title { font-size:1.08rem; font-weight:800; line-height:1.35; letter-spacing:-.2px; margin-bottom:10px; }
.pc-title a { color:var(--white); transition:color .2s; }
.pc-title a:hover { color:var(--gold); }
.pc-excerpt { color:var(--gray); font-size:.86rem; line-height:1.7; margin-bottom:20px; flex:1; }

/* Read Now button */
.btn-read {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; align-self:flex-start;
  padding:11px 22px; border-radius:11px; font-weight:800; font-size:.84rem; letter-spacing:.02em;
  background:linear-gradient(135deg,rgba(245,166,35,0.14),rgba(245,166,35,0.05));
  color:var(--gold); border:1px solid rgba(245,166,35,0.25);
  text-decoration:none; transition:all .28s cubic-bezier(0.34,1.2,0.64,1); font-family:inherit;
}
.btn-read .br-arrow { transition:transform .3s cubic-bezier(0.34,1.56,0.64,1); }
.btn-read:hover { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#0a0e1a; border-color:transparent; box-shadow:0 6px 20px rgba(245,166,35,0.3); transform:translateY(-2px); }
.btn-read:hover .br-arrow { transform:translateX(4px); }

/* "Coming soon" placeholder card (for daily-upload rhythm) */
.post-card.soon { opacity:.72; }
.post-card.soon .pc-thumb { filter:grayscale(0.3); }
.post-card.soon .btn-read { pointer-events:none; opacity:.55; }

/* Newsletter / daily-upload strip */
.blog-daily-strip {
  max-width:760px; margin:64px auto 0; text-align:center;
  background:linear-gradient(135deg,rgba(17,30,53,0.96),rgba(13,21,42,0.92));
  border:1px solid rgba(245,166,35,0.2); border-radius:24px; padding:40px 34px; position:relative; overflow:hidden;
}
.blog-daily-strip::before { content:''; position:absolute; top:0; left:0; right:0; height:2.5px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.blog-daily-strip h3 { font-size:1.5rem; font-weight:900; margin-bottom:10px; color:var(--white); }
.blog-daily-strip h3 span { color:var(--gold); }
.blog-daily-strip p { color:var(--gray); font-size:.92rem; line-height:1.7; max-width:480px; margin:0 auto 22px; }

@media (max-width:1024px) {
  .blog-grid { grid-template-columns:repeat(2,1fr); }
  .featured-post { grid-template-columns:1fr; }
  .fp-thumb { min-height:240px; }
}
@media (max-width:640px) {
  .blog-grid { grid-template-columns:1fr; }
  .fp-body { padding:32px 26px; }
}

/* ─────────────────────────────────────────────
   2. ARTICLE PAGE (blog-*.html)
   ───────────────────────────────────────────── */
.article-hero { padding: 56px 0 20px; position: relative; overflow: hidden; }
.article-hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 70% 60% at 50% -10%, rgba(245,166,35,0.08), transparent 66%);
  pointer-events:none;
}
.article-shell { max-width: 820px; margin: 0 auto; position: relative; z-index: 1; }

.breadcrumb { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.78rem; color:var(--gray); margin-bottom:24px; }
.breadcrumb a { color:var(--gray); transition:color .2s; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb .sep { opacity:.5; }
.breadcrumb .current { color:var(--gray-light); }

.article-cat {
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 14px; border-radius:50px;
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.8px;
  background:rgba(245,166,35,0.1); color:var(--gold); border:1px solid rgba(245,166,35,0.25);
  margin-bottom:20px;
}
.article-title { font-size:clamp(1.9rem,4vw,3rem); font-weight:900; line-height:1.12; letter-spacing:-1px; margin-bottom:22px; color:var(--white); }
.article-title span { background:linear-gradient(135deg,#f5a623 0%,#ffd166 50%,#c8841a 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.article-standfirst { font-size:1.08rem; color:rgba(176,190,197,0.9); line-height:1.8; margin-bottom:28px; }

.article-meta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-bottom:28px; }
.meta-author { display:flex; align-items:center; gap:11px; }
.meta-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  display:flex; align-items:center; justify-content:center; font-weight:900; color:#0a0e1a; font-size:.95rem; flex-shrink:0; box-shadow:0 4px 14px rgba(245,166,35,0.22); }
.meta-author-info .m-name { font-size:.86rem; font-weight:800; color:var(--white); }
.meta-author-info .m-role { font-size:.74rem; color:var(--gray); }
.meta-dot { width:4px; height:4px; border-radius:50%; background:rgba(245,166,35,0.4); }
.meta-chip { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--gray); font-weight:600; }

/* Featured image / thumbnail slot */
.featured-img { position:relative; width:100%; aspect-ratio:16/9; border-radius:24px; overflow:hidden; margin:8px auto 8px;
  border:1px solid rgba(245,166,35,0.18);
  background:radial-gradient(ellipse 60% 80% at 30% 20%, rgba(245,166,35,0.16), transparent 60%),linear-gradient(145deg,#111e35,#0d1a30);
  box-shadow:0 24px 60px rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; }
.featured-img img { width:100%; height:100%; object-fit:cover; display:block; }
.featured-img .fi-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:20px; }
.featured-img .fi-icon { font-size:3rem; opacity:.9; }
.featured-img .fi-note { font-size:.8rem; color:var(--gray); font-weight:600; letter-spacing:.3px; }
.featured-img .fi-tag { position:absolute; top:16px; left:16px; padding:5px 12px; border-radius:8px; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  background:rgba(239,68,68,0.9); color:#fff; box-shadow:0 2px 10px rgba(239,68,68,0.4); }
.featured-caption { text-align:center; font-size:.76rem; color:var(--gray); margin:14px 0 0; font-style:italic; }

/* Body */
.article-body-section { padding: 40px 0 90px; }
.article-body { max-width:760px; margin:0 auto; }

/* Quick answer / TL;DR */
.quick-answer {
  background:linear-gradient(135deg,rgba(245,166,35,0.09),rgba(245,166,35,0.03));
  border:1px solid rgba(245,166,35,0.24); border-radius:18px; padding:24px 28px; margin:0 0 40px;
}
.quick-answer .qa-label { display:flex; align-items:center; gap:8px; font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--gold); margin-bottom:12px; }
.quick-answer p { color:var(--gray-light); font-size:1rem; line-height:1.8; margin:0; }
.quick-answer strong { color:var(--white); }

/* Table of contents */
.toc { background:linear-gradient(145deg,rgba(17,30,53,0.9),rgba(13,21,42,0.85)); border:1px solid rgba(245,166,35,0.14); border-radius:20px; padding:26px 30px; margin:0 0 44px; }
.toc-title { display:flex; align-items:center; gap:9px; font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--gold); margin-bottom:16px; }
.toc ol { list-style:none; counter-reset:toc; display:flex; flex-direction:column; gap:9px; }
.toc ol li { counter-increment:toc; }
.toc ol li a { display:flex; align-items:baseline; gap:12px; font-size:.9rem; color:var(--gray-light); transition:all .2s ease; line-height:1.5; }
.toc ol li a::before { content:counter(toc,decimal-leading-zero); font-size:.72rem; font-weight:800; color:var(--gold); opacity:.7; flex-shrink:0; min-width:20px; }
.toc ol li a:hover { color:var(--gold); transform:translateX(3px); }

/* Prose */
.prose { color:var(--gray-light); font-size:1.02rem; line-height:1.9; }
.prose > p { margin-bottom:24px; }
.prose h2 { font-size:clamp(1.4rem,2.6vw,1.85rem); font-weight:900; color:var(--white); letter-spacing:-.4px; line-height:1.25; margin:52px 0 18px; scroll-margin-top:90px; position:relative; padding-left:18px; }
.prose h2::before { content:''; position:absolute; left:0; top:.18em; bottom:.18em; width:4px; border-radius:3px; background:linear-gradient(180deg,var(--gold),var(--gold-dark)); }
.prose h3 { font-size:1.2rem; font-weight:800; color:var(--white); margin:34px 0 12px; letter-spacing:-.2px; }
.prose a { color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(245,166,35,0.3); transition:border-color .2s; }
.prose a:hover { border-color:var(--gold); }
.prose strong { color:var(--white); font-weight:700; }
.prose ul, .prose ol { margin:0 0 24px; padding-left:4px; display:flex; flex-direction:column; gap:12px; }
.prose ul li { list-style:none; display:flex; gap:12px; align-items:flex-start; line-height:1.72; }
.prose ul li::before { content:'\25B8'; color:var(--gold); flex-shrink:0; margin-top:1px; font-size:.9rem; }
.prose ol { counter-reset:pl; padding-left:0; }
.prose ol li { list-style:none; counter-increment:pl; display:flex; gap:14px; align-items:flex-start; line-height:1.72; }
.prose ol li::before { content:counter(pl); flex-shrink:0; width:26px; height:26px; border-radius:8px; margin-top:1px;
  background:linear-gradient(135deg,rgba(245,166,35,0.16),rgba(245,166,35,0.05)); border:1px solid rgba(245,166,35,0.22); color:var(--gold);
  font-size:.78rem; font-weight:800; display:flex; align-items:center; justify-content:center; }

/* Callouts */
.callout { display:flex; gap:16px; align-items:flex-start; background:rgba(245,166,35,0.05); border:1px solid rgba(245,166,35,0.18); border-left:3px solid var(--gold); border-radius:14px; padding:20px 22px; margin:32px 0; }
.callout .c-icon { font-size:1.4rem; flex-shrink:0; line-height:1.4; }
.callout .c-body { font-size:.92rem; line-height:1.75; color:var(--gray-light); }
.callout .c-body strong { color:var(--gold); }
.callout.warn { background:rgba(239,68,68,0.05); border-color:rgba(239,68,68,0.2); border-left-color:var(--red); }
.callout.warn .c-body strong { color:var(--red); }

/* Strategy cards */
.strategy-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:32px 0; }
.strategy-card { background:linear-gradient(145deg,rgba(17,30,53,0.9),rgba(13,21,42,0.85)); border:1px solid rgba(245,166,35,0.12); border-radius:16px; padding:22px 24px; transition:all .35s cubic-bezier(0.34,1.2,0.64,1); }
.strategy-card:hover { transform:translateY(-4px); border-color:rgba(245,166,35,0.28); box-shadow:0 16px 40px rgba(0,0,0,0.4); }
.strategy-card .sc-num { font-size:.72rem; font-weight:800; color:var(--gold); letter-spacing:1px; margin-bottom:8px; }
.strategy-card h4 { font-size:1rem; font-weight:800; color:var(--white); margin-bottom:8px; }
.strategy-card p { font-size:.86rem; color:var(--gray); line-height:1.7; }

/* Mini stat strip */
.mini-stats-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:32px 0; }
.mss-item { text-align:center; background:rgba(7,11,24,0.6); border:1px solid rgba(245,166,35,0.14); border-radius:14px; padding:20px 12px; }
.mss-val { font-size:1.6rem; font-weight:900; color:var(--gold); line-height:1.1; letter-spacing:-.5px; }
.mss-lbl { font-size:.7rem; color:var(--gray); text-transform:uppercase; letter-spacing:.6px; font-weight:600; margin-top:6px; }

/* Data table */
.table-wrap { overflow-x:auto; margin:32px 0; border-radius:16px; border:1px solid rgba(245,166,35,0.14); }
.data-table { width:100%; border-collapse:collapse; min-width:520px; font-size:.9rem; }
.data-table thead th { background:rgba(245,166,35,0.08); color:var(--gold); font-weight:800; text-align:left; padding:14px 18px; font-size:.76rem; text-transform:uppercase; letter-spacing:.5px; }
.data-table tbody td { padding:14px 18px; border-top:1px solid rgba(245,166,35,0.1); color:var(--gray-light); }
.data-table tbody tr:hover { background:rgba(245,166,35,0.03); }
.data-table .tag-lo, .data-table .tag-mid, .data-table .tag-hi { display:inline-block; padding:3px 10px; border-radius:50px; font-size:.7rem; font-weight:800; }
.data-table .tag-lo { background:rgba(34,197,94,0.12); color:var(--green); border:1px solid rgba(34,197,94,0.25); }
.data-table .tag-mid { background:rgba(245,166,35,0.12); color:var(--gold); border:1px solid rgba(245,166,35,0.25); }
.data-table .tag-hi { background:rgba(239,68,68,0.12); color:var(--red); border:1px solid rgba(239,68,68,0.25); }

/* In-article CTA */
.inline-cta { background:linear-gradient(135deg,rgba(17,30,53,0.97),rgba(13,21,42,0.93)); border:1px solid rgba(245,166,35,0.22); border-radius:24px; padding:40px 36px; margin:48px 0; text-align:center; position:relative; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.4); }
.inline-cta::before { content:''; position:absolute; top:0; left:0; right:0; height:2.5px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.inline-cta::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 115%,rgba(245,166,35,0.09),transparent 55%); pointer-events:none; }
.inline-cta h3 { font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:900; margin-bottom:10px; letter-spacing:-.4px; color:var(--white); position:relative; }
.inline-cta h3 span { color:var(--gold); }
.inline-cta p { color:var(--gray); font-size:.92rem; line-height:1.7; max-width:460px; margin:0 auto 24px; position:relative; }
.inline-cta .cta-actions { position:relative; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* FAQ */
.article-faq { max-width:760px; margin:0 auto; }
.article-faq .faq-item { border:1px solid rgba(245,166,35,0.12); border-radius:14px; margin-bottom:12px; background:rgba(17,30,53,0.55); overflow:hidden; transition:border-color .25s; }
.article-faq .faq-item:hover { border-color:rgba(245,166,35,0.24); }
.article-faq .faq-q { width:100%; text-align:left; background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; font-size:.98rem; font-weight:700; color:var(--white); font-family:inherit; }
.article-faq .faq-icon { color:var(--gold); font-size:1.3rem; font-weight:400; flex-shrink:0; transition:transform .3s; }
.article-faq .faq-q[aria-expanded="true"] .faq-icon { transform:rotate(45deg); }
.article-faq .faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
/* Opened via main.js's shared .faq-item.open toggle (see assets/js/main.js).
   Scoped override so longer article FAQ answers have room beyond the
   site-wide 400px default (main.css .faq-item.open .faq-a). */
.article-faq .faq-item.open .faq-a { max-height:800px; }
.article-faq .faq-a-inner { padding:0 22px 20px; color:var(--gray-light); font-size:.92rem; line-height:1.8; }

/* Author box */
.author-box { display:flex; gap:20px; align-items:flex-start; background:linear-gradient(145deg,rgba(17,30,53,0.9),rgba(13,21,42,0.85)); border:1px solid rgba(245,166,35,0.14); border-radius:20px; padding:28px 30px; margin:56px auto 0; max-width:760px; }
.author-box .ab-avatar { width:60px; height:60px; border-radius:16px; flex-shrink:0; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.4rem; color:#0a0e1a; box-shadow:0 6px 18px rgba(245,166,35,0.24); }
.author-box .ab-name { font-size:1.05rem; font-weight:800; color:var(--white); margin-bottom:2px; }
.author-box .ab-role { font-size:.76rem; color:var(--gold); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
.author-box .ab-bio { font-size:.88rem; color:var(--gray); line-height:1.75; }

/* Share row */
.share-row { display:flex; align-items:center; gap:12px; max-width:760px; margin:36px auto 0; flex-wrap:wrap; }
.share-row .sr-label { font-size:.78rem; font-weight:700; color:var(--gray); text-transform:uppercase; letter-spacing:.6px; }
.share-row a { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); color:var(--gray); font-size:.95rem; transition:all .3s cubic-bezier(0.34,1.56,0.64,1); text-decoration:none; }
.share-row a:hover { background:rgba(245,166,35,0.1); border-color:rgba(245,166,35,0.28); color:var(--gold); transform:translateY(-3px); }

/* Back to blog */
.back-to-blog { max-width:760px; margin:44px auto 0; text-align:center; }

@media (max-width:768px) {
  .strategy-grid { grid-template-columns:1fr; }
  .mini-stats-strip { grid-template-columns:1fr; }
  .author-box { flex-direction:column; gap:16px; }
  .article-hero { padding:36px 0 12px; }
  .inline-cta { padding:32px 22px; }
  .inline-cta .cta-actions,
  .fp-actions { flex-direction:column; align-items:stretch; }
  .inline-cta .cta-actions .btn,
  .fp-actions .btn { width:100%; text-align:center; }
}

/* ─────────────────────────────────────────────
   3. SMALL-PHONE TIGHTENING (≤480px)
   Every component above uses desktop-scale padding by
   default; this tier trims spacing/type so content
   doesn't feel cramped on real small phones (320–480px).
   ───────────────────────────────────────────── */
@media (max-width:480px) {
  /* Listing hero + filters */
  .blog-hero { padding:44px 0 12px; }
  .blog-filters { gap:8px; margin:28px 0 4px; }
  .blog-filter { padding:8px 14px; font-size:.76rem; }

  /* Featured post card */
  .featured-post-section { padding:28px 0 16px; }
  .fp-thumb { min-height:180px; }
  .fp-badge { top:12px; left:12px; padding:5px 11px; font-size:.62rem; }
  .fp-body { padding:24px 20px; }
  .fp-excerpt { font-size:.9rem; margin-bottom:18px; }
  .fp-meta { gap:8px; margin-bottom:20px; }

  /* Article grid cards */
  .blog-grid-section { padding:28px 0 64px; }
  .blog-grid { gap:18px; }
  .pc-body { padding:16px 18px 18px; }
  .pc-title { font-size:1rem; }
  .pc-excerpt { font-size:.82rem; margin-bottom:16px; }
  .btn-read { width:100%; }
  .blog-daily-strip { margin-top:44px; padding:28px 20px; }
  .blog-daily-strip h3 { font-size:1.25rem; }

  /* Article hero */
  .article-hero { padding:28px 0 8px; }
  .article-cat { padding:5px 12px; font-size:.66rem; }
  .article-title { letter-spacing:-.5px; margin-bottom:16px; }
  .article-standfirst { font-size:1rem; margin-bottom:22px; }
  .article-meta { gap:10px; padding-bottom:20px; }
  .featured-img { border-radius:16px; }
  .featured-caption { font-size:.72rem; }

  /* Article body components */
  .article-body-section { padding:24px 0 64px; }
  .quick-answer { padding:18px 18px; margin:0 0 28px; border-radius:14px; }
  .quick-answer p { font-size:.92rem; }
  .toc { padding:20px 18px; margin:0 0 32px; border-radius:16px; }
  .toc ol li a { font-size:.85rem; gap:9px; }
  .prose { font-size:.96rem; }
  .prose h2 { margin:38px 0 14px; font-size:1.3rem; padding-left:14px; }
  .prose h3 { margin:26px 0 10px; font-size:1.08rem; }
  .prose ol li::before { width:22px; height:22px; font-size:.7rem; gap:10px; }
  .prose ol li, .prose ul li { gap:10px; }
  .callout { padding:16px 16px; margin:24px 0; gap:12px; border-radius:12px; }
  .callout .c-body { font-size:.86rem; }
  .strategy-card { padding:18px 18px; }
  .mss-item { padding:16px 10px; }
  .mss-val { font-size:1.35rem; }
  .table-wrap { margin:24px 0; }
  .data-table { min-width:460px; font-size:.82rem; }
  .data-table thead th { padding:11px 14px; font-size:.68rem; }
  .data-table tbody td { padding:11px 14px; }
  .inline-cta { padding:26px 18px; margin:36px 0; border-radius:18px; }
  .inline-cta p { font-size:.86rem; }
  .article-faq .faq-q { padding:16px 18px; font-size:.9rem; gap:10px; }
  .article-faq .faq-a-inner { padding:0 18px 16px; font-size:.86rem; }
  .author-box { padding:20px 20px; margin-top:40px; border-radius:16px; }
  .share-row { gap:9px; }
  .share-row a { width:36px; height:36px; }
}

/* Defensive word-wrap so long unbroken strings (URLs, numbers)
   never force horizontal overflow inside narrow containers. */
.prose, .c-body, .pc-excerpt, .fp-excerpt, .quick-answer p,
.faq-a-inner, .ab-bio { overflow-wrap: break-word; word-break: break-word; }

/* ── Game-guide illustrations (card rows, example boxes, checklists, figures, sources) ── */
.hand { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin:20px 0 26px; }
.hand-group { display:flex; flex-direction:column; gap:6px; }
.hand-group .hg-cards { display:flex; gap:4px; }
.hand-group .hg-label { font-size:.7rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--gray); }
.hand-group.ok .hg-label { color:var(--green); }
.hand-group.bad .hg-label { color:var(--red); }
.pk { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:52px; padding:0 4px; border-radius:7px; background:#f7f4ec; color:#111; font-weight:800; font-size:.95rem; line-height:1; box-shadow:0 2px 6px rgba(0,0,0,.45); }
.pk.r { color:#c81e1e; }
.pk.j { background:linear-gradient(145deg,var(--gold-light),var(--gold)); color:#1a1200; }
.pk.dim { opacity:.45; }
.ex-pair { display:grid; grid-template-columns:1fr; gap:16px; margin:26px 0 32px; }
.ex-box { border-radius:14px; padding:18px 20px; border:1px solid var(--border-soft); background:rgba(255,255,255,0.02); }
.ex-box .ex-label { font-size:.74rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; }
.ex-box.good { border-color:rgba(34,197,94,0.3); background:rgba(34,197,94,0.05); }
.ex-box.good .ex-label { color:var(--green); }
.ex-box.bad { border-color:rgba(239,68,68,0.3); background:rgba(239,68,68,0.05); }
.ex-box.bad .ex-label { color:var(--red); }
.ex-box p { font-size:.92rem; line-height:1.75; color:var(--gray-light); margin:6px 0 0; }
.ex-box .hand { margin:10px 0 6px; }
.rule-note { display:block; margin-top:6px; padding:8px 12px; border-left:3px solid var(--gold); background:rgba(245,166,35,0.06); border-radius:0 8px 8px 0; font-size:.86rem; color:var(--gray-light); }
.checklist { list-style:none; padding:0; margin:22px 0 30px; }
.checklist li { position:relative; padding:12px 14px 12px 44px; margin-bottom:8px; border:1px solid var(--border); border-radius:10px; background:rgba(245,166,35,0.03); color:var(--gray-light); font-size:.93rem; line-height:1.6; }
.checklist li::before { content:'\2713'; position:absolute; left:14px; top:11px; width:20px; height:20px; border-radius:5px; background:rgba(34,197,94,0.15); color:var(--green); font-weight:900; font-size:.8rem; display:flex; align-items:center; justify-content:center; }
.game-figure { margin:26px 0 32px; padding:18px; border:1px solid var(--border); border-radius:16px; background:rgba(13,21,38,0.6); }
.game-figure svg { display:block; width:100%; max-width:520px; height:auto; margin:0 auto; }
.game-figure figcaption { margin-top:12px; font-size:.84rem; color:var(--gray); text-align:center; line-height:1.6; }
.sources { font-size:.86rem; color:var(--gray); }
.sources li { margin-bottom:6px; word-break:break-word; }
.sources a { color:var(--gold-light); }
@media (min-width:768px) {
  .ex-pair { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  .pk { min-width:32px; height:46px; font-size:.85rem; }
  .hand { gap:10px; }
}