/* =========================================================
   Aviox Blog — Single Article Page
   Extends style.css + blog.css tokens/components.
   ========================================================= */

/* ---------- Article header ---------- */
.article-header {
  position: relative;
  padding-top: calc(var(--nav-h) + 2.5rem);
  padding-bottom: 3.75rem;
  overflow: hidden;
  text-align: left;
}
.article-header::before {
  content: "";
  position: absolute; inset: -10% -10% auto -10%;
  height: 120%;
  background: var(--grad-mesh);
  z-index: -2;
  pointer-events: none;
}
.article-header-inner { max-width: 760px; margin: 0 auto; }

.article-header .badge-cat {
  font-family: var(--font-heading);
  margin-bottom: 1.2rem;
}
.article-header h1 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.15;
  margin-bottom: 1.4rem;
}
.article-header .dek {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--clr-gray);
  max-width: 620px;
  margin: 0 0 1.85rem;
}

.article-meta-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--clr-border);
}
.article-meta-row .author-block {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.article-meta-row .author-block img {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--clr-surface-2);
}
.article-meta-row .author-block strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  margin-bottom: 0.15rem;
}
.article-meta-row .author-block span {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--clr-gray);
}
.article-stat-group {
  display: flex;
  gap: 1.25rem;
  color: var(--clr-gray);
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.article-stat-group span { display: inline-flex; align-items: center; gap: 0.35rem; }

.article-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
}
.share-btn, .bookmark-lg {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-soft);
  cursor: pointer;
  transition: all 0.3s var(--ease-premium);
}
.share-btn:hover { transform: translateY(-3px); border-color: var(--clr-primary); color: var(--clr-primary); box-shadow: var(--shadow-sm); }
.bookmark-lg.active, .bookmark-lg:hover { background: var(--grad-primary); color: #fff; border-color: transparent; }

/* ---------- Hero image ---------- */
.article-hero-img {
  position: relative;
  max-width: var(--container-max);
  margin: 0.75rem auto 0;
  padding: 0 24px 3.5rem;
}
.article-hero-img .img-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16/7.5;
}
@media (max-width: 767.98px) { .article-hero-img .img-wrap { aspect-ratio: 4/3; } }
.article-hero-img img {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
}
.hero-img-caption {
  text-align: center;
  font-size: 0.82rem;
  color: var(--clr-gray);
  margin-top: 0.9rem;
}

/* ---------- Layout: content + sidebar ---------- */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 3.5rem;
  align-items: start;
}
@media (max-width: 991.98px) { .article-layout { grid-template-columns: 1fr; } }

.article-sidebar { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 1.75rem; }
@media (max-width: 991.98px) { .article-sidebar { position: static; } }

/* ---------- TOC widget ---------- */
.toc-list { display: flex; flex-direction: column; gap: 0.15rem; }
.toc-list a {
  display: block;
  padding: 0.5rem 0 0.5rem 0.9rem;
  border-left: 2px solid var(--clr-border);
  font-size: 0.85rem;
  color: var(--clr-gray);
  transition: all 0.25s var(--ease-premium);
}
.toc-list a:hover { color: var(--clr-text); border-left-color: var(--clr-text-soft); }
.toc-list a.active { color: var(--clr-primary); border-left-color: var(--clr-primary); font-weight: 600; }
.toc-list a.toc-sub { padding-left: 1.7rem; font-size: 0.8rem; }

/* Locked section — text exists past the paywall cut, so it can't link anywhere */
.toc-locked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0 0.5rem 0.9rem;
  border-left: 2px solid var(--clr-border);
  font-size: 0.85rem;
  color: var(--clr-gray);
  opacity: 0.6;
  cursor: default;
}
.toc-locked.toc-sub { padding-left: 1.7rem; font-size: 0.8rem; }
.toc-locked i { font-size: 0.75rem; }

.reading-mini {
  display: flex; align-items: center; gap: 0.8rem;
  margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--clr-border);
}
.reading-mini .ring {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--clr-primary) var(--progress, 0%), var(--clr-border) 0);
  display: flex; align-items: center; justify-content: center;
}
.reading-mini .ring::after {
  content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--clr-surface);
}
.reading-mini span { font-size: 0.78rem; color: var(--clr-gray); }

/* share widget row */
.widget-share-row { display: flex; gap: 0.6rem; }
.widget-share-row .share-btn { width: 40px; height: 40px; }

