/* AVE COFFEE - согласование Elementor с темой.

   Задача файла: не дать Elementor подменять нашу дизайн-систему.
   Elementor расставляет блоки, оформление приходит из components.css
   через CSS-классы, назначенные виджетам. */

/* ---------- Контейнеры ---------- */

/* Elementor держит собственную максимальную ширину 1140px и добавляет всем
   контейнерам padding 10px. Из-за этого контент оказывается уже шапки,
   а наши отступы не применяются. Возвращаем свою сетку. */

.e-con,
.e-con-inner {
  --container-max-width: var(--container-max);
}

/* Секция - на всю ширину, вертикальные отступы наши */
.elementor-element.e-con.section {
  padding-inline: 0;
  padding-block: var(--section-py);
}

/* Контейнер - наша максимальная ширина и боковые поля */
.elementor-element.e-con.container {
  max-width: var(--container-max);
  padding-inline: var(--container-pad);
  padding-block: 0;
}

/* Вложенные раскладки своих отступов не добавляют */
.elementor-element.e-con.grid,
.elementor-element.e-con.split,
.elementor-element.e-con.hero__inner,
.elementor-element.e-con.cross-promo,
.elementor-element.e-con.places,
.elementor-element.e-con.menu-grid,
.elementor-element.e-con.cta__contacts {
  padding: 0;
}

/* Hero - вертикальные отступы секции */
.elementor-element.e-con.hero {
  padding-inline: 0;
  padding-block: var(--section-py);
}

/* CTA-блок: скруглённая карточка на тёмном фоне */
.elementor-element.e-con.cta {
  padding: 56px 40px;
  border-radius: var(--r-lg);
  background: var(--c-brand-dark);
  text-align: center;
  align-items: center;
}

@media (max-width: 767px) {
  .elementor-element.e-con.cta {
    padding: 40px 24px;
  }
}

/* Карточки - свои внутренние поля */
.elementor-element.e-con.card {
  padding: 32px;
}

.elementor-element.e-con.service-card {
  padding: 0;
  overflow: hidden;
}

.elementor-element.e-con.service-card > *:not(.elementor-widget-image) {
  margin-inline: 28px;
}

.elementor-element.e-con.service-card > .elementor-widget-button {
  margin-bottom: 28px;
}

.elementor-element.e-con.stat {
  padding: 0;
  text-align: center;
}

/* ---------- Сетки ---------- */

/* Elementor принудительно делает контейнерам display:flex со своей
   специфичностью, из-за чего наши grid-раскладки не срабатывают.
   Возвращаем grid там, где он нужен, и свой шаг сетки вместо gap:20px. */

.elementor-element.e-con.hero__inner,
.elementor-element.e-con.split,
.elementor-element.e-con.grid,
.elementor-element.e-con.cross-promo,
.elementor-element.e-con.places,
.elementor-element.e-con.menu-grid,
.elementor-element.e-con.specs {
  display: grid;
  gap: var(--ave-gap);
  align-items: stretch;
}

/* Карточки в сетке тянутся до одной высоты, а не по своему содержимому */
.elementor-element.e-con.grid > .e-con {
  height: 100%;
}

.elementor-element.e-con.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.elementor-element.e-con.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.elementor-element.e-con.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* На десктопе число колонок фиксируем: auto-fit при широком контейнере
   даёт лишние колонки и ломает задуманную раскладку. */
@media (min-width: 1025px) {
  .elementor-element.e-con.grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .elementor-element.e-con.grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.elementor-element.e-con.hero__inner,
.elementor-element.e-con.split {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: center;
}

.elementor-element.e-con.menu-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.elementor-element.e-con.places {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.elementor-element.e-con.specs {
  gap: 0;
}

/* Карточки: Elementor уже даёт flex-колонку, нам нужен только прижатый вниз CTA */
.elementor-element.e-con.service-card,
.elementor-element.e-con.card {
  gap: 12px;
}

.elementor-element.e-con.service-card > .elementor-widget-button {
  margin-top: auto;
}

/* Изображение карточки услуги - на всю ширину, с кропом */
.elementor-element.e-con.service-card > .elementor-widget-image {
  margin: 0;
}

.e-con.service-card .elementor-widget-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}

/* Контакты в CTA - в строку, по центру */
.elementor-element.e-con.cta__contacts {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

/* ---------- Типографика ---------- */

/* Elementor по умолчанию сбрасывает отступы заголовков - возвращаем свои */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-primary);
  line-height: var(--lh-tight);
  color: var(--c-brand-dark);
}

.elementor-widget-heading h2.elementor-heading-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-h2);
  text-transform: uppercase;
}

.elementor-widget-text-editor {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-text);
}

/* Заголовок карточки: в узкой колонке длинные слова переносим,
   иначе их обрезает overflow карточки. */
.elementor-widget-heading.card__title .elementor-heading-title,
.elementor-widget-heading.cross-promo__title .elementor-heading-title {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* В тексте переносы не ставим - рвут слова некрасиво */
.elementor-widget-text-editor.card__text {
  overflow-wrap: break-word;
  hyphens: manual;
}

/* Карточка сервиса с иконкой.
   Elementor задаёт своим контейнерам ::before и ::after размером во всю
   карточку - из-за этого арка растягивалась на весь блок. Возвращаем
   свои размеры с нужной специфичностью. */
.elementor-element.e-con.card--icon {
  padding-top: 38px;
  position: relative;
  overflow: hidden;
}

.elementor-element.e-con.card--icon::before {
  content: "";
  position: static;
  display: block;
  width: 56px;
  height: 56px;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  inset: auto;
  margin: 0 0 18px;
  border-radius: 12px 12px 50% 50% / 12px 12px 45% 45%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
  opacity: 1;
  transform: none;
  transition: var(--transition);
}

.elementor-element.e-con.card--icon::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  width: auto;
  height: 6px;
  min-height: 0;
  max-height: none;
  margin: 0;
  border-radius: 0;
  background: var(--c-brand);
  opacity: 1;
  transform: none;
  transition: var(--transition);
}

