/* sections/guide.css — «Beauty Guide». Владеет таск 09.
   Горизонтальная лента со scroll-snap, НО не близнец protocol:
   базовый фон вместо винного, рваный ритм (карточки разной ширины и с
   вертикальным смещением), точки-индикаторы вместо стрелок и прогресс-линии. */

/* [data-stack] в селекторе — чтобы фон побеждал фон колоды из stacking.css */
section[data-section="guide"],
section[data-section="guide"][data-stack] {
  background: var(--color-surface-base);
  overflow: hidden;
}

[data-section="guide"] .guide__head { margin-bottom: var(--space-6); }

[data-section="guide"] .guide__eyebrow {
  color: var(--color-accent-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

[data-section="guide"] .guide__head h2 { max-width: 720px; }

[data-section="guide"] .guide__lead {
  margin: 0;
}

/* --- Лента --- */
.guide__viewport {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Совпадает с padding трека. Без этого прилипание тянуло первую карточку
     к самому краю экрана и съедало отступ ленты (на 1920 — на 200px) */
  scroll-padding-inline: var(--track-pad);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.guide__viewport::-webkit-scrollbar { display: none; }
.guide__viewport:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: -2px;
}

.guide__track {
  list-style: none;
  margin: 0;
  display: flex;
  gap: var(--space-3);
  /* Начало ленты совпадает с левым краем контейнера на любой ширине экрана.
     Раньше здесь стоял тот же расчёт, но от 100vw — он не вычитает полосу
     прокрутки, поэтому на системах с «толстым» скроллбаром лента съезжала. */
  padding: var(--space-1) var(--track-pad);
  /* Без max-content трек шириной ровно в экран: правый отступ выпадал из
     области прокрутки, и последняя карточка упиралась в край */
  width: max-content;
}

.guide__card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(78vw, 320px);
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  background: var(--color-surface-card);
  border-top: 2px solid var(--color-accent-primary);
}

/* Рваный ритм: чётные карточки шире и смещены вниз (десктоп) */
@media (min-width: 769px) {
  .guide__card { width: 320px; }
  .guide__card:nth-child(even) {
    width: 400px;
    margin-top: var(--space-4);
  }
}

.guide__category {
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-surface-base);
  background: var(--color-accent-primary);
  padding: 4px var(--space-1);
  margin-bottom: var(--space-2);
}

.guide__card-title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

@media (min-width: 769px) {
  .guide__card:nth-child(even) .guide__card-title { font-size: var(--text-xl); }
}

/* --- Раскрытие текста статьи: тонкая строка-переключатель + панель --- */
.guide__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--tap-target-min);
  padding: var(--space-1) 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text-secondary) 25%, transparent);
  border-radius: var(--button-radius);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: opacity var(--motion-duration) var(--motion-ease);
}
.guide__toggle:hover { opacity: 0.8; }

.guide__toggle-icon {
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  transition: transform var(--motion-duration) var(--motion-ease);
}
.guide__toggle-icon::before,
.guide__toggle-icon::after {
  content: '';
  position: absolute;
  background: var(--color-accent-primary);
}
.guide__toggle-icon::before { left: 0; top: 5px; width: 12px; height: 2px; }
.guide__toggle-icon::after { left: 5px; top: 0; width: 2px; height: 12px; }
.guide__card.is-open .guide__toggle-icon { transform: rotate(45deg); }

/* Плавное раскрытие без layout-дёрганья: grid-template-rows 0fr -> 1fr */
.guide__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--motion-duration) var(--motion-ease);
}
.guide__panel.is-open { grid-template-rows: 1fr; }

.guide__panel-inner {
  overflow: hidden;
  /* Закрытая панель недоступна табу и мыши (ссылки внутри текста) */
  visibility: hidden;
  transition: visibility 0s var(--motion-duration);
}
.guide__panel.is-open .guide__panel-inner {
  visibility: visible;
  transition-delay: 0s;
}

.guide__article {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  padding-bottom: var(--space-2);
}
/* отступ списка по сетке 8px, а не в em (было 16.8px) */
.guide__article ul { margin: 0; padding-left: var(--space-3); }
.guide__article p:last-child { margin-bottom: 0; }

/* Мелкая ссылка Caption/UI (12px/500) на страницу статьи */
.guide__article-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target-min); /* тач-цель >=44px при мелком кегле */
  font-size: var(--text-xs);
  line-height: var(--leading-caption);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
}

.guide__cta { align-self: flex-start; margin-top: auto; }

/* --- Подвал ленты: точки + подсказка --- */
.guide__foot {
  display: flex;
  flex-wrap: wrap; /* 375: точки/подсказка/ссылка переносятся, не распирают */
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.guide__all-link { align-self: center; margin-left: auto; }

.guide__dots { display: flex; }

.guide__dot {
  /* тач-цель 44px, видимая точка — через ::before */
  position: relative;
  width: var(--tap-target-min);
  height: var(--tap-target-min);
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.guide__dot::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  background: color-mix(in srgb, var(--color-text-secondary) 50%, transparent);
  transition: transform var(--motion-duration) var(--motion-ease),
              opacity var(--motion-duration) var(--motion-ease);
}

.guide__dot.is-active::before {
  background: var(--color-accent-primary);
  transform: translate(-50%, -50%) scale(1.4);
}

.guide__swipe-hint {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

@media (min-width: 769px) {
  .guide__swipe-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-section="guide"] .guide__dot::before,
  [data-section="guide"] .guide__toggle,
  [data-section="guide"] .guide__toggle-icon,
  [data-section="guide"] .guide__panel,
  [data-section="guide"] .guide__panel-inner { transition: none; }
}