/* ==========================================================================
   Страница партнёрства /collabs — shkolaradosti.ua
   Макет: Figma shkolaradosti (20.08), фреймы partnership-page-desktop / -mob
   Все стили изолированы внутри .clb, чтобы не конфликтовать со style1-new.css
   ========================================================================== */

.clb {
  --clb-green: #97C01F;
  --clb-orange: #FF8A19;
  --clb-blue: #009DE2;
  --clb-blue-soft: #549AE4;
  --clb-beige: #F4EEE5;
  --clb-sky: #E6F4FC;
  --clb-grey: #F6F6F6;
  --clb-ink: #0F1016;
  --clb-white: #F8F8F8;
  --clb-pad: 140px;
  --clb-radius: 6px;

  font-family: 'GothamProRegular', 'Gotham Pro', Arial, Helvetica, sans-serif;
  color: var(--clb-ink);
  background: var(--clb-grey);
  font-size: 16px;
  line-height: 1.19;
  overflow-x: clip;
}

.clb *,
.clb *::before,
.clb *::after { box-sizing: border-box; }

.clb p { margin: 0 0 1em; }
.clb p:last-child { margin-bottom: 0; }
.clb img { max-width: 100%; display: block; }

/* заголовки секций — перебиваем глобальные h2 сайта */
.clb h2,
.clb h3 {
  font-family: 'GothamProRegular', 'Gotham Pro', Arial, sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
}

.clb__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--clb-pad);
  padding-right: var(--clb-pad);
}

/* ---------- кнопка ---------- */
.clb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 64px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--clb-radius);
  background: var(--clb-green);
  color: var(--clb-white);
  font-family: inherit;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.clb-btn:hover,
.clb-btn:focus { background: #86ad16; color: var(--clb-white); text-decoration: none; }
.clb-btn:active { transform: translateY(1px); }

/* ---------- бейдж-пилюля ---------- */
.clb-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 40px;
  border: 2px solid var(--clb-orange);
  border-radius: 100px;
  background: var(--clb-beige);
  color: var(--clb-orange);
  font-size: 28px;
  line-height: 34px;
  text-align: center;
}

/* ---------- заголовок секции ---------- */
.clb-h2 {
  font-size: 36px;
  line-height: 43px;
  color: #000;
}
.clb-h2 span { color: var(--clb-orange); }
.clb-hero .clb-h2 span { color: var(--clb-blue); }
.clb-idea .clb-h2 span { color: var(--clb-white); }

.clb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 30px;
}
.clb-head__deco { flex: none; }

