/* Cardio Cinema — the four public surfaces (website embed, the screen in the
   room, the printable wall sheet, the social card). Shared because they are the
   same schedule seen from four distances: arm's length, across a room, on
   paper, and on a phone.
   Brand tokens mirror the FIT EVO design system (Figma: 06 · Cardio Cinema). */

:root{
  --teal:#42A9B6; --teal-100:#CDE9EC; --teal-700:#216E79; --teal-50:#EAF6F7;
  --ink:#0F292C; --ink-2:#0C2226; --gold:#F4B400;
  --line:#E2EAEA; --paper:#F3F7F7; --text:#2C3F42; --muted:#667B7E;
  --dim:#8FB6BA;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Barlow Semi Condensed",var(--sans);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--text);background:#fff;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ── NOW PLAYING hero ─────────────────────────────────────────────────────── */
.hero{position:relative;border-radius:20px;overflow:hidden;background:var(--ink-2);
  min-height:480px;display:flex;align-items:flex-end}
.hero-art{position:absolute;inset:0;background-size:cover;background-position:center;
  background-color:#16323a}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 30%,
    rgba(4,13,15,.72) 68%,rgba(4,13,15,.96) 100%)}
.hero-body{position:relative;padding:44px;width:100%}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin:0 0 10px}
.hero-title{font-family:var(--display);font-weight:900;font-size:clamp(44px,7vw,86px);
  line-height:.94;color:#fff;margin:0;text-shadow:0 5px 20px rgba(0,0,0,.6)}
.hero-meta{margin:10px 0 0;font-size:19px;font-weight:600;color:var(--teal-100);
  letter-spacing:.02em}
.hero-times{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.pill{border-radius:999px;padding:10px 16px;font-size:17px;font-weight:600;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff}
.pill.next{background:var(--teal);border-color:var(--teal);color:var(--ink)}
.pill.past{opacity:.45}

/* ── week grid ────────────────────────────────────────────────────────────── */
.week-head{display:flex;align-items:baseline;gap:16px;margin:28px 0 14px}
.week-head h2{font-family:var(--display);font-weight:900;font-size:38px;margin:0;
  color:var(--ink);flex:1;line-height:1}
.week-head .range{font-size:15px;font-weight:600;letter-spacing:.12em;color:var(--muted);
  text-transform:uppercase}
.week{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:720px){ .week{grid-template-columns:1fr} }
.day{border:1.5px solid var(--line);border-radius:14px;padding:16px 20px;background:#fff}
.day.today{border-color:var(--teal);border-width:2px;background:var(--teal-50)}
.day.empty{background:var(--paper);border-style:dashed}
.day-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.day-name{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.09em;
  color:var(--teal-700);flex:1;text-transform:uppercase}
.day-date{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.badge{background:var(--teal);color:var(--ink);border-radius:6px;padding:3px 9px;
  font-size:10px;font-weight:700;letter-spacing:.1em}
.day-title{font-family:var(--display);font-weight:800;font-size:27px;line-height:.92;
  color:var(--ink);margin:0}
.day-meta{font-size:12.5px;font-weight:500;color:var(--muted);margin:6px 0 0}
.day-times{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
  font-size:13.5px;font-weight:600;color:var(--teal-700)}
.day.today .day-times{border-top-color:var(--teal-100)}
.day-none{font-size:14px;color:var(--muted);margin:4px 0 0}
.note-card{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;
  padding:16px 20px;display:flex;flex-direction:column;justify-content:center}
.note-card h3{font-family:var(--display);font-weight:800;font-size:22px;margin:0 0 6px;
  color:var(--ink)}
.note-card p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.foot{margin-top:22px;text-align:center;font-size:12.5px;color:var(--muted)}

/* ── website embed ────────────────────────────────────────────────────────── */
body.embed{background:#fff;padding:0}
.embed-wrap{max-width:1200px;margin:0 auto;padding:0 0 8px}

/* ── in-club TV screen ────────────────────────────────────────────────────── */
body.screen{background:var(--ink-2);color:#fff;overflow:hidden;height:100vh;
  cursor:none}
.tv{display:flex;height:100vh}
.tv-art{position:relative;flex:1;overflow:hidden;background:#16323a}
/* A slide carries its own still AND its own title block, so the two crossfade
   as one. Fading them separately put the new film's title over the previous
   film's still for about a second — long enough to read, and wrong. */
.tv-art .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.tv-art .slide.on{opacity:1}
.tv-art .slide .art{position:absolute;inset:0;background-size:cover;background-position:center}
.tv-art .scrim{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 28%,
    rgba(4,13,15,.72) 62%,rgba(4,13,15,.97) 100%)}
.tv-brand{position:absolute;top:52px;left:56px;display:flex;align-items:center;gap:18px;z-index:2}
/* The Fe tile is inline SVG on its own 160×176 grid — only a width is set, so
   the mark can never be squashed out of proportion. Sized generously: at the
   small end its "26" and wordmark turn to mush from across a room. */
.fe{width:76px;height:auto;flex-shrink:0;display:block}
/* Scoped to the wordmark's own wrapper: an unscoped `.tv-brand span` also
   matched the old "Fe" tile and painted it teal-on-teal, i.e. invisible. */
.tv-brand .wordmark b{display:block;font-family:var(--display);font-weight:900;font-size:30px;
  letter-spacing:.06em;line-height:1.1}
.tv-brand .wordmark span{font-size:13px;font-weight:600;letter-spacing:.2em;color:var(--teal)}
.tv-block{position:absolute;left:56px;right:56px;bottom:64px}
.tv-eyebrow{font-size:22px;font-weight:600;letter-spacing:.34em;color:var(--gold);
  text-transform:uppercase;margin:0 0 8px}
.tv-title{font-family:var(--display);font-weight:900;font-size:132px;line-height:.92;
  margin:0;text-shadow:0 6px 20px rgba(0,0,0,.6)}
.tv-meta{margin:10px 0 0;font-size:26px;font-weight:600;color:var(--teal-100)}
.tv-rail{width:620px;flex-shrink:0;border-left:2px solid rgba(66,169,182,.4);
  padding:48px 44px 40px;display:flex;flex-direction:column;background:var(--ink-2)}
.rail-date{font-size:16px;font-weight:600;letter-spacing:.22em;color:var(--dim);
  text-transform:uppercase;margin:0 0 20px}
.next-card{border:2px solid rgba(66,169,182,.6);background:rgba(66,169,182,.14);
  border-radius:20px;padding:22px 26px;margin-bottom:30px}
.next-card small{display:block;font-size:14px;font-weight:600;letter-spacing:.26em;
  color:var(--teal);text-transform:uppercase}
.next-card b{display:block;font-family:var(--display);font-weight:900;font-size:96px;
  line-height:1;margin:2px 0}
.next-card i{display:block;font-style:normal;font-size:17px;font-weight:500;
  color:var(--teal-100);opacity:.85}
.rail-label{font-size:14px;font-weight:600;letter-spacing:.26em;color:var(--dim);
  text-transform:uppercase;margin:0 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.chip{border-radius:10px;padding:8px 16px;font-size:22px;font-weight:600;
  background:rgba(66,169,182,.75);color:#fff}
.chip.past{background:#16323A;color:var(--dim);opacity:.6}
.week-ahead{margin-top:6px}
.week-ahead .row{display:flex;align-items:center;gap:16px;padding:13px 0;
  border-bottom:1px solid rgba(66,169,182,.18)}
.week-ahead .d{font-family:var(--display);font-weight:800;font-size:20px;
  letter-spacing:.06em;color:var(--teal);width:48px;flex-shrink:0}
.week-ahead .t{font-family:var(--display);font-weight:800;font-size:24px;line-height:1;
  color:#fff}
.rail-foot{margin-top:auto;padding-top:24px;text-align:center;font-size:16px;
  font-weight:600;color:var(--teal)}
.tv-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;font-family:var(--display);font-weight:800;font-size:44px;color:var(--dim)}

/* ── printable wall sheets ────────────────────────────────────────────────────
   Both sheets are drawn into a <canvas> rather than laid out in HTML, so the
   thing that prints and the PNG that gets uploaded to WordPress are byte-for-
   byte the same artwork — there is no second layout to drift out of sync. */
body.print{background:#3A4547;padding:24px}
.toolbar{max-width:1056px;margin:0 auto 20px;display:flex;gap:10px;flex-wrap:wrap;
  align-items:center;background:#fff;border-radius:12px;padding:12px 16px}
.toolbar b{font-family:var(--display);font-size:17px;font-weight:800;color:var(--ink)}
.toolbar .grow{flex:1}
.toolbar button{border-radius:9px;padding:9px 15px;font-size:13px;font-weight:600;
  font-family:var(--sans);cursor:pointer;border:1px solid var(--line);background:#fff;
  color:var(--muted)}
.toolbar button.primary{background:var(--teal-700);border-color:var(--teal-700);color:#fff}
.toolbar button:disabled{opacity:.5;cursor:not-allowed}
.toolbar select,.toolbar input{border-radius:9px;padding:8px 11px;font-size:13px;
  font-family:var(--sans);border:1px solid var(--line);color:var(--text)}
/* Tick boxes are not text fields — undo the padding and border above, and give
   them the brand colour instead of the browser's blue. Grouped in .toggles so
   the pair wraps as one unit rather than splitting across two rows. */
.toolbar .toggles{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.toolbar .toggles label{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  color:var(--muted);cursor:pointer;user-select:none}
.toolbar input[type=checkbox]{padding:0;border:0;width:15px;height:15px;
  accent-color:var(--teal-700);cursor:pointer}
.toolbar .msg{font-size:12px;color:var(--muted);width:100%}
.sheet{width:1056px;max-width:100%;margin:0 auto 24px;background:#fff;
  box-shadow:0 10px 40px rgba(0,0,0,.35);line-height:0}
.sheet canvas{width:100%;height:auto;display:block}

/* ── social card (1080×1920) ─────────────────────────────────────────
   Stories / Reels size, drawn on the same canvas as the wall sheets. The
   preview is shown at phone width — a 1080px-wide card judged full size looks
   fine and then turns out to be unreadable on a phone — while the exported
   PNG is always the full 1080×1920. */
body.social{background:#3A4547;padding:24px}
.sheet.portrait{width:420px}

@page{size:letter landscape;margin:0}
@media print{
  body.print{background:#fff;padding:0}
  .toolbar{display:none}
  .sheet{width:11in;margin:0;box-shadow:none;break-after:page;page-break-after:always}
  .sheet:last-child{break-after:auto;page-break-after:auto}
  .sheet.portrait{display:none}
}