/**
 * Модули EULER — плавные переходы МЕЖДУ якорями Figma
 * Подключается после euler-moduli-page.css · якоря в page.css не трогаем
 *
 * Якоря: 375 (≤500) · 768 (501–895) · 1024/1200 (896–1439) · 1440 (≥1440)
 * Середины: 501 = (375+768)/2 · 896 = (768+1024)/2 · 1320 = (1200+1440)/2
 */

/* =====================================================
   <375 — уже уже экрана
   ===================================================== */
@media (max-width: 374px) {
  .hero-community--euler-moduli,
  .euler-moduli-base,
  .euler-moduli-expand,
  .euler-moduli-converters,
  .euler-moduli-apps,
  .euler-overview-ask--moduli {
    --container-padding: clamp(12px, calc(12px + 3 * ((100vw - 320px) / 55)), 15px);
    overflow-x: clip;
  }

  .hero-community--euler-moduli .hero-community__title {
    width: min(279px, calc(100vw - var(--container-padding) * 2));
    max-width: calc(100vw - var(--container-padding) * 2);
    font-size: clamp(36px, calc(36px + 4 * ((100vw - 320px) / 55)), 40px);
    top: clamp(205px, calc(205px + 15 * ((100vw - 320px) / 55)), 220px);
    left: var(--container-padding);
  }

  .hero-community--euler-moduli .hero-community__lead {
    width: min(344px, calc(100vw - var(--container-padding) * 2));
    max-width: calc(100vw - var(--container-padding) * 2);
    font-size: clamp(13px, calc(13px + 1 * ((100vw - 320px) / 55)), 14px);
    top: clamp(345px, calc(345px + 22 * ((100vw - 320px) / 55)), 367px);
    left: var(--container-padding);
  }
}

/* =====================================================
   376–500 — мобильный якорь 375 на ширину экрана
   ===================================================== */
@media (min-width: 376px) and (max-width: 500px) {
  .hero-community--euler-moduli,
  .euler-moduli-base,
  .euler-moduli-expand,
  .euler-moduli-converters,
  .euler-moduli-apps,
  .euler-overview-ask--moduli {
    --container-padding: clamp(15px, calc(15px + (100vw - 375px) * 10 / 125), 25px);
    --moduli-content-w: calc(100vw - var(--container-padding) * 2);
  }

  .hero-community--euler-moduli .hero-community__title,
  .hero-community--euler-moduli .hero-community__lead {
    left: var(--container-padding);
    width: 100%;
    max-width: var(--moduli-content-w);
  }

  .euler-moduli-base__row,
  .euler-moduli-expand__row,
  .euler-moduli-converters__row,
  .euler-moduli-apps__row {
    width: 100%;
    max-width: var(--moduli-content-w);
  }

  .euler-moduli-base__desc,
  .euler-moduli-expand__desc,
  .euler-moduli-converters__desc,
  .euler-moduli-apps__desc,
  .euler-moduli-apps__modules {
    width: 100%;
    max-width: var(--moduli-content-w);
  }

  .euler-moduli-expand__notice,
  .euler-moduli-apps__notice,
  .euler-moduli-converters__intro {
    max-width: var(--moduli-content-w);
  }
}

/* =====================================================
   501–767 — якорь 768, масштаб строк (640 и т.п.)
   ===================================================== */
