/* VisualEditor — стили блоков на страницах сайта: галереи, слайдеры, шаблоны.
 * Цвета и скругления меняются переменными, например:
 *   :root { --ve-brand: #0a7d55; --ve-block-radius: 6px; }
 */

/* ---------- галерея и слайдер ---------- */

.ve-gallery { margin: 0 0 1.5em; }
.ve-gallery > figure { position: relative; margin: 0; }
.ve-gallery img { display: block; width: 100%; height: auto; }

.ve-gallery--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ve-gallery--grid img { border-radius: calc(var(--ve-block-radius, 12px) * .6); }
.ve-gallery--grid figcaption { padding: 6px 2px 0; font-size: .875em; line-height: 1.4; opacity: .75; }

.ve-gallery--slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  border-radius: var(--ve-block-radius, 12px);
  background: var(--ve-slider-bg, #eef0f3);
}
.ve-gallery--slider > figure {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}
.ve-gallery--slider figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 32px 20px 14px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .62));
  color: #fff;
  font-size: .95em;
  line-height: 1.4;
}

.ve-ratio-16x9 img { aspect-ratio: 16 / 9; object-fit: cover; }
.ve-ratio-4x3 img { aspect-ratio: 4 / 3; object-fit: cover; }
.ve-ratio-3x2 img { aspect-ratio: 3 / 2; object-fit: cover; }
.ve-ratio-1x1 img { aspect-ratio: 1 / 1; object-fit: cover; }

/* элементы управления — их добавляет ve-content.js */
.ve-slider { margin: 0 0 1.5em; }
.ve-slider-stage { position: relative; }
.ve-slider .ve-gallery--slider { margin: 0; scrollbar-width: none; }
.ve-slider .ve-gallery--slider::-webkit-scrollbar { display: none; }
.ve-slider .ve-gallery--slider:focus-visible { outline: 3px solid var(--ve-brand, #1f4fbf); outline-offset: 3px; }

.ve-slider-btn {
  position: absolute;
  top: 50%;
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
  color: #14171c;
  cursor: pointer;
}
.ve-slider-btn:hover { background: #fff; }
.ve-slider-btn:focus-visible { outline: 3px solid var(--ve-brand, #1f4fbf); outline-offset: 2px; }
.ve-slider-prev { left: 14px; }
.ve-slider-next { right: 14px; }
.ve-slider-btn svg { display: block; }

.ve-slider-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding-top: 10px; }
.ve-slider-dot { position: relative; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.ve-slider-dot::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: currentColor;
  opacity: .25;
  transition: left .2s, width .2s, opacity .2s;
}
.ve-slider-dot[aria-current="true"]::before { left: 2px; width: 20px; background: var(--ve-brand, #1f4fbf); opacity: 1; }
.ve-slider-dot:focus-visible { outline: 2px solid var(--ve-brand, #1f4fbf); outline-offset: -2px; border-radius: 6px; }

@media (max-width: 600px) {
  .ve-slider-btn { width: 36px; height: 36px; margin-top: -18px; }
  .ve-slider-prev { left: 8px; }
  .ve-slider-next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ve-slider-dot::before { transition: none; }
}

/* ---------- блоки из шаблонов ---------- */

.ve-button {
  display: inline-block;
  padding: .7em 1.35em;
  border-radius: 8px;
  background: var(--ve-brand, #1f4fbf);
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.ve-button:hover { filter: brightness(1.08); color: #fff; }

.ve-card {
  display: flex;
  flex-direction: column;
  max-width: 380px;
  margin: 0 0 1.5em;
  overflow: hidden;
  border: 1px solid var(--ve-line, rgba(0, 0, 0, .12));
  border-radius: var(--ve-block-radius, 12px);
}
.ve-card-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ve-card-body { padding: 18px 20px 20px; }
.ve-card-body > :first-child { margin-top: 0; }
.ve-card-body > :last-child { margin-bottom: 0; }
.ve-card-price { color: var(--ve-brand, #1f4fbf); font-size: 1.2em; font-weight: 700; }

.ve-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin: 0 0 1.5em; }
.ve-cols > * > :first-child { margin-top: 0; }
.ve-cols > * > :last-child { margin-bottom: 0; }
.ve-cols img { display: block; width: 100%; height: auto; border-radius: var(--ve-block-radius, 12px); }
@media (max-width: 700px) { .ve-cols { grid-template-columns: 1fr; gap: 20px; } }

.ve-review {
  margin: 0 0 1.5em;
  padding: 22px 26px;
  border-left: 4px solid var(--ve-brand, #1f4fbf);
  border-radius: 0 var(--ve-block-radius, 12px) var(--ve-block-radius, 12px) 0;
  background: var(--ve-soft, rgba(0, 0, 0, .035));
}
.ve-review > p:first-child { margin-top: 0; font-size: 1.1em; }
.ve-review footer { display: flex; align-items: center; gap: 12px; font-size: .92em; line-height: 1.4; }
.ve-review-photo { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }

.ve-cta {
  margin: 0 0 1.5em;
  padding: 32px 28px;
  border-radius: var(--ve-block-radius, 12px);
  background: var(--ve-cta-bg, rgba(31, 79, 191, .07));
  text-align: center;
}
.ve-cta > :first-child { margin-top: 0; }
.ve-cta > :last-child { margin-bottom: 0; }

.ve-note {
  margin: 0 0 1.5em;
  padding: 16px 20px;
  border: 1px solid rgba(181, 137, 0, .35);
  border-radius: calc(var(--ve-block-radius, 12px) * .75);
  background: rgba(255, 196, 0, .12);
}
.ve-note > :first-child { margin-top: 0; }
.ve-note > :last-child { margin-bottom: 0; }

/* ---------- видео и посты из соцсетей ---------- */

.ve-embed { margin: 0 0 1.5em; }
.ve-embed iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: calc(var(--ve-block-radius, 12px) * .6);
  background: var(--ve-embed-bg, #f1f2f4);
}
.ve-embed--video iframe { height: auto; aspect-ratio: 16 / 9; }
.ve-embed--vertical { max-width: 340px; }
.ve-embed--vertical iframe { height: auto; aspect-ratio: 9 / 16; }
.ve-embed--instagram { max-width: 540px; }
.ve-embed--twitter { max-width: 550px; }
.ve-embed--telegram { max-width: 560px; }
.ve-embed--facebook.ve-embed--post { max-width: 500px; }
.ve-embed--center { margin-right: auto; margin-left: auto; }

/* ---------- якоря ---------- */

/* Переход по якорю: если у сайта закреплённая шапка, задайте её высоту,
   например :root { --ve-anchor-offset: 90px; } — иначе заголовок уйдёт под неё */
.ve-html [id] { scroll-margin-top: var(--ve-anchor-offset, 16px); }

/* картинка с AVIF выводится через <picture> — в галерее и слайдере она должна занимать всю ширину */
.ve-gallery picture { display: block; width: 100%; }