/* ОБЪЕКТ — переиспользуемый блок «Обсудить проект» (objd-*).
   Изолирован от main.css: ни одного общего класса; селекторы из двух классов (.objd .objd-x), чтобы стили
   колонки статьи и текстового редактора (.articles-typical__content img, .editor p и т.п.) не перебивали блок.
   Раскладка — от ширины МЕСТА, куда вставлен блок (container queries, единицы cqw), а не от ширины экрана:
     до 680px — телефонный вид (короткие тексты, визитка с квадратным фото);
     681–1023px — одна колонка, тексты для компьютера, визитка;
     от 1024px — две колонки, справа фото во всю высоту.
   Всё, что растёт с шириной, — через clamp() с потолком. Цвета и базовые размеры — objekt-tokens.css. */
/* main.css гасит рамку фокуса у всего (* { outline: none !important }) — поэтому у :focus-visible здесь !important. */

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

.objd{
  container:objd / inline-size;
  position:relative;
  background:var(--objekt-color-bg);
  color:var(--objekt-color-cream);
  font-family:var(--objekt-font-body);
  margin:0;
  overflow:hidden;
}

/* ---------- базовый (узкий) вид ---------- */
.objd .objd-inner{padding:64px 20px;}
.objd .objd-v-desk{display:none;}
.objd .objd-v-mob{display:block;}
.objd .objd-photo{display:none;}

.objd .objd-eyebrow{
  display:flex;align-items:center;gap:16px;
  font-size:var(--objekt-fs-caption);
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--objekt-color-accent);
  margin:0 0 18px;
}
.objd .objd-eyebrow span{flex-shrink:0;}
.objd .objd-eyebrow i{display:block;flex:1;height:1px;background:var(--objekt-color-line-strong);}

.objd .objd-title{
  font-family:var(--objekt-font-heading);
  font-weight:500;
  font-size:var(--objekt-fs-display-mobile-cq);
  line-height:var(--objekt-lh-display);
  letter-spacing:var(--objekt-tracking-heading);
  text-transform:none;
  margin:0 0 28px;
  padding:0;
}
.objd .objd-title-main,
.objd .objd-title-accent{display:block;}
.objd .objd-title-main{color:var(--objekt-color-cream);}
.objd .objd-title-accent{color:var(--objekt-color-accent);}

/* визитка: квадратное фото + имя, должность, чёрточка, «На связи…» */
.objd .objd-card{display:flex;align-items:center;gap:20px;margin:0 0 28px;}
.objd .objd-card__photo{
  flex-shrink:0;
  width:clamp(112px, 34cqw, 160px);
  aspect-ratio:1 / 1;
  border-radius:var(--objekt-radius-card);
  overflow:hidden;
  background:#151313;
}
.objd .objd-card__photo img{width:100%;height:100%;object-fit:cover;display:block;margin:0;border-radius:0;}
.objd .objd-card__name{
  font-family:var(--objekt-font-heading);
  font-weight:500;
  font-size:var(--objekt-fs-h3);
  line-height:1.1;
  color:var(--objekt-color-cream);
  margin:0 0 6px;
}
.objd .objd-card__role{font-size:var(--objekt-fs-body);line-height:1.35;color:var(--objekt-color-text-light);}
.objd .objd-card__line{display:block;width:24px;height:1px;background:var(--objekt-color-accent);margin:14px 0 12px;}
.objd .objd-card__tagline{font-size:var(--objekt-fs-small);line-height:1.4;color:var(--objekt-color-accent);}

.objd .objd-subtitle{
  font-size:var(--objekt-fs-body);
  line-height:var(--objekt-lh-lead);
  color:var(--objekt-color-text-light);
  margin:0 0 16px;
  padding:0;
}
.objd .objd-free{
  font-size:var(--objekt-fs-small);
  color:var(--objekt-color-accent);
  margin:0 0 24px;
}

/* ---------- форма ---------- */
.objd .objd-form{margin:0;padding:0;}
.objd .objd-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;}
.objd .objd-cell{min-width:0;}