/* ---------- Article content typography ---------- */
.article-content {
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--clr-text-soft);
  max-width: 720px;
}
.article-content > p { margin: 0 0 1.6rem; }
.article-content > p:first-of-type::first-letter {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 4.2rem;
  line-height: 0.8;
  float: left;
  padding: 0.1rem 0.6rem 0 0;
  color: var(--clr-primary);
}
.article-content h2 {
  font-size: 1.6rem;
  margin: 2.75rem 0 1.1rem;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.article-content h3 {
  font-size: 1.25rem;
  margin: 2.1rem 0 0.9rem;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.article-content a:not(.btn-premium) {
  color: var(--clr-primary);
  text-decoration: underline;
  text-decoration-color: rgba(108,99,255,0.35);
  text-underline-offset: 3px;
}
.article-content strong { color: var(--clr-text); font-weight: 700; }

.article-content figure { margin: 2.25rem 0; }
.article-content figure img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.article-content figcaption {
  text-align: center;
  font-size: 0.82rem;
  color: var(--clr-gray);
  margin-top: 0.8rem;
}

/* pull quote */
.pull-quote {
  margin: 2.75rem 0;
  padding: 0.4rem 0 0.4rem 1.8rem;
  border-left: 3px solid transparent;
  border-image: var(--grad-primary) 1;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--clr-text);
  font-style: normal;
}
.pull-quote cite {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  font-style: normal;
  color: var(--clr-gray);
}

/* blockquote / quote section */
.quote-block {
  position: relative;
  margin: 2.5rem 0;
  padding: 2rem 2.25rem;
  background: var(--clr-surface-2);
  border-radius: var(--radius-lg);
}
.quote-block i.bi-quote {
  font-size: 1.6rem;
  color: var(--clr-primary);
  opacity: 0.5;
  margin-bottom: 0.5rem;
  display: block;
}
.quote-block p { font-size: 1.1rem; color: var(--clr-text); margin: 0 0 0.8rem; font-style: italic; }
.quote-block footer { font-size: 0.85rem; color: var(--clr-gray); }

/* callout / highlighted note */
.note-box {
  display: flex;
  gap: 1rem;
  margin: 2.25rem 0;
  padding: 1.4rem 1.6rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
}
.note-box .n-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.note-box p { margin: 0; font-size: 0.95rem; color: var(--clr-text-soft); }
.note-box strong { display: block; color: var(--clr-text); margin-bottom: 0.2rem; font-family: var(--font-heading); }
.note-box.tip { background: rgba(0,194,168,0.06); border-color: rgba(0,194,168,0.25); }
.note-box.tip .n-icon { background: var(--grad-accent); color: #06342E; }
.note-box.warn { background: rgba(245,165,36,0.07); border-color: rgba(245,165,36,0.3); }
.note-box.warn .n-icon { background: #F5A524; color: #402A00; }
.note-box.info { background: rgba(108,99,255,0.06); border-color: rgba(108,99,255,0.25); }
.note-box.info .n-icon { background: var(--grad-primary); color: #fff; }

/* code block */
.code-block {
  position: relative;
  margin: 2.25rem 0;
  background: #0F1420;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.code-block .cb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1.1rem;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.code-block .cb-head span { font-size: 0.78rem; color: rgba(255,255,255,0.55); font-family: var(--font-body); }
.cb-copy {
  border: none; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8);
  font-size: 0.75rem; padding: 0.35rem 0.7rem; border-radius: 100px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.35rem;
  transition: background 0.25s;
}
.cb-copy:hover { background: rgba(255,255,255,0.16); }
.code-block pre {
  margin: 0;
  padding: 1.4rem 1.5rem;
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.87rem;
  line-height: 1.7;
  color: #E4E7F1;
}
.code-block .tok-key { color: #C792EA; }
.code-block .tok-str { color: #00E0C0; }
.code-block .tok-com { color: #6B7280; }
.code-block .tok-fn { color: #82AAFF; }

/* table */
.article-content .table-wrap {
  margin: 2.25rem 0;
  overflow-x: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
}
.article-content table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.article-content thead { background: var(--clr-surface-2); }
.article-content th {
  text-align: left; padding: 0.85rem 1.1rem;
  font-family: var(--font-heading); font-size: 0.8rem;
  color: var(--clr-text); border-bottom: 1px solid var(--clr-border);
}
.article-content td { padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--clr-border); color: var(--clr-text-soft); }
.article-content tbody tr:last-child td { border-bottom: none; }
.article-content tbody tr:hover { background: var(--clr-surface-2); }

/* lists */
.article-content ul, .article-content ol { margin: 0 0 1.75rem; padding-left: 1.4rem; }
.article-content ul li, .article-content ol li { margin-bottom: 0.6rem; }
.article-content ul li::marker { color: var(--clr-primary); }
.article-content ol li::marker { color: var(--clr-primary); font-weight: 700; }

/* image gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin: 2.25rem 0;
}
@media (max-width: 575.98px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }
.gallery-grid .g-item { position: relative; overflow: hidden; border-radius: var(--radius-sm); aspect-ratio: 1; }
.gallery-grid .g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-premium); }
.gallery-grid .g-item:hover img { transform: scale(1.1); }

/* video embed */
.video-embed {
  position: relative;
  margin: 2.25rem 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
  box-shadow: var(--shadow-md);
}
.video-embed img { width: 100%; height: 100%; object-fit: cover; }
.video-embed .play-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,14,23,0.35);
  cursor: pointer;
  border: none;
}
.video-embed .play-btn span {
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-primary); font-size: 1.6rem;
  transition: transform 0.3s var(--ease-premium);
  box-shadow: var(--shadow-lg);
}
.video-embed .play-btn:hover span { transform: scale(1.1); }

/* tags row at end of article */
.article-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 3rem 0 0; }

/* ---------- Related articles ---------- */
.related-articles .section-heading { margin-bottom: 2rem; }

/* ---------- After-the-article stack ----------
   Comments, the author box and prev/next read as one block, so they share a
   single column and one rhythm instead of each section adding its own band. */
.post-outro { padding: 3.5rem 0 0; }
.post-outro + .post-outro { padding-top: 2rem; }
.post-outro > .container-xl { max-width: 860px; }
@media (max-width: 767.98px) {
  .post-outro { padding-top: 2.75rem; }
  .post-outro + .post-outro { padding-top: 1.5rem; }
}

/* ---------- Comments ---------- */
.comments-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem; }
.comment-list { margin-bottom: 1.5rem; }

/* WordPress's comment_form() renders the textarea, name/email/url fields and
   submit button as separate top-level elements (not the avatar + single
   wrapper div the old static markup assumed) — laid out as a simple block
   flow instead of a flex row, so fields don't get stretched to match height.

   Astra (the parent theme) also pads #respond by 2.5em, which insets the form
   card from the column the rest of this stack lines up with. Reset it here;
   the ID keeps these ahead of Astra's own #ast-commentform rules. */
#respond.comment-respond {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
/* title_reply is empty — the section already has its own "Discussion" heading,
   so this element only ever carries the hidden "Cancel reply" link. display:
   contents keeps that link working without reserving a blank row above the
   form (Astra gives the heading a font size and a 1em bottom margin). */
#respond .comment-reply-title {
  display: contents;
}
.comment-reply-title small {
  font-family: var(--font-body);
  font-weight: 400;
}
.comment-reply-title small a {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  color: var(--clr-primary);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s var(--ease-premium);
}
.comment-reply-title small a:hover { background: var(--grad-primary); color: #fff; border-color: transparent; }

.comment-form {
  display: block;
  width: 100%;
  padding: 1.5rem;
  background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg);
}
.comment-form img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comment-form textarea {
  width: 100%; border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  padding: 0.8rem 1rem; font-family: var(--font-body); font-size: 0.92rem; resize: vertical; min-height: 96px;
  background: var(--clr-surface-2); color: var(--clr-text);
}
.comment-form textarea:focus { outline: none; border-color: var(--clr-primary); }

.comment-form p { margin: 0.75rem 0 0; }

/* Astra wraps name/email/website in .ast-comment-formwrap.ast-row, a float grid
   with -20px side margins that hangs the fields outside the card. A plain grid
   lines them up with the textarea instead; #ast-commentform is needed to outrank
   Astra's own `#ast-commentform .ast-grid-common-col { width: 100% }`. */
.comment-form .ast-comment-formwrap,
#ast-commentform .ast-comment-formwrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 0;
}
.comment-form .ast-comment-formwrap > p,
#ast-commentform .ast-comment-formwrap > p {
  width: auto; max-width: none; margin: 0; padding: 0; float: none;
}
/* Fallback for the same fields unwrapped (no Astra grid in play). */
.comment-form > .comment-form-author,
.comment-form > .comment-form-email,
.comment-form > .comment-form-url {
  display: inline-block;
  width: calc(33.333% - 0.7rem);
  margin-right: 1rem;
  vertical-align: top;
}
.comment-form > .comment-form-url { margin-right: 0; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
  width: 100%; border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem; font-family: var(--font-body); font-size: 0.88rem;
  background: var(--clr-surface-2); color: var(--clr-text);
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus { outline: none; border-color: var(--clr-primary); }
.comment-form .comment-form-cookies-consent {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-size: 0.8rem; color: var(--clr-gray);
}

.comment-form-foot { display: flex; justify-content: flex-end; margin-top: 1rem; }
.comment-form-foot .btn-premium { white-space: nowrap; padding: 0.6rem 1.4rem; font-size: 0.85rem; }

@media (max-width: 575.98px) {
  .comment-form { padding: 1.15rem; }
  .comment-form .ast-comment-formwrap,
  #ast-commentform .ast-comment-formwrap { grid-template-columns: 1fr; }
  .comment-form > .comment-form-author,
  .comment-form > .comment-form-email,
  .comment-form > .comment-form-url { display: block; width: 100%; margin-right: 0; }
}

.comment-card { display: flex; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--clr-border); }
.comment-card:last-child { border-bottom: none; }
.comment-card img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comment-card.is-reply { margin-left: 3.5rem; padding-top: 1.25rem; }
.comment-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.comment-head strong { font-size: 0.92rem; }
.comment-head span { font-size: 0.78rem; color: var(--clr-gray); }
.comment-body p { font-size: 0.93rem; color: var(--clr-text-soft); margin: 0 0 0.7rem; }
.comment-actions { display: flex; gap: 1.25rem; }
.comment-actions button {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 0.8rem; font-weight: 600; color: var(--clr-gray);
  display: inline-flex; align-items: center; gap: 0.35rem;
  transition: color 0.25s;
}
.comment-actions button:hover { color: var(--clr-primary); }
.comment-actions button.liked { color: #EF4757; }

.inline-reply-form {
  display: none;
  gap: 0.8rem;
  margin-top: 1rem;
}
.inline-reply-form.open { display: flex; }
.inline-reply-form img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.inline-reply-form textarea {
  width: 100%; border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem; font-family: var(--font-body); font-size: 0.88rem; resize: vertical; min-height: 54px;
  background: var(--clr-surface-2); color: var(--clr-text);
}
.inline-reply-form textarea:focus { outline: none; border-color: var(--clr-primary); }

/* ---------- Author box ---------- */
.author-box {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  padding: 2.25rem;
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 575.98px) { .author-box { flex-direction: column; text-align: center; } }
.author-box img {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--clr-surface-2);
}
.author-box .role {
  display: inline-block; color: var(--clr-primary); background: rgba(108,99,255,0.08);
  font-size: 0.72rem; font-weight: 700; padding: 0.22rem 0.65rem; border-radius: 8px; margin: 0.3rem 0 0.7rem;
}
.author-box p.bio { color: var(--clr-gray); font-size: 0.92rem; margin-bottom: 1rem; max-width: 560px; }
.author-box .author-social { justify-content: flex-start; }
@media (max-width: 575.98px) { .author-box .author-social { justify-content: center; } }

