/* Новые блоки главной: кнопка «Показать все работы», «Что делаем», призыв и ссылки.
   Разметку вставляет сборка (scripts/build.mjs, addSections), поведение — overrides/js/daruma-home.js.
   Цвета, шрифт и кнопки — как на первом экране (daruma-hero.css). Отступы по бокам — как у заголовка
   на первом экране: 40 px на компьютере, 20 px на планшете, 10 px на телефоне. */

.daruma-more-wrap, .daruma-services, .daruma-blog, .daruma-cta {
  background: #101010;
  color: #f5f5f5;
  font-family: var(--t-text-font, 'Inter', Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.daruma-wrap { padding: 0 40px; max-width: 1440px; margin: 0 auto; box-sizing: border-box; }

/* ——— кнопки: та же система, что на первом экране (радиус 4, #e02a00 / контур, светлая заливка при наведении) */
.daruma-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 28px; border-radius: 4px; border: 1px solid transparent;
  font: 700 14px/1 var(--t-text-font, 'Inter', Arial, sans-serif);
  letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; box-sizing: border-box;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.daruma-btn--primary { background: #e02a00; color: #fff; }
.daruma-btn--ghost { background: transparent; color: #f5f5f5; border-color: rgba(245, 245, 245, .6); }
.daruma-btn--primary:hover, .daruma-btn--primary:focus-visible,
.daruma-btn--ghost:hover, .daruma-btn--ghost:focus-visible { background: #f5f5f5; color: #101010; border-color: #f5f5f5; }
.daruma-btn:focus-visible, .daruma-cta a:focus-visible { outline: 2px solid #f5f5f5; outline-offset: 3px; }

/* ——— избранные работы: сетка плиток вместо длинных полос.
   Порядок плиток задан в сборке (order), остальные скрыты, пока не нажата кнопка «Показать все работы».
   Тильда сама ставит высоту блокам (inline) и при смене ширины пересчитывает её, поэтому размеры здесь с !important. */
#rec1077662206 .t694 { padding: 0; background: #101010; }
/* мягкий переход (9 октября 2026): сетка отступает от первого экрана на 56 px (было 32 — линию «Избранные работы» опустили,
   и между подписью и работами нужен зазор); карточки вплотную, во всю ширину
   (зазоры между ними пробовали — Дмитрию вплотную нравится больше) */
#rec1077662206 .t694__container { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 56px 0 0; width: 100%; box-sizing: border-box; }
#rec1077662206 .t694__row,
#rec1077662206 .t694__col,
#rec1077662206 .t694__cell { display: block !important; width: 100% !important; margin: 0; }
#rec1077662206 .t694__table {
  display: block !important; position: relative; width: 100%;
  height: auto !important; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0;
}
#rec1077662206 .t694__cell { height: 100% !important; }
#rec1077662206 .t694__overlay { background-image: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .1) 100%) !important; }
#rec1077662206 .t694__cell:hover .t694__overlay { opacity: 1; }
#rec1077662206 .t694__textwrapper {
  position: absolute !important; left: 0; right: 0; bottom: 0; padding: 18px 20px !important;
  opacity: 1 !important; transform: none !important; text-align: left;
}
#rec1077662206 .t694__textwrapper__content { margin: 0 !important; }
#rec1077662206 .t694__inner-wrapper { transform: none !important; }
#rec1077662206 .t694__button-container { display: none !important; }
#rec1077662206 .t-card__title { font-size: 20px !important; line-height: 1.2; font-weight: 500 !important; letter-spacing: -.01em; text-align: left; font-family: Inter, Arial, sans-serif !important; }
#rec1077662206 .t-card__title strong { font-weight: 500; }
#rec1077662206 .t-card__descr { margin-top: 6px !important; font-size: 13px !important; line-height: 1.4; color: rgba(245, 245, 245, .78) !important; font-family: Inter, Arial, sans-serif !important; }
#rec1077662206 .t-card__descr p { margin: 0; text-align: left !important; }
#rec1077662206 .t-card__descr strong { font-weight: 400; }
/* состав работ («Музыка | Саунд-дизайн | Сведение»): на компьютере появляется при наведении на карточку
   (и при переходе к ней с клавиатуры) и приподнимает название; на телефоне виден всегда (scripts/build.mjs, tidyCard) */
#rec1077662206 .t-card__descr .daruma-credits { color: rgba(245, 245, 245, .78); }
@media (hover: hover) and (pointer: fine) {
  #rec1077662206 .t-card__descr .daruma-credits {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .35s cubic-bezier(.2, .7, .2, 1), opacity .25s ease;
  }
  #rec1077662206 .t694__cell:hover .daruma-credits,
  #rec1077662206 .t694__cell:focus-within .daruma-credits { max-height: 3em; opacity: 1; transition-delay: 0s, .05s; }
}
@media (prefers-reduced-motion: reduce) {
  #rec1077662206 .t-card__descr .daruma-credits { transition: none; }
}
/* обе строки описания («для ТВ-рекламы» и «Музыка | Саунд-дизайн | Сведение») видны всегда */
#rec1077662206.daruma-works--collapsed .daruma-more { display: none !important; }
.daruma-more-wrap { padding: 40px 0 48px; text-align: center; }
.daruma-more-wrap[hidden] { display: none; }

/* ——— что делаем: крупные названия шрифтом заголовка первого экрана (Inter 400, плотный набор),
   справа — короткое описание; при наведении название становится красным (цвет логотипа). */
.daruma-services { padding: 88px 0 120px; border-top: 1px solid rgba(245, 245, 245, .12); font-family: Inter, Arial, sans-serif; }
.daruma-services__label { margin: 0 0 48px; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #b4b4b4; }
.daruma-services__list { margin: 0; padding: 0; list-style: none; }
.daruma-services__list li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: 48px; align-items: center;
  padding: 30px 0;
}
.daruma-services__name {
  font-size: clamp(30px, 4.4vw, 64px); line-height: 1.05; font-weight: 400; letter-spacing: -.04em; color: #f5f5f5;
  transition: color .2s ease;
}
.daruma-services__text { font-size: 16px; line-height: 1.5; color: #a8a8a8; }
@media (hover: hover) { .daruma-services__list li:hover .daruma-services__name { color: #ff3300; } }

/* ——— блог: последние статьи карточками — обложка, дата, название (разметку вставляет scripts/blog.mjs).
   Перекликается с сеткой работ; на планшете и телефоне карточки листаются вбок. При наведении обложка
   чуть приближается, название становится красным. */
.daruma-blog { padding: 96px 0 112px; border-top: 1px solid rgba(245, 245, 245, .12); font-family: Inter, Arial, sans-serif; }
.daruma-blog__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.daruma-blog__head .daruma-services__label { margin: 0; }
.daruma-blog__all { font-size: 14px; color: #a8a8a8; text-decoration: none; transition: color .2s ease; }
.daruma-blog__all:hover, .daruma-blog__all:focus-visible { color: #f5f5f5; }
.daruma-blog__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.daruma-blog__item { display: block; color: inherit; text-decoration: none; }
/* пропорции обложек статей (1200 × 630): на них есть текст, обрезать нельзя */
.daruma-blog__img { display: block; aspect-ratio: 1200 / 630; border-radius: 4px; overflow: hidden; background: #1c1c1c; }
.daruma-blog__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.daruma-blog__date { display: block; margin-top: 16px; font-size: 13px; color: #8a8a8a; letter-spacing: .02em; }
.daruma-blog__title { display: block; margin-top: 8px; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; font-weight: 400; letter-spacing: -.02em; color: #f5f5f5; transition: color .2s ease; text-wrap: pretty; }
@media (hover: hover) {
  .daruma-blog__item:hover .daruma-blog__title { color: #ff3300; }
  .daruma-blog__item:hover .daruma-blog__img img { transform: scale(1.04); }
}
.daruma-blog__item:focus-visible { outline: 2px solid #f5f5f5; outline-offset: 4px; }
.daruma-blog__more { display: none; margin-top: 32px; }
@media (prefers-reduced-motion: reduce) { .daruma-blog__img img { transition: none; } }

/* ——— призыв и ссылки */
.daruma-cta { padding: 96px 0 72px; border-top: 1px solid rgba(245, 245, 245, .12); }
.daruma-cta__title { margin: 0 0 40px; font-family: Inter, Arial, sans-serif; font-size: clamp(38px, 6vw, 88px); line-height: 1.02; font-weight: 400; letter-spacing: -.04em; }
.daruma-cta__row { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 32px; }
/* кнопка под заголовком 88 px — крупнее обычной, чтобы не терялась */
.daruma-cta__row .daruma-btn { height: 60px; padding: 0 40px; font-size: 15px; }
.daruma-cta__mail { font-size: 18px; color: #f5f5f5; text-decoration: none; border-bottom: 1px solid rgba(245, 245, 245, .4); padding-bottom: 2px; transition: border-color .2s ease; }
.daruma-cta__mail:hover { border-color: #f5f5f5; }
.daruma-cta__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 72px; padding-top: 24px; border-top: 1px solid rgba(245, 245, 245, .12); }
.daruma-cta__links a { font-size: 14px; color: #a8a8a8; text-decoration: none; transition: color .2s ease; }
.daruma-cta__links a:hover, .daruma-cta__links a:focus-visible { color: #f5f5f5; }

/* ——— появление при прокрутке (только если работает скрипт) */
.daruma-js .daruma-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.daruma-js .daruma-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .daruma-js .daruma-reveal { opacity: 1; transform: none; transition: none; }
}

/* ——— планшет и телефон */
@media (max-width: 1199px) {
  #rec1077662206 .t694__container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  #rec1077662206 .t694 { padding: 0; }
  #rec1077662206 .t694__container { gap: 0; padding: 44px 0 0; }
  #rec1077662206 .t694__textwrapper { padding: 14px 16px !important; }
  #rec1077662206 .t-card__title { font-size: 17px !important; }
  .daruma-wrap { padding: 0 20px; }
  .daruma-services { padding: 56px 0 80px; }
  .daruma-services__label { margin-bottom: 28px; }
  .daruma-services__list li { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 24px 0; }
  .daruma-services__text { max-width: 40ch; }
  .daruma-cta { padding: 72px 0 56px; }
  .daruma-blog { padding: 64px 0 80px; }
  .daruma-blog__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -20px; padding: 0 20px 8px; scroll-padding-left: 20px; scrollbar-width: none; }
  .daruma-blog__list::-webkit-scrollbar { display: none; }
  .daruma-blog__list li { flex: 0 0 min(78%, 360px); scroll-snap-align: start; }
  .daruma-blog__title { font-size: 20px; }
  .daruma-blog__all { display: none; }
  .daruma-blog__more { display: block; }
  .daruma-cta__links { margin-top: 56px; }
}
@media (max-width: 699px) {
  #rec1077662206 .t694__container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  /* телефон: работы в одну колонку, кадром 16:9 — как в ролике; в две колонки картинки были мелкими, а подписи тесными */
  #rec1077662206 .t694__container { grid-template-columns: minmax(0, 1fr); }
  #rec1077662206 .t694__table { aspect-ratio: 16 / 9; }
  .daruma-wrap { padding: 0 10px; } /* как у заголовка на первом экране */
  #rec1077662206 .t694 { padding: 0; }
  #rec1077662206 .t694__container { gap: 0; padding: 24px 0 0; }
  #rec1077662206 .t694__textwrapper { padding: 14px 16px !important; }
  #rec1077662206 .t-card__title { font-size: 18px !important; }
  #rec1077662206 .t-card__descr { margin-top: 4px !important; font-size: 13px !important; }
  .daruma-more-wrap { padding: 24px 0 32px; }
  .daruma-services__list li { padding: 20px 0; }
  .daruma-services__name { font-size: 32px; }
  .daruma-services__text { font-size: 15px; }
  .daruma-cta__row { flex-direction: column; align-items: stretch; gap: 20px; }
  .daruma-cta__row .daruma-btn { width: 100%; }
  .daruma-cta__mail { align-self: flex-start; }
  .daruma-blog__list { margin: 0 -10px; padding: 0 10px 8px; scroll-padding-left: 10px; }
  .daruma-cta__row .daruma-btn { height: 52px; padding: 0 28px; font-size: 13px; }
  .daruma-blog__more .daruma-btn { width: 100%; }
}
html[lang="ru"] .daruma-btn { font-size: 13px; }

/* на телефоне подсказки под первым экраном нет — отступ прежний */
@media (max-width: 640px) {
  #rec1077662206 .t694__container { padding-top: 24px; }
}