/* Tetris — CTA-баннер «Нужен доступ» (ТЗ 06). Поля — стиль B (на терракоте) */

.tt-cta {
    background: var(--tt-brand);
    padding: 52px 0;
}
.tt-cta__inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: center;
}
.tt-cta__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tt-cta__title {
    font-family: var(--tt-font-head);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: #fff;
}
.tt-cta__subtitle {
    font-family: var(--tt-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--tt-on-brand);
}

.tt-cta__form-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tt-cta__row {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}
.tt-cta__row .tt-field { flex: 1; }
.tt-cta__label { color: #fff; }
.tt-cta__submit { white-space: nowrap; }
.tt-cta__consent {
    font-family: var(--tt-font-body);
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

/* Поля на терракотовой подложке (стиль B) */
.tt-input--brand {
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.tt-input--brand::placeholder { color: rgba(255, 255, 255, 0.7); }
.tt-input--brand:focus { border-color: #fff; background: rgba(255, 255, 255, 0.18); }

/* CF7 внутри баннера — приводим к стилю B.
   Структура CF7: .wpcf7-form > .tt-form__row (2 поля) + <p>submit.
   Держим всё в один ряд: имя + телефон + кнопка (align-items:flex-end). */
.tt-cta__cf7 .wpcf7-form {
    position: relative;
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: nowrap;
}
.tt-cta__cf7 .tt-form__row {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex: 1 1 auto;
    min-width: 0;
}
.tt-cta__cf7 .tt-form__row p { flex: 1 1 0; min-width: 0; }
.tt-cta__cf7 p { margin: 0; }
/* Скрытые служебные блоки CF7 не должны занимать место в ряду.
   .wpcf7-response-output (сообщение валидации) с flex-wrap:nowrap не мог перенестись
   на новую строку и распирал ряд по ширине (текст «уезжал» вправо за контейнер).
   Выносим его абсолютом под форму — на ширину ряда он больше не влияет. */
.tt-cta__cf7 .wpcf7-form > div[style*="display: none"],
.tt-cta__cf7 .screen-reader-response { flex: 0 0 auto; }
.tt-cta__cf7 .wpcf7-response-output {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 8px 0 0;
    font-family: var(--tt-font-body);
    font-size: 13px;
    color: #fff;
}
.tt-cta__cf7 > .wpcf7 { width: 100%; }
.tt-cta__cf7 .wpcf7-submit { flex: 0 0 auto; }
.tt-cta__cf7 label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--tt-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fff;
}
.tt-cta__cf7 label br { display: none; }
.tt-cta__cf7 .wpcf7-form-control-wrap { display: block; width: 100%; }
.tt-cta__cf7 input.wpcf7-form-control:not([type=submit]) {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--tt-radius);
    background: rgba(255, 255, 255, 0.1);
    padding: 12px 14px;
    font-family: var(--tt-font-body);
    font-size: 16px;
    color: #fff;
    outline: none;
    transition: border-color var(--tt-t-base), background-color var(--tt-t-base);
}
.tt-cta__cf7 input.wpcf7-form-control:not([type=submit])::placeholder { color: rgba(255, 255, 255, 0.7); }
.tt-cta__cf7 input.wpcf7-form-control:not([type=submit]):focus { border-color: #fff; background: rgba(255, 255, 255, 0.18); }
.tt-cta__cf7 input.wpcf7-submit {
    border: none;
    border-radius: var(--tt-radius);
    background: var(--tt-action);
    color: #fff;
    padding: 0.95em 1.9em;
    font-family: var(--tt-font-body);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--tt-t-base), transform var(--tt-t-base);
}
@media (hover: hover) and (pointer: fine) {
    .tt-cta__cf7 input.wpcf7-submit:hover { background: var(--tt-action-hover); transform: translateY(-2px); }
}

/* ---- Адаптив ---- */
@media (max-width: 991px) {
    .tt-cta__inner { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 575px) {
    .tt-cta { padding: 32px 0; }
    .tt-cta__title { font-size: 22px; }
    .tt-cta__row { flex-direction: column; align-items: stretch; }
    .tt-cta__cf7 .wpcf7-form { flex-direction: column; align-items: stretch; flex-wrap: wrap; }
    .tt-cta__cf7 .tt-form__row { flex-direction: column; align-items: stretch; }
    .tt-cta__cf7 p { min-width: 0; }
    .tt-cta__submit,
    .tt-cta__cf7 input.wpcf7-submit { width: 100%; height: 50px; padding: 0; }
}