.elementor-element.e-con.card--icon:hover::after {
  background: var(--c-accent);
}

/* Цвет арки: обычный - светло-голубой, при наведении - оранжевый.
   Сама картинка знака приходит из components.css по классу card--icon-* */
.elementor-element.e-con.card--icon::before {
  background-color: var(--c-brand-light);
}

.elementor-element.e-con.card--icon:hover::before {
  background-color: var(--c-accent);
}


.e-con.service-card .elementor-widget-heading.card__title .elementor-heading-title {
  font-size: var(--fs-h4);
  line-height: 1.25;
}

/* На тёмных секциях и в CTA текст светлеет вместе с заголовками.
   Селекторы Elementor перебивают наши правила из components.css,
   поэтому дублируем их здесь с нужной специфичностью. */
.section--dark .elementor-widget-heading .elementor-heading-title,
.section--dark .elementor-widget-text-editor,
.cta .elementor-widget-heading .elementor-heading-title,
.cta .elementor-widget-text-editor {
  color: var(--c-white);
}

.section--dark .elementor-widget-heading.eyebrow .elementor-heading-title,
.cta .elementor-widget-heading.eyebrow .elementor-heading-title {
  color: var(--c-brand-lighter);
}

.section--dark .elementor-widget-heading.stat__value .elementor-heading-title {
  color: var(--c-accent);
}

.section--dark .elementor-widget-heading.stat__label .elementor-heading-title {
  color: var(--c-brand-lighter);
}

/* Контакты в CTA - крупные белые ссылки */
.cta__contacts .elementor-widget-heading .elementor-heading-title,
.cta__contacts .elementor-widget-heading .elementor-heading-title a {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  color: var(--c-white);
  text-transform: none;
  letter-spacing: 0;
}

.cta__contacts .elementor-widget-heading .elementor-heading-title a:hover {
  color: var(--c-accent);
}

/* ---------- Кнопки ---------- */

/* Важно: класс из поля «CSS-классы» Elementor вешает на ОБЁРТКУ виджета
   (<div class="elementor-widget-button btn btn--primary">), а сама ссылка -
   это <a class="elementor-button"> внутри. Поэтому обёртку обнуляем,
   а оформление переносим на вложенную ссылку. */

.elementor-widget-button.btn {
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  box-shadow: none;
}

.elementor-widget-button.btn .elementor-button {
  display: inline-block;
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  line-height: 1.2;
  text-align: center;
  padding: 20px 40px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  transition: var(--transition);
}

/* Убираем внутренние отступы Elementor - размер задаём мы */
.elementor-widget-button.btn .elementor-button-content-wrapper,
.elementor-widget-button.btn .elementor-button-text {
  padding: 0;
  margin: 0;
}

.elementor-widget-button.btn--primary .elementor-button {
  background: var(--c-accent);
  color: var(--c-white);
}

.elementor-widget-button.btn--primary .elementor-button:hover {
  background: var(--c-accent-hover);
  color: var(--c-white);
}

.elementor-widget-button.btn--secondary .elementor-button {
  border-color: var(--c-brand);
  color: var(--c-brand-dark);
  padding: 18px 38px;
}

.elementor-widget-button.btn--secondary .elementor-button:hover {
  background: var(--c-brand);
  color: var(--c-white);
}

.elementor-widget-button.btn--on-dark .elementor-button {
  background: var(--c-white);
  color: var(--c-brand-dark);
}

@media (max-width: 1200px) {
  .elementor-widget-button.btn .elementor-button {
    padding: 15px 40px;
    font-size: 16px;
    min-width: 224px;
  }
}

@media (max-width: 767px) {
  .elementor-widget-button.btn .elementor-button {
    width: 100%;
    max-width: 317px;
    padding: 15px 30px;
  }
}

/* ---------- Изображения ---------- */

.elementor-widget-image img {
  border-radius: var(--r-lg);
}

/* Изображение без скругления - класс img--square на виджете */
.elementor-widget-image.img--square img {
  border-radius: 0;
}

/* ---------- Аккордеон FAQ ---------- */

.elementor-accordion .elementor-accordion-item {
  border: 0;
  margin-bottom: 16px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-bg-soft);
}

.elementor-accordion .elementor-tab-title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  color: var(--c-brand-dark);
  padding: 20px 28px;
}

.elementor-accordion .elementor-tab-content {
  border: 0;
  padding: 0 28px 24px;
  color: var(--c-text-muted);
}

/* ---------- Дисциплина отступов ---------- */

/* Расстояния между виджетами задаёт gap контейнера, а не отступы самих
   виджетов. Иначе внутри карточек к нашему gap:12px добавляется ещё
   40px от глобальной настройки Elementor. */
.e-con > .elementor-widget:not(:last-child) {
  margin-block-end: 0;
}

/* Пары «надзаголовок + заголовок» прижимаем друг к другу */
.elementor-widget-heading.eyebrow {
  margin-bottom: -8px;
}

/* ---------- Правки редактора ---------- */

/* В редакторе Elementor sticky-шапка перекрывает панель инструментов */
body.elementor-editor-active .site-header {
  position: static;
}