/* ============================================================
   PUBLIC 1-ON-1 TUTORING PAGES (courses/private_tutoring_*.html)
   ------------------------------------------------------------
   Hand-written, no Tailwind build (collectstatic is enough). Loaded
   after course-pages.css, whose cs- devices these pages reuse: kicker,
   hero, proof cards, receipt, section head, ghost link. Everything new
   is prefixed tut-. No chips, pills or dots: type, rules and the folder
   edge carry the structure.
   ============================================================ */

/* ------------------------------------------------------------
   Hero. The lede stays visible on a phone (course-pages.css hides it
   because a video carries the pitch there); the online page has no
   photo, so its grid is one column.
   ------------------------------------------------------------ */
.tut-lede {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: #475569;
  max-width: 34rem;
  margin: 0 0 clamp(18px, 2.4vw, 26px);
}
.tut-hero--solo { grid-template-areas: "head" "rest"; }
@media (min-width: 861px) {
  .tut-hero--solo { grid-template-columns: minmax(0, 46rem); grid-template-areas: "head" "rest"; }
}
.tut-proof { margin: clamp(20px, 3vw, 30px) 0 0; max-width: 560px; }
.tut-proof strong { font-weight: 700; }
@media (min-width: 861px) { .tut-hero-photo { aspect-ratio: 4 / 5; } }
.tut-link {
  color: var(--cs-blue);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1.5px solid #bfdbfe;
}
.tut-link:hover { border-color: var(--cs-blue); }

/* Proof cards: the excerpt is the whole card; the reader opens the full review. */
.tut-proof-card[data-review-card].rr-clamped { cursor: pointer; }
.tut-proof-card .cs-proof-text { margin-bottom: 0; }

/* ------------------------------------------------------------
   Tutor cards (public, course-page style)
   ------------------------------------------------------------ */
