/* ============================================================
   Lux4Rides — Landing Page Enhancements (l4r-land-*)
   Scoped add-ons used by the reusable landing template:
   • Pure-CSS hero slideshow (crossfade + subtle Ken Burns)
   • "Why Lux4Rides" brand band
   • Related-routes link grid
   Relies on global.css for .hero/.section/.container/.card/.btn.
   ============================================================ */

/* ---------- Hero slideshow ---------- */
.l4r-slides { position:absolute; inset:0; z-index:0; overflow:hidden; }
.l4r-slides .l4r-slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; will-change:opacity, transform;
  animation: l4rFade 21s infinite, l4rZoom 21s infinite;
}
/* 3-slide rotation; negative delay on #1 so it is painted at load (good LCP) */
.l4r-slides .l4r-slide:nth-child(1){ animation-delay:-1.2s, -1.2s; }
.l4r-slides .l4r-slide:nth-child(2){ animation-delay:6s, 6s; }
.l4r-slides .l4r-slide:nth-child(3){ animation-delay:13s, 13s; }

@keyframes l4rFade{
  0%   { opacity:0; }
  6%   { opacity:1; }
  28%  { opacity:1; }
  34%  { opacity:0; }
  100% { opacity:0; }
}
@keyframes l4rZoom{
  0%   { transform:scale(1.04); }
  100% { transform:scale(1.13); }
}

/* Accessibility: no motion → show first frame only, static */
@media (prefers-reduced-motion: reduce){
  .l4r-slides .l4r-slide{ animation:none !important; opacity:0; transform:none !important; }
  .l4r-slides .l4r-slide:first-child{ opacity:1; }
}

/* ---------- Section image card (content/route imagery) ---------- */
.l4r-imgcard{ padding:0; overflow:hidden; min-height:300px; }
.l4r-imgcard img{ width:100%; height:100%; min-height:300px; object-fit:cover; display:block; }

/* ---------- "Why Lux4Rides" brand band ---------- */
.l4r-why{
  margin-top:1.5rem;
  border:1px solid rgba(212,175,55,0.28);
  border-radius:16px;
  background:linear-gradient(135deg, rgba(20,20,22,0.6), rgba(10,10,12,0.6));
}
.l4r-why .l4r-why-head{ text-align:center; max-width:820px; margin:0 auto 1.25rem; }
.l4r-why-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:760px){ .l4r-why-grid{ grid-template-columns:repeat(3,1fr); } }
.l4r-why-card{ display:flex; gap:.85rem; align-items:flex-start; }
.l4r-why-card .l4r-why-ic{
  flex:0 0 auto; width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(212,175,55,0.10); border:1px solid rgba(212,175,55,0.30);
}
.l4r-why-card .l4r-why-ic svg{ width:22px; height:22px; stroke:#d4af37; fill:none; stroke-width:2; }
.l4r-why-card h3{ margin:0 0 .3rem; font-size:1.05rem; }
.l4r-why-card p{ margin:0; font-size:.95rem; line-height:1.55; }
.l4r-why-laweekly{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:#d4af37;
}

/* ---------- Related routes grid ---------- */
.l4r-related{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }
.l4r-related .btn{ font-size:.86rem; }

/* honor 44px touch targets on all template buttons */
.l4r-page .btn{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }