/* ОБЪЕКТ — блок FAQ «Важные вопросы — прямые ответы» (objfaq-*): аккордеон вопросов + голосовой ответ эксперта.
   Изолирован от main.css: селекторы из двух классов (.objfaq .objfaq-x). Раскладка — от ширины места вставки
   (container queries; порог 1080px — чуть ниже 1100px, ширина блока меньше экрана на полосу прокрутки):
     до 1079px — одна колонка: шапка → вопросы → «Не нашли свой вопрос?» → кнопка на всю ширину;
     от 1080px — две колонки ≈ 38/62: слева шапка и кнопка (липнут при прокрутке), справа вопросы.
   Раскрытие ответа — grid-template-rows 0fr → 1fr (высота по содержимому, без обрезки).
   main.css гасит рамку фокуса у всего (* { outline: none !important }) — поэтому у :focus-visible здесь !important. */

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

.objfaq{
  container:objfaq / inline-size;
  background:var(--objekt-color-bg);
  color:var(--objekt-color-cream);
  font-family:var(--objekt-font-body);
  padding:var(--objekt-section-py-cq) 0;
  margin:0;
}
/* переменные раскладки — на обёртке: правила @container действуют только на потомков контейнера */
.objfaq .objfaq-wrap{
  --objfaq-pad:16px;
  --objfaq-line:rgba(245,242,237,0.12);
  display:flex;
  flex-direction:column;
  padding:0 var(--objfaq-pad);
}
.objfaq p{margin:0;padding:0;}
.objfaq button{font-family:inherit;margin:0;box-shadow:none;-webkit-appearance:none;appearance:none;text-transform:none;letter-spacing:normal;cursor:pointer;}
/* на телефоне колонка слева «растворяется»: шапка — сверху, кнопка — после вопросов */
.objfaq .objfaq-side{display:contents;}
.objfaq .objfaq-head{order:1;}
.objfaq .objfaq-list{order:2;}
.objfaq .objfaq-cta{order:3;}

/* ---------- шапка ---------- */
.objfaq .objfaq-eyebrow{
  display:flex;align-items:center;gap:16px;
  font-size:var(--objekt-fs-caption);
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--objekt-color-accent);
  margin:0 0 16px;
}
.objfaq .objfaq-eyebrow span{flex-shrink:0;}
/* линия справа от эйдброу — как во всех obj*-блоках сайта, на телефоне тоже */
.objfaq .objfaq-eyebrow i{display:block;flex:1 1 auto;max-width:560px;height:1px;background:var(--objekt-color-line-strong);}
.objfaq .objfaq-title{
  font-family:var(--objekt-font-heading);
  font-weight:400;
  font-size:clamp(34px, 9.5cqw, 48px);
  line-height:1.08;
  letter-spacing:var(--objekt-tracking-heading);
  color:var(--objekt-color-cream);
  margin:0;
}
.objfaq .objfaq-title__l{display:block;}
.objfaq .objfaq-sub{margin-top:14px;font-size:clamp(17px, 4.6cqw, 22px);line-height:1.45;color:rgba(245,242,237,0.65);}

