/* ============================================
   Статья, секция 3: цитата + галерея-фотоистория
   Figma: aEoLpMDCOKlAMo0pQdW6wW, узлы 7652:1533 и 7653:1618
   ============================================ */

/* ---------- Цитата ---------- */

.article-quote {
  background: #e7e4dc;
  margin-top: 40px;
  padding: 40px 32px;
}

.article-quote__line {
  align-items: center;
  display: flex;
  gap: 16px;
}

.article-quote__line::before,
.article-quote__line::after {
  background: rgba(64, 23, 6, 0.25);
  content: "";
  flex: 1;
  height: 1px;
}

/* Сверху: кавычки слева, линия направо. Снизу — зеркально. */
.article-quote__line--top::before {
  display: none;
}

.article-quote__line--bottom::after {
  display: none;
}

.article-quote__mark {
  height: 25px;
  width: 41px;
}

.article-quote__text {
  color: var(--c-dark-brown);
  font-family: var(--font-serif-text);
  font-size: 34px;
  font-style: italic;
  font-weight: 500;
  line-height: normal;
  margin-top: 40px;
}

.article-quote__author {
  color: var(--c-black);
  font-family: var(--font-serif-text);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.03em;
  margin-top: 32px;
}

.article-quote__role {
  color: var(--c-gray);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 16px;
  text-transform: uppercase;
}

.article-quote__line--bottom {
  margin-top: 40px;
}

/* ---------- Галерея-фотоистория ---------- */

.article-gallery {
  margin-top: 40px;
}

.article-gallery__label {
  color: var(--c-gray);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-gallery__viewport {
  margin-top: 16px;
  position: relative;
}

.article-gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.article-gallery__track::-webkit-scrollbar {
  display: none;
}

/* Активный кадр во всю ширину минус «подглядывание» следующего.
   flex-basis анимируется: без перехода раскрытие по клику происходило
   скачком и читалось как сбой вёрстки, а не как действие. Кадр внутри
   подтягивается тем же темпом — иначе картинка «прыгает» внутри рамки. */
.article-gallery__slide {
  border-right: 2px solid var(--c-cream);
  cursor: zoom-in;
  flex: 0 0 calc(100% - 155px);
  height: 383px;
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
  transition: flex-basis 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .article-gallery__slide {
    transition: none;
  }
}

/* Клик по кадру: фото раскрывается на всю ширину столбца, повторный клик
   возвращает «подглядывание» следующего кадра. */
.article-gallery--expanded .article-gallery__slide {
  cursor: zoom-out;
  flex-basis: 100%;
}

.article-gallery__slide:last-child {
  border-right: 0;
}

.article-gallery__slide img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.article-gallery__slide figcaption {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 4%, rgba(0, 0, 0, 0) 58%);
  color: var(--c-cream);
  display: flex;
  align-items: flex-end;
  font-family: var(--font-serif-text);
  font-size: 20px;
  font-weight: 400;
  inset: 0;
  letter-spacing: -0.03em;
  padding: 32px;
  position: absolute;
}

.article-gallery__arrow {
  height: 40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
  width: 40px;
  z-index: 1;
}

/* Hover стрелок по «Arrow button set» кита */
.article-gallery__arrow:hover {
  opacity: 0.6;
}

.article-gallery__arrow img {
  display: block;
  height: 100%;
  width: 100%;
}

.article-gallery__arrow--prev {
  left: 10px;
  transform: translateY(-50%) rotate(180deg);
}

.article-gallery__arrow--next {
  right: 10px;
}

/* Пагинация: активная — терракотовая пилюля, остальные — бежевые точки */
.article-gallery__dots {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-top: 16px;
}

.article-gallery__dot {
  background: #cec6b7;
  border-radius: 6px;
  height: 12px;
  transition: background 0.2s ease, width 0.2s ease;
  width: 12px;
}

.article-gallery__dot--active {
  background: var(--c-terracotta-dark);
  border-radius: 5.5px;
  height: 11px;
  width: 24px;
}

/* ---------- Адаптив ---------- */

@media (max-width: 1024px) {
  .article-quote__text {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .article-quote {
    padding: 24px 20px;
  }

  .article-quote__text {
    font-size: 24px;
    margin-top: 24px;
  }

  .article-quote__author {
    font-size: 20px;
    margin-top: 20px;
  }

  .article-quote__line--bottom {
    margin-top: 24px;
  }

  .article-gallery__slide {
    flex-basis: calc(100% - 60px);
    height: 300px;
  }

  .article-gallery__slide figcaption {
    font-size: 16px;
    padding: 20px;
  }
}

@media (max-width: 560px) {
  .article-gallery__slide {
    flex-basis: 100%;
    height: 260px;
  }
}