/* ============================================================
   FW-501 — виджеты «Смежные услуги» и «Похожие кейсы»
   Визуал перенесён из razrabotka-mvp (секции .mvp-related и .mvp-cases),
   но без привязки к body-классу .mvp-page — работает на любой странице.
   Неймспейс .fittin-related не пересекается со стилями кейсов.
   Шрифт наследуется из body (Gilroy).
   ============================================================ */

.fittin-related {
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    border-top: 1px solid #ececec;
    padding: 72px 0 80px;
    color: #1a1a1a;
    font-family: inherit;
}
.fittin-related * { box-sizing: border-box; }

.fittin-related__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.fittin-related__group + .fittin-related__group { margin-top: 64px; }

.fittin-related__title {
    margin: 0 0 clamp(36px, 6vw, 56px);
    font-size: clamp(28px, 3.8vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    color: #1a1a1a;
}
/* фиксируем отступ заголовок→блок = 32px (перебивает margin класса кейса) */
.fittin-related .fittin-related__title { margin-bottom: 32px; }

/* ============================================================
   Вариант оформления «--blue» — премиальный стиль idol:
   заголовки по центру (600 / #000, без капса), синяя полоска-подчёркивание,
   синий акцент #322CFE на ссылках, без скруглений карточек и без верхней границы.
   Носят кейсы со схожим стилем (idol, finn-flare, …) — добавить класс fittin-related--blue.
   Самодостаточен: не зависит от CSS конкретного кейса.
   ============================================================ */
.fittin-related--blue .fittin-related__title {
    font-weight: 600 !important; /* у idol-подобных кейсов CSS форсит вес !important — перебиваем */
    color: #000;
    text-transform: none;
    text-align: center;
    letter-spacing: normal;
    font-size: clamp(28px, 3.2vw, 40px);
}
.fittin-related--blue .fittin-related__group:has(.match-underline) .fittin-related__title { margin-bottom: 14px; }
.fittin-related--blue .match-underline {
    width: 120px;
    height: 8px;
    background: #322CFE;
    margin: 0 auto 32px;
}
.fittin-related--blue { border-top: none; }
.fittin-related--blue .fittin-related__svc,
.fittin-related--blue .fittin-related__case { border-radius: 0; }
.fittin-related--blue .fittin-related__svc-link,
.fittin-related--blue .fittin-related__case-link { color: #322CFE; }

/* finn-flare: вместо общей полоски — собственная .finn-flare-section-line, под «Услуги FITTIN» */
.fittin-related--finn-flare .fittin-related__group:has(.finn-flare-section-line) .fittin-related__title { margin-bottom: 12px; }
.fittin-related--finn-flare .finn-flare-section-line { margin: 0 auto 28px; }

/* lusio — земляная палитра бренда: uppercase 600, коричневый #4a3427, по левому краю */
.fittin-related--lusio .fittin-related__title {
    font-weight: 600 !important; /* lusio форсит вес !important на заголовках */
    color: #4a3427;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 0.06em;
    font-size: clamp(22px, 2.2vw, 30px);
}
.fittin-related--lusio { border-top: none; }
.fittin-related--lusio .fittin-related__svc,
.fittin-related--lusio .fittin-related__case { border-radius: 0; }
.fittin-related--lusio .fittin-related__svc-link,
.fittin-related--lusio .fittin-related__case-link { color: #4a3427; }

/* streetbeat — заголовки оформлены нативной разметкой .sb-internal-header
   (линия — заголовок по центру — линия). Здесь только подрезаем большой
   нижний отступ компонента (80px → 32px) под ритм виджета. */
.fittin-related--streetbeat .sb-internal-header__inner { padding-bottom: 32px; }

/* aleksandr-bogdanov — заголовки нативной разметкой .bogdanov-section-header
   (линия — заголовок по центру — линия, синий #3b66a8). Подрезаем нижний отступ. */
.fittin-related--bogdanov .bogdanov-section-header__inner { padding-bottom: 32px; }
/* прозрачный фон (как у .bogdanov-result — проступает фон страницы), без верхней границы,
   синий #3b66a8 на ссылках и в текстах карточек кейсов */
.fittin-related--bogdanov { background: transparent; border-top: none; }
.fittin-related--bogdanov .fittin-related__svc-link,
.fittin-related--bogdanov .fittin-related__case-link { color: #3b66a8; }
.fittin-related--bogdanov .fittin-related__case-name,
.fittin-related--bogdanov .fittin-related__case-desc { color: #3b66a8; }
.fittin-related--bogdanov .fittin-related__svc { background: #D5F0FC; }
.fittin-related--bogdanov .fittin-related__svc-name,
.fittin-related--bogdanov .fittin-related__svc-desc { color: #3b66a8; }

/* gulliver — как .gulliver-features__title: uppercase, 600, тесный трекинг, #1a1a1a */
.fittin-related--gulliver .fittin-related__title {
    font-weight: 600 !important;
    letter-spacing: -0.02em;
    font-size: clamp(22px, 2.8vw, 36px);
}
.fittin-related--gulliver { border-top: none; }
.fittin-related--gulliver .fittin-related__svc-link,
.fittin-related--gulliver .fittin-related__case-link { color: #6a6a72; text-decoration: underline; }

/* hobbygames — заголовки нативной разметкой .hobbygames-section-header
   (заголовок + оранжевая линия #e87722), как «Этапы работы». Без верхней границы,
   подрезаем большой нижний отступ обёртки (60px → 32px). */
.fittin-related--hobbygames { border-top: none; }
.fittin-related--hobbygames .hobbygames-section-header { margin-bottom: 32px; }

/* mosigra — как .mosigra-stages__title: uppercase, 600, фирменный красный #d2001a */
.fittin-related--mosigra .fittin-related__title {
    font-weight: 600;
    color: #d2001a;
    font-size: clamp(28px, 3vw, 36px);
}
.fittin-related--mosigra { border-top: none; }
.fittin-related--mosigra .fittin-related__svc-link,
.fittin-related--mosigra .fittin-related__case-link { color: #d2001a; }
.fittin-related--mosigra .fittin-related__svc { background: transparent; border: 2px solid #d2001a; }
.fittin-related--mosigra .fittin-related__case { border: 2px solid #d2001a; }
.fittin-related--mosigra .fittin-related__case-desc,
.fittin-related--mosigra .fittin-related__svc-desc { color: #1a1a1a; }

/* lassie — палитра кейса поверх --blue: тёмно-синие заголовки/ссылки,
   родная линия .lassie-section-line (#002354) вместо общей .match-underline */
.fittin-related--lassie .fittin-related__title { color: #252d37; }
.fittin-related--lassie .fittin-related__svc-link,
.fittin-related--lassie .fittin-related__case-link { color: #002354; }
.fittin-related--lassie .fittin-related__group:has(.lassie-section-line) .fittin-related__title { margin-bottom: 12px; }
.fittin-related--lassie .lassie-section-line { margin: 0 auto 28px; }

/* fashouse — как .fashouse-*__heading: тяжёлый 900, uppercase, #272727, тесный трекинг
   (размер уменьшен с 96px до разумного для вторичного блока) */
.fittin-related--fashouse .fittin-related__title {
    font-weight: 900 !important;
    color: #272727;
    letter-spacing: -0.01em;
    line-height: 1;
    font-size: clamp(28px, 4vw, 48px);
}
/* fashouse — блоки во всю ширину (как .fashouse-stores): контейнер без ограничения,
   фон групп тянется на весь экран, контент центрируется к 1200px паддингом */
.fittin-related--fashouse .fittin-related__container { max-width: none; padding: 0; }
.fittin-related--fashouse .fittin-related__group {
    margin: 0;
    padding: clamp(40px, 5vw, 72px) max(20px, calc(50% - 600px));
}
.fittin-related--fashouse .fittin-related__group:has(.fittin-related__cases) { background: #8A8069; }
.fittin-related--fashouse .fittin-related__group:has(.fittin-related__services) { background: #D5D2C7; }
.fittin-related--fashouse { padding: 0; border-top: none; }
.fittin-related--fashouse .fittin-related__svc,
.fittin-related--fashouse .fittin-related__case { border-radius: 0; }
.fittin-related--fashouse .fittin-related__case { border: none; }
.fittin-related--fashouse .fittin-related__svc-link,
.fittin-related--fashouse .fittin-related__case-link { color: #1d1d1b; text-decoration: underline; }

/* evropa-market — заголовки нативной разметкой .evropa-section-header
   (заголовок + красная линия #E62A2C, по центру). Подрезаем нижний отступ. */
.fittin-related--evropa .evropa-section-header { margin-bottom: 32px; }
.fittin-related--evropa .fittin-related__svc-link,
.fittin-related--evropa .fittin-related__case-link { color: #E62A2C; }

/* saturn — база --blue, но заголовки как .saturn-results__heading (uppercase 600, #11293b,
   ls .04, по левому краю), скругления карточек возвращены, ссылки #ff2e17 */
.fittin-related--saturn .fittin-related__title {
    color: #11293b;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: clamp(22px, 2.8vw, 34px);
    font-weight: 500 !important; /* перебиваем 600!important из --blue */
}
.fittin-related--saturn .fittin-related__group:has(.saturn-about__line) .fittin-related__title { margin-bottom: 12px; }
.fittin-related--saturn .saturn-about__line { margin: 0 0 28px; }
.fittin-related--saturn .fittin-related__svc { border-radius: 16px; }
.fittin-related--saturn .fittin-related__case { border-radius: 14px; }
.fittin-related--saturn .fittin-related__svc-link,
.fittin-related--saturn .fittin-related__case-link { color: #ff2e17; }

/* garlyn — как .garlyn-about__title: 600, #111, без капса, по левому краю */
.fittin-related--garlyn .fittin-related__title {
    font-weight: 600;
    color: #111;
    text-transform: none;
    text-align: left;
    letter-spacing: normal;
    font-size: clamp(24px, 2.6vw, 32px);
}
.fittin-related--garlyn { border-top: none; }

/* syrovarnia — как .syrovarnya-about__title: uppercase, 600, тёмно-зелёный #213113, тесный трекинг */
.fittin-related--syrovarnia .fittin-related__title {
    font-weight: 600 !important;
    color: #213113;
    letter-spacing: -0.02em;
    font-size: clamp(24px, 3vw, 36px);
}
.fittin-related--syrovarnia { background: #f8f5ee; border-top: none; }
.fittin-related--syrovarnia .fittin-related__svc-link,
.fittin-related--syrovarnia .fittin-related__case-link { color: #213113; text-decoration: underline; }
.fittin-related--syrovarnia .fittin-related__case { border: none; }

/* volny-strannik — как .volny-store__title: 700, #111, без капса, по левому краю */
.fittin-related--volny .fittin-related__title {
    font-weight: 700;
    color: #111;
    text-transform: none;
    text-align: left;
    letter-spacing: normal;
    font-size: clamp(22px, 3.4vw, 32px);
}
.fittin-related--volny { background: rgb(239, 247, 249); border-top: none; }
.fittin-related--volny .fittin-related__case { border: none; }
.fittin-related--volny .fittin-related__svc { background: #fff; }
.fittin-related--volny .fittin-related__svc-link,
.fittin-related--volny .fittin-related__case-link { color: #47c1c6; }

/* pan-chemodan — как .pan-card-sections__title: 500, #111, по левому краю, lh 1.35 */
.fittin-related--pan .fittin-related__title {
    font-weight: 500 !important;
    color: #111;
    text-transform: none;
    text-align: left;
    letter-spacing: normal;
    line-height: 1.35;
    font-size: clamp(22px, 2.15vw, 32px);
}
.fittin-related--pan { border-top: none; }
.fittin-related--pan .fittin-related__svc,
.fittin-related--pan .fittin-related__case { border-radius: 0; }
.fittin-related--pan .fittin-related__case { border: none; }
.fittin-related--pan .fittin-related__svc,
.fittin-related--pan .fittin-related__case { background: #f4f4f4; }
.fittin-related--pan .fittin-related__svc-link,
.fittin-related--pan .fittin-related__case-link { color: #000; text-decoration: underline; }
.fittin-related--syrovarnia .fittin-related__svc { background: #fff; }
.fittin-related--syrovarnia .fittin-related__case-desc,
.fittin-related--syrovarnia .fittin-related__svc-desc {
    font-size: clamp(14px, 1.05vw, 16px);
    color: #333333;
    font-weight: 400;
}

/* ---- Смежные услуги (стиль .mvp-related__card) ---- */
.fittin-related__services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.fittin-related__svc {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f7f7f7;
    border-radius: 16px;
    padding: 24px;
    text-decoration: none;
}
.fittin-related__svc-name {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    line-height: 1.3;
    margin: 0;
}
.fittin-related__svc-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #666;
    margin: 0;
    flex: 1;
}
.fittin-related__svc-link {
    font-size: 16px;
    font-weight: 500;
    color: #FF6B00;
    margin-top: auto;
}
.fittin-related__svc:hover .fittin-related__svc-link { text-decoration: underline; }

/* ---- Похожие кейсы (стиль .case из mvp-cases) ---- */
.fittin-related__cases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.fittin-related__case {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease;
}
.fittin-related__case:hover { transform: translateY(-2px); }
.fittin-related__case-image {
    display: block;
    aspect-ratio: 4 / 3;
    background: #f9f9f9;
    overflow: hidden;
}
.fittin-related__case-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.fittin-related__case-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    padding: 26px 28px 28px;
}
.fittin-related__case-name {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
    margin: 0;
}
.fittin-related__case-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #666;
    margin: 0;
}
.fittin-related__case-link {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 12px;
    font-size: 16px;
    font-weight: 500;
    color: #FF6B00;
}

/* ---- адаптив (как в mvp) ---- */
@media (max-width: 1024px) {
    .fittin-related__services { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .fittin-related__services,
    .fittin-related__cases { grid-template-columns: 1fr; }
}