/* === 1) ШРИФТЫ (Google Fonts). Если у тебя локальные — замени этот импорт на свои @font-face === */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');

/* === 2) БАЗА ДЛЯ СТРАНИЦЫ КЕЙСОВ === */
:root{
  --bg: #0f1214;
  --text: #eafcff;
  --muted: #9bb3c1;
  --neon: rgba(0,255,255,.35);
}



html, body { height: 100%; }
body { margin: 0; background: var(--bg); }

/* общие стили страницы кейсов (контентная ширина и одинаковые поля слева/справа) */
.cases-index{
  min-height: 100svh;   /* или 100vh */
  width: 100%;
  background: var(--bg);
  --page-px: clamp(16px, 6vw, 120px);
  background: var(--bg);
  color: var(--text);
  padding-inline: var(--page-px);
}

.cases-index{
  --neon: #66F0FF; /* без альфы! */
}

/* базовая типографика, чтобы не было Times */
.cases-index, .cases-index *{
  font-family: "Montserrat", "Ubuntu", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* заголовок и подзаголовок */
.cases-index h1{
  margin: 24px 0 8px;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
}
.cases-index .muted{
  margin: 0 0 24px;
  color: var(--muted);
  font-size: clamp(14px, 1.6vw, 16px);
}

/* === 3) СЕТКА КАРТОЧЕК === */
#cases-list{
  display: grid;
  gap: 24px;

  /* фиксируем max-ширину трека, чтобы сетка могла центрироваться/выравниваться */
  grid-template-columns: repeat(auto-fit, minmax(320px, 420px));

  /* важный момент: не центрируем всю сетку, а оставляем по левому краю —
     она уже «привязана» к тем же паддингам, что заголовок */
  justify-content: start;

  /* убираем внутренний left-padding у списка — он уже есть у .cases-index */
  padding: 0 0 40px 0;
}

/* === 4) КАРТОЧКА === */
#cases-list .case-card{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--neon);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
}

/* медиаблок */
#cases-list .case-card__media{ display:block; width:100%; aspect-ratio: 16/9; }
#cases-list .case-card__thumb{
  display:block; width:100%; height:100%;
  object-fit:cover; border-radius:0;
}

/* текст */
#cases-list .case-card__body{ padding: 12px 16px 14px; }
#cases-list .case-card__title{ margin:0 0 6px; font-size:18px; font-weight:800; line-height:1.25; }
#cases-list .case-card__subtitle{ margin:0 0 8px; opacity:.9; }
#cases-list .case-card__meta{ opacity:.7; font-size:14px; }

/* выключаем любые декоративные псевдоэлементы только внутри этой секции */
#cases-list::before,#cases-list::after,
#cases-list .case-card::before,#cases-list .case-card::after{ content:none !important; display:none !important; }

/* на всякий — возвращаем видимость, если где-то были глобальные эффекты */
#cases-list .case-card, #cases-list .case-card *{
  opacity:1 !important; visibility:visible !important; transform:none !important;
  filter:none !important; mix-blend-mode:normal !important;
  -webkit-mask:none !important; mask:none !important; clip-path:none !important;
}




/* одинаковая «сеточная» ширина для всей страницы кейсов */
.cases-index{ --container: 1200px; }

/* ===== Хлебные крошки: строго в том же контейнере и по тем же паддингам ===== */
.cases-index .crumbs{
             /* тот же левый/правый отступ, что и у заголовка */
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  position: static !important;  /* на всякий случай отключаем фиксацию */
  inset: auto !important;
  text-align: left;             /* вдруг у родителя стоит text-align:right */
  box-sizing: border-box;
}

.cases-index .crumbs a{
  color: var(--white, #eafcff);
  text-decoration: none;
  opacity: .85;
  font: 14px/1.6 var(--font, "Montserrat","Ubuntu",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);
}
.cases-index .crumbs a:hover{ opacity: 1; text-decoration: underline; }
.cases-index .crumbs .sep{ opacity: .45; margin: 0 .25rem; }

/* чтобы заголовок точно не «схлопывал» верхний отступ крошек */
.cases-index__head{ padding-top: 4px; }

/* на всякий случай: запрещаем чужим стилям «прибивать» крошки */
.cases-index .crumbs, .cases-index .crumbs *{
  mix-blend-mode: normal !important;
  filter: none !important;
  transform: none !important;
  -webkit-mask: none !important; mask: none !important;
}





/* Кнопка «Вернуться» — те же правила выравнивания */
.cases-index .backlink{
  display:inline-flex; align-items:center; gap:8px;
  margin: 6px 0 18px;
  padding: 0;
  color: var(--neon);
  text-decoration: none;
  font: 14px/1.6 "Montserrat","Ubuntu",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.cases-index .backlink:hover{ color: var(--text, #eafcff); text-decoration: underline; }

/* Чуть-чуть «развяжем» коллапс отступов с h1 */
.cases-index__head{ padding-top: 2px; }

/* Сетка карточек уже сидит в паддингах .cases-index — не даём ей свой контейнер */
#cases-list{ margin: 0; padding: 0 0 40px; justify-content: start; }