/* ---------- список вопросов ---------- */
.objfaq .objfaq-list{margin-top:28px;border-bottom:1px solid var(--objfaq-line);}
.objfaq .objfaq-item{position:relative;border-top:1px solid var(--objfaq-line);transition:border-color .3s ease;}
/* фон открытого вопроса — чуть светлее и шире списка (на телефоне — на всю ширину экрана) */
.objfaq .objfaq-item::before{
  content:"";
  position:absolute;
  top:-1px;bottom:-1px;
  left:calc(-1 * var(--objfaq-pad));right:calc(-1 * var(--objfaq-pad));
  background:rgba(245,242,237,0.035);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.objfaq .objfaq-item.is-open::before{opacity:1;}
.objfaq .objfaq-item.is-open,
.objfaq .objfaq-item.is-open + .objfaq-item{border-top-color:transparent;}
.objfaq .objfaq-list:has(.objfaq-item:last-child.is-open){border-bottom-color:transparent;}

.objfaq .objfaq-q{
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0, 1fr) 22px;
  column-gap:12px;
  align-items:start;
  width:100%;
  min-height:48px;
  padding:22px 0;
  border:0;
  background:none;
  color:var(--objekt-color-cream);
  text-align:left;
  -webkit-tap-highlight-color:transparent;
}
.objfaq .objfaq-q:focus-visible{outline:2px solid var(--objekt-color-accent) !important;outline-offset:2px;}
.objfaq .objfaq-num{font-size:16px;line-height:1.45;font-variant-numeric:tabular-nums;color:var(--objekt-color-accent);}
.objfaq .objfaq-q__text{font-size:clamp(17px, 4.6cqw, 21px);line-height:1.4;color:rgba(245,242,237,0.92);transition:color .2s;}
/* «+ / −»: две тонкие линии, вертикальная поворачивается и исчезает */
.objfaq .objfaq-sign{position:relative;display:block;width:22px;height:22px;margin-top:calc((1.4em - 22px) / 2);font-size:clamp(17px, 4.6cqw, 21px);color:rgba(169,150,125,0.85);transition:color .2s;}
.objfaq .objfaq-sign i{position:absolute;left:0;top:50%;width:22px;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .25s ease, opacity .25s ease;}
.objfaq .objfaq-sign i:last-child{transform:rotate(90deg);}
.objfaq .objfaq-item.is-open .objfaq-sign i:last-child{transform:rotate(180deg);opacity:0;}
.objfaq .objfaq-item.is-open .objfaq-sign{color:var(--objekt-color-accent);}
@media (hover:hover){
  .objfaq .objfaq-q:hover .objfaq-q__text{color:var(--objekt-color-cream);}
  .objfaq .objfaq-q:hover .objfaq-sign{color:var(--objekt-color-accent);}
}

/* ---------- ответ ---------- */
.objfaq .objfaq-a{
  position:relative;
  display:grid;
  grid-template-rows:0fr;
  visibility:hidden;
  transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1), visibility 0s linear .35s;
}
.objfaq .objfaq-item.is-open .objfaq-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1);}
.objfaq .objfaq-a__inner{min-height:0;overflow:hidden;}
.objfaq .objfaq-a__body{
  padding:0 0 26px 56px;
  opacity:0;
  transition:opacity .25s ease;
}
.objfaq .objfaq-item.is-open .objfaq-a__body{opacity:1;transition:opacity .35s ease .08s;}
.objfaq .objfaq-a__text{font-size:clamp(15px, 4.2cqw, 18px);line-height:1.6;color:rgba(245,242,237,0.7);}
.objfaq .objfaq-a__text p + p,
.objfaq .objfaq-a__text p + ul,
.objfaq .objfaq-a__text ul + p,
.objfaq .objfaq-a__text p + ol,
.objfaq .objfaq-a__text ol + p{margin-top:.8em;}
.objfaq .objfaq-a__text ul,
.objfaq .objfaq-a__text ol{margin:0;padding-left:1.2em;}
.objfaq .objfaq-a__text li{margin:.25em 0;padding:0;}
.objfaq .objfaq-a__text strong,
.objfaq .objfaq-a__text b{color:var(--objekt-color-cream);font-weight:600;}
.objfaq .objfaq-a__text a{color:var(--objekt-color-accent);text-decoration:underline;text-underline-offset:3px;}
.objfaq .objfaq-a__text a:focus-visible{outline:2px solid var(--objekt-color-accent) !important;outline-offset:2px;}