.objd .objd-field{
  display:flex;align-items:center;gap:14px;
  height:var(--objekt-field-h);
  padding:0 16px;
  margin:0;
  background:var(--objekt-color-field-bg);
  border:1px solid var(--objekt-color-line);
  border-radius:var(--objekt-radius-field);
  cursor:text;
  transition:border-color .2s;
}
.objd .objd-field:hover{border-color:var(--objekt-color-line-strong);}
.objd .objd-field:focus-within{border-color:var(--objekt-color-accent);}
.objd .objd-field.has-error{border-color:var(--objekt-color-error);}
.objd .objd-field__icon{display:flex;flex-shrink:0;width:24px;height:24px;color:var(--objekt-color-text-light);}
.objd .objd-field__icon svg{width:100%;height:100%;display:block;}

/* main.css красит все input в чёрный через !important — перебиваем только внутри блока */
.objd .objd-input{
  flex:1;min-width:0;height:100%;
  margin:0;padding:0;
  background:transparent;
  border:0;border-radius:0;
  box-shadow:none;outline:none;
  -webkit-appearance:none;appearance:none;
  font-family:var(--objekt-font-body);
  font-size:var(--objekt-fs-body);
  line-height:1.5;
  color:var(--objekt-color-cream) !important;
}
.objd .objd-input::placeholder{color:var(--objekt-color-text-light) !important;opacity:1;}
.objd .objd-input:-webkit-autofill,
.objd .objd-input:-webkit-autofill:hover,
.objd .objd-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--objekt-color-cream) !important;
  -webkit-box-shadow:0 0 0 1000px var(--objekt-color-bg) inset !important;
  caret-color:var(--objekt-color-cream);
}

/* «Коротко о Вашей задаче» — многострочное поле, иконка сверху, высоту можно тянуть */
.objd .objd-field--task{height:auto;align-items:flex-start;padding:18px 16px 10px;}
.objd .objd-field--task .objd-field__icon{margin-top:1px;}
.objd .objd-textarea{
  height:auto;
  min-height:84px;
  max-height:320px;
  resize:vertical;
  display:block;
  overflow:auto;
}