.tut-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
  margin-top: var(--space-md);
}
@media (min-width: 700px) { .tut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tut-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tut-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(18px, 2.2vw, 24px);
  background: #fff;
  border: 1px solid #dbe3f0;
  border-radius: 16px;
  box-shadow: 0 2px 0 #dbe3f0;
}
.tut-card-top { display: flex; align-items: center; gap: 14px; }
.tut-card-photo {
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: 16px;
  object-fit: cover;
  background: #eaf1ff;
}
.tut-card-photo--blank {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lora', serif;
  font-size: var(--text-xl, 1.4rem);
  color: var(--cs-blue);
}
.tut-card-name {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--cs-navy);
  margin: 0;
}
.tut-card-headline {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: #475569;
  margin: 3px 0 0;
}
.tut-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid #eef2f7;
}
.tut-facts div { min-width: 0; }
.tut-facts dt {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1e3a8a;
  margin: 0 0 2px;
}
.tut-facts dd { font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.45; color: #334155; margin: 0; overflow-wrap: anywhere; }
.tut-facts .tut-fact--bare { grid-column: 1 / -1; }
.tut-card-years { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--cs-slate); margin: 14px 0 0; }
.tut-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 14px;
  margin-top: auto;
  padding-top: 14px;
}
.tut-card-rate { font-family: 'Inter', sans-serif; font-size: var(--text-sm); font-weight: 700; color: var(--cs-navy); margin: 0; }
.tut-book { min-height: 44px; font-weight: 600; color: var(--cs-blue); }
/* Only these two pages load this sheet: the shared quiet links get a 44px tap target here. */
.cs-ghost, .cs-proof-more { min-height: 44px; display: inline-flex; align-items: center; }
.tut-empty { margin: var(--space-md) auto 0; max-width: 34rem; text-align: center; font-family: 'Inter', sans-serif; font-size: var(--text-base); line-height: 1.65; color: #64748b; }

/* ------------------------------------------------------------
   How a session works: five steps, the example card beside them
   ------------------------------------------------------------ */
.tut-how { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--space-md); }
.tut-step { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-sm) 0; border-bottom: 1px solid var(--cs-hair); }
.tut-step-num { font-family: 'Lora', serif; font-size: var(--text-3xl, 2.2rem); color: #93c5fd; line-height: 1; width: 44px; flex: none; text-align: center; margin-top: -3px; }
.tut-step-title { font-family: 'Lora', serif; font-style: italic; font-weight: 500; font-size: var(--text-lg); color: var(--cs-navy); margin: 0; }
.tut-step p { font-family: 'Inter', sans-serif; font-size: var(--text-sm); color: #64748b; line-height: 1.65; margin: 4px 0 0; }
.tut-phone { margin: var(--space-md) 0 var(--space-xs, 8px); }
.tut-phone-label {
  display: block;
  margin: 0 0 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-slate);
}
.tut-phone-frame {
  max-width: 360px;
  margin: 0 auto;
  padding: 14px 14px 18px;
  background: #f8fafc;
  border: 2px solid #cbd5e1;
  border-radius: 28px;
  box-shadow: 0 18px 40px -20px rgba(23, 37, 84, 0.3);
}
.tut-phone-title { margin: 4px 4px 12px; font-family: 'Inter', sans-serif; font-size: var(--text-sm); font-weight: 700; color: #172554; }
.tut-phone-frame .cls-feedback-item { margin-bottom: 0; background: #fff; text-align: left; font-family: 'Inter', sans-serif; color: #1f2937; }
.tut-phone-frame .cls-avatar { width: 3rem; height: 3rem; }
.tut-phone-frame .cls-title-wrap { overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .tut-how { grid-template-columns: minmax(0, 1fr) 360px; column-gap: clamp(36px, 6vw, 80px); }
  .tut-step { grid-column: 1; }
  .tut-phone { grid-column: 2; grid-row: 1 / span 5; align-self: start; position: sticky; top: 96px; margin: var(--space-sm) 0 0; }
}

/* ------------------------------------------------------------
   You choose: ruled rows, no boxes
   ------------------------------------------------------------ */
.tut-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: var(--space-md) 0 0; max-width: 860px; margin-left: auto; margin-right: auto; }
.tut-choice { padding: 16px 0; border-top: 1px solid #dbe3f0; }
.tut-choice dt { font-family: 'Lora', serif; font-style: italic; font-weight: 500; font-size: var(--text-lg); color: var(--cs-navy); margin: 0 0 4px; }
.tut-choice dd { font-family: 'Inter', sans-serif; font-size: var(--text-sm); line-height: 1.65; color: #64748b; margin: 0; }
@media (min-width: 700px) {
  .tut-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 5vw, 64px); }
}

/* ------------------------------------------------------------
   Pricing receipt
   ------------------------------------------------------------ */
.tut-receipt { max-width: 560px; margin: var(--space-md) auto 0; }
.tut-receipt-terms { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px dashed #cbd5e1; display: grid; gap: 8px; }
.tut-receipt-terms li { font-family: 'Inter', sans-serif; font-size: var(--text-sm); line-height: 1.55; color: var(--cs-ink); }
.tut-receipt .cs-receipt-fine a { color: var(--cs-blue); }

/* ------------------------------------------------------------
   Closing block and local details
   ------------------------------------------------------------ */
.tut-close { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); align-items: center; }
.tut-close-title { font-family: 'Lora', serif; font-style: italic; font-weight: 500; font-size: var(--text-2xl); line-height: 1.15; color: var(--cs-navy); margin: 0; }
.tut-close-sub { font-family: 'Inter', sans-serif; font-size: var(--text-base); line-height: 1.65; color: #475569; margin: var(--space-xs, 10px) 0 0; max-width: 32rem; }
.tut-close-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: var(--space-sm); }
.tut-close-cta .btn svg { width: 15px; height: 15px; }
.tut-close-title + .tut-local { margin-top: var(--space-sm); }
.tut-local { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid #dbe3f0; }
.tut-local li { padding: 14px 0; border-bottom: 1px solid #dbe3f0; font-family: 'Inter', sans-serif; font-size: var(--text-sm); line-height: 1.6; color: #334155; }
.tut-local strong {
  display: block;
  margin-bottom: 2px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1e3a8a;
}
.tut-local a { color: var(--cs-blue); text-decoration: none; border-bottom: 1.5px solid #bfdbfe; }
.tut-local a:hover { border-color: var(--cs-blue); }
.tut-local-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; box-shadow: 0 24px 60px -22px rgba(23, 37, 84, 0.34); }
.tut-others { margin: var(--space-sm) 0 0; font-family: 'Inter', sans-serif; font-size: var(--text-sm); color: var(--cs-slate); }
@media (min-width: 860px) {
  .tut-close { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: clamp(32px, 6vw, 80px); }
}