/* ---------- разделители-облака и зигзаг ---------- */
.clb-clouds,
.clb-zigzag {
  width: 100%;
  height: 67px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  position: relative;
  z-index: 2;
  margin-bottom: -1px;
}
.clb-clouds--white-blue { background-image: url(svg/clouds-white-blue.svg); background-color: #fff; }
.clb-clouds--blue-beige { background-image: url(svg/clouds-blue-beige.svg); background-color: var(--clb-sky); }
.clb-zigzag { height: 12px; }
.clb-zigzag--white { background-image: url(svg/zigzag-white.svg); background-color: #fff; }
.clb-zigzag--blue { background-image: url(svg/zigzag-blue.svg); background-color: var(--clb-sky); }

/* ==========================================================================
   1. Hero
   ========================================================================== */
.clb-hero { background: #fff; }
.clb-hero__inner {
  display: flex;
  align-items: center;
  gap: 60px;
  padding-top: 60px;
  padding-bottom: 60px;
}
.clb-hero__left {
  flex: 1 1 550px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}
.clb-hero__top {
  display: flex;
  align-items: center;
  gap: 24px;
}
.clb-hero__hands { flex: none; width: 189px; height: 91px; }
.clb-hero__title { display: flex; flex-direction: column; gap: 16px; }
.clb-hero__lead { font-size: 16px; line-height: 19px; }
.clb-hero__btn { width: 300px; }
.clb-hero__img {
  flex: 0 1 550px;
  border-radius: var(--clb-radius);
  overflow: hidden;
  aspect-ratio: 550 / 503;
}
.clb-hero__img img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   2. Кем вы можете стать
   ========================================================================== */
.clb-roles {
  background: var(--clb-sky);
  padding-top: 30px;
  padding-bottom: 30px;
}
.clb-roles__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.clb-role {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 20px 16px;
  border: 4px solid var(--clb-orange);
  border-radius: var(--clb-radius);
  background: var(--clb-grey);
}
.clb-role--green { border-color: var(--clb-green); }
.clb-role--blue { border-color: var(--clb-blue); }
.clb-role__icon { height: 120px; display: flex; align-items: flex-end; justify-content: center; }
.clb-role__icon img { max-height: 120px; width: auto; }
.clb-role__title { font-size: 28px; line-height: 34px; text-align: center; margin-top: 10px; }
.clb-role__text { font-size: 16px; line-height: 19px; text-align: center; margin-top: 10px; }

/* облачка-теги внахлёст */
.clb-role__tags {
  position: relative;
  width: 498px;
  max-width: 100%;
  height: 185px;
  margin-top: auto;
}
.clb-tag {
  position: absolute;
  width: 194px;
  height: 120px;
  padding: 33px 14px 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'GothamProBold', 'Gotham Pro', Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.clb-tag--1 { left: 97px;  top: -1px;  background-image: url(svg/cloud-tag-1.svg); }
.clb-tag--2 { left: 311px; top: 23px;  background-image: url(svg/cloud-tag-2.svg); }
.clb-tag--3 { left: 184px; top: 75px;  background-image: url(svg/cloud-tag-3.svg); }
.clb-tag--4 { left: -16px; top: 64px;  background-image: url(svg/cloud-tag-4.svg); }

.clb-roles__cta { display: flex; justify-content: center; margin-top: 40px; }
.clb-roles__cta .clb-btn { width: 346px; }

/* ==========================================================================
   3. Бизнесы, которые уже сотрудничают
   ========================================================================== */
.clb-partners {
  background: var(--clb-beige);
  padding-top: 30px;
  padding-bottom: 30px;
}
.clb-partners__head .clb-h2 { max-width: 700px; }
.clb-partners__slider {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px;
  margin-right: calc(-1 * var(--clb-pad));
  padding-right: var(--clb-pad);
  scrollbar-color: var(--clb-green) rgba(15, 16, 22, .12);
  scrollbar-width: thin;
}
.clb-partners__slider { scrollbar-width: none; -ms-overflow-style: none; }
.clb-partners__slider::-webkit-scrollbar { height: 0; width: 0; }
.clb-partners__bar {
  position: relative;
  height: 6px;
  margin-top: 14px;
  border-radius: 3px;
  background: rgba(15, 16, 22, .1);
  overflow: hidden;
}
.clb-partners__bar span {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--clb-green);
  transition: left .15s ease;
}
.clb-partners__slider::-webkit-scrollbar-old { height: 6px; }
.clb-partners__slider::-webkit-scrollbar-track {
  background: rgba(15, 16, 22, .1);
  border-radius: 3px;
}
.clb-partners__slider::-webkit-scrollbar-thumb {
  background: var(--clb-green);
  border-radius: 3px;
}
.clb-partner {
  flex: 0 0 360px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  background: #fff;
  border-radius: var(--clb-radius);
}
.clb-partner__img {
  aspect-ratio: 328 / 246;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}
.clb-partner__img img { width: 100%; height: 100%; object-fit: cover; }
.clb-partner__name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 70px;
  padding: 8px 16px;
  border-radius: 0 0 6px 6px;
  background: var(--clb-orange);
  color: var(--clb-white);
  font-size: 24px;
  line-height: 27px;
  text-align: left;
}
.clb-partner--green .clb-partner__name { background: var(--clb-green); }
.clb-partner--blue .clb-partner__name { background: var(--clb-blue); }
.clb-partner__body { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.clb-partner__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'GothamProBold', Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
}
.clb-partner__label img { width: 12px; height: 12px; flex: none; }
.clb-partner__text { font-size: 16px; line-height: 19px; margin-top: 6px; }

/* ==========================================================================
   4. Что вы получите
   ========================================================================== */
.clb-benefits {
  background: var(--clb-grey);
  padding-top: 60px;
  padding-bottom: 60px;
}
.clb-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  position: relative;
}
.clb-benefit {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 16px;
  border: 4px solid var(--clb-orange);
  border-radius: var(--clb-radius);
  background: var(--clb-beige);
}
.clb-benefit--blue { border-color: var(--clb-blue); }
.clb-benefit--green { border-color: var(--clb-green); }
.clb-benefit__name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 70px;
  padding: 8px 16px;
  border-radius: 6px 6px 0 0;
  background: var(--clb-orange);
  color: var(--clb-white);
  font-size: 24px;
  line-height: 27px;
  text-align: left;
}
.clb-benefit--blue .clb-benefit__name { background: var(--clb-blue); }
.clb-benefit--green .clb-benefit__name { background: var(--clb-green); }
.clb-benefit__img {
  aspect-ratio: 338 / 246;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}
.clb-benefit__img img { width: 100%; height: 100%; object-fit: cover; }
.clb-benefit__text { font-size: 16px; line-height: 19px; }
.clb-benefits__rainbow {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  width: 555px;
  max-width: 100%;
}

