/* Блок услуг «Что сделаем до отправки»: отличия от принятого компонента шести причин.
 *
 * Композиция root (ROOT_SERVICES_ART_DIRECTION_v1): слева крупная фотопанель, справа ровная
 * сетка 2×2 из четырёх переключателей, общая высота тела 400–440 px при 1440, gap 24 между
 * колонками и 16 между карточками. Палитра, шрифт, радиусы и состояния берутся из
 * creative-studio.css — здесь только то, что отличается. Главный блок шести причин не
 * затрагивается: все селекторы начинаются с .gt-services-studio.
 */

/* Тело: 420 px — середина заданного диапазона 400–440. Карточки делят ту же высоту
   поровну, поэтому справа не остаётся пустой полосы под сеткой. */
.gt-services-studio .gt-reason-scene { min-height: 420px; }
.gt-services-studio .gt-reasons-studio__choices { grid-template-columns: 1fr 1fr; gap: 16px; }

/* Фотопанель шире сетки: длинное описание услуги читается в одну колонку. */
.gt-services-studio .gt-reasons-studio__layout { grid-template-columns: 1.12fr 1fr; gap: 24px; }

/* Экран мультимедиа держим целиком: кадр 4:3 в панели 1.6:1 обрезается сверху и снизу,
   и при центрировании верхние строки меню уходили бы под кромку. */
.gt-services-studio [data-reason-scene="1"] > img { object-position: 50% 46%; }

/* У каждой услуги свой значок: молоток, перевод, камера, щит с галкой (образы выбраны
   root). Нарисованы в той же сетке 0 0 30 30 и с той же обводкой, что и принятый блок
   шести причин, поэтому размер, позиция и поведение при наведении общие. Цвет всегда
   красный; на активной графитовой карточке — мягкий красный: основной на тёмном не
   читается. */
.gt-services-studio .gt-reason-choice svg { color: var(--gt-red, #dc0100); }
.gt-services-studio .gt-reason-choice[aria-pressed="true"] svg { color: var(--gt-red-soft, #f26d65); }

/* Заголовок карточки короткий, подпись одна — оставляем обоим место на две строки,
   чтобы перенос не менял высоту соседей. */
.gt-services-studio .gt-reason-choice strong { font-size: 15px; }
.gt-services-studio .gt-reason-choice small { padding-right: 18px; }

/* Карточек четыре, а не шесть, и они делят высоту фотопанели: при выравнивании по верху
   в каждой оставалось 84 px пустоты снизу (замер на 1440: карточка 202, содержимое 45).
   Номер со значком остаются наверху, а название с подписью встают по центру остатка —
   так большие вертикальные промежутки уходят, а строка номеров не съезжает вниз. */
.gt-services-studio .gt-reason-choice { justify-content: center; padding: 56px 24px 30px; }
.gt-services-studio .gt-reason-choice__top { position: absolute; inset: 22px 24px auto; margin: 0; }

/* CTA под телом блока. */
.gt-services-studio__cta { margin: 24px 0 0; }

@media (max-width: 1050px) {
	.gt-services-studio .gt-reasons-studio__layout { grid-template-columns: 1fr 1fr; gap: 18px; }
	.gt-services-studio .gt-reason-scene { min-height: 400px; }
	.gt-services-studio .gt-reason-choice { padding: 50px 19px 26px; }
	.gt-services-studio .gt-reason-choice__top { inset: 18px 19px auto; }
}

@media (max-width: 760px) {
	/* Порядок root: шапка, переключатели 2×2, затем фотопанель с описанием. Обратную
	   колонку даёт общий слой; здесь важно, что колонок именно две, а не три, и что
	   подпись не прячется и не ужимается до нечитаемого. */
	.gt-services-studio .gt-reasons-studio__choices { grid-template-columns: 1fr 1fr; gap: 10px; }
	.gt-services-studio .gt-reason-choice { padding: 36px 13px 26px; gap: 6px; min-height: 150px; }
	.gt-services-studio .gt-reason-choice__top { inset: 12px 13px auto; }
	/* Заголовок 14 и подпись 12 вместо 13 и 10: на 390 подпись была нечитаемой. Сетка
	   остаётся 2×2, высоту карточки поднимаем так, чтобы обе строки текста поместились
	   целиком — переносу на две строки мешать не нужно, отсечения быть не должно. */
	.gt-services-studio .gt-reason-choice strong { font-size: 14px; line-height: 1.3; }
	.gt-services-studio .gt-reason-choice small { display: block; font-size: 12px; line-height: 1.35; padding-right: 0; }
	.gt-services-studio .gt-reason-choice__arrow { display: block; right: 11px; bottom: 7px; }
	.gt-services-studio .gt-reason-scene { min-height: 380px; }
}