/* become-a-tutor.css: /become-a-tutor/ only. Lavender hero card with the dual CTA, the "Reach New Genuine
   Customers" checklist card, the tutoring-job cards and the testimonial carousel. Mobile-first; numbers are the
   measured bboxes from reference/become-a-tutor (390 and 1440). Body content sits in an 80/48/32px side padding
   column (1280px wide at 1440), not the site .container. */

.page-become-a-tutor {
  --bat-pad: 32px;
  --bat-open: var(--font-alt);
}
@media (min-width: 768px) { .page-become-a-tutor { --bat-pad: 48px; } }
@media (min-width: 1025px) { .page-become-a-tutor { --bat-pad: 80px; } }

.bat-container { width: 100%; max-width: calc(1280px + 2 * var(--bat-pad)); margin-inline: auto; padding-inline: var(--bat-pad); }

/* Open Sans navy section headings (32px/600 desktop, 24px below 1025) and their centred intro lines */
.page-become-a-tutor .bat-title { font: 600 24px/31.2px var(--bat-open); color: var(--c-navy); }
.page-become-a-tutor .bat-intro { max-width: none; margin-top: 20px; }
@media (min-width: 1025px) { .page-become-a-tutor .bat-title { font-size: 32px; line-height: 32px; } }

/* Shared button shape: 3px radius. The hero pair renders Open Sans 700 on the source; the standalone Apply Now is 600 */
.page-become-a-tutor .bat-btn { font: 700 16px/30px var(--bat-open); border-radius: var(--r-3); padding: 10px; }
.page-become-a-tutor .bat-btn--learn:hover { background: var(--c-indigo); border-color: var(--c-indigo); color: var(--c-white); }
.page-become-a-tutor .bat-btn--cta { font-weight: 600; line-height: 16px; padding: 12px 24px; }
@media (min-width: 1025px) {
  .page-become-a-tutor .bat-btn { font-size: 18px; line-height: 30px; }
  .page-become-a-tutor .bat-btn--cta { line-height: 18px; }
}

/* ---- Hero: breadcrumb on lavender, then the white card (eyebrow, H1, Apply Now / Learn More) ---- */
.bat-hero { padding: 48px 0; }
.page-become-a-tutor .bat-hero .breadcrumb ol { gap: 16px; line-height: 30px; }
.page-become-a-tutor .bat-hero .breadcrumb [aria-current] { gap: 16px; }
.bat-hero__card { margin-top: 21px; background: var(--c-white); border-radius: var(--r-10); padding: 25px 26px 76px; }
.bat-hero__body { max-width: 562px; }
/* Measured 500, but the source only had the Book file and drew Book (browsers do not synthesise 500), so the
   rebuild uses 400 here to match the reference pixels. Slanted Book: no italic cut is shipped. */
.bat-hero__eyebrow { font: italic 400 18px/23.4px var(--font-sans); color: var(--c-text); }
.page-become-a-tutor .bat-hero__title { margin-top: 20px; text-align: left; font: 600 24px/28.8px var(--bat-open); color: var(--c-indigo); }
.bat-hero__actions { display: grid; align-items: start; gap: 10px; margin-top: 40px; }
@media (min-width: 768px) {
  /* Tablet: the empty spacer column of the source halves the text column, so the eyebrow and H1 wrap */
  .bat-hero__card { padding: 43px 42px; }
  .bat-hero__body { max-width: 45%; }
  .bat-hero__actions { display: flex; gap: 22px; }
  .page-become-a-tutor .bat-hero .bat-btn { padding: 10px 21px; }
}
@media (min-width: 1025px) {
  .bat-hero { padding: 80px 0; }
  .bat-hero__card { margin-top: 20px; padding: 90px 58px 91px; }
  .bat-hero__body { max-width: 562px; }
  .bat-hero__eyebrow { font-size: 24px; line-height: 31.2px; }
  .page-become-a-tutor .bat-hero__title { font-size: 54px; line-height: 64.8px; }
  .bat-hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 393px; gap: 20px; margin-top: 39px; }
  .page-become-a-tutor .bat-hero .bat-btn { padding: 10px; }
}

