/* =====================================================================
   INSIDE THE APP: /inside, /es/inside and the homepage teaser (2026-10-28)
   A product tour of the app (rebuilt 2026-10-29). Each section is a
   stage of real app screens (helper/siteShots.js: one big phone, up to
   two smaller ones beside it, the tall screens playing as a scroll)
   next to a short headline. Section chips stick under the nav.
   Programs, Workouts and Recipes carry rails of real library cards that
   scroll inside themselves (never the page) and only say "Members only"
   when tapped. Phones are sized in % of their stage, so nothing can
   push the page sideways at 375px.

   Depends on notfit-v2.css tokens (--nfx-gold, --nfx-ink, --nfx-card,
   --nfx-line, --nfx-muted, --nfx-ease, --nfx-brand-red) and, on /inside
   and the main homepage, rgb.css's warm-gold overrides. Scoped under
   .nfi- so no other page can be affected.
   ===================================================================== */

.nfx-inside {
  --nfi-gold-line: rgba(233, 199, 141, 0.30);
  --nfi-gold-soft: rgba(233, 199, 141, 0.08);
  --nfi-red: var(--nfx-brand-red, #ce201a);
  --nfi-text-2: rgba(255, 255, 255, 0.78);
  color: var(--nfx-text, #fff);
  overflow-x: clip;
}

.nfi-wrap {
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

/* ---------- Hero ------------------------------------------------------ */
.nfi-main {
  padding-top: clamp(5.4rem, 9vh, 6.6rem);
  background:
    radial-gradient(70% 560px at 70% 0%, rgba(233, 199, 141, 0.09), transparent 72%),
    radial-gradient(50% 420px at 10% 30%, rgba(206, 32, 26, 0.08), transparent 70%),
    var(--nfx-ink, #060606);
}

.nfi-hero { padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.nfi-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.nfi-hero__title {
  margin: 1rem 0 0.8rem;
  max-width: 14ch;
  font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4.6rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: #fff;
}
.nfi-hero__sub {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.55;
  color: var(--nfi-text-2, rgba(255, 255, 255, 0.78));
}
.nfi-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.nfi-hero__tour,
.nfi-hero__apply {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.nfi-hero__tour { border: 1px solid var(--nfx-gold, #d1bb9a); background: transparent; color: var(--nfx-gold-bright, #e7d2ad); }
.nfi-hero__tour:hover { background: var(--nfx-gold, #d1bb9a); color: var(--nfx-gold-ink, #231a09); }
.nfi-hero__apply { border: 1px solid transparent; background: var(--nfi-red); color: #fff; }
.nfi-hero__apply:hover { background: var(--nfx-brand-red-deep, #a31410); }

/* Section chips: one row under the nav that scrolls sideways inside itself. */
.nfi-jump {
  position: sticky;
  top: var(--nfi-nav-h, 62px);
  z-index: 40;
  background: rgba(6, 6, 6, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-block: 1px solid var(--nfx-line, rgba(255, 255, 255, 0.1));
}
.nfi-jump__track {
  display: flex;
  gap: 0.45rem;
  list-style: none;
  margin: 0 auto;
  padding: 0.6rem 16px;
  max-width: 1152px;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.nfi-jump__track::-webkit-scrollbar { display: none; }
@media (min-width: 1180px) { .nfi-jump__track { justify-content: center; } }
.nfi-jump__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--nfx-line-2, rgba(255, 255, 255, 0.16));
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.86rem;
  text-decoration: none;
  transition: border-color 200ms, background 200ms, color 200ms;
}
.nfi-jump__chip span {
  color: var(--nfx-gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.nfi-jump__chip:hover { border-color: var(--nfx-gold); color: #fff; }
.nfi-jump__chip[aria-current="true"] {
  border-color: var(--nfi-red);
  background: rgba(206, 32, 26, 0.16);
  color: #fff;
}
.nfi-jump__chip[aria-current="true"] span { color: #fff; }

/* ---------- Taz's video ----------------------------------------------- */
.nfi-video { padding: clamp(1.5rem, 4vw, 3rem) 0; }
.nfi-video__title {
  margin: 0 0 1rem;
  text-align: center;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  color: #fff;
}
.nfi-video__frame {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(233, 199, 141, 0.30);
  background: #000;
}
.nfi-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- One tour section ------------------------------------------ */
.nfi-sec {
  padding: clamp(3rem, 7vw, 6rem) 0;
  border-top: 1px solid var(--nfx-line, rgba(255, 255, 255, 0.08));
  scroll-margin-top: calc(var(--nfi-nav-h, 62px) + 52px);
}
.nfi-sec--rev { background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 70%); }
.nfi-sec__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}
.nfi-sec--rev .nfi-stage { order: 2; }
.nfi-sec__num {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  color: var(--nfx-gold);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nfi-sec__num span {
  display: inline-grid;
  place-items: center;
  min-width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: var(--nfi-red);
  color: #fff;
  letter-spacing: 0.02em;
  font-size: 0.78rem;
}
.nfi-sec__title {
  margin: 0 0 0.9rem;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #fff;
}
.nfi-sec__body {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
  line-height: 1.6;
  color: var(--nfi-text-2, rgba(255, 255, 255, 0.78));
}
.nfi-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 0.55rem 1.4rem;
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}
.nfi-tags li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #fff;
  font-size: 0.95rem;
}
.nfi-tags i { color: var(--nfx-gold); font-size: 1.05rem; }

/* ---------- The stage and its phones ------------------------------------
   Widths are % of the stage: a main phone with up to two smaller ones
   tucked behind it. Three phones add up to 100%, so a stage never
   overflows its column. */
.nfi-stage,
.nfi-hero__fan {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  isolation: isolate;
}
.nfi-stage::before,
.nfi-hero__fan::before {
  content: "";
  position: absolute;
  inset: 10% 6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(233, 199, 141, 0.16), rgba(206, 32, 26, 0.06) 60%, transparent);
  pointer-events: none;
}
.nfi-phone {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  padding: 2.4%;
  border-radius: 14% / 6.5%;
  background: linear-gradient(160deg, #3a3631 0%, #1b1a18 45%, #2b2824 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 40px 90px -40px rgba(233, 199, 141, 0.32),
    0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.nfi-phone__screen {
  position: relative;
  display: block;
  aspect-ratio: 1170 / 2532;
  border-radius: 12% / 5.5%;
  overflow: hidden;
  background: #0d0d0d;
}
.nfi-phone__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.nfi-phone--main { order: 1; z-index: 2; width: 58%; max-width: 310px; }
.nfi-stage--1 .nfi-phone--main { width: 62%; max-width: 320px; }
.nfi-phone--side { z-index: 1; width: 36%; max-width: 200px; }
.nfi-phone--right { order: 2; margin-left: -8%; transform: translateY(6%) rotate(4deg); }
.nfi-phone--left { order: 0; margin-right: -8%; transform: translateY(6%) rotate(-4deg); }
.nfi-stage--3 .nfi-phone--main,
.nfi-hero__fan .nfi-phone--main { width: 48%; }
.nfi-stage--3 .nfi-phone--side,
.nfi-hero__fan .nfi-phone--side { width: 30%; }

/* ---------- Library rails --------------------------------------------- */
.nfi-rail { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.nfi-rail__head {
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.nfi-rail__title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}
.nfi-rail__title i { color: var(--nfx-gold); }
.nfi-rail__hint { margin: 0; color: var(--nfx-muted, rgba(255, 255, 255, 0.64)); font-size: 0.88rem; }
.nfi-rail__arrows { display: flex; gap: 0.5rem; margin-left: auto; }
.nfi-rail__arrows[hidden] { display: none; }
.nfi-rail__arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--nfx-line-2, rgba(255, 255, 255, 0.2));
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: border-color 200ms, background 200ms, opacity 200ms;
}
.nfi-rail__arrow:hover { border-color: var(--nfx-gold); }
.nfi-rail__arrow:disabled { opacity: 0.35; cursor: default; }

/* The track scrolls inside itself; the page never scrolls sideways. Its
   side padding lines the first card up with the text column. */
.nfi-rail__track {
  --nfi-edge: max(16px, calc((100% - 1120px) / 2));
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 4px var(--nfi-edge) 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--nfi-edge);
  scrollbar-width: thin;
  scrollbar-color: rgba(233, 199, 141, 0.35) transparent;
  -webkit-overflow-scrolling: touch;
}
.nfi-rail__track:focus-visible { outline: 2px solid var(--nfx-gold); outline-offset: -2px; }

.nfi-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(190px, 58vw, 240px);
  scroll-snap-align: start;
}
.nfi-card__hit {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 1px solid var(--nfx-line, rgba(255, 255, 255, 0.1));
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, #151616 0%, #0e0f0f 100%);
  color: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 200ms, transform 240ms var(--nfx-ease);
}
.nfi-card__hit:hover { border-color: rgba(233, 199, 141, 0.45); transform: translateY(-3px); }
.nfi-card__hit:focus-visible { outline: 2px solid var(--nfx-gold); outline-offset: 2px; }
.nfi-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: #1a1a1a;
}
.nfi-rail--programs .nfi-card__media { aspect-ratio: 4 / 5; }
.nfi-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nfi-card__media.is-empty img { visibility: hidden; }
.nfi-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(6, 6, 6, 0.72);
  color: var(--nfx-gold-bright, #e7d2ad);
  font-size: 0.9rem;
}
/* A program teased as upcoming (2026-10-31): a badge, no way in. */
.nfi-card__hit--static { cursor: default; }
.nfi-card__hit--static:hover { border-color: var(--nfx-line, rgba(255, 255, 255, 0.1)); transform: none; }
.nfi-card__upcoming {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(6, 6, 6, 0.78);
  color: var(--nfx-gold-bright, #e7d2ad);
  font-size: 0.78rem;
  font-weight: 600;
}
.nfi-card__text { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.8rem 0.9rem 0.95rem; }
.nfi-card__title {
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nfi-card__meta { color: var(--nfx-muted, rgba(255, 255, 255, 0.64)); font-size: 0.82rem; }
.nfi-card__creator { color: #fff; font-size: 0.85rem; }
.nfi-card__launch { color: var(--nfx-gold-bright, #e7d2ad); font-size: 0.82rem; font-weight: 600; }
.nfi-card__about {
  color: var(--nfx-muted, rgba(255, 255, 255, 0.64));
  font-size: 0.82rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The tease: a tap covers the card with "Members only" and the apply button. */
.nfi-card__lock {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.1rem;
  border-radius: 20px;
  border: 1px solid rgba(233, 199, 141, 0.45);
  background: rgba(8, 8, 8, 0.9);
  text-align: center;
  animation: nfi-lock-in 220ms var(--nfx-ease, ease) both;
}
.nfi-card__lock[hidden] { display: none; }
@keyframes nfi-lock-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.nfi-card__lockic { font-size: 1.6rem; color: var(--nfx-gold-bright, #e7d2ad); }
.nfi-card__locktext { margin: 0; font-size: 0.95rem; line-height: 1.4; color: #fff; }
.nfi-card__apply {
  padding: 0.7rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: var(--nfx-brand-red, #ce201a);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}
.nfi-card__apply:hover { background: var(--nfx-brand-red-deep, #a31410); }
.nfi-card__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}

/* ---------- Close ----------------------------------------------------- */
.nfi-close {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  border-top: 1px solid var(--nfx-line, rgba(255, 255, 255, 0.1));
  text-align: center;
  background: radial-gradient(60% 380px at 50% 100%, rgba(206, 32, 26, 0.16), transparent 72%);
}
.nfi-close__title {
  margin: 1rem auto 0.9rem;
  max-width: 18ch;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
}
.nfi-close__price {
  margin: 0 auto 1.8rem;
  max-width: 34rem;
  color: var(--nfx-gold-bright, #e7d2ad);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.5;
}
.nfi-close__yt { margin: 1.6rem 0 0; }
.nfi-close__yt a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--nfx-muted, rgba(255, 255, 255, 0.64));
  text-decoration: none;
  font-size: 0.92rem;
}
.nfi-close__yt a:hover { color: #fff; }

/* ---------- Homepage teaser (compact, low on the page) ------------------ */
.nfi-teaser {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background:
    radial-gradient(50% 360px at 80% 50%, rgba(233, 199, 141, 0.08), transparent 72%),
    var(--nfx-ink, #060606);
  border-top: 1px solid var(--nfx-line, rgba(255, 255, 255, 0.08));
  color: #fff;
  overflow: hidden;
}
.nfi-teaser__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.nfi-teaser__title {
  margin: 0.9rem 0 0.7rem;
  max-width: 16ch;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #fff;
}
.nfi-teaser__body {
  margin: 0 0 1.4rem;
  max-width: 30rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.98rem, 0.95rem + 0.2vw, 1.08rem);
  line-height: 1.55;
}
.nfi-teaser__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 16px);
  list-style: none;
  margin: 0;
  padding: 0 0 6%;
}
.nfi-teaser__tiles li:nth-child(even) { transform: translateY(12%); }
.nfi-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
}
.nfi-tile__screen {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1170 / 2532;
  border-radius: 18px;
  overflow: hidden;
  border: 4px solid #22201d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 24px 50px -28px rgba(233, 199, 141, 0.35);
  background: #0d0d0d;
  transition: transform 260ms var(--nfx-ease, ease), border-color 200ms;
}
.nfi-tile__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.nfi-tile:hover .nfi-tile__screen { transform: translateY(-4px); border-color: rgba(233, 199, 141, 0.5); }
.nfi-tile:focus-visible { outline: 2px solid var(--nfx-gold); outline-offset: 4px; border-radius: 18px; }
.nfi-tile__label { font-weight: 600; font-size: 0.86rem; text-align: center; }
.nfi-teaser__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--nfx-gold, #d1bb9a);
  color: var(--nfx-gold-bright, #e7d2ad);
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms, color 200ms;
}
.nfi-teaser__cta:hover { background: var(--nfx-gold, #d1bb9a); color: var(--nfx-gold-ink, #231a09); }

/* ---------- Narrow screens ---------------------------------------------- */
@media (max-width: 900px) {
  .nfi-hero__grid { grid-template-columns: 1fr; text-align: center; }
  .nfi-hero__title,
  .nfi-hero__sub { margin-inline: auto; }
  .nfi-hero__actions { justify-content: center; }
  .nfi-hero__fan { max-width: 440px; }
  .nfi-teaser__grid { grid-template-columns: 1fr; }
  .nfi-teaser__copy { text-align: center; }
  .nfi-teaser__title,
  .nfi-teaser__body { margin-inline: auto; }
}
@media (max-width: 820px) {
  .nfi-sec__grid { grid-template-columns: 1fr; gap: 2rem; }
  .nfi-sec--rev .nfi-stage { order: 0; }
  .nfi-stage { max-width: 420px; }
}
@media (max-width: 560px) {
  .nfi-tags { gap: 0.5rem 1rem; }
  .nfi-teaser__tiles { gap: 6px; }
  .nfi-tile__screen { border-width: 3px; border-radius: 12px; }
  .nfi-tile__label { font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nfi-card__lock { animation: none; }
  .nfi-card__hit,
  .nfi-tile__screen { transition: none; }
}

/* The homepage's real library rows (2026-10-31): same cards as the tour. */
.nfi-homerail { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; }
.nfi-homerail__copy { margin-bottom: 0.5rem; }
.nfi-homerail__title { margin: 0.4rem 0 0.5rem; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.1; color: #fff; }
.nfi-homerail__body { margin: 0; max-width: 56ch; color: var(--nfx-muted, rgba(255, 255, 255, 0.6)); }
.nfi-homerail .nfi-rail, .nfx-nutrition .nfi-rail { margin-top: 1.5rem; }
a.nfi-card__hit { color: inherit; text-decoration: none; display: block; }

/* ---------- Library pictures without an image (2026-11-04) ------------- */
.nfi-card__noimg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 60% at 30% 20%, rgba(233, 199, 141, 0.18), transparent 70%),
    linear-gradient(160deg, #1d1a14 0%, #0d0d0d 100%);
}
.nfi-card__media .nfi-card__noimg img { width: 42%; height: auto; object-fit: contain; opacity: 0.85; }

/* ---------- Coming soon: blurred picture (2026-11-04) -------------------
   Ricky: "I'd have all the coming soon as well, but just blur them." */
.nfi-card--upcoming .nfi-card__media { overflow: hidden; }
.nfi-card--upcoming .nfi-card__media img {
  filter: blur(10px) saturate(0.85) brightness(0.72);
  transform: scale(1.15);
}
.nfi-card--upcoming .nfi-card__upcoming {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  border: 1px solid rgba(233, 199, 141, 0.45);
  background: rgba(6, 6, 6, 0.62);
  letter-spacing: 0.02em;
}

/* ---------- Homepage programs (2026-11-04) ------------------------------
   Every available program in a grid (four across, two on a phone), then
   every Coming soon one: a grid on a computer, a swipe row on a phone. */
.nfi-prog { padding-bottom: clamp(0.5rem, 2vw, 1.5rem); }
.nfi-prog__grid {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.nfi-prog .nfi-card { width: auto; scroll-snap-align: none; }
.nfi-prog .nfi-card__hit { height: 100%; }
.nfi-card--grid .nfi-card__media { aspect-ratio: 4 / 5; }
.nfi-prog__soon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: clamp(1.8rem, 4vw, 2.6rem) 0 0.9rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--nfx-gold-bright, #e7d2ad);
}
.nfi-prog__soonlist {
  list-style: none;
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0 0 6px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.nfi-prog__soonlist .nfi-card__media { aspect-ratio: 16 / 11; }
.nfi-prog__soonlist .nfi-card__text { padding: 0.7rem 0.8rem 0.85rem; }
.nfi-prog__soonlist .nfi-card__title { font-size: 0.92rem; }
.nfi-prog__soonlist:focus-visible { outline: 2px solid var(--nfx-gold); outline-offset: 4px; }
@media (max-width: 1080px) {
  .nfi-prog__soonlist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .nfi-prog__soonlist {
    --nfi-edge: 16px;
    display: flex;
    width: 100%;
    padding: 4px var(--nfi-edge) 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--nfi-edge);
    scrollbar-width: thin;
    scrollbar-color: rgba(233, 199, 141, 0.35) transparent;
    -webkit-overflow-scrolling: touch;
  }
  .nfi-prog__soonlist .nfi-card { flex: 0 0 auto; width: clamp(200px, 62vw, 250px); scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .nfi-prog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .nfi-card--grid .nfi-card__text { padding: 0.7rem 0.75rem 0.8rem; }
  .nfi-card--grid .nfi-card__title { font-size: 0.92rem; }
  .nfi-card--grid .nfi-card__meta { font-size: 0.78rem; }
}

/* The closing band's apply button spans the column on a phone; keep its
   attention ring inside the screen (2026-11-04, the page slid sideways). */
.nfi-close { overflow-x: clip; }

/* Cards in a rail share the tallest card's height, so a row with a Coming
   soon card (longer text) no longer leaves an empty band under the others
   (2026-11-04). */
.nfi-rail__track > .nfi-card > .nfi-card__hit { height: 100%; }
/* In the tour's programme rail a Coming soon card carries more text, so its
   picture is shorter and the row keeps one height without a gap. */
.nfi-rail--programs .nfi-card--upcoming .nfi-card__media { aspect-ratio: 4 / 3; }