/* ==========================================================================
   BLOG POST (ARTICLE) PAGE STYLES — shared by every post in /blog/
   ========================================================================== */

.reading-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--rose-500), var(--gold-500));
  z-index: 300; transition: width .1s linear;
}

.post-hero{
  position: relative; overflow: hidden;
  padding-block: clamp(2.2rem, 5vw, 3.5rem) 0;
  background: radial-gradient(55% 60% at 85% 0%, rgba(196,108,116,.14), transparent 65%), var(--cream);
}
.post-breadcrumb{ font-size: .82rem; color: var(--ink-faint); margin-bottom: 1.2rem; }
.post-breadcrumb a{ color: var(--ink-faint); font-weight: 600; }
.post-breadcrumb a:hover{ color: var(--rose-600); }
.post-tags{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom: 1rem; }
.post-hero h1{ max-width: 22ch; }
.post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap: 1.2rem; margin-top: 1.4rem;
  font-size: .88rem; color: var(--ink-faint); font-weight: 600;
}
.post-meta .author{ display:flex; align-items:center; gap:.55rem; color: var(--ink); }
.post-meta .author img{ width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.post-hero-img{
  margin-top: 2.2rem; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift);
  max-height: 520px;
}
.post-hero-img img{ width:100%; height:100%; max-height: 520px; object-fit: cover; }

