/* =============================================================
 * pages/catalog.css — общие стили для каталог-страниц:
 * Services, Closets, Facades, ConstructorWorks, Bazis, Examples.
 *
 * Используется через ViewData["PageCssPath"] = "/css/pages/catalog.css".
 * ============================================================= */

/* ──────── PAGE HERO (упрощённый, без full-bleed фото) ──────── */

.page-hero {
  background: var(--color-paper);
  padding-block: clamp(80px, 12vw, 160px) clamp(40px, 6vw, 80px);
}
.page-hero__container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--sp-page);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: end;
}
@media (min-width: 993px) {
  .page-hero__container { grid-template-columns: 6fr 4fr; }
}

.page-hero__title {
  font-size: clamp(2.25rem, 3vw + 1rem, 4rem);
  font-weight: var(--fw-medium);
  letter-spacing: -0.025em;
  line-height: var(--lh-tight);
  max-width: 16ch;
  text-wrap: balance;
}
.page-hero__subtitle {
  font-size: var(--fs-md);
  color: var(--color-text-secondary);
  line-height: var(--lh-body);
  max-width: 42ch;
  margin-top: var(--sp-5);
}
.page-hero__cta {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  max-width: 520px;          /* парные CTA не растягиваются на всю колонку */
}
/* Эстетика: парные CTA одинаковой ширины и на десктопе */
@media (min-width: 769px) {
  .page-hero__cta .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
}
.page-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* ──────── SPLIT-SECTION (image + text alternating) ──────── */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 769px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-9); }
  .split--reverse > .split__media { order: 2; }
}

/* Список услуг: десктоп — сплиты в столбик; мобайл — горизонтальная карусель */
.services-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

/* Широкие медиа 16:9 (эффектнее, чем 4:3) — для блока «Услуги». */
.services-list--wide .split__media { aspect-ratio: 16 / 9; }

.split__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-grey-150);
}
.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.split__title {
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-heading);
  margin-bottom: var(--sp-4);
  text-wrap: balance;
  max-width: 22ch;
}
.split__prose {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  max-width: 50ch;
}
.split__prose p + p { margin-top: var(--sp-3); }
.split__prose ul {
  margin-top: var(--sp-3);
  list-style: none;
}
.split__prose li {
  position: relative;
  padding-left: 1.7em;            /* колонка под тире — текст не наезжает */
  line-height: var(--lh-body);
  padding-bottom: var(--sp-1);
}
.split__prose li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.7em;                   /* фикс. ширина маркера = padding-left */
  color: var(--color-accent);
  font-weight: var(--fw-medium);
}

/* ──────── PROSE-BLOCK (свободный текст для длинных секций) ──────── */

.prose-block {
  max-width: 680px;
  margin-inline: auto;
}
.prose-block h2 {
  font-size: clamp(1.5rem, 1vw + 1.2rem, 2rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-heading);
  margin-bottom: var(--sp-5);
  text-wrap: balance;
}
.prose-block h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}
.prose-block p {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  margin-bottom: var(--sp-4);
}
.prose-block p + p { margin-top: 0; }
.prose-block ul, .prose-block ol {
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-4);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

/* ──────── FEATURE-GRID (3-4 карточки в ряд) ──────── */

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 561px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 993px) { .feature-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 993px) { .feature-grid--4 { grid-template-columns: repeat(4, 1fr); } }
/* Чек-лист коротких пунктов («Состав проекта»): на узком мобиле 2 колонки, не 1 */
@media (max-width: 560px) { .feature-grid--compact { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } }

.feature {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
/* Ссылка-CTA внутри карточки прижата к низу — выравнивается по одной высоте
   во всех карточках ряда (карточки равной высоты за счёт grid stretch). */
.feature > .link-arrow { margin-top: auto; padding-top: var(--sp-2); }
.feature__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--color-bg-section-alt);
  border-radius: var(--radius-md);
  color: var(--color-accent);
  margin-bottom: var(--sp-2);
}
.feature__icon img,
.feature__icon svg { width: 28px; height: 28px; }
.feature__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
}
.feature__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
}

/* ──────── PORTFOLIO-GRID (для Closets/Examples) ──────── */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
@media (min-width: 769px) {
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
.portfolio-grid__item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-grey-150);
}
.portfolio-grid__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}
.portfolio-grid__item:hover img { transform: scale(1.03); }

/* ──────── CTA-BLOCK (используется на всех каталог-страницах) ──────── */

