/* =====================================================================
   Reel rail (reels.css): a scroll-snap rail of Mandy's cooking videos. Built by reelRail() in build.js and linked from every
   page that uses it: the home page, About and Work with me. It was the last block of home.css.
   Needs site.css (tokens, .section, .wrap, .btn, .reel-card). The rail has no colours of its own beyond the tokens.
   ===================================================================== */
/* ---------- Watch Mandy cook: a scroll-snap rail of every reel ---------- */
/* Native horizontal scroll with snapping. Phone: heading, then the rail running edge to edge (the first card lines up with the
   page gutter, the next one peeks). Desktop: the heading, button and two arrows in a left column, and the rail beside it,
   running on to the right edge of the window so the next card is cut off and says "more". --bleed is the gap between the
   page column and the window edge. With one or two reels (--few) nothing scrolls: they sit side by side, with no bleed. */
.h-reels { --bleed: calc(var(--gutter) + max(0px, (100vw - 1280px) / 2)); --card: min(62vw, 260px); overflow-x: hidden; overflow-x: clip; }
.h-reels__grid { display: grid; gap: 28px; }
.h-reels__intro .lede { margin-top: 14px; }
.h-reels__intro h2 .script { font-size: 1.05em; }   /* About and Work with me set one word of the heading in the script, like their other headings */
.h-reels__follow { margin-top: 24px; }
.h-reels__rail { min-width: 0; }
/* 8px of padding all round (and the same as negative margin) so the focus ring on a card is not clipped by the scroller */
.h-reels__track { list-style: none; display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  margin: -8px calc(var(--bleed) * -1); padding: 8px var(--bleed); scroll-padding-inline: var(--bleed); scrollbar-width: thin; scrollbar-color: var(--rim-strong) transparent; }
.h-reel { flex: 0 0 var(--card); display: flex; flex-direction: column; scroll-snap-align: start; }
.h-reel__recipe { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; padding-inline: 4px; font: 600 .9375rem/1.2 var(--sans); color: var(--kitchen); text-decoration: none; }
/* "Includes PR gifts" under a card whose reel has credits (an ASA disclosure): small, never hidden, links to the recipe page's credits */
.h-reel__credit { align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; margin-top: 4px; padding-inline: 4px; font: 500 .875rem/1.3 var(--sans); color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
a.h-reel__credit:hover { color: var(--kitchen); }
.h-reel__recipe svg { width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease); }
.h-reel__recipe:hover { text-decoration: underline; text-underline-offset: 4px; }
.h-reel__recipe:hover svg { transform: translateX(3px); }
/* the progress hint and the arrows are drawn only once the script has run and there is something to scroll to */
.h-reels__bar { display: none; height: 4px; margin-top: 10px; border-radius: 4px; background: var(--rim); overflow: hidden; }
.h-reels__bar i { display: block; width: 30%; height: 100%; border-radius: inherit; background: var(--kitchen); will-change: transform; }
.h-reels.is-enhanced .h-reels__track { scrollbar-width: none; }
.h-reels.is-enhanced .h-reels__track::-webkit-scrollbar { display: none; }
.h-reels.is-enhanced.is-scrollable .h-reels__bar { display: block; }
.h-reels__arrows { display: none; gap: 10px; margin-top: 28px; }
.h-reels__arrow { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--kitchen); border-radius: 50%; background: transparent; color: var(--kitchen); cursor: pointer; transition: background-color .2s, color .2s, opacity .2s; }
.h-reels__arrow svg { width: 22px; height: 22px; }
.h-reels__arrow:hover:not(:disabled) { background: var(--kitchen); color: var(--marble); }
.h-reels__arrow:disabled { opacity: .35; cursor: default; }
.h-reels--few .h-reels__track { margin-inline: -8px; padding-inline: 8px; scroll-padding-inline: 8px; }
.h-reels--few .h-reel { flex: 1 1 0; min-width: 0; max-width: 340px; }
@media (min-width: 900px) {
  .h-reels { --card: clamp(220px, 20vw, 280px); }
  .h-reels__grid { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
  .h-reels__track { margin-inline: -8px calc(var(--bleed) * -1); padding-inline: 8px var(--bleed); scroll-padding-inline: 8px var(--bleed); gap: 20px; }
  .h-reels.is-enhanced.is-scrollable .h-reels__arrows { display: flex; }
}