/*
 * EGE-School «Репетиторы» (D47, design B-tutors): the hero with the benefits, the card of
 * the TutorOnline form, the Repetit.ru catalogue block and the link to the ranking. The
 * widgets themselves are styled by partners.css / partners.js. Colours only from the
 * base.css tokens; the hero comes from page.css.
 */

/* ---------- hero ---------- */
.es-tutors-hero__inner {
  padding-bottom: clamp(72px, 9vw, 112px);
}

.es-tutors-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.es-tutors-hero__main {
  display: flex;
  flex-direction: column;
  gap: var(--es-s-4);
  min-width: 0;
}

.es-tutors-hero__main .es-page-hero__title {
  font-size: clamp(28px, 3.7vw, 48px);
}

.es-tutors-hero__tagline {
  margin: 0;
  color: var(--es-white);
  font-family: var(--es-font-display);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.es-tutors-hero__mark {
  display: inline-block;
  padding: 0 10px;
  border-radius: 14px;
  background: var(--es-acc);
  color: var(--es-ink);
  transform: rotate(-2deg);
}

.es-tutors-benefits {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-tutors-benefits__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.es-tutors-benefits__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--es-r-sm);
  background: color-mix(in srgb, var(--es-white) 12%, transparent);
  color: var(--es-acc);
}

.es-tutors-benefits__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.es-tutors-benefits__title {
  color: var(--es-white);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.es-tutors-benefits__text {
  color: var(--es-on-dark);
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- form card: overlaps the bottom of the hero ---------- */
.es-tutors-form {
  position: relative;
  margin-top: calc(-1 * clamp(40px, 5vw, 64px));
}

.es-tutors-form__card {
  min-width: 0;
  padding: clamp(12px, 2.5vw, 28px);
  border-radius: var(--es-r-xl);
}

.es-partner-marking {
  margin: 12px 0 0;
  padding-inline: clamp(4px, 1vw, 12px);
  color: var(--es-muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/*
 * The TutorOnline form is injected by the partner script some time after the page is parsed,
 * so its height is reserved and the content under the card does not jump (CLS). Values are the
 * rendered heights of the form with the theme's look (partners.js), measured on Local in an
 * iframe of each width; the widget changes its layout at its own breakpoints, so the bands
 * are approximate (a difference of up to ~30px at the edges).
 *   /repetitors/:  <=389px 825px, 390-749px 798px, >=750px 427px;
 *   trial lesson:  <=430px 430px, 431-749px 403px, 750-780px 222px, >=800px 195px (195px reserved).
 */
.es-page--tutors .es-partner-widget--form {
  min-height: 798px;
}

.es-page--trial .es-partner-widget--form {
  min-height: 403px;
}

@media (max-width: 430px) {
  .es-page--trial .es-partner-widget--form {
    min-height: 430px;
  }
}

@media (max-width: 389px) {
  .es-page--tutors .es-partner-widget--form {
    min-height: 825px;
  }
}

@media (min-width: 750px) {
  .es-page--tutors .es-partner-widget--form {
    min-height: 427px;
  }

  .es-page--trial .es-partner-widget--form {
    min-height: 195px;
  }
}

/* Fallback of the card (partners.js shows it when the widget has not rendered). */
.es-partner-fallback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(4px, 1vw, 12px);
}

.es-partner-fallback[hidden] {
  display: none;
}

.es-partner-fallback__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}

/* A failed widget gives its reserved height back. */
[data-es-widget-failed] .es-partner-widget--form,
[data-es-widget-failed] .es-trial-form__note {
  display: none;
}

/* ---------- catalogue ---------- */
.es-tutors-catalog {
  display: flex;
  flex-direction: column;
  gap: var(--es-s-6);
  padding-top: clamp(48px, 6vw, 72px);
}

.es-tutors-catalog__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.es-tutors-catalog__title {
  margin: 0;
  font-family: var(--es-font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.es-tutors-catalog__body {
  min-width: 0;
}

/* ---------- link to the ranking ---------- */
.es-tutors-cta-wrap {
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(48px, 6vw, 88px);
}

.es-tutors-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--es-s-6) var(--es-s-8);
  padding: clamp(24px, 4vw, 40px);
  border-radius: 40px;
}

.es-tutors-cta__text {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.es-tutors-cta__title {
  margin: 0;
  font-family: var(--es-font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.es-tutors-cta__lead {
  margin: 0;
  color: var(--es-muted-2);
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .es-tutors-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .es-tutors-form__card {
    border-radius: var(--es-r-lg);
  }

  .es-tutors-cta {
    border-radius: var(--es-r-xl);
  }

  .es-tutors-cta .es-btn,
  .es-partner-fallback .es-btn {
    width: 100%;
  }
}