/* ---- "Reach New Genuine Customers": pale card, text + checklist then the illustration ---- */
.bat-reach { padding: 49px 0 49px; }
.bat-reach__card { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--c-bg-lavender-soft); border-radius: var(--r-10); padding: 25px 26px 24px; }
.page-become-a-tutor .bat-reach__title { text-align: center; }
.bat-reach__intro { margin-top: 20px; text-align: center; }
@media (min-width: 768px) { .bat-reach__intro { width: 458px; max-width: 100%; } }
@media (min-width: 1025px) { .bat-reach__intro { width: 83%; } }
.bat-checklist { margin-top: 34px; }
.bat-checklist__item { display: flex; align-items: flex-start; gap: 21px; padding: 10.5px 0; border-bottom: 1px solid #DDD; font: 400 16px/21px var(--font-sans); color: #262626; }
/* The checklist is measured at 500 too, but it renders as Book on the source (single Book file), hence 400 above */
.bat-checklist__item:first-child { padding-top: 0; }
.bat-checklist__item:last-child { padding-bottom: 0; border-bottom: 0; }
.bat-checklist__icon { color: #97E9A3; margin-top: 2px; }
.bat-reach__media { display: flex; justify-content: center; margin-top: 40px; }
.bat-reach__media picture { width: 219px; }
.bat-reach__img { width: 100%; }
@media (min-width: 768px) {
  .bat-reach { padding: 48px 0; }
  .bat-reach__card { padding: 42px; }
  .page-become-a-tutor .bat-reach__title, .bat-reach__intro { text-align: left; }
  .bat-checklist__item { padding: 11px 0; line-height: 30px; }
  .bat-checklist__icon { margin-top: 7px; }
  .bat-reach__media picture { width: 380px; }
}
@media (min-width: 1025px) {
  .bat-reach { padding: 80px 0 82px; }
  .bat-reach__card { grid-template-columns: minmax(0, 626fr) minmax(0, 538fr); align-items: center; padding: 60px 58px 55px; }
  .page-become-a-tutor .bat-reach__title { line-height: 41.6px; }
  .bat-reach__intro { margin-top: 19px; }
  .bat-checklist { margin-top: 35px; }
  .bat-checklist__item { gap: 20px; padding: 11px 0; font-size: 17px; line-height: 30px; }
  .bat-checklist__icon { margin-top: 7px; }
  .bat-reach__media { justify-content: flex-end; margin-top: 0; }
  .bat-reach__media picture { width: 439px; max-width: 100%; }
}

/* ---- Tutoring jobs: three boxed icon cards, then the centred Apply Now ---- */
.bat-jobs { padding: 16px 0 48px; }
.bat-jobs__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 41px; margin-top: 51px; padding-inline: 20px; }
.page-become-a-tutor .bat-job { height: 100%; padding: 26px 20px 29px; }
.page-become-a-tutor .bat-job .icon-box__title { font-size: 16px; line-height: 19.2px; margin: 14px 0 0; }
.page-become-a-tutor .bat-job .icon-box__text { font-size: 14px; line-height: 30px; margin: 17px 0 0; }
.bat-job__icon .icon { width: 40px; height: 40px; }
.bat-job__icon .icon--line { fill: none; }
.bat-jobs__cta { display: flex; justify-content: center; margin-top: 21px; }
@media (min-width: 768px) {
  .bat-jobs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 4%; }
  /* The source keeps the job cards centred until the desktop layout */
  .page-become-a-tutor .bat-job { align-items: center; text-align: center; }
}
@media (min-width: 1025px) {
  .bat-jobs { padding: 16px 0 80px; }
  .bat-jobs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 41px; }
  .page-become-a-tutor .bat-job { align-items: flex-start; text-align: left; padding: 20px 20px 29px; }
  .page-become-a-tutor .bat-job .icon-box__title { font-size: 18px; line-height: 21.6px; margin-top: 21px; }
  .page-become-a-tutor .bat-job .icon-box__text { margin-top: 16px; }
  .bat-jobs__cta { margin-top: 36px; }
}

/* ---- Testimonials: one carousel (1 / 2 / 3 per view). Phones get the source's centred card with a square photo
   and side arrows; 768px and up get the circular-avatar card with the quote watermark. ---- */