/* ---------- Reading paywall ---------- */
.paywall-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--clr-bg) 55%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-premium), visibility 0.45s;
}
.paywall-overlay.open { opacity: 1; visibility: visible; }

.paywall-card {
  position: relative;
  width: min(440px, 100%);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2.5rem 2.25rem 2.25rem;
  text-align: center;
  transform: translateY(24px) scale(0.97);
  opacity: 0;
  transition: transform 0.5s var(--ease-premium), opacity 0.5s var(--ease-premium);
}
.paywall-overlay.open .paywall-card { transform: translateY(0) scale(1); opacity: 1; }

.paywall-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 34px; height: 34px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 50%;
  border: 1px solid var(--clr-border);
  background-color: var(--clr-surface-2);
  color: var(--clr-gray);
  font-size: 1.3rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  outline: none;
  transition: all 0.25s var(--ease-premium);
}
.paywall-close:hover,
.paywall-close:focus { background-color: var(--clr-surface-2); color: var(--clr-text); border-color: var(--clr-primary); transform: rotate(90deg); }
.paywall-close:focus-visible { outline: 2.5px solid var(--clr-accent); outline-offset: 2px; }

.paywall-icon {
  width: 64px; height: 64px;
  margin: 0 auto 1.25rem;
  border-radius: 20px;
  background: var(--grad-primary);
  color: #fff;
  font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-glow);
}

