/* ==========================================================================
   Страница «Каталог» по макету Catalog.dc.html: чипы-фильтры с счётчиками,
   сетка работ 4 колонки с карточками-рамками, «Показать ещё» блоком,
   преимущества с золотыми кружками, FAQ-аккордеон, связанные категории
   пилюлями. Токены — на .catalog-page; шапка и подвал сайта остаются
   прежними. Шрифты: Libre Caslon Text (заголовки), Karla (текст).
   Секции преимуществ/FAQ/related раскрывает catalog.js (для /catalog их
   сервер не заполняет — только для страниц категорий).
   ========================================================================== */

.catalog-page {
  --cream: #FAF3EF;
  --blush: #F8E8E8;
  --ink: #231B1B;
  --ink-soft: #796B69;
  --rose: #C25A72;
  --rose-dark: #9E4A59;
  --rose-soft: #F3D9DC;
  --gold: #2A2420;
  --gold-soft: #F3D9DC;
  --line: #E5D7D3;
  --card: #FFFFFF;
  --serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --sans: 'Karla', 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  /* Единый радиус сайта — как у фото на первом экране главной (18px). */
  --r-lg: 18px;
  --r-md: 18px;

  max-width: 1360px;
  margin: 0 auto;
  padding: 48px 40px 0;
  font-family: var(--sans);
  color: var(--ink);
}

.catalog-page__head { margin-bottom: 32px; }

.catalog-page__head .eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0 0 14px;
}

.catalog-page__title {
  font-family: var(--serif);
  font-size: 2.375rem;
  line-height: 1.1;
  font-weight: 400;
  margin: 0;
}

/* ----- Поиск ----- */

.catalog-search { position: relative; margin: 0 0 12px; }

.catalog-search__wrap { position: relative; }

.catalog-search__input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  font-family: var(--sans);
  font-size: 0.90625rem;
  color: var(--ink);
}

.catalog-search__input::placeholder { color: var(--ink-soft); }

.catalog-search__input:focus { outline: none; border-color: var(--rose); }

/* Подсказки в поиске каталога: названия работ и категории при вводе.
   Токены — те же, что у каталога (.catalog-page): карточка, линия, розовый
   акцент и нежно-розовая подсветка. Каждая строка — явная кнопка: метка
   типа слева, название, стрелка справа, подсветка при наведении и фокусе. */
