/* 
 * Viclog Single: Related Shelf (footer)
 * File: assets/viclog/viclog-related.css
 * Scope: body.viclog-article only
 */

body.viclog-article .vlg-related-section{
  margin-top: 28px;
  padding-top: 4px;
}

body.viclog-article .vlg-related-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding: 0 6px 10px;
  border-bottom: 1px solid var(--vlg-border);
  margin-bottom: 12px;
}

body.viclog-article .vlg-related-section .vlg-related-head .vlg-related-title{
  font-family: "Rajdhani","Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--vlg-text);
  font-size: 18px;
}

body.viclog-article .vlg-related-section .vlg-related-shelf{
  position:relative;
}

body.viclog-article .vlg-related-section .vlg-related-rail{
  display:flex;
  gap: 12px;
  overflow-x:auto;
  overscroll-behavior-x: contain;
  scroll-behavior:smooth;
  padding: 4px 44px 10px 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

body.viclog-article .vlg-related-section .vlg-related-rail::-webkit-scrollbar{ display:none; }
body.viclog-article .vlg-related-section .vlg-related-rail{ scrollbar-width:none; }

body.viclog-article .vlg-related-section .vlg-related-card{
  flex: 0 0 auto;
  width: 220px;
  background: var(--vlg-card);
  border: 1px solid var(--vlg-border);
  border-radius: 18px;
  overflow:hidden;
  text-decoration:none;
  color: var(--vlg-text);
  scroll-snap-align: start;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  transition: transform .14s ease, border-color .14s ease;
}
body.viclog-article .vlg-related-section .vlg-related-card:hover{
  transform: translateY(-2px);
  border-color: rgba(124,92,252,.55);
}

body.viclog-article .vlg-related-section .vlg-related-thumb{
  width:100%;
  aspect-ratio: 16 / 9;
  background: rgba(255,255,255,.04);
}
body.viclog-article .vlg-related-section .vlg-related-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

body.viclog-article .vlg-related-section .vlg-related-meta{
  padding: 10px 12px 0;
}
body.viclog-article .vlg-related-section .vlg-related-date{
  font-family: "Rajdhani","Noto Sans JP",system-ui,sans-serif;
  font-size: 12px;
  color: rgba(221,225,240,.78);
  letter-spacing: .03em;
}

body.viclog-article .vlg-related-section .vlg-related-ttl{
  padding: 6px 12px 12px;
  font-size: 14px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  text-overflow: ellipsis;
}

body.viclog-article .vlg-shelf-btn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--vlg-border);
  background: rgba(15,18,34,.92);
  color: rgba(221,225,240,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 5;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  opacity: .95;
  transition: opacity .14s ease, transform .14s ease;
}
body.viclog-article .vlg-shelf-btn:hover{ opacity:1; transform: translateY(-50%) scale(1.03); }
body.viclog-article .vlg-shelf-btn svg{ width:18px; height:18px; }

body.viclog-article .vlg-shelf-btn.left{ left: 6px; }
body.viclog-article .vlg-shelf-btn.right{ right: 6px; }

@media (max-width: 860px){
  /* v31: keep chevron buttons visible on small viewports as well */
  body.viclog-article .vlg-shelf-btn{
    display:flex;
    width: 34px;
    height: 34px;
    border-radius: 999px;
  }
  body.viclog-article .vlg-related-section .vlg-related-rail{ padding-right: 40px; }
  body.viclog-article .vlg-related-section .vlg-related-card{ width: 200px; }
}


/* ─────────────────────────────────────────
   Chevron visibility guarantee (Related shelf)
   - SVG uses stroke="currentColor"
   - Ensure button/svg/path are visible even if theme/plugin overrides color
   ───────────────────────────────────────── */
.vlg-related-section .vlg-related-shelf .vlg-shelf-btn{
  color: rgba(221,225,240,.95) !important;
}
.vlg-related-section .vlg-related-shelf .vlg-shelf-btn svg{
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  color: rgba(221,225,240,.95) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.vlg-related-section .vlg-related-shelf .vlg-shelf-btn svg path{
  stroke: currentColor !important;
}

/* v31: hard guarantee for the actual buttons used in markup (vlg-shelf-btn) */
.vlg-shelf-btn{
  color: rgba(221,225,240,.95) !important;
}
.vlg-shelf-btn svg{
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.vlg-shelf-btn svg path{
  stroke: currentColor !important;
}

/* ─────────────────────────────────────────
   v32: Chevron clip/layer guarantee (Related shelf)
   - Previous fixes targeted currentColor but issue can be clipping / z-index.
   - Force buttons above cards and avoid half-visible buttons.
   ───────────────────────────────────────── */
body.viclog-article .vlg-related-section,
body.viclog-article .vlg-related-section .vlg-related-shelf{
  overflow: visible !important;
}

.vlg-related-section .vlg-related-shelf .vlg-shelf-btn{
  z-index: 80 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

body.viclog-article .vlg-related-section .vlg-related-shelf .vlg-shelf-btn.left{ left: 6px !important; }
body.viclog-article .vlg-related-section .vlg-related-shelf .vlg-shelf-btn.right{ right: 6px !important; }

/* ─────────────────────────────────────────────
   v33: Unified chevrons for related shelf buttons
   - Stop relying on inline SVG stroke=currentColor
   - Draw chevrons via pseudo-elements (same style logic as top)
   ───────────────────────────────────────────── */
body.viclog-article .vlg-shelf-btn svg{
  display: none !important;
}

body.viclog-article .vlg-shelf-btn::before{
  content: '›';
  position: relative;
  z-index: 2;
  display: block;
  color: rgba(221,225,240,.95);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
  transform: translateY(-1px) scaleX(1.05);
  -webkit-text-stroke: .35px rgba(221,225,240,.95);
}

body.viclog-article .vlg-shelf-btn.left::before{
  content: '‹';
}


/* Safety net: if Jetpack outputs its classic related-posts block despite filters, keep it hidden on Viclog singles. */
body.viclog-article #jp-relatedposts,
body.viclog-article .jp-relatedposts{ display:none !important; }