/* 04b — Full the Brief CTA
   Базовые стили = фрейм 1600 (абсолютная двухколоночная раскладка, h=292).
   С 1200 и ниже макет линейный: заголовок → подтекст → кнопка (потоком, зазоры из макета),
   декоративная рамка absolute справа. */

.brief {
  background: transparent;   /* фон общий */
  /* макет 1600: поля 30 → решением Alexa 24 */
  padding: 0 24px;
}

/* Сетка, а не абсолюты. Раньше заголовок стоял absolute в коробке с
   фиксированной min-height 292 из фрейма 1600. Как только колонка сужалась
   и заголовок становился пятистрочным (240 вместо 192), он вылезал за эту
   коробку и наезжал на кнопку — на 1280–1440 ровно на 4px.
   Теперь высоту задаёт содержимое: строка 1 — две колонки, строка 2 —
   кнопка во всю ширину, между ними зазор 44 из макета. min-height 292
   осталась нижней границей, но больше не потолок.
   На 1600 геометрия совпадает с прежней до пикселя: 192 + 44 + 56 = 292. */
.brief-inner {
  position: relative;
  display: grid;
  grid-template-columns: 46.6% 37.9% 1fr;  /* колонки из макета: 717 и 584 от 1540 */
  column-gap: 3.8%;                        /* зазор колонок из макета */
  grid-template-rows: 1fr auto;
  row-gap: 44px;                           /* от нижней кромки колонок до кнопки */
  min-height: 292px;                       /* фрейм 1600 */
  height: auto;
}

.brief-title {
  grid-area: 1 / 1;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 44px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.88px;
  text-transform: uppercase;
  color: #eaeaea;
}

.brief-br { display: none; }
/* Перенос после «Already have». В Figma он есть во фрейме 430 (109:74862) и
   ниже. Он и решает главную проблему узких ширин: без него первая строка
   заголовка длинная и проходит СКВОЗЬ верхнюю линию скобки. Включаем с 767,
   чтобы фрейм 768 остался буквально таким, как в файле — там переноса нет и
   пересечения тоже нет, контейнер широкий. */
@media (max-width: 539px) {
  .brief-br { display: inline; }
}

.brief-text {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.168px;
  color: #eaeaea;
}

.brief-text--desktop {
  grid-area: 1 / 2;
  /* В макете абзац стоит на 80 от верха колонки — но это следствие, а не
     правило: 80 + 112 = 192 — ровно высота заголовка. Колонки выровнены по
     НИЖНЕЙ кромке. Числом 80 это держалось только пока заголовок ровно
     четырёхстрочный; на промежуточных ширинах он становится пятистрочным,
     и низы расходились. Прижимаем к низу — отношение сохраняется само. */
  align-self: end;
}

.brief-text--mobile { display: none; }

/* декор 1600 — экспортированный SVG (верхняя линия 2px + правая кромка, радиус 18),
   в макете растянут по вертикали: top 6 / bottom 84 от фрейма 292 → высота 202 */
.brief-decor-img {
  position: absolute;
  top: 6px;
  right: 0;
  width: 763px;
  height: 202px;
  display: block;
}

/* декор 1200 и ниже — рамка 1px из макета.
   Ширина живёт в переменной, потому что от неё же считается предел текста:
   раньше это были два независимых числа, они разъехались, и заголовок
   заезжал на вертикальную линию скобки на КАЖДОЙ ширине до 1200. */
.brief-decor {
  display: none;
  position: absolute;
  right: 0;
  border-top: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;
  border-top-right-radius: 20px;
}

.brief-btn {
  grid-area: 2 / 1 / 3 / -1;   /* во всю ширину под обеими колонками */
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  border-radius: 14px;
  background: #f7f7f7; /* токен A/ww */
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
  text-decoration: none;
  color: #2c2c2c;
  white-space: nowrap;
  box-sizing: border-box;
}

/* --- 1200: линейная раскладка --- */
@media (max-width: 1199px) {
  .brief { padding: 0 16px; }
  .brief-inner {
    height: auto;
    min-height: 364px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 0 76px;   /* было в базе; линейная раскладка на него опирается */
    row-gap: 0;
  }
  .brief-title {
    width: auto;
    /* 905 — число фрейма 1200. Но между фреймами контейнер у́же, а скобка
       остаётся 254 и уезжает влево, поэтому предел берём по меньшему из двух:
       иначе первая строка проходит сквозь её верхнюю линию (проверено на 1100). */
    max-width: min(905px, calc(100% - 266px));
  }
  .brief-text--desktop {
    width: auto;
    max-width: 855px;
    align-self: flex-start; /* grid-only align-self:end must not right-align the flex layout */
    margin-top: 32px;
  }
  .brief-btn {
    margin-top: 48px;
    width: 100%;
  }
  .brief-decor-img { display: none; }
  .brief-decor {
    display: block;
    /* 44/48 Inter: видимая кромка капителей начинается на 8px ниже
       line-box. Линия выровнена по буквам, а не по невидимой коробке строки. */
    top: 16px;
    bottom: 180px; /* 48 gap + 56 button + 76 bottom padding: line ends with text */
    width: 254px;
    height: auto;
  }
}

