/* =========================================================
   Reko Study — Tutorials CSS (clean build, CLS-safe)
   ========================================================= */

/* -------------------- Tokens -------------------- */
:root{
  --brand:#1e40af;
  --brand-2:#3f87a6;
  --accent:#60a5fa;
  --ink:#0b1220;
  --paper:#ffffff;
  --muted:#6b7280;
  --card:#f8fbff;
  --ring:rgba(32,93,223,.15);
}

/* -------------------- Layout helpers -------------------- */
.container{ max-width:1200px; margin-inline:auto; padding-inline:1rem; }
img{ height:auto; display:block; }
img[width][height]{ aspect-ratio: attr(width number) / attr(height number); } /* lock ratios */

/* =========================================================
   TUTORIALS – LIST PAGE
   ========================================================= */

/* Hero */
.tutorials-hero{
  display:grid; place-items:center;
  max-height: 260px;
  padding:0 1rem; text-align:center; color:#eaf2ff;
  border-radius:0 0 22px 22px;
  background:
    radial-gradient(1100px 280px at -10% -30%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 60%),
    radial-gradient(1000px 280px at 110% 0%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
    linear-gradient(180deg,#122559,#0f1f4c);
  box-shadow:0 8px 22px rgba(0,0,0,.18) inset;
}
.tutorials-hero .hero-inner{ width:min(900px,92%); }
.hero-title{ font-size:clamp(1.6rem,2.4vw,2.4rem); line-height:1.2; margin:0 0 .5rem; }
.hero-title .muted{ color:#bcd6ff; font-weight:500; }
.hero-sub{ color:#cfe2ff; margin:.25rem 0 1rem; max-width:60ch; }

/* Filters */
.tutorials-filter{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0 .5rem; }
.chipset{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center;
  padding:.5rem .8rem; border-radius:999px;
  background:#eef5ff; border:1px solid #dbe9ff;
  font-weight:600; font-size:.95rem; text-decoration:none; color:#123;
  transition:transform .15s, background .2s, box-shadow .2s;
}
.chip:hover{ transform:translateY(-1px); box-shadow:0 6px 14px var(--ring); }
.chip.active{ background:linear-gradient(180deg,#1f4ab6,#163b92); color:#fff; border-color:transparent; box-shadow:0 6px 14px rgba(31,74,182,.35); }
.chip-select{ display:none; }
@media(max-width:700px){ .chipset{ display:none; } .chip-select{ display:block; } }

/* Cards grid */
.tutorials-wrap{ padding:1rem 0 2rem; }
/* Grid */
.tutorials-grid{
  display:grid;
  grid-template-columns: repeat(1, 1fr); /* default mobile */
  gap: 1rem;
}

@media(min-width: 640px){
  .tutorials-grid{
    grid-template-columns: repeat(2, 1fr); /* tablet */
  }
}

@media(min-width: 1024px){
  .tutorials-grid{
    grid-template-columns: repeat(3, 1fr); /* desktop: 3 columns */
  }
}


.tutorial-card{
  display:flex; flex-direction:column;
  background:var(--card,#fff);
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px; overflow:hidden;
  text-decoration:none; color:inherit;
  transition:transform .15s ease, box-shadow .2s ease;
}
.tutorial-card:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.08); }
html.dark-mode .tutorial-card{ background:#111827; border-color:rgba(255,255,255,.12); }

.tutorial-card .thumb{
  position:relative;
  aspect-ratio:16/9;           /* CLS-safe space */
  background:#0b1220;          /* dark while loading */
  overflow:hidden;
}
.tutorial-card .thumb-img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Title & blurb */
.t-title{ margin:.75rem .9rem 0; font-weight:800; }
.t-blurb{ margin:.35rem .9rem 1rem; color:var(--muted,#6b7280); }

/* Optional fallback badge (if no image) */
.thumb-fallback{
  display:grid; place-items:center; height:100%;
  background:linear-gradient(180deg,#0b1220,#16233a);
}
.thumb-fallback .badge{ font-size:1.75rem; }
.tutorial-card .thumb-img{ width:100%; height:100%; object-fit:cover; }
.tutorial-card .meta{ padding:1rem; display:flex; flex-direction:column; gap:.5rem; }
.t-title{ font-size:1.05rem; color:#0f1a30; margin:0; }
.t-blurb{ font-size:.96rem; color:#3e4a63; margin:0; }
.t-chip{ align-self:flex-start; background:#eaf3ff; color:#1e3a8a; border:1px solid #cfe0ff; border-radius:999px; padding:.25rem .6rem; font-size:.8rem; font-weight:700; }

/* =========================================================
   TUTORIAL – DETAIL PAGE
   ========================================================= */

.tut-wrap{ max-width:1280px; margin:0 auto; padding:1.25rem 1.25rem 2rem; }
.tut-header{ margin-bottom:1.25rem; }
.tut-title{ font-size:clamp(2rem,2.8vw,2.6rem); line-height:1.2; margin:0 0 .25rem; }
.tut-subtitle{ color:var(--muted); margin:.5rem 0 0; }
.tut-meta{ display:flex; flex-wrap:wrap; gap:.5rem .75rem; margin:.5rem 0 1rem; }
.badge{ font-size:.8rem; padding:.25rem .5rem; border-radius:999px; }
.badge.level{ background:#ecfeff; }
.badge.reading{ background:#fff7ed; }
.badge.words{ background:#f0fdf4; }

.feat-figure{ margin:.75rem 0 1.25rem; }
.feat-img{ width:100%; border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.08); }

/* Article & TOC grid (CLS-safe) */
.tut-body{ display:grid; gap:24px; }
.tut-body.has-toc{ grid-template-columns:minmax(0,1fr) 280px; align-items:start; }
.tut-body.no-toc{ grid-template-columns:1fr; }
@media(min-width:1280px){ .tut-body{ gap:32px; } }
@media(max-width:960px){ .tut-body.has-toc{ grid-template-columns:1fr; } }

/* Article card */
.content-prose{
  background:#fff; border:1px solid #eef2f7; border-radius:14px;
  padding:1.5rem 2rem; box-shadow:0 6px 18px rgba(0,0,0,.04);
  max-width:100%; line-height:1.6;
}
.content-prose .katex, .content-prose .katex-display{ line-height:1.2; }

/* TOC: layout island (no CLS) */
/* --- TOC polish --- */
.toc{
  /* keep your existing look; add subtle fade edges while scrolling */
  position: sticky; top: 88px;
  overflow: auto;
  /* gradient mask for top/bottom fade without affecting layout */
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.0) 0, rgba(0,0,0,1) 18px, rgba(0,0,0,1) calc(100% - 18px), rgba(0,0,0,.0) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.0) 0, rgba(0,0,0,1) 18px, rgba(0,0,0,1) calc(100% - 18px), rgba(0,0,0,.0) 100%);
}

.toc h2{
  margin: 0 0 .6rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 70%, #6b7280);
}

.toc ol{
  counter-reset: toc;
  display: grid;
  gap: .2rem;
  margin: 0; padding: 0;
  list-style: none;
}

.toc li{
  counter-increment: toc;
}

.toc li::before{
  content: counter(toc) ".";
  width: 1.6rem;
  flex: 0 0 1.6rem;
  color: #94a3b8;
}

.toc a{
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: 36px;
  padding: 6px 10px 6px 12px;
  border-radius: 8px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  position: relative;
}

/* left active bar (doesn't shift layout) */
.toc a::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translate(-8px, -50%); /* sits in the gutter */
  width: 4px; height: 1.4em;
  border-radius: 2px;
  background: transparent;
}

.toc a:hover{
  background: #eef5ff;
  text-decoration: underline;
}

.toc a.is-active{
  color: var(--brand);
  background: #eef5ff;
  text-decoration: none;
}

.toc a.is-active::before{
  background: var(--brand);
}

/* Sub-items (H3): indented with guide line and lighter weight */
.toc li.toc-sub{
  padding-left: 1.1rem;  /* indent */
  position: relative;
}
.toc li.toc-sub::before{
  color: #cbd5e1;        /* softer numbers for subs */
}
.toc li.toc-sub a{
  font-weight: 600;
}
.toc li.toc-sub a::after{
  content: "";
  position: absolute;
  left: .4rem; top: 8px; bottom: 8px;
  width: 2px; border-radius: 2px;
  background: #e5edf8;   /* vertical guide line */
}

/* Focus-visible for keyboard users */
.toc a:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--brand) 60%, #fff);
  outline-offset: 2px;
  background: #eef5ff;
}

/* Dark mode tweaks */
html.dark-mode .toc h2{ color: #9fb0c7; }
html.dark-mode .toc li::before{ color: #7b8aa1; }
html.dark-mode .toc li.toc-sub a::after{ background: #243349; }
html.dark-mode .toc a:hover{ background: #142644; }
html.dark-mode .toc a.is-active{ background: #142644; color: #8ec5ff; }
html.dark-mode .toc a.is-active::before{ background: #8ec5ff; }


/* Video */
.video-wrap{ margin:.5rem 0 1.25rem; border-radius:14px; overflow:hidden; aspect-ratio:16/9; box-shadow:0 10px 28px rgba(0,0,0,.08); }
.video-wrap iframe{ width:100%; height:100%; border:0; }

/* Back link */
.back-link{ display:inline-block; margin-top:2rem; font-weight:700; color:var(--brand-2); text-decoration:none; }
.back-link:hover{ text-decoration:underline; }

/* =========================================================
   ADS (fixed-size placeholders to prevent CLS)
   ========================================================= */
.ad-slot{ display:block; width:100%; margin:1.25rem 0; position:relative; }
.ad-slot .ad-label{
  position:absolute; inset:auto auto 100% 0;
  font:600 12px/1 system-ui,sans-serif; padding:2px 6px;
  background:#eef; color:#334; border-radius:6px 6px 0 0; pointer-events:none;
}
/* MREC rectangle box: fixed height (no layout shift) */
.ad--mrec{ width:100%; max-width:336px; margin-inline:auto; }
.ad--mrec .ad-box{
  height:280px; background:rgba(0,0,0,.03);
  position:relative; overflow:hidden; contain:strict;
}
@media(max-width:360px){ .ad--mrec{ max-width:300px; } .ad--mrec .ad-box{ height:250px; } }
.ad--mrec .ad-box > *, .ad--mrec .ad-box iframe, .ad--mrec .ad-box ins{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; display:block !important;
}

/* =========================================================
   DARK MODE
   ========================================================= */
html.dark-mode{
  --ink:#e6eefb; --paper:#0f172a; --muted:#9fb0c7; --card:#121b2a; --ring:rgba(96,165,250,.18);
}
html.dark-mode .tutorials-hero{
  color:#dfeaff;
  background:
    radial-gradient(1100px 280px at -10% -30%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 60%),
    radial-gradient(1000px 280px at 110% 0%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%),
    linear-gradient(180deg,#0f1f4c,#0b173a);
  box-shadow:0 8px 22px rgba(0,0,0,.35) inset;
}
html.dark-mode .hero-sub{ color:#c3d7ff; }
html.dark-mode .tutorials-filter{ color:var(--ink); }
html.dark-mode .chip{ background:#122032; border-color:#1f3348; color:#dce9ff; }
html.dark-mode .chip:hover{ box-shadow:0 8px 18px rgba(96,165,250,.18); }
html.dark-mode .chip.active{ background:linear-gradient(180deg,#1e40af,#162e84); color:#fff; border-color:transparent; box-shadow:0 10px 22px rgba(30,64,175,.35); }

html.dark-mode .tutorial-card{ background:var(--card); border-color:#233449; box-shadow:0 12px 28px rgba(0,0,0,.4); }
html.dark-mode .tutorial-card:hover{ border-color:#33506f; box-shadow:0 18px 36px rgba(0,0,0,.5); }
html.dark-mode .t-title{ color:#e7f0ff; }
html.dark-mode .t-blurb{ color:#b6c5db; }
html.dark-mode .t-chip{ background:#10233a; color:#9cc2ff; border-color:#1b3a5c; }

html.dark-mode .content-prose{ background:#0f172a; border-color:#28364a; box-shadow:0 8px 22px rgba(0,0,0,.45); color:#e6eefb; }
html.dark-mode .content-prose h1,
html.dark-mode .content-prose h2,
html.dark-mode .content-prose h3{ color:#f2f7ff; }
html.dark-mode .content-prose a{ color:#8ec5ff; }

html.dark-mode .feat-img{ box-shadow:0 14px 34px rgba(0,0,0,.55); }
html.dark-mode .toc{ background:#0f172a; border-color:#28364a; box-shadow:0 8px 22px rgba(0,0,0,.45); color:#dfe9ff; }
html.dark-mode .toc a{ color:#9cc2ff; }
html.dark-mode .toc a:hover{ background:#142644; }
html.dark-mode .toc a.is-active{ color:#8ec5ff; }
html.dark-mode .video-wrap{ box-shadow:0 14px 34px rgba(0,0,0,.55); }
html.dark-mode .back-link{ color:#8ec5ff; }
html.dark-mode .back-link:hover{ color:#cfe6ff; }

/* --- Tutorials hero alignment fix --- */
.tutorials-hero .hero-inner{
  display:flex;
  justify-content:center;         /* center the copy within the container */
  padding-block: 2rem 1rem;
}

.tutorials-hero .hero-copy{
  text-align:center;
  max-width: 72ch;                /* keep lines readable */
  margin-inline: auto;
}

.tutorials-hero .hero-title{
  margin: 0 0 .5rem;
}

.tutorials-hero .hero-sub{
  max-width: 60ch;                /* narrower than title block looks nicer */
  margin: .25rem auto 0;          /* <-- centers it */
  line-height: 1.6;
  text-indent: 0;                 /* guard against inherited indents */
  color: var(--muted, #64748b);
}

html.dark-mode .tutorials-hero .hero-sub{
  color: #cbd5e1;                 /* readable on dark */
}

/* Tutorials ad placement */
.ad-break{
  display:flex;
  justify-content:center;
  margin: 1.25rem auto 0;
}

.scroll-top{
  position:fixed; right:1.25rem; bottom:1.25rem;
  width:44px; height:44px; border-radius:50%;
  border:none; background:var(--brand); color:#fff;
  font-size:1.2rem; font-weight:700; box-shadow:0 4px 10px rgba(0,0,0,.25);
  opacity:0; visibility:hidden; z-index:999;
  transition:opacity .25s, visibility .25s, transform .2s;
}
.scroll-top:hover{ background:var(--brand-2); transform:translateY(-2px); }
html.dark-mode .scroll-top{ background:var(--brand-2); }
/* --- Dark mode badges (incl. GCSE chip) --- */
html.dark-mode .badge{
  color: #dfe9ff;
  background: #10233a;                 /* generic pill bg */
  border: 1px solid #1e3a5c;            /* subtle rim for contrast */
}

html.dark-mode .badge.level{
  /* GCSE chip */
  color: #9be8ff;                       /* teal-ish text */
  background: #0e2a3a;                  /* darker cyan/blue */
  border-color: #1f4a6a;
}

.tutorial-card.subcategory-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tutorial-card.subcategory-card .thumb {
  height: 200px;       /* match tutorial card height */
  overflow: hidden;
}