/* =========================================================
   ARTICLE PAGE — use HomeV2 rail styles identically
   ========================================================= */

/* Scope & handy tokens (same names you use on HomeV2) */
.ArticleView { --gap:16px; --r:16px; --shadow:0 6px 18px rgba(0,0,0,.08); }
.ArticleView a { text-decoration:none; color:inherit; }

/* --- Article header/body (scoped so it won't affect cards) --- */
.ArticleView .hero { margin-bottom:20px; }
.ArticleView .hero img { width:100%; height:auto; display:block; border-radius:var(--r); box-shadow:var(--shadow); object-fit:cover; }
.ArticleView h1 { font-size:clamp(1.6rem,1.2rem + 1.2vw,2.25rem); line-height:1.15; font-weight:800; margin:14px 0 8px; }
.ArticleView .dek { font-size:clamp(1rem,.94rem + .4vw,1.15rem); line-height:1.55; margin:6px 0 10px; opacity:.9; }
.ArticleView .meta { font-size:.9rem; display:flex; gap:8px; flex-wrap:wrap; opacity:.9; margin-bottom:10px; }

.ArticleView .article > .body { font-size:1.02rem; line-height:1.7; margin:18px 0 28px; }
.ArticleView .article > .body img { max-width:100%; height:auto; display:block; border-radius:12px; margin:12px auto; }
.ArticleView .article > .body figure { margin:0; }
.ArticleView .article > .body figcaption { font-size:.9rem; opacity:.8; text-align:center; margin-top:6px; }

/* =========================================================
   HomeV2 rail bits (verbatim classes you use on Home)
   ========================================================= */

/* Row header + actions (from HomeV2 #6) */
.HomeV2 .section-title { font-size:1.25rem; font-weight:700; margin:24px 0 12px; }
.HomeV2 .row-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:18px; }
.HomeV2 .row-actions { display:flex; align-items:center; gap:10px; }
.HomeV2 .row-more { color:var(--link); font-weight:600; white-space:nowrap; font-size:12px; }
.HomeV2 .row-more:hover { text-decoration:none; }

/* ===== 7. Horizontal rails (Section Rows) — EXACT COPY ===== */
.HomeV2 .hrail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:clamp(240px, 26vw, 360px);
  gap:16px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding-bottom:4px; scrollbar-width:none;
}
.HomeV2 .hrail::-webkit-scrollbar{ display:none; }

.HomeV2 .hrail .hcard{
  grid-column:auto !important; scroll-snap-align:start;
  padding:0; display:flex; flex-direction:column; overflow:hidden;
}
.HomeV2 .hrail .hcard .thumb{ aspect-ratio:16/9; background:#0d0f14; overflow:hidden; }
.HomeV2 .hrail .hcard .thumb img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.HomeV2 .hrail .hcard .body{ padding:12px 14px 14px; display:flex; flex-direction:column; }
.HomeV2 .hrail .hcard .t{
  font-size:1rem; font-weight:800; line-height:1.2; margin:2px 0 6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(1.2em * 2);
}
.HomeV2 .hrail .hcard .dek{
  font-size:.95rem; opacity:.9; margin:0 0 8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.HomeV2 .hrail .hcard .meta{ margin-top:auto; font-size:.85rem; opacity:.9; }

/* Rail nav buttons (from your HomeV2) */
.HomeV2 .row-nav{ display:flex; gap:6px; }
.HomeV2 .row-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface) 75%, #000 25%);
  color:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow:var(--shadow); opacity:.9;
}
.HomeV2 .row-btn:hover{ opacity:1; }
.HomeV2 .row-btn:disabled{ opacity:.4; cursor:not-allowed; }
.HomeV2 .row-btn:focus-visible{ outline:2px solid var(--link); outline-offset:2px; }

/* =========================================================
   Guards so article body styles never affect rail cards
   ========================================================= */

/* Prevent .ArticleView .article > .body img from styling images inside cards */
.ArticleView .HomeV2 .hrail .hcard .body img{
  display:inline-block; margin:0; border-radius:0; max-width:100%; height:auto;
}

/* Ensure avatar size/shape matches home rails even if global avatar rules differ */
.HomeV2 .hrail .avatar{
  width:24px !important; height:24px !important;
  border-radius:50% !important; object-fit:cover;
  flex:0 0 24px;
}

/* Responsive: match your home swipe feel on phones */
@media (max-width:780px){
  .HomeV2 .hrail{ grid-auto-columns:minmax(70%, 82%); }
  .ArticleView h1{ font-size:clamp(1.4rem, 4.2vw, 1.9rem); }
  .ArticleView .dek{ font-size:1rem; }
}
/* Make meta rows flex like on HomeV2 so avatar/name/date are on one line */
.HomeV2 .meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  font-size:.85rem;
  opacity:.9;
}

/* In rails, keep the meta row pinned to the bottom of the card body */
.HomeV2 .hrail .hcard .meta{
  margin-top:auto;
}

/* Keep avatars small circles (guards) */
.HomeV2 .hrail .avatar{
  width:24px !important;
  height:24px !important;
  border-radius:50% !important;
  object-fit:cover;
  flex:0 0 24px;
}

/* Ensure article body image rules NEVER hit card bodies */
.ArticleView .HomeV2 .hrail .hcard .body img{
  display:inline-block;
  margin:0;
  border-radius:0;
  max-width:100%;
  height:auto;
}
/* Make meta rows look like HomeV2 (single line: avatar + name + dot + date) */
.HomeV2 .meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  font-size:.85rem;
  opacity:.9;
  flex-wrap:nowrap;
}

/* Ensure small circular avatars in rails */
.HomeV2 .hrail .avatar{
  width:24px !important;
  height:24px !important;
  border-radius:50% !important;
  object-fit:cover;
  flex:0 0 24px;
}

/* Guard: prevent article body image rules from affecting card-body images */
.related-rail .HomeV2 .hrail .hcard .body img{
  display:inline-block;
  margin:0;
  border-radius:0;
  max-width:100%;
  height:auto;
}
/* Nav buttons: no underline + zoom/glow on hover (motion-aware) */
.HomeV2 .row-btn {
  text-decoration: none !important;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}

.HomeV2 .row-btn:hover {
  text-decoration: none !important;     /* nuke any global underline */
  transform: scale(1.06);
  background: color-mix(in srgb, var(--surface) 68%, #000 32%);
  box-shadow: 0 6px 18px rgba(0,0,0,.18), 0 0 0 2px color-mix(in srgb, var(--link) 35%, transparent);
}

.HomeV2 .row-btn:active {
  transform: scale(0.98);
  box-shadow: 0 4px 12px rgba(0,0,0,.16);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .HomeV2 .row-btn { transition: none; }
  .HomeV2 .row-btn:hover,
  .HomeV2 .row-btn:active { transform: none; }
}
/* Favorite */
.favform{ display:flex; align-items:center; gap:10px; margin:10px 0 }
.favbtn{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; border:1px solid var(--hairline-2); background:#0f1116; color:var(--text); cursor:pointer }
.favbtn .heart{ font-size:15px; line-height:1 }
.favbtn.on{ background:#1d2a22; border-color:#2c4a38 }
.favbtn.on .heart{ filter:brightness(1.4) }
.favlink{ color:var(--muted-2); text-decoration:none }
.favlink:hover{ text-decoration:underline }
.page-title{ margin:12px 2px 8px }