.post-layout{
  display:grid; grid-template-columns: minmax(0,1fr) 260px; gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* ---- Article typography ---- */
.post-body{ max-width: 72ch; }
.post-body > *:first-child{ margin-top: 0; }
.post-body h2{ margin-top: 2.6rem; margin-bottom: 1rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.post-body h3{ margin-top: 2rem; margin-bottom: .8rem; }
.post-body p{ margin-bottom: 1.3rem; }
.post-body p:last-child{ margin-bottom: 0; }
.post-body ul, .post-body ol{ margin: 0 0 1.4rem; padding-left: 1.3rem; }
.post-body li{ font-size: 1.03rem; line-height: 1.75; color: var(--ink-soft); margin-bottom: .55rem; }
.post-body strong{ color: var(--ink); }
.post-body a:not(.btn){ color: var(--rose-600); font-weight: 700; text-decoration: underline; text-decoration-color: var(--rose-200); text-underline-offset: 3px; }
.post-body a:not(.btn):hover{ text-decoration-color: var(--rose-600); }

.post-figure{ margin: 1.8rem 0; }
.post-figure img{ width:100%; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.post-figure figcaption{ text-align:center; font-size: .82rem; color: var(--ink-faint); margin-top: .7rem; font-style: italic; }

.callout{
  background: var(--blush); border-left: 4px solid var(--rose-500); border-radius: var(--radius-sm);
  padding: 1.1rem 1.4rem; margin: 1.8rem 0; font-size: .95rem; color: var(--ink-soft);
}
.callout.warn{ background: var(--peach-300); border-left-color: var(--gold-500); }
.callout strong{ display:block; color: var(--ink); margin-bottom: .3rem; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; }

.buy-chip{
  display:inline-flex; align-items:center; gap:.5rem; margin: .3rem .4rem .3rem 0;
  padding: .55em 1.1em; border-radius: var(--radius-pill); background: var(--ink); color: #fff !important;
  font-size: .82rem; font-weight: 700; text-decoration: none !important;
}
.buy-chip:hover{ background: var(--rose-600); }
.buy-chip svg{ width: 13px; height: 13px; }

.verdict-box{
  display:flex; align-items:center; gap: 1.1rem; margin: 2rem 0;
  background: var(--paper); border: 1.5px dashed var(--gold-400); border-radius: var(--radius-md);
  padding: 1.3rem 1.6rem;
}
.verdict-box .stars{ font-size: 1.4rem; color: var(--gold-500); letter-spacing: 2px; }
.verdict-box div p{ margin:0; font-size:.8rem; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.verdict-box div strong{ font-family: var(--font-display); font-size: 1.1rem; font-weight:600; color: var(--ink); }

.pros-cons{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1.8rem 0; }
.pros-cons > div{ padding: 1.3rem 1.4rem; border-radius: var(--radius-md); }
.pros-cons .pros{ background: rgba(138,143,90,.12); }
.pros-cons .cons{ background: rgba(196,108,116,.1); }
.pros-cons h4{ font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .7rem; }
.pros-cons .pros h4{ color: #5c6b3a; }
.pros-cons .cons h4{ color: var(--rose-700); }
.pros-cons ul{ padding-left: 1.1rem; margin: 0; }
.pros-cons li{ font-size: .92rem; margin-bottom: .4rem; }
@media (max-width: 620px){ .pros-cons{ grid-template-columns: 1fr; } }

/* ---- Share bar ---- */
.share-bar{ display:flex; align-items:center; gap: .8rem; margin: 2.6rem 0 0; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.share-bar span{ font-size: .8rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.share-btn{
  width: 38px; height: 38px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  background: var(--blush); color: var(--rose-700); transition: background .3s, color .3s, transform .3s;
}
.share-btn:hover{ background: var(--rose-500); color: #fff; transform: translateY(-2px); }
.share-btn svg{ width: 16px; height: 16px; }

/* ---- Author card ---- */
.author-card{
  display:flex; gap: 1.3rem; align-items:center; margin-top: 3rem;
  background: var(--blush); border-radius: var(--radius-lg); padding: 1.8rem 2rem;
}
.author-card img{ width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex-shrink:0; border: 3px solid var(--paper); }
.author-card h4{ font-size: 1.05rem; }
.author-card p{ font-size: .88rem; margin-top: .35rem; }
.author-card a{ font-size: .82rem; font-weight: 700; color: var(--rose-600); margin-top: .5rem; display:inline-block; }
@media (max-width: 560px){ .author-card{ flex-direction:column; text-align:center; } }

/* ---- Sidebar ---- */
.post-sidebar{ position: sticky; top: calc(var(--header-h) + 24px); align-self: start; display:flex; flex-direction:column; gap: 1.6rem; }
.sidebar-card{ background: var(--paper); border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-soft); }
.sidebar-card h4{ font-size: .92rem; margin-bottom: 1rem; }
.sidebar-toc a{ display:block; font-size: .85rem; padding: .45rem 0; color: var(--ink-soft); border-left: 2px solid var(--line); padding-left: .8rem; transition: border-color .3s, color .3s; }
.sidebar-toc a:hover{ border-color: var(--rose-500); color: var(--rose-600); }
.sidebar-related a{ display:flex; gap: .7rem; align-items:center; padding-block: .6rem; }
.sidebar-related img{ width: 52px; height: 52px; border-radius: var(--radius-sm); object-fit:cover; flex-shrink:0; }
.sidebar-related span{ font-size: .82rem; font-weight: 700; line-height: 1.35; color: var(--ink); }

@media (max-width: 980px){
  .post-layout{ grid-template-columns: 1fr; }
  .post-sidebar{ position: static; flex-direction: row; flex-wrap: wrap; }
  .post-sidebar .sidebar-card{ flex: 1; min-width: 260px; }
}

/* ---- Prev / Next ---- */
.post-pagination{
  display:grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
  max-width: var(--container); margin: 1rem auto clamp(3rem, 6vw, 5rem); padding-inline: var(--pad);
}
.pagination-card{
  background: var(--paper); border-radius: var(--radius-md); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-soft);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pagination-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.pagination-card.next{ text-align: right; }
.pagination-card .dir{ font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-500); font-weight: 700; }
.pagination-card h5{ font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; margin-top: .4rem; line-height: 1.35; }
@media (max-width: 620px){ .post-pagination{ grid-template-columns: 1fr; } .pagination-card.next{ text-align:left; } }