/* ---------- аудио (телефон: кнопка + подпись / волна + время / эксперт) ---------- */
.objfaq .objfaq-player{margin-top:26px;}
.objfaq .objfaq-audio{display:none;}
.objfaq .objfaq-player__row{display:grid;grid-template-columns:52px minmax(0, 1fr);grid-template-areas:"play label" "track track";align-items:center;column-gap:16px;row-gap:14px;}
.objfaq .objfaq-play{
  grid-area:play;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--objekt-color-accent);
  color:var(--objekt-color-bg);
  transition:background-color .2s;
}
.objfaq .objfaq-play:hover{background:var(--objekt-color-accent-hover);}
.objfaq .objfaq-play:focus-visible{outline:2px solid var(--objekt-color-cream) !important;outline-offset:3px;}
.objfaq .objfaq-play svg{width:24px;height:24px;}
.objfaq .objfaq-play .objfaq-ico-play{margin-left:2px;}
.objfaq .objfaq-ico-pause,
.objfaq .objfaq-player.is-playing .objfaq-ico-play,
.objfaq .objfaq-player.is-loading .objfaq-ico-play,
.objfaq .objfaq-player.is-loading .objfaq-ico-pause{display:none;}
.objfaq .objfaq-player.is-playing:not(.is-loading) .objfaq-ico-pause{display:block;}
.objfaq .objfaq-spinner{display:none;width:20px;height:20px;border:2px solid rgba(28,26,26,0.3);border-top-color:var(--objekt-color-bg);border-radius:50%;animation:objfaqSpin .8s linear infinite;}
.objfaq .objfaq-player.is-loading .objfaq-spinner{display:block;}
@keyframes objfaqSpin{to{transform:rotate(360deg);}}
.objfaq .objfaq-player__label{grid-area:label;font-size:16px;line-height:1.3;color:var(--objekt-color-cream);}
.objfaq .objfaq-player__track{grid-area:track;position:relative;display:flex;align-items:center;gap:16px;min-width:0;}
.objfaq .objfaq-wave{
  flex:1 1 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:34px;
  min-width:0;
  cursor:pointer;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
}
.objfaq .objfaq-wave:focus-visible{outline:2px solid var(--objekt-color-accent) !important;outline-offset:4px;}
.objfaq .objfaq-wave i{display:block;flex:0 0 2px;width:2px;min-height:2px;border-radius:1px;background:rgba(245,242,237,0.3);transition:background-color .15s;}
.objfaq .objfaq-wave i.is-played{background:var(--objekt-color-accent);}
.objfaq .objfaq-time{flex-shrink:0;font-size:15px;font-variant-numeric:tabular-nums;color:rgba(245,242,237,0.6);white-space:nowrap;}
.objfaq .objfaq-error{position:absolute;inset:0;display:flex;align-items:center;gap:14px;background:var(--objekt-color-bg);font-size:14px;color:rgba(245,242,237,0.7);}
.objfaq .objfaq-item.is-open .objfaq-error{background:#222020;}
.objfaq .objfaq-error[hidden]{display:none;}
.objfaq .objfaq-retry{padding:6px 14px;border:1px solid var(--objekt-color-accent);border-radius:999px;background:none;color:var(--objekt-color-accent);font-size:14px;}
.objfaq .objfaq-retry:focus-visible{outline:2px solid var(--objekt-color-accent) !important;outline-offset:2px;}
.objfaq .objfaq-expert{margin-top:12px;font-size:14px;line-height:1.4;color:rgba(245,242,237,0.5);}

/* расшифровка: раскрывается под подписью эксперта */
.objfaq .objfaq-tr-btn{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:4px 0;border:0;background:none;font-size:14px;color:var(--objekt-color-accent);}
.objfaq .objfaq-tr-btn svg{width:14px;height:14px;transition:transform .25s ease;}
.objfaq .objfaq-tr-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.objfaq .objfaq-tr-btn:focus-visible{outline:2px solid var(--objekt-color-accent) !important;outline-offset:2px;}
.objfaq .objfaq-tr{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s cubic-bezier(.2,.7,.2,1), visibility 0s linear .3s;}
.objfaq .objfaq-tr.is-open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .3s cubic-bezier(.2,.7,.2,1);}
.objfaq .objfaq-tr__inner{min-height:0;overflow:hidden;}
.objfaq .objfaq-tr__text{margin-top:10px;padding-left:16px;border-left:1px solid var(--objekt-color-accent);font-size:15px;line-height:1.6;color:rgba(245,242,237,0.65);}
.objfaq .objfaq-tr__text p + p{margin-top:.7em;}

/* ---------- «Не нашли свой вопрос?» ---------- */
.objfaq .objfaq-cta{margin-top:32px;}
.objfaq .objfaq-cta__line{display:none;}
.objfaq .objfaq-cta__note{font-size:17px;line-height:1.4;color:var(--objekt-color-cream);}
.objfaq .objfaq-ask{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;
  min-height:56px;
  margin-top:16px;
  padding:16px 32px;
  border:1px solid var(--objekt-color-accent);
  background:transparent;
  color:var(--objekt-color-accent);
  font-size:17px;
  line-height:1.2;
  text-decoration:none;
  transition:background-color .25s ease, color .25s ease;
}
.objfaq .objfaq-ask:hover,
.objfaq .objfaq-ask:focus,
.objfaq .objfaq-ask:visited{color:var(--objekt-color-accent);text-decoration:none;}
.objfaq .objfaq-ask svg{width:20px;height:20px;transition:transform .25s ease;}
@media (hover:hover){
  .objfaq .objfaq-ask:hover{background:var(--objekt-color-accent);color:var(--objekt-color-bg);}
  .objfaq .objfaq-ask:hover svg{transform:translateX(4px);}
}
.objfaq .objfaq-ask:focus-visible{outline:2px solid var(--objekt-color-accent) !important;outline-offset:3px;}