/* ---------- согласия ---------- */
.objd .objd-consents{margin-top:20px;}
.objd .objd-check{
  display:flex;align-items:center;gap:10px;
  font-size:var(--objekt-fs-caption);
  line-height:1.4;
  color:var(--objekt-color-text-light);
  cursor:pointer;
  margin:0;
}
.objd .objd-check + .objd-check{margin-top:12px;}
.objd .objd-check__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.objd .objd-check__box{
  flex-shrink:0;
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--objekt-color-line-strong);
  border-radius:3px;
  color:transparent;
  transition:background-color .2s, border-color .2s, color .2s;
}
.objd .objd-check__box svg{width:14px;height:14px;display:block;}
.objd .objd-check:hover .objd-check__box{border-color:var(--objekt-color-accent);}
.objd .objd-check__input:checked + .objd-check__box{background:var(--objekt-color-accent);border-color:var(--objekt-color-accent);color:var(--objekt-color-bg);}
.objd .objd-check__input:focus-visible + .objd-check__box{outline:2px solid var(--objekt-color-accent) !important;outline-offset:2px;}
.objd .objd-check.has-error .objd-check__box{border-color:var(--objekt-color-error);}
.objd .objd-check__text a{
  color:var(--objekt-color-accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
.objd .objd-check__text a:hover{color:var(--objekt-color-accent-hover);}

/* ---------- кнопка: на всю ширину, текст по центру, стрелка у правого края ---------- */
.objd .objd-btn{
  position:relative;
  width:100%;
  height:var(--objekt-field-h);
  display:flex;align-items:center;justify-content:center;
  margin:24px 0 0;
  padding:0 56px;
  background:var(--objekt-color-accent);
  color:var(--objekt-color-bg);
  border:0;
  border-radius:var(--objekt-radius-field);
  box-shadow:none;
  font-family:var(--objekt-font-body);
  font-size:var(--objekt-fs-button);
  font-weight:500;
  cursor:pointer;
  transition:background-color .2s, opacity .2s;
}
.objd .objd-btn:hover{background:var(--objekt-color-accent-hover);}
.objd .objd-btn:focus-visible{outline:2px solid var(--objekt-color-cream) !important;outline-offset:3px;}
.objd .objd-btn:disabled{opacity:.6;cursor:wait;}
.objd .objd-btn__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.objd .objd-btn__arrow{position:absolute;right:20px;top:50%;width:26px;height:26px;margin-top:-13px;display:flex;transition:transform .2s;}
.objd .objd-btn__arrow svg{width:100%;height:100%;display:block;}
.objd .objd-btn:hover .objd-btn__arrow{transform:translateX(4px);}

/* ---------- ошибки ---------- */
.objd .objd-error{
  display:none;
  font-size:var(--objekt-fs-small);
  line-height:var(--objekt-lh-small);
  color:var(--objekt-color-error);
  margin-top:8px;
}
.objd .objd-error.is-shown{display:block;}
.objd .objd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- строка «конфиденциально» ---------- */
.objd .objd-trust{
  display:flex;align-items:flex-start;gap:14px;
  margin-top:24px;
  font-size:var(--objekt-fs-meta);
  line-height:var(--objekt-lh-small);
  color:var(--objekt-color-text-muted);
}
.objd .objd-trust__icon{display:flex;flex-shrink:0;width:24px;height:24px;color:var(--objekt-color-accent);}
.objd .objd-trust__icon svg{width:100%;height:100%;display:block;}

/* ---------- 681–1023: одна колонка, тексты для компьютера ---------- */
@container objd (min-width: 681px){
  .objd .objd-inner{
    width:min(86.25cqw, 720px);
    margin:0 auto;
    padding:var(--objekt-section-py-cq) 0;
  }
  .objd .objd-v-desk{display:block;}
  .objd .objd-v-mob{display:none;}
  .objd .objd-eyebrow{font-size:var(--objekt-fs-meta);letter-spacing:0.3em;gap:24px;margin-bottom:24px;}
  .objd .objd-title{font-size:var(--objekt-fs-display-stack-cq);}
  .objd .objd-subtitle{font-size:var(--objekt-fs-lead);max-width:640px;}
  .objd .objd-free{font-size:var(--objekt-fs-body);margin-bottom:28px;}
  .objd .objd-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;}
  .objd .objd-field--task{grid-column:1 / -1;}
  .objd .objd-field{padding:0 20px;gap:16px;}
  .objd .objd-field--task{padding:18px 20px 10px;}
  .objd .objd-textarea{min-height:72px;}
  .objd .objd-check{font-size:var(--objekt-fs-body);gap:16px;}
  .objd .objd-check__box{width:26px;height:26px;}
  .objd .objd-check__box svg{width:18px;height:18px;}
  .objd .objd-btn{padding:0 64px;}
  .objd .objd-btn__arrow{right:28px;}
  .objd .objd-trust{align-items:center;font-size:var(--objekt-fs-small);}
}

/* ---------- от 1024: две колонки, фото справа во всю высоту блока ---------- */
@container objd (min-width: 1024px){
  .objd .objd-inner{
    --objd-content:min(81.77083cqw, 1600px);
    --objd-gutter:calc((100cqw - var(--objd-content)) / 2);
    width:auto;
    margin:0;
    padding:0;
    display:grid;
    /* фото заканчивается по правому краю контейнера, как у остальных секций, — блок симметричен на любом экране */
    grid-template-columns:var(--objd-gutter) calc(var(--objd-content) * 0.55) clamp(32px, 4cqw, 80px) minmax(0, 1fr) var(--objd-gutter);
  }
  .objd .objd-main{grid-column:2;padding:var(--objekt-section-py-cq) 0;}
  .objd .objd-title{font-size:var(--objekt-fs-display-split-cq);}
  .objd .objd-card{display:none;}
  .objd .objd-photo{
    display:block;
    grid-column:3 / 5;
    position:relative;
    min-height:100%;
  }
  /* рамка фото = «исходная» высота блока (--objd-photo-h из objekt-discuss.js). Если блок подрос
     (растянули поле задачи, появились подсказки об ошибке), снизу просто добавляется фон — фото не зумится */
  .objd .objd-photo__frame{
    position:absolute;left:0;right:0;top:0;
    height:var(--objd-photo-h, 100%);
    overflow:hidden;
  }
  .objd .objd-photo img{
    position:absolute;inset:0;
    width:100%;height:100%;
    max-width:none;
    object-fit:cover;
    object-position:50% 18%;
    display:block;margin:0;border-radius:0;
  }
  /* фото плавно уходит в фон слева, справа и снизу — без резкого обреза у краёв */
  .objd .objd-photo__frame::after{
    content:'';
    position:absolute;inset:0;
    background:
      linear-gradient(90deg, var(--objekt-color-bg) 0%, rgba(28,26,26,0.55) 14%, rgba(28,26,26,0) 38%),
      linear-gradient(270deg, var(--objekt-color-bg) 0%, rgba(28,26,26,0) 16%),
      linear-gradient(0deg, var(--objekt-color-bg) 0%, rgba(28,26,26,0.6) 8%, rgba(28,26,26,0) 34%);
    pointer-events:none;
  }
  .objd .objd-photo__caption{
    position:absolute;z-index:1;
    left:clamp(32px, 4cqw, 80px);
    bottom:clamp(40px, 5cqw, 96px);
  }
  .objd .objd-photo__name{
    font-family:var(--objekt-font-heading);
    font-weight:500;
    font-size:var(--objekt-fs-h3);
    line-height:1.1;
    color:var(--objekt-color-cream);
    margin:0 0 8px;
  }
  .objd .objd-photo__role{font-size:var(--objekt-fs-body);color:var(--objekt-color-text-light);}
  .objd .objd-subtitle{max-width:none;}
  .objd .objd-trust{margin-top:20px;}
}

/* ---------- «Направление: …» (карта «Где мы работаем») и «Как связаться» — параметры блока direction / fields ---------- */
.objd .objd-dir{display:inline-flex;align-items:center;gap:10px;max-width:100%;margin:0 0 14px;padding:8px 8px 8px 14px;border:1px solid var(--objekt-color-accent);font-size:15px;line-height:1.3;color:var(--objekt-color-cream);}
.objd .objd-dir[hidden]{display:none;}
.objd .objd-dir__text{min-width:0;}
.objd .objd-dir__label{font-weight:500;color:var(--objekt-color-accent);}
.objd .objd-dir__x{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--objekt-color-cream);cursor:pointer;box-shadow:none;-webkit-appearance:none;appearance:none;transition:background-color .2s ease;}
.objd .objd-dir__x svg{width:16px;height:16px;}
.objd .objd-dir__x:hover{background:rgba(169,150,125,0.2);}
.objd .objd-dir__x:focus-visible{outline:2px solid var(--objekt-color-accent) !important;outline-offset:2px;}
/* форма заполнилась с карты — рамка один раз «вспыхивает» */
.objd .objd-dir.is-flash{animation:objdFlash 1s ease;}
@keyframes objdFlash{0%{box-shadow:0 0 0 0 rgba(169,150,125,0.7);}100%{box-shadow:0 0 0 12px rgba(169,150,125,0);}}

