/* ============================================================
   SuperSITE Blog — layers on top of the main site's app.css.
   Uses the same design tokens (--pink, --dark, --white, --fs-*).
   ============================================================ */

/* Header helper classes moved out of inline styles */
.mob-talk-cta { display:block; margin:16px 0 0; text-align:center; background:#E8175D; color:#fff; padding:12px; border-radius:6px; font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; }
.search-go { background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.4); font-size:13px; font-weight:600; padding:0 4px; white-space:nowrap; }

/* ── Blog hero ─────────────────────────────────────────────── */
.blog-hero .page-hero-sub { max-width: 640px; }
.blog-cat-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.blog-chip {
  display:inline-block; padding:7px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.14); color:rgba(255,255,255,0.72);
  font-size:var(--fs-small); font-weight:600; text-decoration:none;
  transition:all .18s ease; white-space:nowrap;
}
.blog-chip:hover { border-color:var(--pink); color:#fff; }
.blog-chip.is-active { background:var(--pink); border-color:var(--pink); color:#fff; }

/* ── Listing grid + cards ──────────────────────────────────── */
.blog-listing { padding: 64px 0 24px; }
.bpost-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.bpost-card {
  display:flex; flex-direction:column; background:var(--dark, #111120);
  border:1px solid var(--border-dark, rgba(255,255,255,0.07));
  border-radius:var(--r-lg, 12px); overflow:hidden; transition:transform .2s ease, border-color .2s ease;
}
.bpost-card:hover { transform:translateY(-4px); border-color:rgba(232,23,93,0.4); }
.bpost-card-media { display:block; aspect-ratio:16/9; background:#181828; overflow:hidden; }
.bpost-card-img { width:100%; height:100%; object-fit:cover; display:block; }
.bpost-card-noimg { display:flex; align-items:center; justify-content:center; height:100%; color:rgba(255,255,255,0.18); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:var(--fs-small); }
.bpost-card-body { padding:22px 22px 24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.bpost-card-cat {
  align-self:flex-start; font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--pink); text-decoration:none;
  background:rgba(232,23,93,0.10); padding:4px 10px; border-radius:6px;
}
.bpost-card-cat:hover { background:rgba(232,23,93,0.2); }
.bpost-card-title { font-size:var(--fs-h3); line-height:1.3; margin:0; }
.bpost-card-title a { color:var(--white); text-decoration:none; }
.bpost-card-title a:hover { color:var(--pink); }
.bpost-card-excerpt { color:var(--text-muted, rgba(255,255,255,0.7)); font-size:var(--fs-small); line-height:1.6; margin:0; flex:1; }
.bpost-card-meta { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,0.4); font-size:var(--fs-micro); }
.bpost-card-dot { opacity:.5; }

/* ── Pagination ────────────────────────────────────────────── */
.blog-pagination { margin:48px 0 8px; }
.blog-pagination .nav-links { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.blog-pagination .page-numbers {
  display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 12px;
  border:1px solid rgba(255,255,255,0.14); border-radius:8px; color:rgba(255,255,255,0.75);
  text-decoration:none; font-weight:600; font-size:var(--fs-small); transition:all .18s;
}
.blog-pagination .page-numbers:hover { border-color:var(--pink); color:#fff; }
.blog-pagination .page-numbers.current { background:var(--pink); border-color:var(--pink); color:#fff; }

.blog-empty { padding:60px 0; }
.blog-empty a { color:var(--pink); }

/* ── Single post ───────────────────────────────────────────── */
.bsingle-hero .breadcrumb { margin-bottom:18px; }
.bsingle-hero .bpost-card-cat { margin-bottom:16px; }
.bsingle-hero h1 { max-width:none; }            /* full container width */
.bsingle-meta { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,0.5); font-size:var(--fs-small); margin-top:16px; }

.bsingle-featured { margin-top:8px; }
.bsingle-featured-img { width:100%; max-height:480px; object-fit:cover; border-radius:var(--r-lg,12px); border:1px solid var(--border-dark,rgba(255,255,255,0.07)); display:block; }

/* Two-column body: article + sticky sidebar, filling the container width */
.bsingle-body { padding:56px 0 72px; }
.bsingle-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:56px; align-items:start; }
.bsingle-main { min-width:0; }

.bsingle-content { color:rgba(255,255,255,0.82); font-size:1.1875rem; line-height:1.8; }
/* Robust, consistent block spacing — every block gets bottom breathing room */
.bsingle-content > * { margin-top:0; margin-bottom:1.5em; }
.bsingle-content > *:last-child { margin-bottom:0; }
.bsingle-content h2 { color:var(--white); font-size:var(--fs-h2); line-height:1.25; margin-top:2.2em; margin-bottom:.55em; }
.bsingle-content h3 { color:var(--white); font-size:var(--fs-h3); line-height:1.3; margin-top:1.7em; margin-bottom:.4em; }
.bsingle-content h4 { color:var(--white); font-size:var(--fs-subheading); margin-top:1.4em; margin-bottom:.3em; }
.bsingle-content h2:first-child, .bsingle-content h3:first-child { margin-top:0; }
.bsingle-content p { margin:0 0 1.5em; }
.bsingle-content a { color:var(--pink); text-decoration:underline; text-underline-offset:3px; }
.bsingle-content a:hover { color:var(--white); }
.bsingle-content strong { color:var(--white); }
.bsingle-content ul, .bsingle-content ol { margin:0 0 1.5em; padding-left:1.4em; display:flex; flex-direction:column; gap:.55em; }
.bsingle-content li { line-height:1.7; }
.bsingle-content li::marker { color:var(--pink); }
.bsingle-content figure { margin:0 0 1.6em; }
.bsingle-content img { max-width:100%; height:auto; border-radius:var(--r-lg,12px); display:block; }
.bsingle-content .wp-block-image { margin:0 0 1.6em; }
.bsingle-content .wp-block-image img { width:100%; border:1px solid var(--border-dark,rgba(255,255,255,0.07)); }
.bsingle-content figcaption, .bsingle-content .wp-block-image figcaption { font-size:var(--fs-small); color:rgba(255,255,255,0.45); text-align:center; margin-top:10px; }
.bsingle-content blockquote {
  border-left:3px solid var(--pink); padding:8px 0 8px 24px; margin:0 0 1.5em;
  color:var(--white); font-size:var(--fs-subheading); font-style:italic; line-height:1.6;
}
.bsingle-content code { background:rgba(255,255,255,0.08); padding:2px 7px; border-radius:5px; font-size:.9em; }
.bsingle-content pre { background:#0d0d18; border:1px solid var(--border-dark,rgba(255,255,255,0.07)); border-radius:10px; padding:20px; overflow-x:auto; margin:0 0 1.5em; }
.bsingle-content pre code { background:none; padding:0; }
.bsingle-content h2, .bsingle-content h3 { scroll-margin-top:90px; }

.bsingle-tags { margin:36px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.bsingle-tags a { font-size:var(--fs-small); color:rgba(255,255,255,0.6); border:1px solid rgba(255,255,255,0.12); padding:5px 12px; border-radius:999px; text-decoration:none; }
.bsingle-tags a:hover { border-color:var(--pink); color:#fff; }

/* ── Sidebar ───────────────────────────────────────────────── */
.bside-inner { position:sticky; top:96px; display:flex; flex-direction:column; gap:20px; }
.bside-card { background:var(--dark-2,#181828); border:1px solid var(--border-dark,rgba(255,255,255,0.08)); border-radius:14px; padding:22px 22px; }
.bside-title { display:block; font-size:var(--fs-micro); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:14px; }
.bside-catlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.bside-catlink { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:8px; color:rgba(255,255,255,0.75); text-decoration:none; font-size:var(--fs-small); font-weight:600; transition:background .15s,color .15s; }
.bside-catlink:hover { background:rgba(255,255,255,0.04); color:#fff; }
.bside-catlink.is-active { background:rgba(232,23,93,0.12); color:#fff; }
.bside-catcount { font-size:var(--fs-micro); color:rgba(255,255,255,0.4); background:rgba(255,255,255,0.05); border-radius:20px; padding:1px 9px; min-width:24px; text-align:center; }
.bside-catlink.is-active .bside-catcount { color:var(--pink); background:rgba(232,23,93,0.15); }
.bside-cta { background:radial-gradient(ellipse 90% 120% at 0% 0%, rgba(232,23,93,0.16), transparent 60%), var(--dark-2,#181828); border-color:rgba(232,23,93,0.25); }
.bside-cta-eyebrow { display:block; font-size:var(--fs-micro); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--pink); margin-bottom:8px; }
.bside-cta-title { color:#fff; font-size:var(--fs-h3); margin:0 0 8px; line-height:1.3; }
.bside-cta-text { color:rgba(255,255,255,0.68); font-size:var(--fs-small); line-height:1.6; margin:0 0 16px; }
.bside-cta .btn { width:100%; justify-content:center; }

.bsingle-related { padding-top:56px; }

/* ============================================================
   IN-ARTICLE COMPONENTS — authored with NATIVE Gutenberg blocks
   (Group/List/Table/Details/Buttons) that carry these classNames,
   so the whole article stays editable in the block editor.
   Selectors are prefixed with .bsingle-content for specificity.
   ============================================================ */

/* Lead / intro paragraph */
.bsingle-content .article-lead { font-size:1.3125rem; line-height:1.7; color:rgba(255,255,255,0.9); }

/* Key takeaways card (Group block + List block) */
.bsingle-content .article-key {
  background:linear-gradient(180deg, rgba(232,23,93,0.08), rgba(232,23,93,0.02));
  border:1px solid rgba(232,23,93,0.22); border-radius:14px; padding:26px 28px;
}
.bsingle-content .article-key-title {
  display:flex; align-items:center; gap:9px; font-size:var(--fs-micro); font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--pink); margin:0 0 14px;
}
.bsingle-content .article-key-title::before { content:"✦"; font-size:1.05em; line-height:1; }
.bsingle-content .article-key ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.bsingle-content .article-key li { position:relative; padding-left:30px; line-height:1.6; font-size:1.0625rem; color:rgba(255,255,255,0.85); }
.bsingle-content .article-key li::marker { content:none; }
.bsingle-content .article-key li::before {
  content:""; position:absolute; left:0; top:3px; width:19px; height:19px; border-radius:50%;
  background:rgba(232,23,93,0.15);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6 5,9 10,3' fill='none' stroke='%23E8175D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}

/* Callout / note box (Group block) */
.bsingle-content .article-note {
  border-left:3px solid var(--pink); background:rgba(232,23,93,0.06);
  border-radius:0 12px 12px 0; padding:18px 22px; font-size:1.0625rem; line-height:1.7;
}
.bsingle-content .article-note p { margin:0; }
.bsingle-content .article-note p + p { margin-top:.7em; }
.bsingle-content .article-note-label { font-weight:800; color:#fff; }
.bsingle-content .article-note--tip  { border-left-color:#2ecc87; background:rgba(46,204,135,0.07); }
.bsingle-content .article-note--tip  .article-note-label { color:#4be3a0; }
.bsingle-content .article-note--warn { border-left-color:#f5a623; background:rgba(245,166,35,0.08); }
.bsingle-content .article-note--warn .article-note-label { color:#ffc35a; }

/* In-article CTA card (Group block + heading + paragraph + Buttons block) */
.bsingle-content .article-cta {
  background:radial-gradient(ellipse 80% 120% at 0% 0%, rgba(232,23,93,0.16), transparent 60%), var(--dark-2, #181828);
  border:1px solid rgba(232,23,93,0.25); border-radius:16px; padding:32px 30px; text-align:center;
}
.bsingle-content .article-cta h3 { color:#fff; margin:0 0 8px; font-size:var(--fs-h3); }
.bsingle-content .article-cta p { color:rgba(255,255,255,0.72); font-size:1.0625rem; margin:0 auto 20px; max-width:46ch; }
.bsingle-content .article-cta .wp-block-buttons { justify-content:center; margin:0; }
.bsingle-content .article-cta .wp-block-button__link {
  background:var(--pink); color:#fff; font-weight:700; padding:13px 30px; border-radius:8px;
  text-decoration:none; font-size:var(--fs-small); display:inline-block;
}
.bsingle-content .article-cta .wp-block-button__link:hover { background:var(--pink-dark,#c00d4d); color:#fff; }

/* Native Table block — comparison/data tables */
.bsingle-content .wp-block-table { margin:0 0 1.6em; overflow-x:auto; }
.bsingle-content .wp-block-table table { width:100%; border-collapse:collapse; font-size:1rem; min-width:540px; border:1px solid var(--border-dark,rgba(255,255,255,0.08)); border-radius:12px; overflow:hidden; }
.bsingle-content .wp-block-table th, .bsingle-content .wp-block-table td { padding:13px 18px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.06); vertical-align:top; }
.bsingle-content .wp-block-table thead th { background:rgba(232,23,93,0.10); color:#fff; font-weight:700; font-size:.9rem; }
.bsingle-content .wp-block-table tbody tr:last-child td { border-bottom:none; }
.bsingle-content .wp-block-table td { color:rgba(255,255,255,0.78); }
.bsingle-content .wp-block-table td:first-child { color:#fff; font-weight:600; }
.bsingle-content .wp-block-table figcaption { text-align:left; }

/* FAQ — native Details blocks grouped */
.bsingle-content .article-faq { display:flex; flex-direction:column; }
.bsingle-content .wp-block-details {
  border-bottom:1px solid var(--border-dark,rgba(255,255,255,0.08)); padding:2px 0; margin:0;
}
.bsingle-content .wp-block-details summary {
  cursor:pointer; list-style:none; padding:18px 34px 18px 0; position:relative;
  font-weight:700; color:#fff; font-size:1.125rem;
}
.bsingle-content .wp-block-details summary::-webkit-details-marker { display:none; }
.bsingle-content .wp-block-details summary::after {
  content:"+"; position:absolute; right:4px; top:16px; color:var(--pink); font-weight:800; font-size:1.4rem; line-height:1;
}
.bsingle-content .wp-block-details[open] summary::after { content:"\2212"; }
.bsingle-content .wp-block-details p { margin:0 0 18px; color:rgba(255,255,255,0.75); line-height:1.7; font-size:1.0625rem; }

/* ── Social share ──────────────────────────────────────────── */
.bshare-btns { display:flex; flex-wrap:wrap; gap:9px; }
.bshare-btn {
  width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.7);
  transition:transform .16s, background .16s, color .16s, border-color .16s;
}
.bshare-btn svg { width:17px; height:17px; }
.bshare-btn:hover { color:#fff; transform:translateY(-2px); }
.bshare-btn--whatsapp:hover  { background:#25D366; border-color:#25D366; }
.bshare-btn--facebook:hover  { background:#1877F2; border-color:#1877F2; }
.bshare-btn--x:hover         { background:#000;     border-color:#3a3a3a; }
.bshare-btn--linkedin:hover  { background:#0A66C2; border-color:#0A66C2; }
.bshare-btn--threads:hover   { background:#000;     border-color:#3a3a3a; }
.bshare-btn--pinterest:hover { background:#E60023; border-color:#E60023; }
.bshare-btn--reddit:hover    { background:#FF4500; border-color:#FF4500; }
.bshare-btn--instagram:hover { background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); border-color:transparent; }
.bshare-btn--snapchat:hover  { background:#FFFC00; border-color:#FFFC00; color:#111; }
.bshare-btn.is-copied { background:#2ecc87; border-color:#2ecc87; color:#fff; }
.bshare--row { margin-top:36px; padding-top:26px; border-top:1px solid var(--border-dark,rgba(255,255,255,0.07)); display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.bshare-label { font-size:var(--fs-small); font-weight:600; color:rgba(255,255,255,0.5); }
.bside-share .bshare-btns { gap:8px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .bsingle-grid { grid-template-columns:1fr; gap:44px; }
  .bside-inner { position:static; top:auto; }
}
@media (max-width: 900px) { .bpost-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px) {
  .bpost-grid { grid-template-columns:1fr; }
  .bsingle-content { font-size:1.0625rem; }
  .bsingle-content .article-lead { font-size:1.1875rem; }
  .bsingle-content .article-key, .bsingle-content .article-cta { padding:22px 20px; }
}