@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/playfair-display-v40-cyrillic_latin-regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/playfair-display-v40-cyrillic_latin-italic.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/playfair-display-v40-cyrillic_latin-600.woff2') format('woff2');
  font-display: swap;
}

/* Переопределяем заголовки глобально */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif !important;
  text-transform: none;       /* убираем uppercase, если не нужен */
  letter-spacing: 0;          /* убираем лишние пробелы */
  font-weight: 600;           /* делаем полужирными, как в заголовках */
}

/* Добавляем слово "Меню" рядом с иконкой гамбургера */
.uk-navbar-toggle {
    position: relative;
    padding-left: 50px; /* освобождаем место слева для текста */
}

.uk-navbar-toggle::before {
    content: "Меню";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff; /* подберите под свой дизайн */
    white-space: nowrap;
}

ul.sigFreeClassic {
    text-align: center !important;
}

ul.sigFreeClassic li.sigFreeThumb {
    float: none !important;
    display: inline-block !important;
    vertical-align: top;           /* чтобы не прыгали по высоте */
    margin: 5px !important;        /* отступы, как мы уже настраивали */
}


/* ===== Десктоп (от 768px) ===== */
@media (min-width: 768px) {
  .joy-table {
    width: 100% !important;
    margin: 0; /* убрали max-width и центрирование */
  }

  .joy-table tr {
    display: flex;
    align-items: stretch;        /* ячейки одной высоты */
  }

  .joy-table td:first-child {
    flex: 1;                    /* текст занимает доступное место */
  }

  .joy-table td:last-child {
    position: relative;
    width: 45%;                 /* ширина правой колонки */
    min-width: 150px;
  }

  .joy-table td:last-child img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;   /* ← выравнивание влево, по центру вертикали */
  }
}

/* ===== Мобильные (до 767px) ===== */
@media (max-width: 767px) {
  .joy-table,
  .joy-table tbody,
  .joy-table tr,
  .joy-table td {
    display: block;
    width: 100% !important;
  }

  .joy-table tr {
    display: flex;
    flex-direction: column;
    height: auto !important;
  }

  .joy-table td:first-child {
    order: 2;                     /* текст под картинкой */
    margin-top: 20px;             /* отступ между картинкой и текстом */
  }

  .joy-table td:last-child {
    order: 1;                     /* картинка сверху */
    text-align: center;
  }

  .joy-table td:last-child img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* Отступ после всей таблицы, чтобы не слипалась */
  .joy-table {
    margin-bottom: 20px;
  }
}

/* ========= ДЕСКТОП: картинка слева, текст справа ========= */
@media (min-width: 768px) {
  .joy-table-img-left tr {
    display: flex;
    align-items: stretch;           /* ячейки одной высоты */
  }

  /* Левая ячейка — картинка */
  .joy-table-img-left td:first-child {
    position: relative;
    width: 20%;                     /* ширина блока под фото (можно менять) */
    min-width: 200px;
  }
  .joy-table-img-left td:first-child img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;   /* прижато к тексту */
  }

  /* Правая ячейка — текст */
  .joy-table-img-left td:last-child {
    flex: 1;                        /* занимает остаток */
    padding-left: 20px;             /* отступ от картинки */
  }
}

/* ========= МОБИЛЬНЫЕ: картинка сверху, текст снизу ========= */
@media (max-width: 767px) {
  .joy-table-img-left,
  .joy-table-img-left tbody,
  .joy-table-img-left tr,
  .joy-table-img-left td {
    display: block;
    width: 100% !important;
  }

  .joy-table-img-left tr {
    display: flex;
    flex-direction: column;
  }

  /* Порядок не трогаем: в HTML уже img → текст, так и остаётся */
  .joy-table-img-left td:first-child {
    text-align: center;             /* фото по центру */
    margin-bottom: 15px;           /* отступ до текста */
  }
  .joy-table-img-left td:first-child img {
    max-width: 100%;
    height: auto;
  }

  .joy-table-img-left td:last-child {
    text-align: left !important;    /* убираем возможное центрирование текста */
  }

  .joy-table-img-left {
    margin-bottom: 20px;
  }
}

/* ========== Глобальные правки для мобильных ========== */
@media (max-width: 480px) {
  /* Уменьшаем боковые отступы контейнера */
  .uk-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Если есть карточки с классом survey-card, делаем их отступы меньше */
  .survey-card {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* Чтобы поля ввода всегда умещались в родителя */
input.uk-input,
.survey-form input {
  width: 100% !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}