/****************************************
 * ОБЩИЙ КОНТЕЙНЕР
 ****************************************/
.me-blog-grid-wrapper {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
}

.me-blog-grid {
  width: 100% !important;
  max-width: 1040px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 колонки */
  gap: 28px !important;
  box-sizing: border-box !important;
}

/* 1 колонка на планшете/мобиле */
@media (max-width: 899px) {
  .me-blog-grid-wrapper {
    padding: 0 8px !important;
  }

  .me-blog-grid {
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/****************************************
 * КАРТОЧКА
 ****************************************/
.me-blog-card {
  background: #ffffff !important;
  border-radius: 30px !important;
  padding: 4px 24px 4px 4px !important;
  box-sizing: border-box !important;
  display: flex !important;
}

.me-blog-card-link {
  display: block !important;
  width: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}

.me-blog-card-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 32px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/************ КАРТИНКА (COVER) ************/
.me-blog-card-thumb {
  position: relative !important;
  flex: 0 0 180px !important;
  width: 180px !important;
  max-width: 40% !important;
  aspect-ratio: 9 / 10 !important;  /* около 180x200, но гибко */
  border-radius: 30px !important;
  overflow: hidden !important;
  background: #ddd !important;
}

.me-blog-card-thumb img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 30px !important;
  display: block !important;
}

/************ ТЕКСТ ************/
.me-blog-card-text {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
}

.me-blog-card-title {
  margin: 0 !important;
  padding: 0 !important;

  /* h5 по макету */
  font-family: 'Open Sans', sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 140% !important; /* ~28px */
  color: #181E1B !important;

  /* чтобы текст не вылезал, а переносился */
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
}

/****************************************
 * MOBILE (≤ 767px)
 * карточка 100% ширины, размеры из макета
 ****************************************/
@media (max-width: 767px) {

  .me-blog-card {
    padding: 2px 16px 2px 2px !important;
    border-radius: 24px !important;
  }

  .me-blog-card-inner {
    gap: 12px !important;
  }

  .me-blog-card-thumb {
    flex: 0 0 130px !important;
    width: 130px !important;
    max-width: 130px !important;
    aspect-ratio: 13 / 10 !important; /* 130x100 */
    border-radius: 24px !important;
  }

  .me-blog-card-thumb img {
    border-radius: 24px !important;
  }

  .me-blog-card-title {
    font-size: 14px !important;
    line-height: 145% !important; /* ~20px */
  }
}



/****************************************
 slider
 ****************************************/
 
 /* ===== Recommended posts slider: hide arrows ===== */
.me-rec-slider .swiper-button-prev,
.me-rec-slider .swiper-button-next {
  display: none !important;
}

/* ===== Pagination container ===== */
.me-rec-slider .swiper-pagination {
  position: relative !important;
  margin-top: 32px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
}

/* ===== Default dot ===== */
.me-rec-slider .swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(245, 246, 240, 0.35) !important; /* светлая точка на тёмном фоне */
  opacity: 1 !important;
  margin: 0 !important; /* Swiper иногда ставит margin-inline */
  transition: width 0.2s ease, background 0.2s ease, opacity 0.2s ease !important;
}

/* ===== Active dot: capsule ===== */
.me-rec-slider .swiper-pagination-bullet-active {
  width: 26px !important;            /* вытянутая активная */
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(245, 246, 240, 0.9) !important;  /* активная ярче */
}

/* Если вдруг блок на светлом фоне — можно автоматически затемнить */
body:not(.elementor-editor-active) .me-rec-slider.light-dots .swiper-pagination-bullet {
  background: rgba(20, 51, 40, 0.25) !important;
}
body:not(.elementor-editor-active) .me-rec-slider.light-dots .swiper-pagination-bullet-active {
  background: rgba(20, 51, 40, 0.8) !important;
}

/* =====================================================
   Recommended posts slider — card tweaks
   ===================================================== */

/* Ограничиваем карточку в слайдере */
.me-rec-slider .me-blog-card {
  height: auto;
}

/* Контейнер картинки */
.me-rec-slider .me-blog-card-thumb {
  width: 200px;
  height: 135px;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
}

/* Само изображение */
.me-rec-slider .me-blog-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Текстовая часть */
.me-rec-slider .me-blog-card-text {
  display: flex;
  align-items: center;
  padding-right: 12px;
}