/* ==========================================================================
   5. Мы открыты к идеям
   ========================================================================== */
.clb-idea {
  background: var(--clb-blue-soft);
  padding-top: 60px;
  padding-bottom: 60px;
}
.clb-idea__inner {
  display: flex;
  align-items: center;
  gap: 80px;
}
.clb-idea__left {
  flex: 1 1 551px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}
.clb-idea__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 551px;
}
.clb-idea__pill { background: var(--clb-grey); }
.clb-idea__pill-box { position: relative; display: inline-flex; }
.clb-idea__arrow {
  position: absolute;
  left: 100%;
  top: 55%;
  margin-left: -18px;
  color: var(--clb-white);
  pointer-events: none;
}
.clb-idea__arrow svg { display: block; }
.clb-idea__logo { flex: none; width: 62px; }
.clb-idea__title { display: flex; flex-direction: column; gap: 30px; }
.clb-idea .clb-h2 { color: var(--clb-ink); }
.clb-idea__text { color: var(--clb-white); font-size: 18px; line-height: 22px; }
.clb-idea__text strong { font-family: 'GothamProBold', Arial, sans-serif; font-weight: 700; }
.clb-idea__btn { width: 346px; max-width: 100%; }

.clb-idea__collage {
  flex: none;
  position: relative;
  width: 529px;
  height: 551px;
}
.clb-idea__collage img {
  position: absolute;
  border-radius: var(--clb-radius);
  object-fit: cover;
}
.clb-idea__collage img:nth-child(1) { width: 300px; height: 300px; left: 0;     top: 0; }
.clb-idea__collage img:nth-child(2) { width: 244px; height: 244px; left: 56px;  top: 308px; }
.clb-idea__collage img:nth-child(3) { width: 260px; height: 260px; left: 269px; top: 170px; }

/* ==========================================================================
   6. Форма
   ========================================================================== */