.catalog-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #FFFFFF;
  background-color: #FFFFFF;
  opacity: 1;
  backdrop-filter: none;
  isolation: isolate;
  border: 1px solid var(--line, #E5D7D3);
  border-radius: var(--r-md, 18px);
  box-shadow: 0 20px 40px rgba(35, 27, 27, 0.22);
  max-height: 260px;
  overflow-y: auto;
}
.catalog-suggest[hidden] { display: none; }
.catalog-search__backdrop {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: transparent;
  backdrop-filter: none;
}
.catalog-search__backdrop[hidden] { display: none; }
.catalog-suggest__item {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Минимум 44px по высоте — удобная цель для пальца на телефоне
     (AGENTS.md: цели нажатия не мельче 44px). */
  min-height: 44px;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: var(--r-md, 18px);
  cursor: pointer;
  transition: background 0.15s ease;
}
.catalog-suggest__item:hover,
.catalog-suggest__item:focus-visible {
  background: var(--rose-soft, #F3D9DC);
  outline: none;
}
.catalog-suggest__item + .catalog-suggest__item {
  border-top: 1px solid var(--line, #E5D7D3);
  margin-top: 2px;
}
.catalog-suggest__badge {
  flex: none;
  font-family: var(--sans, 'Karla', sans-serif);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(35, 27, 27, 0.06);
  color: var(--ink-soft, #796B69);
}
.catalog-suggest__badge--work { background: var(--rose-soft, #F3D9DC); color: var(--rose-dark, #9E4A59); }
.catalog-suggest__badge--category { background: var(--blush, #F8E8E8); color: var(--ink-soft, #796B69); }
.catalog-suggest__label {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink, #231B1B);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalog-suggest__arrow {
  flex: none;
  color: var(--rose, #C25A72);
  font-size: 0.9rem;
  opacity: 0.5;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.catalog-suggest__item:hover .catalog-suggest__arrow,
.catalog-suggest__item:focus-visible .catalog-suggest__arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* ----- Чипы-фильтры ----- */

.cat-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

/* Четыре группы — четыре горизонтальные линии. Лента едет пальцем /
   колесом; без JS всё видно врастяжку — ссылки категорий нужны роботу. */
.cat-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
}

.cat-group__label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  flex: none;
  padding-top: 0;
  min-width: 0;
  width: 110px;
}

.cat-group__chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
  min-width: 0;
  flex: 1;
}

/* Раскрытая линия (кнопка «Ещё»): чипы врастяжку. */
.cat-group--expanded .cat-group__chips {
  flex-wrap: wrap;
  overflow: visible;
}

/* На ПК за линией видно максимум 5 чипов, остальные — за «Ещё».
   На телефоне (ниже) прятания нет — вся линия едет скроллом. */
@media (min-width: 721px) {
  .cat-group .cat-chip--beyond { display: none; }
  .cat-group--expanded .cat-chip--beyond { display: inline-flex; }
  .cat-group--has-beyond .cat-row-more { display: inline-flex; }
}

/* Кнопка «ещё» в конце линии — catalog.js показывает её, только если
   линия не влезла. Обычная текстовая кнопка: без фона и рамки. */
.cat-row-more {
  flex: none;
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 9px 4px;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--rose-dark);
  cursor: pointer;
  white-space: nowrap;
}

.cat-row-more:hover { text-decoration: underline; }

.cat-chip {
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  cursor: pointer;
}

.cat-chip:hover { border-color: var(--ink); color: var(--ink); }

.cat-chip--on {
  border: 1.5px solid var(--rose);
  background: var(--rose-soft);
  color: var(--rose);
}

.cat-chip__num { font-size: 0.72rem; opacity: 0.65; }

.cat-chip--on .cat-chip__num { opacity: 0.75; }

.cat-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.cat-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  transition: border-color 0.15s, color 0.15s;
}

.cat-reset:hover { border-color: var(--ink); color: var(--ink); }

.cat-reset--on {
  border: 1.5px solid var(--rose);
  background: var(--rose-soft);
  color: var(--rose);
}

.cat-count { font-size: 0.8125rem; color: var(--ink-soft); }

/* ----- Сетка работ ----- */

.catalog-works-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0;
  margin-bottom: 20px;
}

.work-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}

.work-tile:hover { border-color: var(--rose); }

.work-tile__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--blush);
  border-radius: 0;
}

.work-tile__media img,
.work-tile__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.work-tile:hover .work-tile__media img,
.work-tile:hover .work-tile__media video { transform: scale(1.05); }

.work-tile__flag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--r-md);
}

.work-tile__count {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(35, 27, 27, 0.62);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--r-md);
}

.work-tile__bar { display: block; padding: 16px; }

.work-tile__tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.work-tile__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.3;
}

.work-tile__price {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--rose);
}

.work-tile__price--ask { color: var(--ink-soft); font-weight: 600; }

.works-empty {
  color: var(--ink-soft);
  text-align: center;
  padding: 48px 12px;
  font-size: 0.9375rem;
}

/* ----- «Показать ещё» ----- */

.load-more-btn {
  display: none;
  width: 100%;
  margin: 0 0 64px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: transparent;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.90625rem;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, color 0.15s;
}

.load-more-btn:hover { border-color: var(--ink); color: var(--ink); }

.load-more-btn.visible { display: block; }

/* Преимущества — в стиле «Как проходит заказ» на главной: карточки с
   иконкой в кружке и номером, соединённые пунктиром, на розовой подложке. */