.cta-block {
  background: var(--color-accent-tint);
  padding-block: clamp(60px, 8vw, 100px);
}
.cta-block__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--sp-page);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
}
@media (min-width: 769px) {
  .cta-block__inner { grid-template-columns: 1fr auto; }
}
.cta-block__title {
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-heading);
  text-wrap: balance;
  max-width: 24ch;
}
.cta-block__buttons {
  display: grid;
  grid-template-columns: 1fr;     /* мобайл: в столбик, во всю ширину */
  gap: var(--sp-3);
}
.cta-block__buttons .btn { width: 100%; justify-content: center; }
/* десктоп: кнопки в ряд, равной ширины (1fr каждая) — не «по контенту» */
@media (min-width: 769px) {
  .cta-block__buttons {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-template-columns: none;
  }
}

/* ──────── INFO-NOTE (одна цитата / выдержка) ──────── */

.info-note {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--sp-5);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--color-text);
  max-width: none;        /* во всю строку — не дробится на десктопе */
  margin-inline: 0;       /* прижато к левому краю */
}

/* ──────── КАРТОЧКИ-ССЫЛКИ НА РАЗДЕЛЫ ──────── */
.link-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (min-width: 769px) {
  .link-cards { grid-template-columns: repeat(4, 1fr); }
}
.link-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 16px var(--sp-5);
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.link-card:hover {
  border-color: var(--color-grey-300);
  box-shadow: 0 8px 24px rgba(20, 18, 16, 0.07);
  transform: translateY(-2px);
  text-decoration: none;
}
.link-card__label {
  flex: 1 1 auto;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.25;
}
.link-card__arrow {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--color-accent);   /* коралловая стрелка */
  transition: transform var(--duration-fast) var(--ease-out);
}
.link-card:hover .link-card__arrow { transform: translateX(3px); }
@media (max-width: 480px) {
  .link-cards { grid-template-columns: 1fr; }
}

/* Короткая подпись hero — только на мобиле (десктоп показывает полную) */
.page-hero__subtitle--short { display: none; }

/* ════════ МОБИЛЬНОЕ — компактнее (как главная): меньше воздуха ════════ */
@media (max-width: 768px) {
  /* page-hero: убираем огромный верхний padding (был 80px) */
  .page-hero { padding-block: var(--sp-7) var(--sp-6); }
  .page-hero__subtitle { margin-top: var(--sp-4); }
  .page-hero__cta { margin-top: var(--sp-5); }
  /* короткий текст вместо длинного абзаца */
  .page-hero__subtitle--full { display: none; }
  .page-hero__subtitle--short { display: block; }
  /* ЭСТЕТИКА: парные CTA всегда одинаковой ширины — на всю ширину, в столбик */
  .page-hero__cta,
  .cta-block__buttons { flex-direction: column; align-items: stretch; }
  .page-hero__cta .btn,
  .cta-block__buttons .btn { width: 100%; justify-content: center; }
  /* split: плотнее между фото и текстом */
  .split { gap: var(--sp-5); }
  /* info-note чуть компактнее */
  .info-note { font-size: var(--fs-base); }

  /* Услуги — горизонтальная свайп-карусель компактных карточек */
  .services-list {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    gap: var(--sp-4);
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--sp-page));
    padding-inline: var(--sp-page);
    scroll-padding-left: var(--sp-page);
    padding-bottom: var(--sp-3);
  }
  .services-list::-webkit-scrollbar { display: none; }
  .services-list .split {
    flex: 0 0 82%;
    scroll-snap-align: start;
    gap: var(--sp-4);
    align-content: start;
  }
}

/* ════════ HERO-БАННЕР (фоновое фото + затемнение) ════════
   Каталог-страница с визуальным геро-фото (напр. /closets).
   Включается классом .page-hero--banner на секции + data-hero
   (sidebar.js делает верхнюю полосу и сайдбар прозрачными поверх фото). */
