/* ==========================================================================
   Directions Block (Направления съёмки)
   Эстетика Quiet Luxury: строгое паспарту, тонкие рамки, сдержанный ховер
   ========================================================================== */

.directions {
  padding: clamp(4rem, 8vw, 7.5rem) 0;
  background-color: var(--color-bg, #f7f4ee);
  color: var(--color-text-primary, #1a1a18);
  position: relative;
  border-top: 1px solid var(--color-border-subtle, #ede7dc);
}

.directions__container {
  width: 100%;
  max-width: var(--container-width, 1360px);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3.5vw, 2.5rem);
}

/* Header секции */
.directions__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
}

.directions__label {
  display: inline-block;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent, #c5a059);
  margin-bottom: 0.85rem;
  font-weight: 500;
}

.directions__title {
  font-family: var(--font-serif, "Playfair Display", serif);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-text-primary, #1a1a18);
  margin: 0 0 1rem;
}

.directions__subtitle {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.6;
  color: var(--color-text-secondary, #686259);
  margin: 0;
  font-weight: 300;
}

/* Сетка карточек */
.directions__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}

/* Карточка направления */
.direction-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background-color: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border-subtle, #ede7dc);
  transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  height: 100%;
}

.direction-card:hover {
  border-color: var(--color-accent, #8c6747);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(31, 29, 26, 0.06);
}

/* Паспарту вокруг кадра */
.direction-card__frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(0.85rem, 1.2vw, 1.25rem);
  box-sizing: border-box;
}

.direction-card__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: #000000;
}

.direction-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.5s ease;
  filter: brightness(0.95);
}

/* Модификаторы кадрирования для точного сохранения лиц, голов и архитектуры */
.direction-card__image--events {
  object-position: center top;
}

.direction-card__image--weddings {
  object-position: center top;
}

.direction-card__image--dino {
  object-position: 22% center; /* акцент на мальчика, аниматора и пасть динозавра */
}

.direction-card__image--portrait {
  object-position: center top;
}

/* Кадры 05–08 добавлены вместе с покрытием блока на все 8 услуг (NAV-2, 09.10.2026).
   Кадр 07 — горизонтальный источник 3:2 в рамке 4:5, потому центр по горизонтали
   (спикер в середине кадра), головы не срезаются. */
.direction-card__image--reportage {
  object-position: center 30%;
}

.direction-card__image--forum {
  object-position: center 25%;
}

.direction-card__image--korporativ {
  object-position: 45% center; /* танцующая пара: лицо гостя в кадре, без срезанных голов */
}

.direction-card__image--brand {
  object-position: center 25%;
}

.direction-card:hover .direction-card__image {
  transform: scale(1.04);
  filter: brightness(1.02);
}

/* Контент карточки */
.direction-card__content {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0.25rem 0.5rem;
  flex-grow: 1;
}

.direction-card__category {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent, #c5a059);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.direction-card__name {
  font-family: var(--font-serif, "Playfair Display", serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 0.65rem;
  color: var(--color-text-primary, #1a1a18);
}

.direction-card__desc {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text-secondary, #686259);
  margin: 0 0 1.25rem;
  font-weight: 300;
  flex-grow: 1;
}

/* Действие: Смотреть серию + стрелка */
.direction-card__action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary, #1a1a18);
  transition: color 0.3s ease;
  margin-top: auto;
}

.direction-card__arrow {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.direction-card:hover .direction-card__action {
  color: var(--color-accent, #8c6747);
}

.direction-card:hover .direction-card__arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   Адаптивность (Breakpoints)
   ========================================================================== */

/* Планшеты и компактный десктоп */
@media (max-width: 1024px) {
  .directions__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* Смартфоны (включая раскладушки Duo и iPhone 17/18):
   8 карточек в одну колонку давали 6,27 экрана прокрутки (замер 5 296 px @402x844) —
   с 09.10.2026 (решение Александра, NAV-9) на мобильном это горизонтальная лента со snap:
   одна карточка на экран, у следующей виден край 39 px = подсказка, что лента листается.
   Прецедент в референсах: scroll-snap-type: x mandatory + scroll-snap-align у Vigbo
   (reference/vigbo-templates/shared-css/build_cms_front_deferred.css) и на живой мобильной
   странице Wfolio (reference/wfolio-templates/source-mobile/album-votkinsk-ru.html).
   Разметка та же: все 8 ссылок остаются в DOM (перелинковка и индексация не меняются), JS нет. */
@media (max-width: 640px) {
  .directions__grid {
    display: flex;
    gap: 0.625rem;              /* 10 px — при 86% даёт ровно те 39 px следующего кадра, что утверждены стендом */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;      /* Firefox */
  }

  .directions__grid::-webkit-scrollbar {
    display: none;              /* Chrome/Safari: лента без полос прокрутки (паспарту не рвем) */
  }

  .direction-card {
    flex: 0 0 86%;              /* остаток 14% - край следующей карточки (замер: 298x553, карточка выровнена с заголовком) */
    scroll-snap-align: start;
  }

  .direction-card__frame {
    padding: 0.85rem;
  }
  
  .direction-card__image-wrap {
    aspect-ratio: 4 / 5; /* сохраняем благородный портретный формат 4:5 без срезки лиц и голов */
  }

  .directions__title {
    font-size: 1.85rem;
  }
}