/* ── Private Tuition page styles (reuses ia.css band/hero/stat/alert/cta
   pattern where identical; adds a dedicated two-column hero, credibility
   strip, tutor-profile, pricing and testimonial components specific to
   this page) ── */

/* Hero: photo + headline/CTA side by side, replacing the plain centred
   ia-hero used elsewhere — this page needed to open with a real person
   and a strong offer, not just text, per the 2026-07-28 redesign. */
.tu-hero { padding: 56px 16px 48px; }
.tu-hero-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: stretch; gap: 48px; }
.tu-hero-photo-wrap { flex: 0 0 300px; }
.tu-hero-photo { width: 100%; height: 100%; min-height: 340px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.tu-hero-content { flex: 1 1 420px; display: flex; flex-direction: column; }
.tu-hero-content h1 { font-family: var(--font-serif); font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 600; color: var(--ink); margin: 0 0 16px; line-height: 1.15; }
.tu-hero-content h1 em { color: var(--brand); font-style: italic; }
.tu-hero-content p { font-size: 1.08rem; color: var(--ink-soft); line-height: 1.65; margin: 0 0 28px; }
.tu-hero-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.tu-hero-ctas .btn { padding: 13px 26px; font-size: 1rem; }
/* .btn-outline's default thin var(--line) border didn't stand out enough
   next to the solid orange "Book a Lesson" button — solid navy instead,
   a clear secondary action rather than something that reads as disabled. */
.btn-email-phil { background: var(--navy); color: #fff; border: none; }
.btn-email-phil:hover { background: #1c3357; color: #fff; }

/* Credibility stats — moved inside the hero's text column (was a separate
   full-width band) so the headline sits higher and the stats row pins to
   the bottom of the column, level with the photo's bottom edge (the photo
   stretches to match the column's full height via align-items:stretch on
   .tu-hero-inner + height:100% + object-fit:cover above). */
.tu-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto; padding-top: 24px; }
.tu-hero-stats .ia-stat { padding: 14px 8px; }
.tu-hero-stats .ia-stat-val { font-size: 1.25rem; }
.tu-hero-stats .ia-stat-label { font-size: .72rem; }

@media (max-width: 800px) {
  .tu-hero-inner { flex-direction: column; text-align: center; gap: 28px; align-items: center; }
  .tu-hero-photo-wrap { flex: 0 0 auto; width: 220px; }
  .tu-hero-photo { height: auto; min-height: 0; aspect-ratio: 9/10; }
  .tu-hero-ctas { justify-content: center; }
  .tu-hero-stats { margin-top: 24px; padding-top: 0; }
}

/* Tutor profile — no longer needs its own photo now the hero carries one */
.tu-profile { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 28px; margin: 28px 0; }
.tu-profile-body h3 { font-family: var(--font-serif); font-size: 1.3rem; color: var(--ink); margin: 0 0 4px; }
.tu-profile-role { color: var(--brand); font-weight: 600; font-size: .9rem; margin: 0 0 12px; }
.tu-profile-body p { color: var(--ink-soft); line-height: 1.7; margin: 0 0 10px; font-size: .95rem; }

/* "Why tuition" / "what's included" tip boxes — same .ia-tip-box markup as
   the IA guide pages, given a stronger elevated-card treatment here only
   (tuition.css is page-scoped) so this page doesn't look identical to a
   guide/reference page. */
.ia-tip-box { box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; }
.ia-tip-box:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* Subject chips — narrower, centred; border colour per course matches the
   homepage's .course-card colour-coding (.course-aa-sl etc., styles.css)
   instead of a flat brand-orange border, so the same course reads as the
   same colour everywhere on the site. Compound selector (.tu-subject.course-*)
   needed so it beats .tu-subject's own border shorthand regardless of
   stylesheet load order. */
.tu-subjects { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px auto 0; max-width: 760px; }
.tu-subject {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--surface); border: 2px solid var(--line); border-radius: 12px;
  padding: 16px 12px; flex: 1 1 160px;
}
.tu-subject .course-tag { padding: 3px 10px; border-radius: 20px; }
.tu-subject-name { font-size: .85rem; font-weight: 600; color: var(--ink); line-height: 1.3; text-align: center; }
.tu-subject.course-aa-sl { border-color: #3a6cc4; }
.tu-subject.course-aa-hl { border-color: #25406e; }
.tu-subject.course-ai-sl { border-color: #2f8f6b; }
.tu-subject.course-ai-hl { border-color: #1f5a47; }
@media (max-width: 640px) { .tu-subject { flex-basis: 140px; } }

/* Tighter top gap for sections whose own content is short/compact (the wide
   pricing card, the "get in touch" blue box) — the default ia-band 56px
   top padding looked disproportionate above content this much shorter than
   the bands elsewhere on the page. */
.tu-band-tight { padding-top: 8px; }

/* Contact form inside the dark "Get in touch" panel (ia-cta-panel) */
.tu-contact-form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin: 0 auto; text-align: left; }
.tu-contact-form input, .tu-contact-form textarea {
  padding: 10px 12px; border: none; border-radius: 8px; font-size: .92rem; font-family: var(--font-sans);
  background: rgba(255,255,255,.95); color: var(--ink); outline: none; resize: vertical;
}
.tu-contact-form button { margin-top: 4px; }
.tu-contact-status { font-size: .85rem; color: #ffd7d0; margin: 8px 0 0; }

/* Pricing — wide horizontal card: a solid brand-colour price panel at one
   end, the feature list + CTA on the other, rather than a tall stacked
   card. Replaces the earlier reuse of the site's generic .price pattern. */
.tu-price-wide { display: flex; max-width: 780px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.tu-price-side {
  flex: 0 0 220px; background: var(--brand); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 32px 20px;
}
.tu-price-amt { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 600; line-height: 1; }
.tu-price-amt span { display: block; font-family: var(--font-sans); font-size: .95rem; font-weight: 500; opacity: .85; margin-top: 4px; }
.tu-price-side h3 { font-family: var(--font-sans); font-size: .95rem; font-weight: 600; margin: 12px 0 0; }
.tu-price-details {
  flex: 1; background: var(--surface); border: 2px solid var(--line); border-left: none;
  padding: 28px 32px; display: flex; flex-direction: column; justify-content: center;
}
.tu-price-details ul { list-style: none; padding: 0; margin: 0 0 20px; }
.tu-price-details li { padding: 6px 0 6px 26px; position: relative; color: var(--ink-soft); font-size: .92rem; }
.tu-price-details li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
.tu-price-details .btn { align-self: flex-start; }
@media (max-width: 640px) {
  .tu-price-wide { flex-direction: column; }
  .tu-price-details { border-left: 2px solid var(--line); border-top: none; align-items: center; text-align: center; }
  .tu-price-details .btn { align-self: center; }
}

/* Testimonials — larger pull-quote treatment with a quote-mark accent */
.tu-testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 24px 0; }
.tu-testi { position: relative; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; padding: 30px 22px 20px; }
.tu-testi-quote-mark { position: absolute; top: 6px; left: 18px; font-family: var(--font-serif); font-size: 3rem; color: var(--brand); opacity: .25; line-height: 1; }
.tu-testi p { font-size: .95rem; color: var(--ink); line-height: 1.65; margin: 0 0 14px; font-style: italic; }
.tu-testi-who { font-size: .8rem; color: var(--ink-soft); font-weight: 600; }
@media (max-width: 640px) { .tu-testi-grid { grid-template-columns: 1fr; } }