/* ============================================================
   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; }

/* ---------- Find a dish, as a page ----------
   The design's circle row is a rail: overflow-x:auto, about seven visible and a half-circle peek.
   That is right for one line on the home page and wrong for an index of forty-two, where only the
   first few were ever on screen.

   Here they wrap into rows instead, at the size the home row draws them, so a circle is a whole
   circle and the rows read down the page. Scoped to .gp-dishes; the home row keeps its rail. */
.gp-dishes .gp-circles {
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
  gap: 30px 18px;
  padding: 0;
}

/* Same footprint as a circle on the home row, rather than a share of the container: eight or
   three across, each one is the same size and fully round. */
.gp-dishes .gp-circle { flex: 0 0 clamp(116px, 12vw, 190px); }

/* How many recipes are behind each one — worth knowing on an index, not on the home row. */
.gp-dishes .gp-circle .cnt {
  display: block;
  margin-top: 2px;
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-400);
  text-align: center;
}

/* ============================================================
   NFL MATCHDAY CARD
   Its own dark panel rather than a variation on the browse cards: it is one fixture on a page of
   food, and it has to read as a different kind of thing at a glance.
   ============================================================ */
.nfl-card{
  --nfl-ink:#0F1C2E; --nfl-panel:#16263C; --nfl-line:rgba(255,255,255,.10);
  --nfl-accent:#E8762C; --nfl-dim:#93A4BC;
  /* A slight lift from top-left rather than one flat navy: the card is the top of the
     page and a single block of colour that size reads as a hole in it. */
  background:linear-gradient(135deg,#1A2C45 0%,var(--nfl-ink) 46%,#0C1726 100%);
  border-radius:16px; padding:20px 22px 16px;
  color:#fff; box-shadow:0 24px 48px -28px rgba(15,28,46,.55);
  flex:0 0 calc(100% - var(--nfl-peek,96px)); scroll-snap-align:start;
  display:flex; flex-direction:column;
}
/* The day the reader is on, marked without shouting. */
.nfl-card.is-today{ outline:2px solid var(--nfl-accent); outline-offset:0; }
/* The footer sits on the floor of the card, so cards of unequal text still line up. */
.nfl-card .nfl-card-foot{ margin-top:auto; }
.nfl-card-head{ display:flex; justify-content:flex-end; }
.nfl-week{
  background:var(--nfl-accent); color:#fff; border-radius:var(--r-pill,999px);
  padding:8px 18px; font-size:13.5px; font-weight:700; white-space:nowrap;
}

/* The fixture: two teams either side of the words that say which is which. */
/* The fixture, as the app writes one: away club, "@", home club. The club picked for the dish
   is the one in colour — the app marks it that way rather than with a bar apiece. */
.nfl-fixture{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:18px; margin:18px 0 22px;
}
.nfl-team{ min-width:0; }
.nfl-team.is-home{ text-align:right; }

.nfl-team b{ display:block; font-size:22px; font-weight:800; color:#fff; line-height:1.15; }
.nfl-team.is-pick b{ color:var(--nfl-accent); }

.nfl-side{
  display:flex; align-items:center; gap:7px; margin-top:5px;
  font:600 11px/1 var(--font-mono,ui-monospace,monospace);
  letter-spacing:.1em; text-transform:uppercase; color:var(--nfl-dim);
}
.nfl-team.is-home .nfl-side{ justify-content:flex-end; }

/* Which club the dish was picked for. */
.nfl-pick{
  background:var(--nfl-accent); color:#fff; border-radius:3px;
  padding:3px 6px; font-size:9.5px; letter-spacing:.08em;
}

/* The "@" between them: a quiet disc, not a word. */
.nfl-vs{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--nfl-panel); color:var(--nfl-dim);
  font-size:17px; font-weight:700;
}
/* The dish. A link, so the whole block is the target rather than the title alone. */
.nfl-dish{ display:flex; gap:16px; text-decoration:none; color:inherit; }
.nfl-dish-media{
  position:relative; flex:0 0 86px; width:86px; height:86px; border-radius:10px; overflow:hidden;
  background:var(--nfl-panel); display:block;
}
.nfl-dish-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.nfl-dish-body{ flex:1 1 auto; min-width:0; display:block; }
.nfl-eyebrow{
  display:block; color:var(--nfl-accent); font:700 12px/1 var(--font-mono,ui-monospace,monospace);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px;
}
.nfl-dish-name{
  display:block; font-family:var(--font-display,serif); font-weight:700; font-size:22px;
  line-height:1.25; color:#fff; margin-bottom:12px;
}
.nfl-dish:hover .nfl-dish-name{ color:var(--nfl-accent); }
.nfl-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.nfl-pill{
  background:var(--nfl-panel); color:#D7E0EC; border-radius:var(--r-pill,999px);
  padding:6px 14px; font-size:13px; font-weight:600; white-space:nowrap;
}

.nfl-card-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--nfl-line);
  color:var(--nfl-dim); font-size:14.5px;
}
.nfl-browse{ color:var(--nfl-accent); font-weight:700; text-decoration:none; white-space:nowrap; }
.nfl-browse:hover{ color:#fff; }

@media (max-width:520px){
  .nfl-card{ padding:16px 16px 12px; }
  .nfl-fixture{ gap:12px; }
  .nfl-team b{ font-size:17px; }
  .nfl-vs{ padding:7px 12px; font-size:12.5px; }
  .nfl-dish-media{ flex-basis:64px; width:64px; height:64px; }
  .nfl-dish-name{ font-size:18px; }
}

/* --- the matchday rail: one card at a time, today first, arrows for the days before it ---
   Two cards side by side read as a list of days; one at a time reads as "tonight", which is
   what the card is for. The rest are an arrow away. */
.nfl-rail-sec{ margin:20px 0 0; }   /* full width of the page: the card is the top of the feed */
.nfl-rail{ position:relative; padding:0 46px; }      /* the arrows live in this padding, off the card */
.nfl-track{
  display:flex; gap:16px; overflow-x:auto;
  /* mandatory, not proximity: a half-shown second card is exactly what this is avoiding */
  scroll-snap-type:x mandatory;
  padding:4px 2px; scrollbar-width:none; -ms-overflow-style:none;
}
.nfl-track::-webkit-scrollbar{ display:none; }

.nfl-rail .chip-rail-arrow.prev{ left:0; }
.nfl-rail .chip-rail-arrow.next{ right:0; }

/* A sliver of the next card shows past the edge of this one. A card that ends in nothing
   gives no reason to press the arrow -- the peek is what says there is another day here.

   It is dimmed and set back so it reads as the next one rather than as half of this one. */
.nfl-track .nfl-card{ transition:opacity .25s ease, transform .25s ease; }
.nfl-track .nfl-card:not(.is-current){ opacity:.55; transform:scale(.97); transform-origin:left center; }

/* Before the script runs nothing is marked; the first card leads, as it will once it does. */
.nfl-track:not(.is-wired) .nfl-card:first-child{ opacity:1; transform:none; }


@media (min-width:900px){
  .nfl-card{ padding:26px 30px 20px; }
  .nfl-dish-media{ flex-basis:120px; width:120px; height:120px; }
  .nfl-dish-name{ font-size:26px; }
  .nfl-team b{ font-size:26px; }
  /* The fixture is a scoreboard, not a row of columns: hold it to a readable span rather than
     letting the two teams drift to opposite ends of the page. */
  .nfl-fixture{ max-width:620px; }
}
@media (max-width:760px){
  /* The arrows are hidden below 576px anyway, and a phone swipes this better than it taps. */
  .nfl-rail{ padding:0; --nfl-peek:40px; }
}
/* ---------- /matchday — the same fixtures as a list ----------
   The rows only ever inherited --nfl-accent, so the pills had no panel colour to sit on and came
   out as bare text on navy. They take the card's whole palette now. */
.nfl-day + .nfl-day{ margin-top:40px; }
.nfl-day-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  font-family:var(--font-display,serif); font-size:20px; font-weight:700;
  color:var(--navy-800); margin:0 0 14px; padding-bottom:10px;
  border-bottom:1px solid var(--line-100,#DDE4D6);
}
.nfl-day-head span{ font:600 12px/1 var(--font-mono,ui-monospace,monospace); letter-spacing:.06em; color:var(--muted,#7A8794); }

.nfl-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); }
@media (max-width:520px){ .nfl-grid{ grid-template-columns:1fr; } }

.nfl-row{
  --nfl-ink:#0F1C2E; --nfl-panel:#16263C; --nfl-dim:#93A4BC; --nfl-accent:#E8762C;
  --nfl-club:var(--nfl-accent);
  position:relative; display:flex; gap:16px; align-items:flex-start;
  padding:16px 16px 16px 20px; text-decoration:none; color:inherit;
  background:linear-gradient(135deg,#1A2C45 0%,var(--nfl-ink) 46%,#0C1726 100%);
  border-radius:14px; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
/* The club's colour down the edge, the way the bars mark it on the home card. */
.nfl-row::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--nfl-club); }
.nfl-row:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -22px rgba(15,28,46,.6); }