@media (min-width: 501px) and (max-width: 767px) {
  .hero-community--euler-moduli {
    overflow: visible;
  }

  .hero-community--euler-moduli,
  .hero-community--euler-moduli .hero-community__content {
    height: auto;
    min-height: clamp(517px, calc(517px + (768px - 100vw) * 0.22), 580px);
  }

  .hero-community--euler-moduli .hero-community__content {
    padding-bottom: 24px;
  }

  .hero-community--euler-moduli .hero-community__title {
    font-size: clamp(46px, calc(46px + 14 * ((100vw - 501px) / 267)), 60px);
    line-height: 1.1;
    top: clamp(228px, calc(228px + 10 * ((100vw - 501px) / 267)), 238px);
    left: clamp(15px, calc(15px + 26 * ((100vw - 501px) / 267)), 41px);
    width: min(662px, calc(100% - 41px - var(--container-padding)));
    max-width: calc(100% - 41px - var(--container-padding));
  }

  .hero-community--euler-moduli .hero-community__lead {
    top: clamp(378px, calc(378px + (768px - 100vw) * 0.32), 463px);
    left: clamp(15px, calc(15px + 26 * ((100vw - 501px) / 267)), 41px);
    width: min(645px, calc(100% - 41px - var(--container-padding)));
    max-width: calc(100% - 41px - var(--container-padding));
    font-size: clamp(16px, calc(16px + 2 * ((100vw - 501px) / 267)), 18px);
  }

  .euler-moduli-base__row,
  .euler-moduli-expand__row,
  .euler-moduli-converters__row,
  .euler-moduli-apps__row {
    width: 100%;
    max-width: 100%;
  }

  .euler-moduli-base__desc,
  .euler-moduli-expand__desc,
  .euler-moduli-converters__desc {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .euler-moduli-expand__name,
  .euler-moduli-converters__name,
  .euler-moduli-base__name {
    flex: 0 0 clamp(140px, calc(140px + 17 * ((100vw - 501px) / 267)), 157px);
    width: clamp(140px, calc(140px + 17 * ((100vw - 501px) / 267)), 157px);
  }

  .euler-moduli-base__name-col {
    flex: 0 0 clamp(140px, calc(140px + 17 * ((100vw - 501px) / 267)), 157px);
    width: clamp(140px, calc(140px + 17 * ((100vw - 501px) / 267)), 157px);
  }

  .euler-moduli-base__title,
  .euler-moduli-expand__title,
  .euler-moduli-converters__title,
  .euler-moduli-apps__title {
    font-size: clamp(30px, calc(30px + 10 * ((100vw - 501px) / 267)), 40px);
  }

  .euler-moduli-base__text,
  .euler-moduli-expand__desc,
  .euler-moduli-converters__desc,
  .euler-moduli-apps__desc,
  .euler-moduli-apps__modules {
    font-size: clamp(14px, calc(14px + 2 * ((100vw - 501px) / 267)), 16px);
  }

  .euler-moduli-base__name,
  .euler-moduli-expand__name,
  .euler-moduli-converters__name,
  .euler-moduli-apps__name {
    font-size: clamp(18px, calc(18px + 6 * ((100vw - 501px) / 267)), 24px);
  }

  .euler-moduli-apps__name {
    flex: none;
    width: auto;
    max-width: 100%;
  }

  .euler-moduli-apps__desc,
  .euler-moduli-apps__modules {
    flex: none;
    width: 100%;
    max-width: 100%;
    line-height: 1.3;
    text-align: left;
  }
}

/* =====================================================
   768–895 — верхняя часть якоря 768
   ===================================================== */
@media (min-width: 768px) and (max-width: 895px) {
  .euler-moduli-base__row,
  .euler-moduli-expand__row,
  .euler-moduli-converters__row,
  .euler-moduli-apps__row {
    width: min(688px, 100%);
    max-width: 100%;
  }

  .euler-moduli-base__desc,
  .euler-moduli-expand__desc,
  .euler-moduli-converters__desc {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .euler-moduli-apps__desc,
  .euler-moduli-apps__modules {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
}

/* =====================================================
   896–1023 — между 768 и 1024
   ===================================================== */
@media (min-width: 896px) and (max-width: 1023px) {
  .hero-community--euler-moduli .hero-community__title {
    width: clamp(622px, calc(622px + 0.1373 * (100vw - 896px)), 622px);
    font-size: clamp(56px, calc(56px + 0.0157 * (100vw - 896px)), 60px);
    top: clamp(248px, calc(248px + 0.011 * (100vw - 896px)), 259px);
  }

  .hero-community--euler-moduli .hero-community__lead {
    width: clamp(700px, calc(700px + 0.1098 * (100vw - 896px)), 729px);
    font-size: clamp(17px, calc(17px + 0.0039 * (100vw - 896px)), 18px);
    top: clamp(400px, calc(400px + 0.0125 * (100vw - 896px)), 411px);
  }

  .euler-moduli-base__title {
    padding-top: clamp(90px, calc(90px + 0.051 * (100vw - 896px)), 103px);
  }

  .euler-moduli-base__row,
  .euler-moduli-expand__row,
  .euler-moduli-converters__row,
  .euler-moduli-apps__row {
    width: min(944px, 100%);
    max-width: min(944px, calc(100vw - 80px));
  }

  .euler-moduli-base__name-col,
  .euler-moduli-base__name,
  .euler-moduli-expand__name,
  .euler-moduli-converters__name,
  .euler-moduli-apps__name {
    flex: 0 0 clamp(200px, calc(200px + 0.0227 * (100vw - 896px)), 220px);
    width: clamp(200px, calc(200px + 0.0227 * (100vw - 896px)), 220px);
  }

  .euler-moduli-base__desc {
    flex: 0 0 clamp(540px, calc(540px + 0.0614 * (100vw - 896px)), 594px);
    width: clamp(540px, calc(540px + 0.0614 * (100vw - 896px)), 594px);
    max-width: 100%;
  }

  .euler-moduli-expand__desc {
    max-width: clamp(760px, calc(760px + 0.0597 * (100vw - 896px)), 812px);
  }

  .euler-moduli-converters__desc {
    max-width: clamp(730px, calc(730px + 0.0568 * (100vw - 896px)), 783px);
  }
}

/* =====================================================
   1201–1439 — плавное масштабирование к якорю 1440 (layout как 1200)
   ===================================================== */
@media (min-width: 1201px) and (max-width: 1439px) {
  .hero-community--euler-moduli,
  .hero-community--euler-moduli .hero-community__content {
    height: clamp(517px, calc(517px + 0.2134 * ((100vw - 1201px) / 239)), 568px);
  }

  .hero-community--euler-moduli .hero-community__content {
    display: block;
    box-sizing: border-box;
    padding: 0;
  }

  .hero-community--euler-moduli .hero-community__title {
    position: absolute;
    top: clamp(259px, calc(259px + (220 - 259) * (100vw - 1200px) / 240), 220px);
    left: var(--container-padding);
    width: clamp(622px, calc(622px + (940 - 622) * (100vw - 1200px) / 240), 940px);
    max-width: calc(100% - var(--container-padding) * 2);
    margin: 0;
    font-size: clamp(60px, calc(60px + (80 - 60) * (100vw - 1200px) / 240), 80px);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .hero-community--euler-moduli .hero-community__lead {
    position: absolute;
    top: clamp(411px, calc(411px + (416 - 411) * (100vw - 1200px) / 240), 416px);
    left: var(--container-padding);
    width: clamp(729px, calc(729px + (652 - 729) * (100vw - 1200px) / 240), 652px);
    max-width: calc(100% - var(--container-padding) * 2);
    margin: 0;
    font-size: clamp(18px, calc(18px + (20 - 18) * (100vw - 1200px) / 240), 20px);
    line-height: 1.3;
    letter-spacing: 0;
  }

  .euler-moduli-base__title {
    padding-top: clamp(103px, calc(103px + (130 - 103) * (100vw - 1200px) / 240), 130px);
    width: 674px;
    max-width: 100%;
    font-size: 40px;
  }

  .euler-moduli-base,
  .euler-moduli-expand,
  .euler-moduli-converters,
  .euler-moduli-apps {
    --moduli-content-w: clamp(944px, calc(944px + (1360 - 944) * (100vw - 1200px) / 240), 1360px);
  }

  .euler-moduli-base__inner,
  .euler-moduli-expand__inner,
  .euler-moduli-converters__inner,
  .euler-moduli-apps__inner {
    width: 100%;
    max-width: var(--moduli-content-w);
    margin-inline: auto;
  }

  .euler-moduli-expand__title,
  .euler-moduli-converters__title,
  .euler-moduli-apps__title {
    font-size: 40px;
    max-width: 100%;
  }

  .euler-moduli-expand__list {
    width: 100%;
  }

  .euler-moduli-base__name-col,
  .euler-moduli-base__name,
  .euler-moduli-expand__name,
  .euler-moduli-converters__name,
  .euler-moduli-apps__name {
    flex: 0 0 clamp(220px, calc(220px + (325 - 220) * (100vw - 1200px) / 240), 325px);
    width: clamp(220px, calc(220px + (325 - 220) * (100vw - 1200px) / 240), 325px);
  }

  .euler-moduli-base__desc {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .euler-moduli-expand__desc,
  .euler-moduli-converters__desc {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

@media (min-width: 1440px) {
  .euler-moduli-base,
  .euler-moduli-expand,
  .euler-moduli-converters,
  .euler-moduli-apps {
    --moduli-content-w: 1360px;
  }
}