@container objfaq (min-width: 390px){
  .objfaq .objfaq-wrap{--objfaq-pad:20px;}
}

/* ---------- планшет ---------- */
@container objfaq (min-width: 700px){
  .objfaq .objfaq-wrap{--objfaq-pad:32px;}
  .objfaq .objfaq-title{font-size:clamp(34px, 5.6cqw, 52px);}
  .objfaq .objfaq-sub{font-size:clamp(17px, 2.4cqw, 22px);}
  .objfaq .objfaq-q{grid-template-columns:56px minmax(0, 1fr) 22px;column-gap:16px;padding:26px 0;}
  .objfaq .objfaq-q__text{font-size:clamp(17px, 2.4cqw, 21px);}
  .objfaq .objfaq-sign{font-size:clamp(17px, 2.4cqw, 21px);}
  .objfaq .objfaq-a__body{padding:0 38px 30px 72px;}
  .objfaq .objfaq-a__text{font-size:clamp(15px, 2.1cqw, 18px);}
  /* плеер в одну строку: кнопка, подпись, волна, время */
  .objfaq .objfaq-player{margin-top:28px;}
  .objfaq .objfaq-player__row{grid-template-columns:48px auto minmax(0, 1fr);grid-template-areas:"play label track";column-gap:20px;}
  .objfaq .objfaq-play{width:48px;height:48px;}
  .objfaq .objfaq-player__track{gap:28px;padding-left:12px;}
  .objfaq .objfaq-wave{flex:0 1 317px;}
  .objfaq .objfaq-ask{display:inline-flex;width:auto;}
  .objfaq .objfaq-item::before{left:-24px;right:-24px;}
}

/* ---------- компьютер: две колонки, левая липнет ---------- */
@container objfaq (min-width: 1080px){
  .objfaq .objfaq-wrap{
    display:grid;
    grid-template-columns:38% minmax(0, 1fr);        /* левая колонка — 38% ширины, зазор берётся из правой */
    column-gap:clamp(40px, 5cqw, 96px);
    align-items:start;
  }
  .objfaq .objfaq-side{
    display:block;
    position:sticky;
    top:var(--objfaq-top, 32px);
  }
  .objfaq .objfaq-eyebrow{font-size:var(--objekt-fs-caption);margin-bottom:22px;gap:24px;}
  .objfaq .objfaq-title{font-size:clamp(34px, 3.4cqw, 60px);}
  .objfaq .objfaq-sub{margin-top:24px;font-size:clamp(17px, 1.3cqw, 22px);max-width:22em;}
  .objfaq .objfaq-list{margin-top:0;}
  .objfaq .objfaq-cta{margin-top:72px;}
  .objfaq .objfaq-cta--solo{margin-top:0;}
  .objfaq .objfaq-cta__line{display:block;width:64px;height:1px;margin-bottom:36px;background:rgba(245,242,237,0.25);}
  .objfaq .objfaq-cta--solo .objfaq-cta__line{display:none;}
  .objfaq .objfaq-q__text{font-size:clamp(17px, 1.25cqw, 21px);}
  .objfaq .objfaq-sign{font-size:clamp(17px, 1.25cqw, 21px);}
  .objfaq .objfaq-a__text{font-size:clamp(15px, 1.05cqw, 18px);}
  .objfaq .objfaq-ask{margin-top:20px;padding:18px 32px;}
}
@container objfaq (min-width: 1200px){
  .objfaq .objfaq-wrap{width:min(81.77083cqw, 1600px);margin:0 auto;padding:0;}
}

@media (prefers-reduced-motion: reduce){
  .objfaq .objfaq-a,
  .objfaq .objfaq-item.is-open .objfaq-a,
  .objfaq .objfaq-a__body,
  .objfaq .objfaq-item.is-open .objfaq-a__body,
  .objfaq .objfaq-tr,
  .objfaq .objfaq-tr.is-open,
  .objfaq .objfaq-item::before,
  .objfaq .objfaq-sign i{transition:none;}
}
