/* ============================================================
   HOME FEED
   Only the placeholder a lazily-loaded rail shows before its
   cards arrive. Everything else on the page is brand.css.
   ============================================================ */

.rail-skel {
  height: 296px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-100);
  background: linear-gradient(100deg, var(--mist-100) 30%, #F3F6FC 50%, var(--mist-100) 70%);
  background-size: 220% 100%;
  animation: rail-shimmer 1.3s linear infinite;
}

@keyframes rail-shimmer {
  to { background-position: -220% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-skel { animation: none; }
}

/* ---------- Card titles ----------
   The design's demo names were short ("Crispy Lime Fish Cakes with Chili Aioli"), so nothing
   constrained the heading. The API's names run much longer — "Slow-Roasted Lamb Stew — Slow-
   Roasted Lid-Cooked Lamb Stew - Sancocho Peka" is four lines at rail width — which leaves cards
   in the same row with wildly different amounts of text and a ragged gap above the buttons.
   Two lines keeps every card the shape the design drew. */
.poster-body .card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;   /* holds the row steady when a title is only one line */
  line-height: 1.35;
}

.poster-body .card-title a { display: inline; }