.objd .objd-way{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;grid-column:1 / -1;}
.objd .objd-way__label{flex:1 1 100%;font-size:var(--objekt-fs-caption);color:var(--objekt-color-text-light);}
.objd .objd-way__opt{position:relative;display:inline-flex;align-items:center;gap:10px;flex:1 1 0;min-width:0;justify-content:center;height:46px;padding:0 12px;margin:0;border:1px solid var(--objekt-color-line);border-radius:var(--objekt-radius-field);font-size:15px;color:var(--objekt-color-cream);cursor:pointer;transition:border-color .2s ease;}
.objd .objd-way__opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;}
.objd .objd-way__dot{flex-shrink:0;width:16px;height:16px;border:1px solid var(--objekt-color-text-light);border-radius:50%;transition:border-color .2s ease, box-shadow .2s ease;}
.objd .objd-way__opt:hover{border-color:var(--objekt-color-line-strong);}
.objd .objd-way__opt:has(input:checked){border-color:var(--objekt-color-accent);}
.objd .objd-way__opt input:checked + .objd-way__dot{border-color:var(--objekt-color-accent);box-shadow:inset 0 0 0 4px var(--objekt-color-bg), inset 0 0 0 8px var(--objekt-color-accent);}
.objd .objd-way__opt:has(input:focus-visible){outline:2px solid var(--objekt-color-accent) !important;outline-offset:2px;}
@container objd (min-width: 681px){
  .objd .objd-way__label{flex:0 0 auto;margin-right:6px;}
}
@media (prefers-reduced-motion: reduce){ .objd .objd-dir.is-flash{animation:none;} }