.landing-advantages {
  background: var(--blush);
  max-width: none;
  padding: var(--space-lg) 28px;
  margin: var(--section-gap) 0;
}
.landing-advantages > * { max-width: 1360px; margin-left: auto; margin-right: auto; }
.landing-advantages .section__head { margin-bottom: 40px; }
.landing-advantages .process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
}
.landing-advantages .process__step {
  text-align: center;
  padding: 28px 20px;
  border: none;
  background: var(--paper-card);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(35, 27, 27, 0.06);
}
.landing-advantages .process__step-head {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  margin-bottom: 14px;
}
.landing-advantages .process__step-head::before {
  content: '';
  position: absolute;
  top: 25px;
  left: -50%;
  width: 100%;
  border-top: 1.5px dashed var(--line);
  z-index: 0;
}
.landing-advantages .process__step:first-child .process__step-head::before { display: none; }
.landing-advantages .process__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--paper-card);
  border: 1.5px solid var(--accent);
  color: var(--accent);
}
.landing-advantages .process__icon svg { display: block; }
.landing-advantages .process__num {
  display: block;
  margin-top: 8px;
  font-family: 'Libre Caslon Text', Georgia, serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.advantage__title {
  font-family: 'Karla', sans-serif;
  font-size: 0.90625rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.advantage__desc {
  margin: 0;
  font-size: 0.78125rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
@media (max-width: 720px) {
  .landing-advantages { padding: 48px 20px; margin: var(--section-gap) 0; }
  .landing-advantages .process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .landing-advantages .process__step { padding: 22px 16px; }
  .landing-advantages .process__step:nth-child(odd) .process__step-head::before { display: none; }
}
@media (max-width: 420px) {
  .landing-advantages .process__steps { grid-template-columns: 1fr; }
  .landing-advantages .process__step .process__step-head::before { display: none; }
}

/* ----- FAQ ----- */

.landing-faq .faq-list {
  max-width: 820px;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.90625rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  flex: none;
  font-family: var(--sans);
  font-size: 1.1875rem;
  font-weight: 400;
  color: var(--rose);
  transition: transform 0.2s var(--ease);
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  line-height: 1.6;
  font-size: 0.84375rem;
}

/* ----- Связанные категории ----- */

.landing-related__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.landing-related__list li {
  margin: 0;
  padding-left: 0;
  position: static;
}

.landing-related__list li::before { display: none; }

.landing-related__list a {
  display: inline-block;
  border: 1px solid var(--line);
  padding: 11px 18px;
  border-radius: var(--r-md);
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.landing-related__list a:hover {
  border-color: var(--rose);
  color: var(--rose);
}

/* ---------- Телефон (≤720px) ---------- */
@media (max-width: 720px) {
  .catalog-page {
    padding: 40px 16px 0;
  }

  .catalog-page__title { font-size: 1.875rem; }

  .catalog-works-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .work-tile__bar { padding: 12px; }

  .work-tile__tag { font-size: 0.875rem; margin-bottom: 4px; }

  .work-tile__price { font-size: 0.9375rem; }

  .work-tile__flag { font-size: 0.875rem; padding: 5px 10px; }

  .work-tile__count { font-size: 0.875rem; }

  .cat-group { gap: 10px; }

  .cat-group__label { width: 100%; padding-top: 0; }

  .cat-chip { font-size: 0.90625rem; padding: 10px 16px; }

  .cat-chip__num { font-size: 0.875rem; }

  .cat-reset { font-size: 0.90625rem; padding: 10px 16px; }

  .load-more-btn { font-size: 0.9375rem; padding: 13px 14px; margin-bottom: 48px; }

  .landing-advantages .prose-page__body {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 16px;
  }

  .landing-advantages .prose-list li {
    font-size: 0.875rem;
  }

  .advantage:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .advantage__title { font-size: 0.9375rem; }

  .advantage__desc { font-size: 0.875rem; }

  .faq-item summary { font-size: 0.9375rem; }

  .faq-item p { font-size: 0.875rem; }

  .landing-related__list a { font-size: 0.90625rem; padding: 11px 18px; }
}
/* ---------- Производительность: отложенный рендер ниже первого экрана ----------
   content-visibility: auto заставляет браузер не рисовать блоки за пределами
   вьюпорта, пока пользователь до них не доскроллит. Без этого весь каталог
   (сотни карточек + фильтры + SEO-текст + FAQ) отрисовывается сразу при
   загрузке, что давит на LCP и CLS на слабых телефонах.
   contain-intrinsic-size задаёт «резерв» высоты, чтобы страница не прыгала,
   пока блок ещё не отрендерен. */
.works-grid,
.category-seo-wrap,
.landing-advantages,
.landing-related {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px;
}
.cat-filters {
  content-visibility: auto;
  contain-intrinsic-size: auto 160px;
}
@media (max-width: 720px) {
  .works-grid,
  .category-seo-wrap,
  .landing-advantages,
  .landing-related {
    contain-intrinsic-size: auto 700px;
  }
  .cat-filters {
    contain-intrinsic-size: auto 140px;
  }
}