.paywall-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-primary);
  background: rgba(108,99,255,0.1);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.9rem;
}

.paywall-card h3 { font-size: 1.5rem; margin: 0 0 0.6rem; }
.paywall-copy { color: var(--clr-gray); font-size: 0.95rem; line-height: 1.6; margin: 0 0 1.5rem; }

.paywall-perks {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
  background: var(--clr-surface-2);
  border-radius: var(--radius-md);
}
.paywall-perks li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; color: var(--clr-text-soft); }
.paywall-perks i { color: var(--clr-accent); font-size: 1rem; flex-shrink: 0; }

.paywall-form { display: flex; flex-direction: column; gap: 0.75rem; }
.paywall-form input {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--clr-border);
  background: var(--clr-surface-2);
  color: var(--clr-text);
  font-size: 0.95rem;
  text-align: center;
  transition: border-color 0.25s;
}
.paywall-form input:focus { outline: none; border-color: var(--clr-primary); }
.paywall-form .btn-premium { width: 100%; }
.paywall-form .btn-premium:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

.paywall-error {
  min-height: 1.1rem;
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: #EF4444;
  text-align: center;
}

.paywall-later {
  display: inline-block;
  margin-top: 1.1rem;
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  color: var(--clr-gray);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  outline: none;
  transition: all 0.2s;
}
.paywall-later:hover,
.paywall-later:focus { background-color: transparent; color: var(--clr-text-soft); text-decoration-color: currentColor; }
.paywall-later:focus-visible { outline: 2.5px solid var(--clr-accent); outline-offset: 3px; border-radius: 4px; }

