/* =============================================================================
 * .lpk-blog-rail — homepage editorial carousel (replaces blog grid)
 *
 * Markup contract:
 *   <section class="lpk-blog-rail" data-lpk-blog-rail>
 *     <div class="lpk-blog-rail__overline">From our editors</div>
 *     <div class="lpk-blog-rail__track" role="region" aria-label="…">
 *       <a class="lpk-blog-rail__card">…</a>
 *     </div>
 *     <div class="lpk-blog-rail__footer">
 *       <span class="lpk-blog-rail__counter">…</span>
 *       <div class="lpk-blog-rail__progress"><div class="lpk-blog-rail__progress-bar"></div></div>
 *       <div class="lpk-blog-rail__nav">
 *         <button class="lpk-blog-rail__btn" data-dir="-1">…</button>
 *         <button class="lpk-blog-rail__btn" data-dir="1">…</button>
 *       </div>
 *     </div>
 *   </section>
 * ============================================================================= */

.lpk-blog-rail{position:relative;margin-top:var(--space-2)}

/* Optional overline above the section title (rendered by section head template) */
.lpk-blog-rail__overline{
  display:inline-block;
  font-size:var(--fs-overline);
  font-weight:var(--fw-bold);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-text-tertiary);
  margin-bottom:var(--space-2);
}

/* Scrolling track */
.lpk-blog-rail__track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:340px;
  gap:var(--space-5);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scroll-padding-left:0;
  padding:var(--space-1) var(--space-1) var(--space-6);
  margin:calc(var(--space-1) * -1) calc(var(--space-1) * -1) 0;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.lpk-blog-rail__track::-webkit-scrollbar{display:none}

/* Card — fully clickable, dark restrained, hover lifts */
.lpk-blog-rail__card{
  display:flex;
  flex-direction:column;
  background:var(--color-bg-page);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-lg);
  overflow:hidden;
  text-decoration:none;
  color:var(--color-text-primary);
  scroll-snap-align:start;
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1);
  outline:none;
}
.lpk-blog-rail__card:hover,
.lpk-blog-rail__card:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  border-color:var(--color-border-strong);
}
.lpk-blog-rail__card:focus-visible{
  outline:2px solid var(--color-text-primary);
  outline-offset:2px;
}

/* Media slot */
.lpk-blog-rail__media{
  position:relative;
  aspect-ratio:16/9;
  background:var(--color-bg-surface);
  overflow:hidden;
}
.lpk-blog-rail__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.lpk-blog-rail__card:hover .lpk-blog-rail__media img{transform:scale(1.04)}

/* Category chip overlay (bottom-left of image) */
.lpk-blog-rail__cat{
  position:absolute;
  bottom:var(--space-3);
  left:var(--space-3);
  font-size:11px;
  font-weight:var(--fw-bold);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  color:var(--color-text-primary);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:2;
}

/* Top-left badges (New / Editor's Pick) */
.lpk-blog-rail__badges{
  position:absolute;
  top:var(--space-3);
  left:var(--space-3);
  display:flex;
  gap:6px;
  z-index:2;
}
.lpk-blog-rail__badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:10px;
  font-weight:var(--fw-bold);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:4px;
  background:rgba(255,255,255,.95);
  color:var(--color-text-primary);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.lpk-blog-rail__badge--new{background:#0066ff;color:#fff}
.lpk-blog-rail__badge--pick{background:#fef3c7;color:#92400e}

/* Body */
.lpk-blog-rail__body{
  padding:var(--space-5) var(--space-5) var(--space-5);
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  flex:1;
}
.lpk-blog-rail__title{
  font-family:var(--font-heading);
  font-size:var(--fs-h4);
  font-weight:var(--fw-semibold);
  line-height:1.3;
  letter-spacing:-.01em;
  margin:0;
  color:var(--color-text-primary);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.lpk-blog-rail__excerpt{
  font-size:var(--fs-body-sm);
  color:var(--color-text-secondary);
  line-height:1.5;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Meta row */
.lpk-blog-rail__meta{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  margin-top:auto;
  padding-top:var(--space-2);
  font-size:var(--fs-caption);
  color:var(--color-text-tertiary);
}
.lpk-blog-rail__avatar{
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--color-text-primary);
  color:var(--color-text-inverse);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:var(--fw-semibold);
  font-size:10px;
  font-family:var(--font-body);
  flex-shrink:0;
  overflow:hidden;
}
.lpk-blog-rail__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.lpk-blog-rail__author{color:var(--color-text-primary);font-weight:var(--fw-semibold)}
.lpk-blog-rail__dot{
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--color-text-tertiary);
  display:inline-block;
}

/* Footer: counter | progress | nav */
.lpk-blog-rail__footer{
  display:flex;
  align-items:center;
  gap:var(--space-5);
  margin-top:var(--space-2);
}
.lpk-blog-rail__counter{
  font-size:var(--fs-body-sm);
  font-weight:var(--fw-medium);
  color:var(--color-text-tertiary);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.lpk-blog-rail__counter strong{color:var(--color-text-primary);font-weight:var(--fw-semibold)}
.lpk-blog-rail__progress{
  flex:1;
  height:3px;
  background:var(--color-border-subtle);
  border-radius:2px;
  overflow:hidden;
}
.lpk-blog-rail__progress-bar{
  height:100%;
  background:var(--color-text-primary);
  border-radius:2px;
  transition:width .25s cubic-bezier(.4,0,.2,1);
  width:10%;
}
.lpk-blog-rail__nav{
  display:flex;
  gap:var(--space-2);
}
.lpk-blog-rail__btn{
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--color-border-strong);
  background:var(--color-bg-page);
  color:var(--color-text-primary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
  cursor:pointer;
  padding:0;
}
.lpk-blog-rail__btn:hover:not(:disabled){
  background:var(--color-text-primary);
  color:var(--color-text-inverse);
  border-color:var(--color-text-primary);
}
.lpk-blog-rail__btn:active:not(:disabled){transform:scale(.95)}
.lpk-blog-rail__btn:focus-visible{
  outline:2px solid var(--color-text-primary);
  outline-offset:2px;
}
.lpk-blog-rail__btn:disabled{
  opacity:.35;
  cursor:not-allowed;
  background:var(--color-bg-page);
  color:var(--color-text-primary);
  border-color:var(--color-border-subtle);
}
.lpk-blog-rail__btn svg{width:18px;height:18px;display:block}

/* Mobile */
@media (max-width: 720px){
  .lpk-blog-rail__track{
    grid-auto-columns:80%;
    gap:var(--space-3);
    padding-bottom:var(--space-4);
  }
  .lpk-blog-rail__footer{
    flex-direction:column-reverse;
    align-items:stretch;
    gap:var(--space-3);
  }
  .lpk-blog-rail__nav{justify-content:center}
  .lpk-blog-rail__counter{text-align:center}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .lpk-blog-rail__track{scroll-behavior:auto}
  .lpk-blog-rail__card,
  .lpk-blog-rail__media img,
  .lpk-blog-rail__progress-bar,
  .lpk-blog-rail__btn{transition:none}
  .lpk-blog-rail__card:hover .lpk-blog-rail__media img{transform:none}
}