/* --- 1024 --- */
@media (max-width: 1024px) {
  .brief-inner { min-height: 412px; }
  .brief-title { max-width: calc(100% - 286px); }   /* скобка 274 + воздух 12 */
  .brief-text--desktop { max-width: calc(100% - 242px); }
  .brief-decor { width: 274px; }
}

/* --- 768 --- */
@media (max-width: 1023px) {
  /* Figma 109:74863 (768): заголовок 593, подтекст 583,
     скобка 146×380 сверху 8, кнопка снизу. */
  .brief-inner { min-height: 488px; }
  /* 593 и 583 — числа кадра 768. Ниже него контейнер у́же, а скобка прижата
     к правому краю и едет влево: колонки должны отступать вместе с ней,
     иначе заголовок въезжает в линию. 146 — ширина скобки, 12 — воздух. */
  .brief-title { max-width: min(593px, calc(100% - 158px)); }
  .brief-text--desktop { max-width: min(583px, calc(100% - 153px)); }
  .brief-btn { margin-top: 76px; }
  .brief-decor {
    bottom: 208px; /* 76 gap + 56 button + 76 bottom padding */
    width: 146px;
  }
}

/* --- 431…540: между фреймами --- */
/* Кегль 44 из фрейма 768 в этой полосе уже не помещается: первая строка
   «Already have» шире, чем остаётся до скобки, и проходит сквозь её верхнюю
   линию. Берём ступень кегля из фрейма 430; всё остальное — от 768. */
@media (min-width: 431px) and (max-width: 540px) {
  .brief-title {
    font-size: 32px;
    line-height: 32px;
    letter-spacing: -0.64px;
  }
}

/* --- 430 --- */
/* Кадр 640 Framer (540–719): собственная текучая композиция. В Figma этой
   ширины нет, поэтому геометрия и типографика взяты с живого Framer-варианта:
   ширина текста 88%, 38/44, трекинг 0. */
@media (min-width: 540px) and (max-width: 719px) {
  /* Framer 640 — не масштабированный кадр, а текучая композиция:
     12px inset, контент 88%, два вертикальных gap по 44 и кнопка 52.
     На 692 это даёт 560px текста вместо замороженных 482px. */
  .brief-inner {
    min-height: 0;
    padding: 12px;
  }
  .brief-title {
    width: 88%;
    max-width: none;
    font-size: 38px;
    line-height: 44px;
    letter-spacing: 0;
  }
  .brief-text--desktop {
    width: 88%;
    max-width: none;
    align-self: flex-start;
    margin-top: 44px;
    line-height: 26px;
  }
  .brief-btn {
    width: 100%;
    height: 52px;
    margin-top: 44px;
  }
  .brief-decor {
    top: 20px; /* 38/44 Inter: оптический верх капителей = line-box + 8px */
    right: 12px;
    bottom: 108px; /* 44 gap + 52 button + 12 bottom inset */
    width: calc(12% - 3px); /* remaining 12% of the padded content width */
    height: auto;
  }
}

@media (max-width: 539px) {
  /* Figma 109:74862 (430): заголовок 306 (32/32, трекинг −0.64),
     подтекст 339 (16/24) сверху 248, скобка 157×363 сверху 5. */
  .brief { padding: 0 12px; }
  .brief-inner { min-height: 456px; }
  .brief-title {
    max-width: 306px;
    font-size: 32px;
    line-height: 32px;
    letter-spacing: -0.64px;
  }
  .brief-text--desktop { display: none; }
  .brief-text--mobile {
    display: block;
    max-width: 339px;
    margin-top: 24px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
  }
  .brief-btn { margin-top: 32px; }
  /* 157 — число фрейма 430. Ниже него контейнер у́же, скобка уезжает влево
     и встаёт под первую строку заголовка, поэтому ширина ограничена так,
     чтобы она начиналась после строки «Already have». Высота не фиксирована:
     нижний край следует за фактическим низом абзаца. 164 = 32 gap до кнопки
     + 56 кнопка + 76 нижний padding, поэтому линия не может зайти на кнопку. */
  .brief-decor {
    top: 12px; /* 32/32 Inter: оптический верх капителей ≈ inner + 12px */
    bottom: 164px;
    width: min(157px, calc(100% - 318px));
    height: auto;
  }
}

/* --- 375 --- */
@media (max-width: 375px) {
  .brief { padding: 0 13px; }
  .brief-inner { min-height: 512px; }
  .brief-title { max-width: 284px; }
  .brief-br { display: inline; }
  .brief-text--mobile { max-width: 279px; }
  /* Скобку на 375 и 320 Alexa отключила намеренно: на этой ширине она
     съедает строку и мешает читать. Решение зафиксировано 28.08.2026. */
  .brief-decor { display: none; }
}

/* --- 320 --- */
@media (max-width: 320px) {
  .brief { padding: 0 6px; }
  .brief-inner { min-height: 424px; }
  .brief-title {
    max-width: 242px;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: -0.48px;
  }
  .brief-text--mobile { max-width: 267px; margin-top: 32px; }
  .brief-btn { margin-top: 32px; height: 48px; }
}