.paywall-success-msg {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0 0.25rem;
}
.paywall-success-msg i {
  font-size: 2.4rem;
  color: var(--clr-accent);
  animation: paywall-pop 0.5s var(--ease-premium);
}
@keyframes paywall-pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.paywall-success-msg span { color: var(--clr-text-soft); font-size: 0.95rem; }

.paywall-card.success .paywall-perks,
.paywall-card.success .paywall-form,
.paywall-card.success .paywall-later { display: none; }
.paywall-card.success .paywall-success-msg { display: flex; }

/* In-content gate — sits exactly where the free preview ends (real content
   simply doesn't exist past this point in the DOM, see functions.php) */
.paywall-fade {
  margin: 3rem 0 1rem;
  padding: 2.25rem 1.75rem;
  text-align: center;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.paywall-fade-icon {
  width: 56px; height: 56px;
  margin: 0 auto 1.1rem;
  border-radius: 18px;
  background: var(--grad-primary);
  color: #fff;
  font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-glow);
}
.paywall-fade h4 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.paywall-fade p { color: var(--clr-gray); font-size: 0.92rem; margin: 0 auto 1.5rem; max-width: 380px; }
.paywall-fade .btn-premium { min-width: 220px; }

@media (max-width: 480px) {
  .paywall-card { padding: 2.1rem 1.5rem 1.75rem; }
  .paywall-fade { padding: 1.75rem 1.25rem; }
}

/* ---------- Prev / Next navigation ---------- */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
/* First or last article — one card only, so it spans instead of leaving a hole. */
.post-nav-card:only-child { grid-column: 1 / -1; }
@media (max-width: 575.98px) { .post-nav { grid-template-columns: 1fr; } }
.post-nav-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 180px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}
.post-nav-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.post-nav-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-premium); }
.post-nav-card:hover img { transform: scale(1.08); }
.post-nav-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,14,23,0.15) 0%, rgba(11,14,23,0.82) 100%); }
.post-nav-body { position: absolute; inset: 0; z-index: 1; padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.post-nav-body .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.7); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.4rem; }
.post-nav-card.next .post-nav-body { align-items: flex-end; text-align: right; }
.post-nav-body h4 { color: #fff; font-size: 1.05rem; line-height: 1.35; margin: 0; }


pre.code-block {
    margin: 28px 0;
    padding: 24px 26px;
    background: #0d1117;
    color: #e6edf3;
    border-radius: 2px;
    overflow-x: auto;
    box-sizing: border-box;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 15px;
    line-height: 1.75;
    tab-size: 2;
    -webkit-font-smoothing: antialiased;
}

pre.code-block code {
    display: block;
    padding: 0;
    margin: 0;
    background: transparent;
    color: inherit;
    white-space: pre;
    font: inherit;
}

/* Syntax highlighting */
pre.code-block .kw { color: #c586ff; }
pre.code-block .fn { color: #ff79c6; }
pre.code-block .str { color: #f1fa8c; }
pre.code-block .num { color: #bd93f9; }
pre.code-block .tag { color: #ff79c6; }
pre.code-block .attr { color: #8be9fd; }
pre.code-block .comment { color: #8b949e; }
pre.code-block .prop { color: #50fa7b; }
pre.code-block .op { color: #ff79c6; }
pre.code-block .plain { color: #e6edf3; }