/**
 * Блоки текста новости из визуального редактора: галерея, слайдер, цитата (кнопки /local/js/cams/news-editor).
 * Поведение — news-content.js, просмотр на весь экран — lightbox.js. news.css не трогаем: он приходит из статики.
 */

/* ---------- Фото, открывающиеся на весь экран ---------- */

.news-article__content img[data-zoom] { cursor: zoom-in; }
.news-article__content img[data-zoom]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Галерея: сетка фото (как .news-article__gallery статики) ---------- */

.news-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 32px;
}

.news-gallery:has(> img:nth-of-type(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.news-gallery:has(> img:only-of-type) { grid-template-columns: minmax(0, 1fr); }

.news-gallery > img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 375 / 439;
  object-fit: cover;
  border: 1px solid var(--line);
}

.news-gallery:has(> img:only-of-type) > img { aspect-ratio: auto; height: auto; }
.news-gallery:has(> img:nth-of-type(3)) > img { aspect-ratio: 4 / 3; }
.news-gallery > :not(img) { display: none; } /* пустые абзацы и переносы, которые оставляет редактор */

/* ---------- Слайдер: одно фото, счётчик и стрелки (как галерея карточки товара) ---------- */

.news-slider {
  display: flex;
  flex-direction: column;
  margin: 8px 0 32px;
  padding: 14px;
  border: 1px solid var(--line);
}

.news-slider__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-1);
}

.news-slider__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 260ms var(--ease);
  pointer-events: none;
}

.news-slider__stage img.is-active { opacity: 1; pointer-events: auto; }

/* до запуска скрипта — только первое фото */
.news-slider:not(.is-ready) > :not(img:first-of-type) { display: none; }
.news-slider:not(.is-ready) > img { display: block; width: 100%; height: auto; }

.news-slider__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 12px;
}

.news-slider__count {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}

.news-slider__buttons {
  display: flex;
  gap: 4px;
}

.news-slider__buttons button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--paper-strong);
  background: transparent;
  color: var(--paper-strong);
  font-size: 16px;
  cursor: pointer;
  transition: transform 220ms var(--ease);
}

.news-slider__buttons button:hover { transform: translateY(-2px); }
.news-slider__buttons button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Цитата (кнопка «Цитата»). Временное оформление — как .news-article__quote статики, до макета дизайнеров ---------- */

.news-quote {
  margin: 32px 0;
  padding: 32px 36px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  font-size: 22px;
  line-height: 1.5;
  font-style: italic;
  color: var(--paper-strong);
}

.news-quote > :first-child { margin-top: 0; }
.news-quote > :last-child { margin-bottom: 0; }
.news-quote p { margin: 0 0 12px; font-size: inherit; line-height: inherit; color: inherit; }

@media (max-width: 640px) {
  .news-gallery,
  .news-gallery:has(> img:nth-of-type(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-slider { padding: 8px; }
  .news-slider__buttons button { width: 40px; height: 40px; }
  .news-quote { padding: 24px 20px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .news-slider__stage img { transition: none; }
}