.nfl-row-media{
  position:relative; flex:0 0 84px; width:84px; height:84px; border-radius:10px; overflow:hidden;
  background:var(--nfl-panel); border:1px solid rgba(255,255,255,.08);
}
.nfl-row-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.nfl-row:hover .nfl-row-media{ border-color:rgba(232,118,44,.55); }

.nfl-row-body{ flex:1 1 auto; min-width:0; }
.nfl-row-fixture{ display:block; font-size:13px; color:var(--nfl-dim); margin-bottom:6px; }
.nfl-row-fixture b{ color:#fff; font-weight:700; }
.nfl-row-fixture i{ font-style:normal; margin:0 4px; }

/* Out of the sentence and into the corner: it is a label, not part of the fixture. */
.nfl-row-week{
  flex:0 0 auto; align-self:flex-start;
  font:700 10px/1 var(--font-mono,ui-monospace,monospace); letter-spacing:.08em; text-transform:uppercase;
  color:var(--nfl-accent); background:rgba(232,118,44,.14);
  border-radius:999px; padding:6px 10px; white-space:nowrap;
}

.nfl-row-name{
  display:block; font-family:var(--font-display,serif); font-weight:700; font-size:17px;
  line-height:1.3; color:#fff; margin-bottom:10px;
}
.nfl-row:hover .nfl-row-name{ color:var(--nfl-accent); }
/* --- matchday card, a few finishing touches --- */

/* The date badge sat alone on an empty row. Tuck it against the top edge so the card starts
   with the fixture rather than with whitespace. */
.nfl-card-head{ margin-bottom:-6px; }

/* The dish photo picks up the card's corner radius and a hairline, so it sits in the panel
   rather than on it. */
.nfl-dish-media{ border:1px solid rgba(255,255,255,.08); }
.nfl-dish:hover .nfl-dish-media{ border-color:rgba(232,118,44,.55); }

/* The whole dish block lifts on hover, not just the title — it is one target. */
.nfl-dish{ border-radius:12px; padding:2px; margin:0 -2px; transition:background .2s ease; }
.nfl-dish:hover{ background:rgba(255,255,255,.03); }

/* Browse is the card's way out; give it something to press rather than two words of text. */
.nfl-browse{ padding:6px 12px; border-radius:999px; transition:background .18s ease, color .18s ease; }
.nfl-browse:hover{ background:rgba(232,118,44,.14); }

/* ============================================================
   TOP-OF-FEED ROW — the matchday rail, now sharing its slot with the Halloween banner
   One card owned the whole top of the feed; two can, each keeping its own full-width behaviour
   when the other isn't running (see home.blade.php's $matchdays / $halloween gates).
   ============================================================ */
.gp-top-row{ margin:20px 0 0; }
.gp-top-row .nfl-rail-sec{ margin:0; }   /* .gp-top-row owns the top margin once nested */

.gp-top-row.has-both{ display:grid; grid-template-columns:1fr; gap:20px; align-items:stretch; }
@media (min-width:900px){
  /* col-4 / col-8: a banner (one photo, a countdown, a tap-through) reads fine narrow; the
     rail's own fixture/dish detail wants the wider share — see the home page template's note. */
  .gp-top-row.has-both{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
}

/* Client report (2026-10-26, screenshot): the Halloween banner ran noticeably taller than the
   matchday card beside it -- align-items:stretch on the grid gives .nfl-rail-sec itself the
   full row height, but nothing below it (.nfl-rail, .nfl-track, the card) was told to actually
   fill that height, so the visible navy card stayed at its own shorter natural height with
   empty page showing underneath. Cascaded height:100% down to .nfl-track, whose flex children
   (.nfl-card) already stretch to fill their container's cross-axis by default -- same fix
   .hw-banner didn't need, since .hw-banner-col being flex already stretched it automatically.
   Scoped to .has-both only: the NFL-alone rendering keeps its own intrinsic height. */
.gp-top-row.has-both .nfl-rail-sec,
.gp-top-row.has-both .nfl-rail-sec .nfl-rail,
.gp-top-row.has-both .nfl-rail-sec .nfl-rail .nfl-track{ height:100%; }

/* ============================================================
   HALLOWEEN BANNER
   Purple + pumpkin orange, deliberately not the matchday card's navy + orange, so the two read
   as different things sitting side by side rather than one card split in half.
   ============================================================ */
.hw-banner-col{ display:flex; min-width:0; }
.hw-banner{
  --hw-ink:#241533; --hw-panel:#331E47; --hw-accent:#FF8C32; --hw-dim:#C9B8DC;
  background:linear-gradient(135deg,#3A2250 0%,var(--hw-ink) 55%,#180D22 100%);
  border-radius:16px; padding:20px 22px 16px; color:#fff;
  box-shadow:0 24px 48px -28px rgba(24,13,34,.55);
  display:flex; flex-direction:column; gap:14px; width:100%;
  text-decoration:none; transition:transform .18s ease, box-shadow .18s ease;
}
.hw-banner:hover{ transform:translateY(-2px); box-shadow:0 28px 52px -26px rgba(24,13,34,.65); color:#fff; }

.hw-banner-head{ display:flex; align-items:center; justify-content:space-between; gap:8px 10px; flex-wrap:wrap; }
.hw-eyebrow{
  background:var(--hw-accent); color:#fff; border-radius:var(--r-pill,999px);
  padding:7px 14px; font-size:12.5px; font-weight:700; white-space:nowrap;
}
.hw-countdown{
  display:flex; align-items:baseline; gap:5px;
  font-family:var(--font-display,serif); font-weight:800; font-size:22px; color:#fff;
  white-space:nowrap;
}
.hw-countdown small{
  font-family:var(--font-mono,ui-monospace,monospace); font-weight:600; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--hw-dim);
}

.hw-banner-media{
  /* Flatter than a standard 4:3 photo -- a full-width image at this card's narrower column was
     what made it run taller than the matchday card beside it (2026-10-26 report); the height:100%
     stretch fix above now guarantees equal height regardless, but starting closer avoids a big
     empty gap opening up in the shorter card once stretched. */
  display:block; width:100%; aspect-ratio:16/10; border-radius:12px; overflow:hidden;
  background:var(--hw-panel); border:1px solid rgba(255,255,255,.08);
}
.hw-banner-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.hw-banner:hover .hw-banner-media{ border-color:rgba(255,140,50,.55); }

.hw-banner-body{ display:block; }
.hw-banner-dish{
  display:block; font-family:var(--font-display,serif); font-weight:700; font-size:20px;
  line-height:1.25; color:#fff; margin-bottom:10px;
}
.hw-banner:hover .hw-banner-dish{ color:var(--hw-accent); }
.hw-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.hw-pill{
  background:var(--hw-panel); color:#E7DDEF; border-radius:var(--r-pill,999px);
  padding:5px 12px; font-size:12px; font-weight:600; white-space:nowrap;
}

.hw-banner-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.10);
  color:var(--hw-dim); font-size:14px;
}
.hw-browse{ color:var(--hw-accent); font-weight:700; }
.hw-banner:hover .hw-browse{ color:#fff; }

@media (max-width:520px){
  .hw-banner{ padding:16px 16px 12px; }
  .hw-banner-dish{ font-size:18px; }
  .hw-countdown{ font-size:18px; }
  .hw-eyebrow{ padding:6px 12px; font-size:11.5px; }
}