.tutorial-detail {
      max-width: 900px;
      margin: 3rem auto;
      padding: 0 1rem;
    }

    .tutorial-detail h1 {
      font-size: 2.2rem;
      margin-bottom: 1rem;
    }

    .tutorial-detail .subtitle {
      font-size: 1.2rem;
      color: #555;
      margin-bottom: 2rem;
    }

    .video-container {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      margin-bottom: 2rem;
    }

    .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    .tutorial-content {
      font-size: 1rem;
      line-height: 1.7;
      color: #333;
      margin-bottom: 2rem;
    }

    .back-link {
      display: inline-block;
      margin-top: 2rem;
      text-decoration: none;
      font-weight: bold;
      color: #007bff;
    }

    .back-link:hover {
      text-decoration: underline;
    }

    .image-container img {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.tutorial-content h2,
.tutorial-content h3 {
  margin-top: 2rem;
  font-weight: bold;
  color: #222;
}

.tutorial-content p {
  margin-bottom: 1.2rem;
}

.tutorial-content ul,
.tutorial-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.tutorial-content code {
  background: #f4f4f4;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.95em;
}

.tutorial-content pre {
  background: #f4f4f4;
  padding: 1em;
  overflow-x: auto;
  border-radius: 5px;
  font-family: monospace;
  font-size: 0.95em;
  margin-bottom: 1.5rem;
}

.tutorial-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

.tutorial-content table, 
.tutorial-content th, 
.tutorial-content td {
  border: 1px solid #ccc;
}

.tutorial-content th,
.tutorial-content td {
  padding: 0.75rem;
  text-align: left;
}

.quiz-link {
  display: inline-block;
  margin-top: 1rem;
  font-weight: bold;
  color: #28a745;
  text-decoration: none;
  font-size: 1.1rem;
}

.quiz-link:hover {
  text-decoration: underline;
}

/* Tutorials Page Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.main-heading {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 0.5rem;
  color: #333;
}

.subtext {
  text-align: center;
  margin-bottom: 2rem;
  color: #666;
}

/* Section Titles */
.category-section {
  margin-bottom: 3rem;
}

.category-section h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #3f87a6;
}

/* Tutorial Grid */
.tutorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1rem;
}

/* Tutorial Card */
.tutorial-card {
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tutorial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.tutorial-card h3 {
  margin-top: 0;
  font-size: 1.3rem;
  color: #333;
}

.tutorial-card p {
  color: #666;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

/* Buttons */
.button,
.btn.primary {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s;
}

.btn.primary {
  background-color: #3f87a6;
  color: white;
}

.btn.primary:hover {
  background-color: #336f8b;
}

.see-all-btn {
  margin-top: 0.5rem;
  display: inline-block;
  font-size: 0.95rem;
  color: #3f87a6;
  text-decoration: underline;
}

/* ===== GCSE Tutorials – Hero, Filter, Grid ===== */

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

/* Container (if you already have .container, this will just harmonise spacing) */
.container{ max-width:1200px; margin-inline:auto; padding-inline:1rem; }

/* HERO */
.tutorials-hero{
  position: relative;
  padding: clamp(28px,4vw,56px) 0;
  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);
  color: #eaf2ff;
  overflow: hidden;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 8px 22px rgba(0,0,0,.18) inset;
}
.tutorials-hero .hero-inner{ display:flex; align-items:center; }
.tutorials-hero .hero-copy{ max-width: 900px; }
/* Center the text block inside the GCSE Tutorials hero */
.tutorials-hero{
  display: flex;
  align-items: center;          /* vertical center */
  justify-content: center;      /* horizontal center */
  min-height: clamp(320px, 45vh, 560px);
  padding: 0 1rem;              /* small side breathing room */
}

.tutorials-hero .hero-inner{
  width: min(900px, 92%);
  text-align: center;           /* center text */
}

.tutorials-hero .hero-inner > *:not(:last-child){
  margin-bottom: .75rem;        /* tidy spacing between lines */
}

/* Force absolute centering for the GCSE Tutorials hero */
section.tutorials-hero{
  display: grid !important;           /* grid makes centering trivial */
  place-items: center !important;     /* vertical + horizontal center */
  min-height: clamp(340px, 48vh, 560px);
  padding: 0 1rem;
  text-align: center;                 /* center the text itself */
}

section.tutorials-hero > *{
  margin-inline: auto !important;     /* kill any stray left margins */
  max-width: 900px;                   /* comfortable line length */
}


.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; }
.hero-cta{ display:flex; gap:.6rem; flex-wrap:wrap; }
.button.ghost{
  background: transparent;
  border:1px solid #9ec3ff;
  color:#cfe2ff;
}
.tutorials-hero .hero-glow{
  position:absolute; inset: -20% -10% -60% -10%;
  background: radial-gradient(500px 220px at 80% 10%, rgba(96,165,250,.25), transparent 60%);
  pointer-events:none;
}