.bat-testimonials { padding: 16px 0 48px; }
.page-become-a-tutor .bat-testimonials .bat-title { line-height: 24px; }
.bat-testimonials__carousel { margin-top: 34px; }
.bat-testimonials__carousel .carousel__arrow { top: calc(50% + 7px); width: 24px; color: #605BE5; }
.bat-testimonials__carousel .carousel__arrow--prev { left: 2px; }
.bat-testimonials__carousel .carousel__arrow--next { right: 2px; }
/* The source's phone arrows are thin outline chevrons (11x19): a rotated bordered square instead of the solid sprite */
.bat-testimonials__carousel .carousel__arrow .icon { display: none; }
.bat-testimonials__carousel .carousel__arrow::before {
  content: ""; width: 13px; height: 13px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: translateX(3px) rotate(45deg);
}
.bat-testimonials__carousel .carousel__arrow--next::before { transform: translateX(-3px) rotate(-135deg); }
.page-become-a-tutor .testimonial-card--quote { display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid #E8E8E8; padding: 37px 36px 16px; }
.page-become-a-tutor .testimonial-card--quote .stars { gap: 2px; color: #FFD726; }
.page-become-a-tutor .testimonial-card--quote .stars__star { width: 20px; height: 20px; }
.page-become-a-tutor .testimonial-card--quote .testimonial-card__text { font-size: 15px; margin: 13px 0 0; }
.page-become-a-tutor .testimonial-card__person { position: relative; align-items: flex-start; gap: 7px; margin: auto -8px 0; padding-top: 55px; text-align: left; }
/* Phone card: the source's faint speech-bubble pointer (30x15, #F7F7F7) just above the author row */
.page-become-a-tutor .testimonial-card__person::before {
  content: ""; position: absolute; top: 38px; left: 50%; transform: translateX(-50%);
  border: solid transparent; border-width: 15px 15px 0; border-top-color: #F7F7F7;
}
.page-become-a-tutor .testimonial-card__who { padding-top: 3px; }
.page-become-a-tutor .testimonial-card--quote .testimonial-card__photo { width: 54px; height: 74px; border: 0; border-radius: var(--r-10); box-shadow: none; object-position: top; }
.page-become-a-tutor .testimonial-card--quote .testimonial-card__name { font: 700 16px/1.3 var(--bat-open); }
.page-become-a-tutor .testimonial-card--quote .testimonial-card__role { font-size: 10px; line-height: 1.6; margin-top: 15px; }
.page-become-a-tutor .testimonial-card__mark { display: none; }
/* Dots (8x8 #E7E7E7, active 16x16 #2575FC, from main.css) are swiper-only: the source's phone slider hides them */
.bat-testimonials__carousel .carousel__dots { display: none; }
@media (min-width: 768px) {
  .bat-testimonials__carousel .carousel__arrow { display: none; }
  .bat-testimonials__carousel .carousel__dots { display: flex; }
  .page-become-a-tutor .testimonial-card--quote { align-items: flex-start; text-align: left; border: 0; padding: 55px 25px 50px; box-shadow: 10px 10px 20px rgba(0, 0, 0, .06); }
  .page-become-a-tutor .testimonial-card--quote .stars { gap: 11px; margin-top: 5px; color: var(--c-star); }
  .page-become-a-tutor .testimonial-card--quote .stars__star { width: 18px; height: 18px; }
  .page-become-a-tutor .testimonial-card--quote .testimonial-card__text { font-size: 16px; margin-top: 22px; }
  .page-become-a-tutor .testimonial-card__person { align-items: center; gap: 20px; margin-inline: 0; padding-top: 33px; }
  .page-become-a-tutor .testimonial-card__person::before { content: none; }
  .page-become-a-tutor .testimonial-card__who { padding-top: 0; }
  .page-become-a-tutor .testimonial-card--quote .testimonial-card__photo { width: 80px; height: 80px; border: 5px solid var(--c-white); border-radius: var(--r-round); box-shadow: var(--shadow-avatar); }
  .page-become-a-tutor .testimonial-card--quote .testimonial-card__role { font-size: 13px; line-height: 1.5; margin-top: 2px; }
  /* The source glyph is an outline quote: the sprite path is stroked instead of filled */
  .page-become-a-tutor .testimonial-card__mark { display: block; width: 50px; height: 40px; color: rgba(37, 117, 252, .2); fill: none; stroke: currentColor; stroke-width: 18px; transform: rotate(180deg); }
}
@media (min-width: 1025px) {
  .bat-testimonials { padding: 0 0 96px; }
  .page-become-a-tutor .bat-testimonials .bat-title { line-height: 32px; }
  .bat-testimonials__carousel { margin-top: 33px; }
  /* Two testimonials never fill the three desktop slots, so the pair is centred instead of hugging the left */
  .bat-testimonials__carousel .carousel__track { justify-content: center; }
}