/* Заголовок — компактнее, чем в каталоге */
.me-rec-slider .me-blog-card-title {
  font-size: 16px;
  line-height: 140%;
  font-weight: 600;
}

/* ===== Mobile adjustments ===== */
@media (max-width: 767px) {

  .me-rec-slider .me-blog-card-thumb {
    width: 130px;
    height: 100px;
    border-radius: 14px;
  }

  .me-rec-slider .me-blog-card-title {
    font-size: 14px;
    line-height: 145%;
  }
}





/* ===== Subscribe wrapper ===== */

.jetpack_subscription_widget,
#subscribe-blog {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  padding: 16px 0 !important;
  gap: 12px !important;

  width: 310px !important;
  height: 76px !important;

  isolation: isolate !important;
}

.jetpack_subscription_widget form,
#subscribe-blog form {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;

  width: 100% !important;
  position: relative !important;
}

.jetpack_subscription_widget input[type="email"],
#subscribe-blog input[type="email"] {
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
  gap: 10px !important;

  width: 310px !important;
  height: 44px !important;

  background: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 38px !important;

  font-family: 'Open Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 145% !important;
  color: #537363 !important;

  outline: none !important;
  box-shadow: none !important;
}


.jetpack_subscription_widget input[type="email"]::placeholder,
#subscribe-blog input[type="email"]::placeholder {
  color: #537363 !important;
  opacity: 1 !important;
}


.jetpack_subscription_widget input[type="submit"],
#subscribe-blog input[type="submit"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 24px !important;

  height: 44px !important;
  min-width: 95px !important;

  background: #FA5A68 !important;
  border-radius: 38px !important;
  border: none !important;

  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 145% !important;
  color: #F5F5F5 !important;

  cursor: pointer !important;
}



.jetpack_subscription_widget h2,
.jetpack_subscription_widget p,
#subscribe-blog h2,
#subscribe-blog p {
  display: none !important;
}


/* ===== Jetpack: fix hidden form ===== */

/* Скрываем только заголовок и описание */
.jetpack_subscription_widget h2.widgettitle,
#subscribe-blog h2.widgettitle,
.jetpack_subscription_widget #subscribe-text,
#subscribe-blog #subscribe-text {
  display: none !important;
}

/* Возвращаем p-контейнеры с полем и кнопкой (их часто случайно скрывают) */
.jetpack_subscription_widget #subscribe-email,
.jetpack_subscription_widget #subscribe-submit,
#subscribe-blog #subscribe-email,
#subscribe-blog #subscribe-submit {
  display: block !important;
  margin: 0 !important;
}

/* Контейнер /subscribe */
.jetpack_subscription_widget,
#subscribe-blog {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  padding: 16px 0 !important;
  gap: 12px !important;
  width: 200px !important;
  height: 76px !important;
  isolation: isolate !important;
}

/* Форма в одну строку */
.jetpack_subscription_widget form,
#subscribe-blog form {
  position: relative !important;
  width: 200px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
}

/* Email input */
.jetpack_subscription_widget input[type="email"],
#subscribe-blog input[type="email"] {
  width: 200px !important;
  height: 44px !important;

  background: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 38px !important;

  padding: 12px 16px !important;

  font-family: 'Open Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 145% !important;
  color: #537363 !important;

  outline: none !important;
  box-shadow: none !important;
}

/* Placeholder */
.jetpack_subscription_widget input[type="email"]::placeholder,
#subscribe-blog input[type="email"]::placeholder {
  color: #537363 !important;
  opacity: 1 !important;
}

/* Кнопка: накладываем поверх справа как в Figma */
.jetpack_subscription_widget input[type="submit"],
#subscribe-blog input[type="submit"] {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;

  width: 95px !important;
  height: 44px !important;

  background: #FA5A68 !important;
  border-radius: 38px !important;
  border: none !important;

  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 145% !important;
  color: #F5F5F5 !important;

  cursor: pointer !important;
  z-index: 1 !important;
}

/* ===== Jetpack subscribe button (button tag) ===== */

.jetpack_subscription_widget form button[type="submit"],
#subscribe-blog form button[type="submit"]{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 95px !important;
  height: 44px !important;

  padding: 12px 24px !important;
  margin: 0 !important;

  background: #FA5A68 !important;
  color: #F5F5F5 !important;

  border: none !important;
  border-radius: 38px !important;
  box-shadow: none !important;

  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 145% !important;

  cursor: pointer !important;
  text-decoration: none !important;
}