/* FILTER BAR */
.tutorials-filter{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding: 1rem 0 0.5rem;
}
.chipset{
  display:flex; gap:.5rem; flex-wrap:wrap;
}
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .8rem; border-radius:999px;
  background:#eef5ff; color:#123;
  border:1px solid #dbe9ff; text-decoration:none; font-weight:600; font-size:.95rem;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.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);
}

/* mobile select (shows under 700px) */
.chip-select{ display:none; }
.chip-select select{
  padding:.55rem .8rem; border-radius:10px; border:1px solid #cfe0ff; background:#f7fbff;
  font-weight:600;
}
@media (max-width: 700px){
  .chipset{ display:none; }
  .chip-select{ display:block; }
}

/* GRID – big, cardy, blog-like */
.tutorials-wrap{ padding: 1rem 0 2.2rem; }
.tutorials-grid{
  display:grid; gap: clamp(14px, 2vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.tutorial-card{
  text-decoration:none; color:inherit;
  background: var(--card);
  border: 1px solid #e3efff;
  border-radius: 16px;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 8px 22px rgba(19,45,102,.05);
}
.tutorial-card:hover{
  transform: translateY(-4px);
  border-color: #c9e1ff;
  box-shadow: 0 14px 30px rgba(19,45,102,.12);
}
/* Thumbnail shows tutorial.imageUrl if present */
.tutorial-card .thumb-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tutorial-card .thumb-fallback{
  position: absolute; inset: 0;
  display: grid; place-items: start;
  padding: 14px;
}
.tutorial-card .badge{
  background:#1e40af; color:#fff;
  padding:.35rem .6rem; border-radius:10px;
  font-size:.95rem; box-shadow: 0 6px 14px rgba(30,64,175,.3);
}
.tutorial-card .meta{ padding: 1rem 1rem 1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.t-title{
  font-size: 1.05rem; line-height:1.25; color:#0f1a30; letter-spacing:.2px;
}
.t-blurb{
  color:#3e4a63; font-size:.96rem; line-height:1.45; margin:0;
}
.t-chip{
  align-self:flex-start; margin-top:.25rem;
  background:#eaf3ff; color:#1e3a8a; border:1px solid #cfe0ff;
  border-radius:999px; padding:.25rem .6rem; font-size:.8rem; font-weight:700;
}

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

/* ===== Dark Mode ===== */
html.dark-mode .tutorials-hero{
  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);
  color:#dfeaff;
}
html.dark-mode .hero-sub{ color:#c3d7ff; }
html.dark-mode .button.ghost{ border-color:#6aa6ff; color:#dfeaff; }

html.dark-mode .chip{ background:#1a2a33; color:#dfe7ff; border-color:#2b4860; }
html.dark-mode .chip.active{
  background: linear-gradient(180deg, #1e40af, #162e84);
  border-color: transparent;
}

html.dark-mode .tutorial-card{
  background:#1a2431; border-color:#2b3b52;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
html.dark-mode .tutorial-card:hover{
  border-color:#3b5577; box-shadow: 0 18px 38px rgba(0,0,0,.35);
}
html.dark-mode .tutorial-card .thumb{
  background:
    radial-gradient(400px 140px at -10% 120%, rgba(96,165,250,.18), transparent 60%),
    linear-gradient(135deg, #1b2a3a, #1a2333 60%);
  border-bottom-color: #2b3b52;
}
html.dark-mode .tutorial-card .badge{ background:#3f87a6; }
html.dark-mode .t-title{ color:#e6f0ff; }
html.dark-mode .t-blurb{ color:#b8c7dd; }
html.dark-mode .t-chip{
  background:#112033; color:#9ac7ff; border-color:#1e3a5c;
}