/*
 * Правки поверх CSS темы WordPress (подключается последним в src/app/(site)/layout.tsx).
 *
 * Телефон: поля форм 18px. В теме у полей 12–13px, а iOS Safari и встроенные браузеры мессенджеров
 * (Telegram, MAX) при фокусе на поле с шрифтом меньше 16px увеличивают всю страницу; maximum-scale=1 во viewport
 * встроенные браузеры не учитывают. 18px, а не 16px (25.09.2026): встроенный браузер MAX масштабирует текст страницы
 * по настройке шрифта в приложении, и 16px фактически становились меньше порога — нужен запас.
 * Высота полей (40–60px) вмещает 18px без изменений раскладки.
 */
@media (max-width: 768px) {
  input[type='text'],
  input[type='tel'],
  input[type='email'],
  input[type='number'],
  input[type='search'],
  input:not([type]),
  textarea,
  select {
    font-size: 18px !important;
  }
}

/*
 * Телефон и планшет: форма «Подготовим персональное предложение» внизу главной, статей, кейсов и страниц
 * (.forms, ContactFormSection) — те же размеры, что у формы на странице услуги (.service_form, 06.10.2026):
 * ширина до 526px, отступы, начертание заголовка, текст согласия 8px на 80% ширины.
 * Разметка форм разная (form_btns — flex-колонка, где <br> занимают строку), поэтому <br> скрыты,
 * а отступ до кнопки задан явно: 67px = как у формы услуги (23px + пустая строка перед кнопкой).
 * На компьютере это синяя полоса во всю ширину — другой макет, не трогаем.
 */
@media (max-width: 768px) {
  .forms .container {
    max-width: 526px;
    padding: 28px 14px 34px;
  }
  .forms .form_title {
    color: #131B23;
    font-weight: 600;
  }
  .forms .form_title span {
    font-weight: 700;
  }
  .forms .form,
  .forms form {
    gap: 0;
  }
  .forms .form .form_inputs input {
    padding: 12px;
  }
  .forms .form .form_btns {
    gap: 0;
    margin-top: 67px;
  }
  .forms .form .form_btns > br {
    display: none;
  }
  .forms .form .form_btns input {
    margin-top: 0;
  }
  .forms .form button,
  .forms .form form input[type=submit],
  .forms .form .form_btns input[type=submit] {
    border: 0;
    margin-top: 0;
  }
  .forms .form .checked_text {
    width: 80%;
    margin: 15px auto 0;
    padding-left: 0;
  }
  .forms .form .checked_text span,
  .forms .form .form_btns span {
    color: #878787;
    font-size: 8px;
  }
  .forms .social_links {
    margin-top: 23px;
  }
}

/*
 * Телефон: под кнопкой «Все кейсы» / «Все статьи» тема оставляла 84px + отступ следующей секции —
 * около 150px пустоты (06.10.2026). Теперь до заголовка следующего блока ~88px, как между остальными блоками.
 * Только секции с кнопкой: тот же класс .articles у блога и страниц статей.
 */
@media (max-width: 768px) {
  .articles:has(.all_btn) {
    padding-bottom: 112px;
  }
  .articles .all_btn {
    bottom: 24px;
  }
}

/*
 * Карточки кейсов и статей (.articles_item): фон — <picture> с AVIF/WebP нужной ширины (CardCover в CasesTeaser.tsx)
 * вместо CSS background с оригиналом до 5,5 МБ (09.10.2026). Пока картинка грузится — тёмная подложка,
 * на ней белый текст карточки читается сразу.
 */
.articles_item {
  position: relative;
  overflow: hidden;
  background-color: #313940;
}
.articles_item__bg,
.articles_item__bg img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.articles_item__bg img {
  object-fit: cover;
}
.articles_item .articles_info {
  position: relative;
  z-index: 1;
}

/*
 * Картинки блоков темы через <picture class="mk-pic"> с AVIF/WebP (src/components/site/MediaPicture.tsx, 09.10.2026).
 * display: contents — обёртка не создаёт свой блок, вёрстка темы видит <img> на прежнем месте.
 */
.mk-pic {
  display: contents;
}

/* «Что мы поставляем»: фон карточки был CSS background с оригиналом — теперь <img> под текстом */
.deliver_item {
  position: relative;
  overflow: hidden;
}
.deliver_item__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.deliver_item .deliver_info {
  position: relative;
  z-index: 1;
}

/* фон нижней формы на компьютере: AVIF 3 КБ / WebP 5 КБ вместо PNG 55 КБ; браузер без image-set с type() берёт PNG */
@media (min-width: 769px) {
  .forms {
    background-image: url('/wp-content/themes/maklean/assets/images/form_bg.png');
    background-image: image-set(
      url('/wp-content/themes/maklean/assets/images/form_bg.avif') type('image/avif'),
      url('/wp-content/themes/maklean/assets/images/form_bg.webp') type('image/webp'),
      url('/wp-content/themes/maklean/assets/images/form_bg.png') type('image/png')
    );
  }
}