.page-hero--banner {
  position: relative;
  isolation: isolate;
  padding: 0;
  display: flex;
  align-items: flex-end;
  min-height: clamp(440px, 62vh, 600px);
  background: var(--color-warm-black);
  overflow: hidden;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Два слоя:
     1) ЛЕВАЯ виньетка — затемняет зону под сайдбаром, чтобы прозрачное матовое
        стекло сайдбара читалось тёмным на любом фото (и над светлыми фасадами тоже),
        как на главной. Плавно гаснет к центру.
     2) НИЖНИЙ скрим — под текст героя. */
  background:
    linear-gradient(to right,
      rgba(20, 18, 16, 0.74) 0%,
      rgba(20, 18, 16, 0.52) 16%,
      rgba(20, 18, 16, 0.14) 40%,
      rgba(20, 18, 16, 0) 56%),
    linear-gradient(to top,
      rgba(20, 18, 16, 0.86) 0%,
      rgba(20, 18, 16, 0.46) 42%,
      rgba(20, 18, 16, 0.10) 74%,
      rgba(20, 18, 16, 0.32) 100%);
}
.page-hero--banner .page-hero__container {
  padding-block: clamp(28px, 4vw, 52px);
  align-items: end;
}
.page-hero--banner .page-hero__title { color: #fff; }
.page-hero--banner .page-hero__subtitle { color: rgba(255, 255, 255, 0.84); }
.page-hero--banner .eyebrow { color: #ff6a52; }   /* ярче коралл — читаемо на тёмном фото */
.page-hero--banner .page-hero__aside { align-self: end; justify-self: end; }

/* Мобильный баннер: rating-card той же ширины, что и парные CTA, — чтобы все
   3 элемента (2 кнопки + карточка рейтинга) были одинаковой ширины.
   Базовая карточка раскрывается на 100% только < 520px, а full-width CTA
   действуют до 768px — выравниваем диапазон 520–768px. */
@media (max-width: 768px) {
  .page-hero--banner .page-hero__aside { width: 100%; max-width: 520px; }
  .page-hero--banner .rating-card {
    width: 100%;
    flex-wrap: wrap;
    border-radius: var(--radius-md);
    padding: var(--sp-4);
  }
  .page-hero--banner .rating-card__go { margin-left: auto; }
}

@media (min-width: 769px) {
  .page-hero--banner {
    /* full-bleed во всю ширину и высоту окна — как hero на главной:
       фото уходит ПОД верхнюю полосу и ПОД сайдбар, поэтому сайдбар целиком
       тёмное стекло поверх фото (без серой подложки и серого «хвоста» снизу). */
    margin-top: calc(-1 * var(--header-h));
    margin-left: calc(-1 * var(--sidebar-w));
    width: 100vw;
    min-height: 100vh;
    min-height: 100svh;
  }
  .page-hero--banner .page-hero__container {
    /* фото-подложка под сайдбаром, а контент сдвинут вправо за его ширину */
    max-width: none;
    margin-inline: 0;
    padding-top: calc(var(--header-h) + var(--sp-5));
    padding-left: calc(var(--sidebar-w) + var(--sp-page));
    padding-right: var(--sp-page);
  }
}

/* ════════ МОБИЛЬНОЕ: карточки-ряд → свайп-карусель (как на главной) ════════
   Включается модификатором .feature-grid--swipe (напр. «Три способа заказать»). */
@media (max-width: 768px) {
  .feature-grid--swipe {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    grid-template-columns: none;
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--sp-page));
    padding-inline: var(--sp-page);
    scroll-padding-left: var(--sp-page);
    padding-bottom: var(--sp-3);
  }
  .feature-grid--swipe::-webkit-scrollbar { display: none; }
  /* Карточки в карусели — с поверхностью (белый блок, бордер, скругление),
     чтобы выглядели как полноценные карточки, а не «голый» текст. */
  .feature-grid--swipe .feature {
    scroll-snap-align: start;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    box-shadow: 0 4px 16px rgba(20, 18, 16, 0.05);
  }
  /* Номер 01/02/03 — компактным коралловым бейджем сверху карточки */
  .feature-grid--swipe .feature .benefit__num {
    display: inline-block;
    margin-bottom: var(--sp-2);
  }
}

/* ── ФИЛЬТРЫ /otzyvy: desktop = row, mobile = column с equal-width кнопками ── */
.reviews-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(160px, 220px) auto;
  gap: var(--sp-4);
  align-items: end;
  margin-bottom: var(--sp-7);
}
.reviews-filters__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.reviews-filters__field .form-field__select { width: 100%; }
.reviews-filters__actions {
  display: flex;
  gap: var(--sp-3);
  align-items: stretch;
}
/* унифицируем высоту с .form-field__select (44px). У .btn--lg по умолчанию 52px,
   что делало кнопку «толще» соседних селектов и ломало визуальный ряд. */
.reviews-filters__actions .btn {
  flex: 0 0 auto;
  min-width: 140px;
  height: 44px;
  min-height: 44px;
  padding-block: 0;
  font-size: var(--fs-sm);
}

@media (max-width: 768px) {
  .reviews-filters {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .reviews-filters__actions {
    flex-direction: column;
    gap: var(--sp-2);
  }
  .reviews-filters__actions .btn {
    width: 100%;
    min-width: 0;
  }
}