.clb-form {
  background: var(--clb-sky) url(img/form-bg.png) repeat;
  padding-top: 60px;
  padding-bottom: 60px;
}
.clb-form__inner {
  display: flex;
  align-items: center;
  gap: 80px;
}
.clb-form__left {
  flex: 1 1 500px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.clb-form__sun { width: 500px; max-width: 100%; }
.clb-form__info { display: flex; flex-direction: column; gap: 20px; }
.clb-form__lead { font-size: 16px; line-height: 19px; }

.clb-form__box {
  flex: 0 1 580px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 40px;
  background: #fff;
  border-radius: var(--clb-radius);
  box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
}
.clb-form__fields { display: flex; flex-direction: column; gap: 16px; }
/* ловушка для ботов: sendmessage.php отбрасывает заявку, если поле заполнено */
.clb-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.clb-form__box input[type="text"],
.clb-form__box input[type="tel"],
.clb-form__box textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--clb-orange);
  border-radius: var(--clb-radius);
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  line-height: 19px;
  color: var(--clb-ink);
  box-shadow: none;
  height: auto;
}
.clb-form__box input::placeholder,
.clb-form__box textarea::placeholder { color: var(--clb-ink); opacity: .7; }
.clb-form__box input:focus,
.clb-form__box textarea:focus { outline: 2px solid var(--clb-orange); outline-offset: -2px; }
.clb-form__box textarea { min-height: 108px; resize: vertical; }
.clb-form__actions { display: flex; flex-direction: column; gap: 16px; }
.clb-form__actions .clb-btn { width: 100%; }
.clb-form__note { font-size: 14px; line-height: 17px; text-align: center; }
.clb-form__status { font-size: 16px; line-height: 19px; text-align: center; }
.clb-form__status--ok { color: #2e7d32; }
.clb-form__status--err { color: #c62828; }

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width: 1439px) {
  .clb { --clb-pad: 5vw; }
  .clb-idea__collage { width: 44vw; height: 46vw; }
  .clb-idea__collage img:nth-child(1) { width: 25vw; height: 25vw; }
  .clb-idea__collage img:nth-child(2) { width: 20vw; height: 20vw; left: 4.6vw; top: 25.7vw; }
  .clb-idea__collage img:nth-child(3) { width: 21.7vw; height: 21.7vw; left: 22.4vw; top: 14.2vw; }
}

@media (max-width: 1200px) {
  .clb-role__tags { width: 100%; height: 210px; }
  .clb-tag--2 { left: auto; right: 0; }
  .clb-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clb-benefits__rainbow { grid-column: 2; grid-row: 3; }
}

@media (max-width: 1023px) {
  .clb-hero__inner { flex-direction: column; align-items: stretch; gap: 30px; }
  .clb-hero__img { flex: none; width: 100%; }
  .clb-idea__inner { flex-direction: column; align-items: stretch; gap: 40px; }
  .clb-idea__collage { width: 100%; height: 96vw; max-height: 551px; margin: 0 auto; }
  .clb-idea__collage img:nth-child(1) { width: 52%; height: auto; aspect-ratio: 1; }
  .clb-idea__collage img:nth-child(2) { width: 42%; height: auto; aspect-ratio: 1; left: 10%; top: 55%; }
  .clb-idea__collage img:nth-child(3) { width: 45%; height: auto; aspect-ratio: 1; left: 50%; top: 30%; }
  .clb-form__inner { flex-direction: column; align-items: stretch; gap: 40px; }
  .clb-form__box { flex: none; }
}

@media (max-width: 767px) {
  /* размеры и отступы — по мобильному фрейму Figma (375px) */
  .clb { --clb-pad: 16px; }
  .clb-h2 { font-size: 28px; line-height: 34px; }
  .clb-pill { font-size: 22px; line-height: 28px; padding: 10px 24px; }

  .clb-hero__inner { padding-top: 20px; padding-bottom: 20px; gap: 20px; }
  .clb-hero__top { gap: 12px; }
  .clb-hero__hands { width: 98px; height: 47px; }
  .clb-hero__btn { width: 100%; }
  .clb-clouds { height: 40px; }
  .clb-zigzag { height: 20px; }

  /* карточки ролей */
  .clb-roles { padding-top: 20px; padding-bottom: 20px; }
  .clb-roles__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .clb-role { padding: 40px 16px; gap: 30px; }
  .clb-role__title { font-size: 24px; line-height: 27px; }
  .clb-role__tags { width: 318px; max-width: 102%; height: 160px; margin-left: -3px; }
  .clb-tag {
    width: 45.3%;
    height: 88px;
    padding: 22px 10px 17px;
    font-size: 13px;
    line-height: 16px;
  }
  .clb-tag--1 { left: 0;     top: 8px;  }
  .clb-tag--2 { left: 40.6%; top: -4px; }
  .clb-tag--3 { left: 53.5%; top: 69px; }
  .clb-tag--4 { left: 17.3%; top: 80px; }
  .clb-roles__cta { margin-top: 20px; }
  .clb-roles__cta .clb-btn { width: 100%; }

  /* слайдер партнёров */
  .clb-partners { padding-top: 20px; padding-bottom: 30px; }
  .clb-partner { flex-basis: 288px; }
  .clb-partner__name { font-size: 20px; line-height: 24px; min-height: 60px; }

  /* карточки выгод */
  .clb-benefits { padding-top: 30px; padding-bottom: 20px; }
  .clb-benefits__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .clb-benefits__rainbow { grid-column: 1; grid-row: auto; justify-self: center; width: 100%; }
  .clb-benefit__name { font-size: 20px; line-height: 24px; }

  /* блок идей */
  .clb-idea { padding-top: 20px; padding-bottom: 40px; }
  .clb-idea__inner { gap: 30px; }
  .clb-idea__top { justify-content: flex-start; gap: 16px; }
  .clb-idea__arrow { display: none; }
  .clb-idea__btn { width: 100%; }
  .clb-idea__text { font-size: 16px; line-height: 20px; }
  .clb-idea__collage { width: 100%; height: 92vw; max-height: 420px; }
  .clb-idea__collage img:nth-child(1) { width: 48%; height: auto; aspect-ratio: 1; left: 42%; top: 0; }
  .clb-idea__collage img:nth-child(2) { width: 40%; height: auto; aspect-ratio: 1; left: 42%; top: 62%; }
  .clb-idea__collage img:nth-child(3) { width: 58%; height: auto; aspect-ratio: 1; left: 0;   top: 26%; }

  /* форма */
  .clb-form { padding-top: 30px; padding-bottom: 30px; }
  .clb-form__inner { gap: 30px; }
  .clb-form__left { gap: 20px; }
  .clb-form__sun { width: 100%; }
  .clb-form__box { padding: 20px; gap: 30px; }
  .clb-form__fields { gap: 8px; }
  .clb-form__note { font-size: 14px; line-height: 17px; }
}

/* ---------- хлебные крошки (вне .clb, в шаблоне) ---------- */
.clb-crumbs { background: #fff; }
.clb-crumbs__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 140px 0;
  font-family: 'GothamProRegular', Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
}
.clb-crumbs__inner a { color: #0F1016; text-decoration: none; }
.clb-crumbs__inner a:hover { text-decoration: underline; }
@media (max-width: 1439px) { .clb-crumbs__inner { padding-left: 5vw; padding-right: 5vw; } }
@media (max-width: 767px) { .clb-crumbs__inner { padding: 12px 16px 0; font-size: 14px; } }