/* Global adjustments for this page */
.tutoring-container {
  padding: 3rem 1rem;
  max-width: 1200px;
  margin: auto;
  color: #ffffff;
}


/* Hero wrapper: full width + maintain min-height */
.tutoring-hero-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 1rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 560px; /* matches your banner height */
  background: #1e40af; /* fallback if image fails */
}

/* Hero Image */
.tutoring-banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Hero Text Overlay */
.tutoring-hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  max-width: 90%;
  padding: 2rem 2.5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(96,165,250,0.95), rgba(30,64,175,0.95));
  box-shadow: 0 0 25px rgba(2,6,23,0.35);
  color: #fff;
}


/* Hero Heading */
.tutoring-hero-text h1 {
  font-size: 2.5rem;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

/* Hero Paragraph */
.tutoring-hero-text p {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* CTA inside overlay */
.hero-cta {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.btn-hero {
  background: linear-gradient(180deg, #1f6feb, #2a7cf8);
  color: #fff;
  border-radius: 12px;
  padding: 0.8rem 1.2rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  transition: all 0.2s ease;
}

.btn-hero:hover {
  filter: brightness(1.1);
}

/* ===== Responsive ===== */
/* ===== Responsive ===== */
@media (max-width: 768px) {
  .tutoring-hero-wrapper {
  
    min-height: auto;         /* height grows with content */
    padding: 2rem 1rem;       /* vertical + horizontal padding */
    display: block;
  }

  .tutoring-hero-text {
    position: relative !important;   /* no absolute positioning */
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100%;
    max-width: 90%;
    padding: 1.5rem 2.5rem 1.5rem 2rem; /* top right bottom left */
    border-radius: 1rem;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .tutoring-hero-text h1 {
    font-size: 1.8rem;
  }

  .tutoring-hero-text p {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .btn-hero {
    width: 100%;
    max-width: 300px;
  }
}



/* Section Boxes */
.tutoring-section {
  background-color: #1f2937; /* dark gray */
  padding: 2.5rem 2rem;
  margin-bottom: 3rem;
  border-radius: 1rem;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}

.tutoring-section h2 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
}

.tutoring-section ul {
  list-style: none;
  padding-left: 0;
}
.tutoring-section li {
  margin-bottom: 1rem;
  padding-left: 2rem;
  position: relative;
  font-size: 1.125rem;
}
.tutoring-section li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #34d399; /* Tailwind green-400 */
}

html.dark-mode .btn-hero {
  color: #ffffff;
  background: linear-gradient(180deg, #2563eb, #1e40af);
}

/* ===== How It Works Flip Cards ===== */

/* Main container */
.how-it-works-flip {
  width: min(1400px, 100% - 2rem);
  margin: clamp(24px, 4vw, 48px) auto;
  padding: clamp(20px, 3vw, 36px);
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(180deg, #e9f2ff, #dbeafe);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #0b1d3a;
}

/* Section heading */
.how-it-works-flip > h2 {
  width: min(1200px, 100%);
  margin: 0 auto 1.6rem;
  text-align: center;
  color: #0b1d3a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  font-size: 1.75rem;
}

/* Grid container */
.how-it-works-flip .flip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 20px);
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: clamp(10px, 2vw, 18px);
}

@media (min-width: 640px) {
  .how-it-works-flip .flip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .how-it-works-flip .flip-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Flip card wrapper */
.how-it-works-flip .flip-card {
  perspective: 1000px;
  border-radius: 16px;
  overflow: hidden;
}

/* Inner flip container */
.how-it-works-flip .flip-inner {
  position: relative;
  width: 100%;
  height: 180px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  border-radius: 16px;
}

/* Card faces */
.how-it-works-flip .flip-front,
.how-it-works-flip .flip-back {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.10);
  border: 1px solid rgba(30, 64, 175, 0.2);
}

/* Front & back colors */
.how-it-works-flip .flip-front {
  background: linear-gradient(180deg, #f3f8ff, #e8f2ff);
}
.how-it-works-flip .flip-back {
  background: linear-gradient(180deg, #e1edff, #d7e8ff);
  transform: rotateY(180deg);
}

/* Hover effect */
.how-it-works-flip .flip-card:hover .flip-inner,
.how-it-works-flip .flip-card:focus-within .flip-inner {
  transform: rotateY(180deg) translateY(-2px);
}

/* Card content styles */
.how-it-works-flip .flip-front .icon {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.how-it-works-flip .flip-front h3 {
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: #0b1d3a;
}

/* ===== Dark Mode ===== */
html.dark-mode .how-it-works-flip {
  background: linear-gradient(180deg, #152b62, #122457);
  color: #eaf2ff;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
}

html.dark-mode .how-it-works-flip > h2 {
  color: #eef4ff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

html.dark-mode .how-it-works-flip .flip-front {
  background: linear-gradient(180deg, #162b56, #13254c);
  border-color: rgba(96,165,250,0.16);
  box-shadow: 0 10px 18px rgba(0,0,0,0.18);
}

html.dark-mode .how-it-works-flip .flip-back {
  background: linear-gradient(180deg, #1c3a75, #153364);
  border-color: rgba(96,165,250,0.16);
  transform: rotateY(180deg);
}

html.dark-mode .how-it-works-flip .flip-front .icon { color: #93c5fd; }
html.dark-mode .how-it-works-flip .flip-front h3 { color: #f2f7ff; }


/* ===== Tutoring Includes — glossy cards ===== */
.tutoring-includes.glam{
  --brand:#1e40af;          /* primary */
  --accent:#60a5fa;         /* light blue accent */
  --panelA:#e9f2ff;         /* light panel */
  --panelB:#dfeafb;
  --ink:#0b1b3f;

  position: relative;
  margin: 3rem auto;
  padding: clamp(20px,3vw,34px);
  border-radius: 20px;
  overflow: hidden;
  text-align: center;

  /* soft blue panel with faint pattern */
  background:
    radial-gradient(16px 16px at 12% 18%, rgba(255,255,255,.12) 20%, transparent 21%) repeat,
    linear-gradient(180deg, var(--panelA), var(--panelB));
  background-size: 22px 22px, auto;
  box-shadow: 0 18px 40px rgba(17,24,39,.14);
}

/* animated border glow */
.tutoring-includes.glam::before{
  /* Mask (standard + prefixed for Safari/Chrome) */
mask: 
  linear-gradient(#000 0 0) content-box,
  linear-gradient(#000 0 0);

-webkit-mask:
  linear-gradient(#000 0 0) content-box,
  linear-gradient(#000 0 0);

-webkit-mask-composite: xor;
mask-composite: exclude;

animation: spin 8s linear infinite;
pointer-events: none;

  content:"";
  position:absolute; inset:0;
  padding:1px; border-radius:22px;
  background: conic-gradient(from 180deg, var(--accent), transparent 30%, var(--brand), transparent 70%, var(--accent));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 8s linear infinite;
  pointer-events:none;
}
@keyframes spin{ to{ transform: rotate(1turn); } }

.tutoring-includes.glam h2{
  margin: 0 0 1.25rem;
  color: var(--ink);
}

/* grid */
.tutoring-includes .includes-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(12px,2vw,18px);
  max-width: 1100px;
  margin: 0 auto;
  padding-top: .5rem;
  list-style:none;
}
@media (min-width:640px){ .tutoring-includes .includes-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .tutoring-includes .includes-grid{ grid-template-columns: repeat(4,1fr); } }

/* card */
.include-card{
  display:flex; align-items:center; gap:.85rem;
  padding: 1rem 1rem;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.38));
  border: 1px solid rgba(96,165,250,.35);
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 22px rgba(30,64,175,.12);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.include-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 28px rgba(30,64,175,.18);
  border-color: rgba(96,165,250,.6);
}

/* icon chip */
.include-card .ic{
  display:grid; place-items:center;
  width: 44px; height: 44px;
  border-radius: 12px;
  font-size: 1.25rem;
  background: linear-gradient(180deg, #2563eb, #1e40af);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px rgba(37,99,235,.35);
}

/* text */
.include-card .perk-text strong{
  display:block; color:#0b1b3f; font-weight:800;
  letter-spacing:.2px;
}
.include-card .perk-text small{
  display:block; color:#2b4a7a; opacity:.9; margin-top:.15rem;
}

/* ===== Tutoring Includes — glossy cards ===== */
.tutoring-includes.glam{
  --brand:#1e40af;          /* primary */
  --accent:#60a5fa;         /* light blue accent */
  --panelA:#e9f2ff;         /* light panel */
  --panelB:#dfeafb;
  --ink:#0b1b3f;

  position: relative;
  margin: 3rem auto;
  padding: clamp(20px,3vw,34px);
  border-radius: 20px;
  overflow: hidden;
  text-align: center;

  /* soft blue panel with faint pattern */
  background:
    radial-gradient(16px 16px at 12% 18%, rgba(255,255,255,.12) 20%, transparent 21%) repeat,
    linear-gradient(180deg, var(--panelA), var(--panelB));
  background-size: 22px 22px, auto;
  box-shadow: 0 18px 40px rgba(17,24,39,.14);
}

/* animated border glow */
.tutoring-includes.glam::before{
  /* Mask (standard + prefixed for Safari/Chrome) */
mask: 
  linear-gradient(#000 0 0) content-box,
  linear-gradient(#000 0 0);

-webkit-mask:
  linear-gradient(#000 0 0) content-box,
  linear-gradient(#000 0 0);

-webkit-mask-composite: xor;
mask-composite: exclude;

animation: spin 8s linear infinite;
pointer-events: none;

  content:"";
  position:absolute; inset:0;
  padding:1px; border-radius:22px;
  background: conic-gradient(from 180deg, var(--accent), transparent 30%, var(--brand), transparent 70%, var(--accent));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 8s linear infinite;
  pointer-events:none;
}
@keyframes spin{ to{ transform: rotate(1turn); } }

.tutoring-includes.glam h2{
  margin: 0 0 1.25rem;
  color: var(--ink);
}

/* grid */
.tutoring-includes .includes-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(12px,2vw,18px);
  max-width: 1100px;
  margin: 0 auto;
  padding-top: .5rem;
  list-style:none;
}
@media (min-width:640px){ .tutoring-includes .includes-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .tutoring-includes .includes-grid{ grid-template-columns: repeat(4,1fr); } }

/* card */
.include-card{
  display:flex; align-items:center; gap:.85rem;
  padding: 1rem 1rem;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.38));
  border: 1px solid rgba(96,165,250,.35);
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 22px rgba(30,64,175,.12);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.include-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 28px rgba(30,64,175,.18);
  border-color: rgba(96,165,250,.6);
}

/* icon chip */
.include-card .ic{
  display:grid; place-items:center;
  width: 44px; height: 44px;
  border-radius: 12px;
  font-size: 1.25rem;
  background: linear-gradient(180deg, #2563eb, #1e40af);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px rgba(37,99,235,.35);
}

/* text */
.include-card .perk-text strong{
  display:block; color:#0b1b3f; font-weight:800;
  letter-spacing:.2px;
}
.include-card .perk-text small{
  display:block; color:#2b4a7a; opacity:.9; margin-top:.15rem;
}

/* ===== Dark mode polish ===== */
html.dark-mode .tutoring-includes.glam{
  --panelA:#0f1f42; --panelB:#0c1a38; --ink:#eaf2ff;
  background:
    radial-gradient(16px 16px at 12% 18%, rgba(255,255,255,.06) 20%, transparent 21%) repeat,
    linear-gradient(180deg, var(--panelA), var(--panelB));
  box-shadow: 0 22px 44px rgba(0,0,0,.35);
}
html.dark-mode .tutoring-includes.glam h2{ color: var(--ink); }

html.dark-mode .include-card{
  background: linear-gradient(180deg, rgba(17,34,73,.8), rgba(15,30,65,.7));
  border-color: rgba(96,165,250,.28);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
html.dark-mode .include-card .perk-text strong{ color:#eaf2ff; }
html.dark-mode .include-card .perk-text small{ color:#b9d4ff; }



.pricing-cards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px){
  .pricing-cards{ grid-template-columns: repeat(2,1fr); }
  
}

/* Softer brand-blue cards */
.pricing-card{
  --brand: #1e40af;                /* your main blue */
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 70%, white 30%),
      color-mix(in oklab, var(--brand) 55%, white 45%));
  color:#fff;
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 18px 28px rgba(30,64,175,.18);
  text-align:center;
}

.pricing-card h3{ font-size:1.1rem; margin-bottom:.5rem; }
.pricing-card .price{ font-size:2rem; font-weight:800; margin:.25rem 0 .25rem; }
.pricing-card .price span{ font-size:1rem; font-weight:600; opacity:.9; }
.pricing-card .price-desc{ color:#eef2ff; margin-bottom:.75rem; }
.pricing-card .price-note{ color:#e5edff; font-size:.9rem; opacity:.95; }

.pricing-card.featured{
  outline: 2px solid color-mix(in oklab, var(--brand) 40%, white 60%);
  box-shadow: 0 22px 32px rgba(30,64,175,.22);
}

/* Dark mode tweak: keep it readable but still blue */
html.dark-mode .pricing-card{
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--brand) 85%, white 15%),
      color-mix(in oklab, var(--brand) 70%, white 30%));
  border-color: rgba(255,255,255,.18);
}
/* Center the pricing heading + subtitle */
.pricing-section h2,
.pricing-section .pricing-subtitle{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Nice readable width for the subtitle */
.pricing-section .pricing-subtitle{
  max-width: 720px;
  margin-top: .25rem;
  margin-bottom: 1.75rem;
  line-height: 1.55;
}

/* ===== FAQ – Base (shared layout, no colors) ===== */
.faq-section{
  padding:4rem 1.5rem;
  border-radius:1rem;
  max-width:900px;
  margin:3rem auto;
  box-shadow:0 0 20px rgba(0,0,0,.12);
}
.faq-section h2{
  font-size:1.75rem;
  font-weight:600;
  text-align:center;
  margin-bottom:2rem;
}
.faq-list{ display:flex; flex-direction:column; gap:1rem; }
.faq-item{
  border-radius:.75rem;
  overflow:hidden;
  box-shadow:0 0 12px rgba(0,0,0,.08);
}
.faq-question{
  background:none;
  font-size:1rem;
  font-weight:500;
  padding:1rem 1.25rem;
  text-align:left;
  width:100%;
  border:none;
  cursor:pointer;
  transition:background .3s ease;
}
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
/* When you open an item, add .open on the .faq-item */
.faq-item.open .faq-answer{ max-height:480px; }

/* ===== Light theme ===== */
html:not(.dark-mode) .faq-section{
  background:#eef5ff;       /* light blue panel */
  color:#0b2447;
}
html:not(.dark-mode) .faq-item{
  background:#ffffff;
  border:1px solid #dbeafe;
  box-shadow:0 6px 16px rgba(12,46,94,.06);
}
html:not(.dark-mode) .faq-question{ color:#0b2447; }
html:not(.dark-mode) .faq-question:hover{ background:#f1f7ff; }
html:not(.dark-mode) .faq-answer{
  background:#f8fbff;
  color:#1f2937;
  border-top:1px solid #e5efff;
  padding:0 1.25rem 1rem;
}

/* ===== Dark theme (your original look) ===== */
html.dark-mode .faq-section{
  background-color:#1f2937;
  color:#ffffff;
  box-shadow:0 0 20px rgba(0,0,0,.25);
}
html.dark-mode .faq-item{
  background-color:#111827;
  box-shadow:0 0 12px rgba(0,0,0,.15);
}
html.dark-mode .faq-question{ color:#ffffff; }
html.dark-mode .faq-question:hover{ background-color:#374151; }
html.dark-mode .faq-answer{
  background:#0f172a;
  color:#e5e7eb;
  border-top:1px solid #334155;
  padding:0 1.25rem 1rem;
}


.final-cta {
  background-color: #1e3a8a;
  color: #ffffff;
  text-align: center;
  padding: 3rem 1.5rem;
  border-radius: 1rem;
  margin-top: 4rem;
}

.final-cta h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.final-cta p {
  font-size: 1rem;
  color: #dbeafe;
  margin-bottom: 0.75rem;
}

.final-cta .cta-note {
  font-style: italic;
  color: #93c5fd;
  margin-bottom: 1.5rem;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.cta-buttons a {
  background-color: #2563eb;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.3s;
}

.cta-buttons a:hover {
  background-color: #1d4ed8;
}

.student-stories {
  background-color: #eef2ff;
  padding: 4rem 2rem;
  text-align: center;
  color: #0d47a1;
}

.student-stories .story-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.story-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  text-align: left;
}

.story-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.story-card p {
  font-size: 1rem;
  line-height: 1.5;
}

/* Hero paragraph links */
.tutoring-hero-wrapper p a {
  color: #ffd54f; /* yellow accent for links */
  text-decoration: underline;
  font-weight: 500;
}

.tutoring-hero-wrapper p a:hover {
  color: #ffc107; /* slightly darker yellow on hover */
  text-decoration: underline;
}


/* Darker cards for How It Works */
.how-it-works-flip .flip-front,
.how-it-works-flip .flip-back {
  background: linear-gradient(180deg, #d1e2ff, #a8c8ff); /* slightly darker than before */
  color: #0b1d3a;
  border: 1px solid rgba(30,64,175,0.3);
}

/* Larger heading text and more letter spacing */
.how-it-works-flip .flip-front h3 {
  font-size: 1.2rem;          /* bigger */
  letter-spacing: 0.15em;     /* more spacing */
  font-weight: 700;
  color: #0b1d3a;
}

/* Slightly larger description text */
.how-it-works-flip .flip-back p {
  font-size: 1.125rem;
  line-height: 1.6;
  padding: 0.5rem;
}

/* Dark mode adjustments */
html.dark-mode .how-it-works-flip .flip-front {
  background: linear-gradient(180deg, #1b3462, #122451);
}

html.dark-mode .how-it-works-flip .flip-back {
  background: linear-gradient(180deg, #1c3b7a, #153367);
}

html.dark-mode .how-it-works-flip .flip-front h3,
html.dark-mode .how-it-works-flip .flip-back p {
  color: #eaf2ff;
}

/* Optional responsive styling */
.video-wrapper {
  position: relative;
  padding-bottom: 43.75%; /* 16:7 ratio (shorter) */
  height: 0;
  max-width: 800px;  /* optional: center and limit width */
  margin: 0 auto;
  overflow: hidden;
}


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

.tutoring-video h2,
.tutoring-hero-wrapper h2 {
  text-align: center;
}

/* Subcategory cards mimic tutorial cards */
.tutorial-card.subcategory-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--card-bg, #fff);
  border: 1px solid var(--card-border, #e6e6e6);
  border-radius: 12px;
  box-shadow: var(--shadow, 0 6px 18px rgba(0,0,0,.06));
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
  text-decoration: none;
}

.tutorial-card.subcategory-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover, 0 12px 28px rgba(0,0,0,.10));
}

.tutorial-card.subcategory-card .thumb img {
  width: 100%;
  height: 160px; /* match tutorial card thumbnail height */
  object-fit: cover;
}

.tutorial-card.subcategory-card .meta {
  padding: 0.75rem 1rem;
  flex-grow: 1;
}

.tutorial-card.subcategory-card .t-title {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.tutorial-card.subcategory-card .t-blurb {
  font-size: 0.9rem;
  color: var(--muted, #667084);
}

.tutorial-card.subcategory-card .btn {
  margin: 0.5rem 1rem 1rem;
  justify-self: flex-end;
}

/* Disabled subcategory cards (not in selected category) */
.tutorial-card.subcategory-card.disabled {
  opacity: 0.5;
  pointer-events: none;
}