/*
 * Блок brief (blocks/brief.php): анкета в две колонки — поля ввода, группы вариантов капсулами, согласие и кнопка.
 */

.brief__head { max-width: 860px; margin-bottom: 40px; }
.brief__title { color: var(--c-ink); font-size: 48px; font-weight: 700; line-height: 1.1; letter-spacing: -.04em; }
.brief__lead { margin-top: 20px; color: var(--c-muted); font-size: 20px; line-height: 1.6; }

.brief__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px; padding: 44px; border: 1px solid var(--c-line); border-radius: 28px; background: #f7faff; }
.brief__field { display: grid; gap: 10px; color: var(--c-ink); font-size: 16px; font-weight: 700; }
.brief__field--wide { grid-column: 1 / -1; }
.brief__input { width: 100%; min-height: 58px; padding: 15px 20px; border: 1px solid var(--c-line); border-radius: 18px; background: #fff; color: var(--c-ink); font: 400 16px/1.4 var(--font); }
.brief__input::placeholder { color: #8795c8; }
.brief__input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 4px rgba(6, 71, 255, .12); }
.brief__input.is-error { border-color: var(--c-err); }
.brief__area { min-height: 120px; resize: vertical; }

.brief__group { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.brief__group legend { margin-bottom: 12px; padding: 0; color: var(--c-ink); font-size: 16px; font-weight: 700; }
.brief__options { display: flex; flex-wrap: wrap; gap: 10px; }
.brief__option { position: relative; cursor: pointer; }
.brief__option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.brief__option span {
    display: inline-flex; align-items: center; min-height: 46px; padding: 10px 20px;
    border: 1px solid var(--c-line); border-radius: var(--pill); background: #fff; color: var(--c-ink); font-size: 15px; font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.brief__option:hover span { border-color: var(--c-primary); }
.brief__option input:checked + span { border-color: var(--c-primary); background: var(--c-primary); color: #fff; }
.brief__option input:focus-visible + span { outline: 3px solid #849fff; outline-offset: 3px; }

.brief__submit { display: grid; gap: 20px; justify-items: start; }

@media (max-width: 800px) { .brief__form { grid-template-columns: 1fr; padding: 28px 22px; } }
@media (max-width: 640px) {
    .brief__title { font-size: var(--fs-h2-m); }
    .brief__lead { font-size: 17px; }
    .brief__submit .btn { width: 100%; }
}