/* Hover/Focus: убираем малиновый от Elementor и задаём наш */
.jetpack_subscription_widget form button[type="submit"]:hover,
.jetpack_subscription_widget form button[type="submit"]:focus,
.jetpack_subscription_widget form button[type="submit"]:active,
#subscribe-blog form button[type="submit"]:hover,
#subscribe-blog form button[type="submit"]:focus,
#subscribe-blog form button[type="submit"]:active{
  background: #FA5A68 !important;
  color: #F5F5F5 !important;
  outline: none !important;
  box-shadow: none !important;
}


/* ===== Remove Elementor padding around Jetpack subscribe ===== */

/* Обёртка шорткода в Elementor */
.elementor-widget-shortcode {
  padding: 0 !important;
}

/* Внутренний контейнер Elementor (если используется flex container) */
.elementor-widget-shortcode > .elementor-widget-container {
  padding: 0 !important;
}

/* На всякий случай: сам jetpack-блок */
.jetpack_subscription_widget {
  padding: 0 !important;
  margin: 0 !important;
}


/* ===== Make widget height = input height ===== */

.jetpack_subscription_widget,
#subscribe-blog {
  height: 44px !important;      /* вместо 76px */
  padding: 0 !important;        /* убираем 16px сверху/снизу */
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* контейнер Jetpack внутри (на случай если он добавляет свои отступы) */
.jetpack_subscription_widget .wp-block-jetpack-subscriptions__container,
#subscribe-blog .wp-block-jetpack-subscriptions__container {
  padding: 0 !important;
  margin: 0 !important;
}

/* форма ровно 44px */
.jetpack_subscription_widget form,
#subscribe-blog form {
  height: 44px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* p-обёртки внутри формы — часто дают лишнюю высоту */
.jetpack_subscription_widget #subscribe-email,
.jetpack_subscription_widget #subscribe-submit,
#subscribe-blog #subscribe-email,
#subscribe-blog #subscribe-submit {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}




/* ===== Jetpack subscribe: fluid layout ===== */

/* Сам виджет — тянется по ширине контейнера */
.jetpack_subscription_widget,
#subscribe-blog {
  width: 100% !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
}

/* Внутренний контейнер Jetpack */
.jetpack_subscription_widget .wp-block-jetpack-subscriptions__container,
#subscribe-blog .wp-block-jetpack-subscriptions__container {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Форма — flex-строка на всю ширину */
.jetpack_subscription_widget form,
#subscribe-blog form {
  width: 100% !important;
  height: 44px !important;

  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  margin: 0 !important;
}

/* p-обёртки Jetpack — убираем влияние */
.jetpack_subscription_widget #subscribe-email,
.jetpack_subscription_widget #subscribe-submit,
#subscribe-blog #subscribe-email,
#subscribe-blog #subscribe-submit {
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
}

/* ===== INPUT ===== */
/* занимает всё доступное место */
.jetpack_subscription_widget input[type="email"],
#subscribe-blog input[type="email"] {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 44px !important;

  padding: 12px 16px !important;

  background: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 38px !important;

  font-family: 'Open Sans', sans-serif !important;
  font-size: 14px !important;
  line-height: 145% !important;
  color: #537363 !important;

  outline: none !important;
  box-shadow: none !important;
}

/* ===== BUTTON ===== */
/* всегда фиксированной ширины */
.jetpack_subscription_widget button[type="submit"],
#subscribe-blog button[type="submit"] {
  flex: 0 0 95px !important;
  width: 95px !important;
  height: 44px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 12px 24px !important;
  margin: 0 !important;

  background: #FA5A68 !important;
  color: #F5F5F5 !important;

  border: none !important;
  border-radius: 38px !important;

  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 145% !important;

  cursor: pointer !important;
}

/* Hover / focus — без влияния Elementor */
.jetpack_subscription_widget button[type="submit"]:hover,
.jetpack_subscription_widget button[type="submit"]:focus,
#subscribe-blog button[type="submit"]:hover,
#subscribe-blog button[type="submit"]:focus {
  background: #FA5A68 !important;
  color: #F5F5F5 !important;
  outline: none !important;
  box-shadow: none !important;
}