:root {
  --npage-gap-40: 2.5rem;
  --npage-gap-32: 2rem;
  --npage-gap-24: 1.5rem;
  --npage-gap-16: 1rem;
  --npage-bg-chip: #e6e6ec;
  --npage-text: #000413;
  --npage-text-60: rgba(0, 4, 19, 0.6);
  --npage-radius-xl: 2.75rem;
  --npage-radius-lg: 1.5rem;
  --npage-radius-md: 1rem;
}

.npage {
  display: grid;
  gap: 2rem;
  padding-bottom: 9rem;
}
@media (max-width: 33.75rem) {
  .npage {
    gap: 1.5rem;
  }
}
.npage__in {
  display: grid;
  gap: var(--npage-gap-32);
}
.npage-head-top {
  display: grid;
  gap: var(--npage-gap-24);
}
@media (min-width: 48rem) {
  .npage-head-top {
    grid-template-columns: repeat(2, 20.875rem);
    justify-content: start;
    align-items: start;
  }
}
.npage-head {
  display: grid;
  gap: 2rem; /* между группой и тегами */
  position: relative;
}
.npage-found {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: rgb(0, 0, 0, 0.6);
}
@media (max-width: 33.75rem) {
  .npage-found {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 1rem;
    line-height: 150%;
    letter-spacing: -0.02em;
    color: rgb(0, 0, 0, 0.6);
  }
}
.npage-head-group {
  display: grid;
  gap: 1.5rem; /* между h1 и кнопкой */
}

.npage-period {
  border-radius: 1.5rem;
  padding: 1.5rem 1rem;
  width: 10.875rem;
}
.npage-search {
  border-radius: 1.5rem;
  padding: 1.5rem 1rem;
  width: 20.875rem;
}

.npage-title {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 2.75rem;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: var(--npage-text);
  padding-top: var(--npage-gap-40);
}

.npage-period {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: start;
  gap: 0.75rem;
  border-radius: 1.5rem;
  padding: 1.5rem 1rem;
  background: var(--npage-bg-chip);
  border: 0;
  color: var(--npage-text);
}
.npage-period.is-active {
  background: #332d8d;
  color: #fff;
}

.npage-period.is-active svg path {
  stroke: #fff;
  fill: #fff;
}

.npage-period__icon,
.npage-period__arr {
  display: grid;
  place-items: center;
}

.npage-period__text {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 120%;
  letter-spacing: -0.02em;
  text-wrap: nowrap;
}

.npage-search_icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.npage-pager__arrows {
  width: 0.75rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.npage-cats {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.npage-cats__item {
  display: grid;
}

.ncal__nav-ico {
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
}

.npage-cat {
  display: grid;
  align-items: center;
  border-radius: 1.25rem;
  padding: 1.5rem 1rem;
  background: #fff;
  border: 0.0625rem solid rgba(0, 4, 19, 0.08);
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 500;
  color: var(--npage-text);
  text-decoration: none;
  border: none;
}
@media (max-width: 33.75rem) {
  .npage-cat {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 96%;
    letter-spacing: -0.03em;
    text-align: center;
    padding: 1rem 0.75rem;
    border-radius: 1rem;
  }
  .npage-period {
    border-radius: 1.5rem;
    padding: 1.5rem 1rem;
    font-weight: 400;
    font-size: 1rem;
    line-height: 96%;
    letter-spacing: -0.03em;
    text-align: center;
  }
}
.npage-subcat {
  transition: background 300ms ease-out;
}

@media (hover: hover) {
  .npage-subcat:hover {
    background: var(--belyy);
  }
}
.npage-cat--active {
  background: #2e2f8c;
  color: #fff;
}
/* --- ACTIVE STATE: категории и подкатегории --- */
.npage-cat.npage-cat--active,
.npage-subcat.npage-cat--active {
  background: #2e2f8c;
  color: #fff;
}

/* Чтобы :visited не сбивал цвет текста */
.npage-cat.npage-cat--active:link,
.npage-cat.npage-cat--active:visited,
.npage-subcat.npage-cat--active:link,
.npage-subcat.npage-cat--active:visited {
  color: #fff;
}

.npage-search {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  align-items: center;
  gap: 0.75rem;
  border-radius: 1.5rem;
  padding: 1.5rem 1rem;
  width: 20.875rem;
  background: var(--npage-bg-chip);
  color: var(--npage-text);
}

.npage-search__icon {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
}
@media (max-width: 33.75rem) {
  .npage-search__icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}
.npage-search__input {
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font-family);
  font-size: 1rem;
  color: var(--npage-text-60);
}

.npage-grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  row-gap: 6rem;
}

@media (max-width: 33.75rem) {
  .npage-grid {
    grid-template-columns: 1fr;
    row-gap: 4rem;
  }
}

.npage-card {
  display: grid;
  height: 100%;
  border-radius: var(--npage-radius-md);
}

.npage-card__link {
  display: grid;
  height: 100%;
  gap: var(--npage-gap-16);
  text-decoration: none;
  color: inherit;
  align-content: flex-start;
}

.npage-card__media {
  display: grid;
  border-radius: var(--npage-radius-xl);
  overflow: hidden;
  background: #ececf1;
  aspect-ratio: 16/9;
}

.npage-card__body {
  display: grid;
  gap: 1rem;
  grid-auto-rows: min-content;
}
@media (max-width: 33.75rem) {
  .npage-card__body {
    gap: 0.5rem;
  }
}
.npage-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}

.npage-tag {
  display: inline-grid;
  align-items: center;
  padding: 0.75rem 0.5rem;
  border-radius: 0.75rem;
  background: #e6e6ec;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 120%;
  color: rgb(0, 0, 0, 0.6);
  text-decoration: none;
}
.npage-card__title a {
  color: inherit;
  text-decoration: none;
}
@media (max-width: 33.75rem) {
  .npage-tag {
    border-radius: 0.75rem;
    padding: 0.5rem;
    font-size: 0.875rem;
    line-height: 136%;
    letter-spacing: -0.02em;
  }
}
.npage-card__title {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 2rem;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: #000413;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
}
@media (max-width: 33.75rem) {
  .npage-card__title {
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 120%;
    letter-spacing: -0.02em;
  }
}

.npage-card__excerpt {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: var(--npage-text-60);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.npage-card__date {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: #000413;
}
/* Якорь и позиционирование */
.npage-period-wrap {
  position: relative;
  display: inline-grid; /* было grid — растягивалось на 100% */
  width: max-content; /* ширина = по содержимому (кнопке) */
  justify-self: start;
  align-self: start;
}
.ncal {
  position: absolute;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
  width: 22.1875rem;
  height: 45.25rem;
  padding: 2rem 1.5rem;
  border-radius: 2.75rem;
  background: #fff;
  box-shadow: 0 0.5rem 4rem 0 rgba(0, 4, 19, 0.1);
  overflow: hidden;
}

/* hover / active для кнопки */
.npage-period {
  transition: background-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.npage-period:hover {
  background: #fff;
  color: var(--npage-text);
  box-shadow: 0 0 0 0.0625rem rgba(0, 4, 19, 0.08) inset;
}
.npage-period.is-active {
  background: #332d8d;
  color: #fff;
}
.npage-period.is-active svg path {
  stroke: #fff;
  fill: #fff;
}

/* Шапка календаря */
.ncal__panel {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.ncal__nav {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: #ececf1;
  border: none;
  cursor: pointer;
}

.ncal__year {
  font: 600 1.5rem/1 var(--font-family);
  letter-spacing: -0.02em;
  text-align: center;
}

/* Сетка месяцев */
.ncal__months {
  display: grid;
  gap: 1.8125rem;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ncal__months::-webkit-scrollbar {
  display: none;
}
.ncal-month {
  display: grid;
  gap: 1rem;
}
/* Маска под зум */
.npage-card__media {
  position: relative;
  overflow: hidden;
}

/* База: картинка без зума */
.npage-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1);
  transform-origin: center;
  transition: transform 300ms ease-out;
}

.ncal-month__title {
  font: 600 1.25rem/1 var(--font-family);
  text-align: center;
}

.ncal-month__grid {
  display: grid;
  grid-template-columns: repeat(7, 2.75rem);
  grid-auto-rows: 2.75rem;
  gap: 0;
  justify-content: start;
}

/* день: без бордеров/тени по умолчанию */
.ncal-day {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  font: 500 1rem/1 var(--font-family);
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0.625rem; /* мягкие уголки как в фигме */
  cursor: pointer; /* “палец” */
}

/* локальный стек: между категориями и подкатегориями = 2rem */
.npage-cats-stack {
  display: grid;
  gap: 2rem;
}

/* подкатегории — отдельные классы */
.npage-subcats {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.npage-subcats__item {
  display: grid;
}
.npage-subcat {
  border-radius: 0.75rem;
  padding: 0.75rem;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1rem;
  line-height: 96%;
  letter-spacing: -0.02em;
  color: rgb(0, 0, 0, 0.6);
  background: #e6e6ec;
  text-decoration: none;
}
.npage-subcat--active {
  background: #2e2f8c;
  color: #fff;
}
.npage-card__meta {
  display: grid;
  row-gap: 1.5rem;
}
@media (max-width: 33.75rem) {
  .npage-card__meta {
    row-gap: 1rem;
  }
}

:root {
  --npage-gap-64: 4rem;
}

/* 2rem между верхней группой и блоком (теги+поиск) */
.npage-head {
  display: grid;
  gap: var(--npage-gap-32);
}

/* 4rem между (категории+подкатегории) и поиском */
.npage-head-bottom {
  display: grid;
  gap: var(--npage-gap-64);
}

.npage-cats-stack {
  display: grid;
  gap: var(--npage-gap-32);
}

.ncal-day--selected {
  background: #2e2f8c;
  color: #fff;
}
.ncal-day--weekend {
  color: #e24b37;
}

/* серые, если не текущий месяц */
.ncal-day--muted {
  color: rgba(0, 4, 19, 0.35);
}

/* диапазон/края диапазона */
.ncal-day--inrange {
  background: rgba(46, 47, 140, 0.14);
}
.ncal-day--edge {
  background: #2e2f8c;
  color: #fff;
}
/* Быстрые пресеты и Применить */
.ncal__quick {
  display: grid;
  grid-auto-flow: column;
  gap: 0.5rem;
  justify-content: start;
}
.ncal__apply {
  display: grid;
  place-items: center;
  height: 2.75rem;
  border-radius: 1rem;
  border: 0;
  background: #2e2f8c;
  color: #fff;
  font: 600 1rem/1 var(--font-family);
}
.ncal__apply:disabled {
  pointer-events: none;
}
/* гарантированно скрываем поповер, если hidden стоит */
.ncal[hidden] {
  display: none !important;
  pointer-events: none;
  visibility: hidden;
}
.ncal__footer {
  display: grid;
  gap: 1.5rem;
}

.ncal__quick {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.ncal__chip {
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
}

.ncal__apply {
  display: grid;
  place-items: center;
  height: 3.5rem;
  border-radius: 1.5rem;
  border: 0;
  background: #e6e6ec;
  color: var(--npage-text);
  font: 600 1rem/1 var(--font-family);
  cursor: pointer;
}
/* 2.1. Поповер — размеры/тень/раскладка по макету */
.ncal {
  width: 22.1875rem;
  height: 45.25rem;
  border-radius: 2.75rem;
  padding: 2rem 1.5rem; /* 32 сверху, 24 по бокам и снизу */
  padding-bottom: 1.5rem;
  box-shadow: 0 0.5rem 4rem 0 rgba(0, 4, 19, 0.1);
  display: grid;
  grid-template-rows: auto 1fr auto; /* панель — скролл — футер (кнопки) */
}
.npage-period-wrap {
  position: relative;
}

.ncal {
  position: absolute;
  left: calc(100% + 1rem); /* вправо от кнопки */
  z-index: 50;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
  box-shadow: 0 0.5rem 4rem 0 rgba(0, 4, 19, 0.1);
  border-radius: 2.75rem;
  background: #fff;
  overflow: hidden;
}

/* 2.2. Панель года/стрелок — по центру, gap 1.5rem */
.ncal__panel {
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  gap: 1.5rem;
}
.ncal__nav {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: #ececf1;
  border: 0;
  cursor: pointer;
}

/* 2.3. Контейнер месяцев — скроллим контент внутри */
.ncal__months {
  display: grid;
  gap: 1.8125rem; /* между месяцами */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ncal__months::-webkit-scrollbar {
  display: none;
}

/* 2.4. Заголовок месяца и сетка */
.ncal-month {
  display: grid;
  gap: 1rem;
}
.ncal-month__title {
  font: 600 1.25rem/1 var(--font-family);
  text-align: center;
}

/* ВАЖНО: здесь у тебя не было display:grid */
.ncal-month__grid {
  display: grid;
  grid-template-columns: repeat(7, 2.75rem);
  grid-auto-rows: 2.75rem;
  gap: 0; /* «впритык» */
  justify-content: center;
}

/* 2.5. День — без бордеров/тени. Ховер — мягкая заливка. */
.ncal-day {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  font: 500 1rem/1 var(--font-family);
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0.625rem;
  cursor: pointer;
  padding: 0;
}
.ncal-day:hover {
  background: rgba(0, 4, 19, 0.06);
}
.ncal-day--weekend {
  color: #e24b37;
}
.ncal-day--muted {
  color: rgba(0, 4, 19, 0.35);
}
.ncal-day--inrange {
  background: rgba(46, 47, 140, 0.14);
}
.ncal-day--edge {
  background: #2e2f8c;
  color: #fff;
}

/* 2.6. Нижняя панель — отступы по макету */
.ncal__quick {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.ncal__chip {
  min-width: 7.25rem;
  height: 2.3125rem;
  border-radius: 0.75rem;
  border: 0;
  background: #e6e6ec;
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 96%;
  letter-spacing: -0.02em;
  color: rgba(0, 0, 0, 0.6);
}

.ncal__apply {
  height: 3.5rem;
  border-radius: 1.25rem;
  border: 0;
  background: #e6e6ec;
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 96%;
  letter-spacing: -0.02em;
  color: #000;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.ncal__apply:disabled {
  cursor: default;
}

:root {
  --ncal-cell: 2.75rem;
  --ncal-cols: 7;
  --ncal-pad-x: 1.5rem; /* как у тебя в .ncal */
}

/* поповер = ровно контент (7*44) + паддинги слева/справа */
.ncal {
  box-sizing: border-box;
  inline-size: calc(
    2 * var(--ncal-pad-x) + var(--ncal-cols) * var(--ncal-cell)
  );
}

/* сетка дней уже прижата влево, оставляем эти финальные значения */
.ncal-month__grid {
  display: grid;
  grid-template-columns: repeat(var(--ncal-cols), var(--ncal-cell));
  grid-auto-rows: var(--ncal-cell);
  gap: 0;
  justify-content: start;
  width: max-content;
}
.ncal__months {
  justify-items: start;
}

.ncal-month {
  justify-items: center;
}
:root {
  --ncal-cell: 2.75rem;
  --ncal-cols: 7;
  --ncal-pad-x: 1.5rem;
  --ncal-grid: calc(var(--ncal-cols) * var(--ncal-cell));
}

/* поповер строго под контент */
.ncal {
  box-sizing: border-box;
  inline-size: calc(2 * var(--ncal-pad-x) + var(--ncal-grid));
}

/* единое выравнивание внутри */
.ncal__months {
  justify-items: start;
}

/* заголовок месяца — влево */
.ncal-month__title {
  text-align: left;
}

/* панель года и футер «встают» на ту же колонну */
.ncal__panel,
.ncal__footer {
  justify-self: start;
  inline-size: var(--ncal-grid);
}

/* раскладка панели: стрелка — год — стрелка, центр года внутри 19.25rem */
.ncal__panel {
  display: grid;
  grid-template-columns: var(--ncal-cell) 1fr var(--ncal-cell);
  align-items: center;
  gap: 0;
}
.ncal__year {
  justify-self: center;
}

/* сетка дней — как уже сделано: прижата и без воздуха */
.ncal-month__grid {
  display: grid;
  grid-template-columns: repeat(var(--ncal-cols), var(--ncal-cell));
  grid-auto-rows: var(--ncal-cell);
  gap: 0;
  justify-content: start;
  width: max-content;
}

:root {
  --ncal-cell: 2.75rem;
  --ncal-cols: 7;
  --ncal-grid: calc(var(--ncal-cols) * var(--ncal-cell)); /* 19.25rem */
}

/* одна левая колонна для всех секций */
.ncal {
  justify-items: start;
}
.ncal__panel,
.ncal__months,
.ncal__footer {
  justify-self: start;
  inline-size: var(--ncal-grid);
}

/* футер и его содержимое */
.ncal__footer {
  display: grid;
  gap: 1.5rem;
}

/* Чипы — как в макете: авто-ширина по тексту, центрируем группу */
.ncal__quick {
  display: flex;
  gap: 0.5rem;
  justify-content: center; /* центр группы */
  align-items: center;
  flex-wrap: nowrap; /* не переносим, чтобы сохранялась композиция */
  width: 100%;
}

/* УБРАТЬ растяжение и минимальные ширины */
.ncal__chip {
  box-sizing: border-box;
  inline-size: auto; /* ключевое: авто-ширина */
  min-width: 0; /* снимаем «распорку» */
  white-space: nowrap; /* однострочно как в макете */
  height: 2.3125rem;
  padding: 0.75rem 0.5rem;
}

/* Кнопка — на всю полосу */
.ncal__apply {
  width: 100%;
}
/* панель заголовка календаря: ← 1.5rem → Год ← 1.5rem → */
.ncal > .ncal__panel {
  display: grid;
  grid-template-columns: auto auto auto; /* без 1fr, ничего не расталкивает */
  justify-content: center; /* вся тройка по центру */
  align-items: center;
  column-gap: 1.5rem;
}

/* кнопки-стрелки и год — как были */
.ncal__nav {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: #ececf1;
  border: 0;
}
.ncal__year {
  font-weight: 500;
  font-size: 2rem;
  line-height: 120%;
  letter-spacing: -0.02em;
  text-align: center;
}

/* когда активна — плавный переход к фиолетовому */
.ncal__apply:not(:disabled) {
  background-color: #332d8d;
  color: #fff;
}

/* необязательно, но можно сделать hover чуть светлее */
@media (hover: hover) {
  .ncal__apply:not(:disabled):hover {
    background-color: #4038b0;
  }
}
/* выбранный диапазон */
.ncal-day--inrange {
  background: #332d8d;
  color: #fff;
}

/* hover-червячок от выбранной даты до текущей под мышью */
.ncal-day--hoverrange {
  background: #e6e6ec;
  color: #000;
}

/* края диапазона — скругления */
.ncal-day--edge {
  background: #332d8d;
  color: #fff;
  border-radius: 0.75rem;
}
.npage-period-info {
  display: grid;
  align-items: center;
  width: max-content;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--npage-bg-chip);
  color: var(--npage-text-60);
}

.npage-empty {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  border-radius: 1.25rem;
}
.npage-empty__title {
  font: 600 1.125rem/1.2 var(--font-family);
  color: var(--npage-text);
}
.npage-empty__desc {
  font: 400 0.875rem/1.4 var(--font-family);
  color: var(--npage-text-60);
}
.npage-empty__actions {
  display: grid;
}
.npage-empty__btn {
  display: grid;
  place-items: center;
  height: 2.75rem;
  padding: 0 1rem;
  border-radius: 1rem;
  background: #e6e6ec;
  color: var(--npage-text);
  text-decoration: none;
  font: 600 0.875rem/1 var(--font-family);
}
@media (hover: hover) {
  .npage-empty__btn:hover {
    box-shadow: 0 0 0 0.0625rem rgba(0, 4, 19, 0.08) inset;
  }
}

/* Внутри — свой грид с кастомным gap */
.npage-tags-wrap {
  display: grid;
  gap: 4rem;
}
@media (max-width: 33.75rem) {
  .npage-tags-wrap {
    gap: 2.75rem;
  }
}
/* Контейнер строки поиска: только грид и gap */
.npage-search-wrap {
  display: grid;
  justify-content: start;
}

/* Базовый вид: компактный блок (как у тебя было ~20.875rem) */
.npage-search {
  --search-radius: 1.5rem;
  --search-bg: #e6e6ec;
  --search-h: 3.5rem;

  display: grid;
  grid-auto-flow: column;
  /* 1.5rem иконка + .75rem до поля + поле + группа кнопок */
  grid-template-columns: 1.5rem 1fr auto;
  align-items: center;
  gap: 0.75rem; /* между иконкой и инпутом = .75rem */
  height: var(--search-h);
  width: 20.875rem; /* компактная ширина */
  padding: 0 0.75rem 0 1rem;
  border-radius: var(--search-radius);
  background: var(--search-bg);
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Раскрытое состояние — тянемся на всю доступную ширину родителя */
.npage-search-wrap[data-state="expanded"] .npage-search {
  width: min(100%, 47.5rem); /* при желании подстрой значение */
}

/* Поле ввода — типографика по ТЗ */
.npage-search__input {
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 96%;
  letter-spacing: -0.03em;
  color: var(--npage-text);
  min-width: 0; /* чтобы текст корректно ужимался в гриде */
}

/* Группа кнопок справа: держим gap .5rem между крестиком и submit */
.npage-search__ctrl {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 0.5rem; /* ровно .5rem по ТЗ */
}

/* Крестик */
.npage-search__clear {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  border: 0;
  color: rgba(0, 0, 0);
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Кнопка Найти */
.npage-search__submit {
  display: grid;
  place-items: center;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: 1rem;
  border: 0;
  background: #332d8d;
  color: #fff;
  font: 600 0.875rem/1 var(--font-family);
  cursor: pointer;
  opacity: 0;
  transform: translateX(0.5rem);
  transition: opacity 0.25s ease, transform 0.25s ease,
    background-color 0.25s ease;
}

/* Появление кнопок только в раскрытом состоянии */
.npage-search-wrap[data-state="expanded"] .npage-search__clear,
.npage-search-wrap[data-state="expanded"] .npage-search__submit {
  opacity: 1;
  transform: none;
}

/* Ховеры — только через @media */
@media (hover: hover) {
  .npage-search__clear:hover {
    background: #e6e6ec;
  }
  .npage-search__submit:hover {
    background: #2b2679;
  }
}
@media (hover: hover) {
  .npage-card__link:hover .npage-card__media img,
  .npage-card__link:focus-visible .npage-card__media img {
    transform: scale(1.1);
  }
}
/* Фокус для доступности */
.npage-search__input:focus {
  outline: none;
}
.npage-search__submit:focus,
.npage-search__clear:focus {
  outline: 0.125rem solid rgba(51, 45, 141, 0.3);
  outline-offset: 0.125rem;
}

/* Адаптивы (по твоим правилам) */
@media (max-width: 64rem) {
  .npage-search-wrap[data-state="expanded"] .npage-search {
    width: min(100%, 42.5rem);
  }
}

.npage-search {
  --search-bg: #e6e6ec;
  --search-radius: 1.5rem;
  height: 3.9375rem;
  border-radius: var(--search-radius);
  background: var(--search-bg);
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.5rem 0 1rem;
  width: 20.875rem;
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 33.75rem) {
  .npage-search {
    width: auto;
  }
}
.npage-search-wrap[data-state="expanded"] .npage-search {
  width: min(43rem);
}
@media (max-width: 33.75rem) {
  .npage-search-wrap[data-state="expanded"] .npage-search {
    width: auto;
  }
}
/* глушим встроенный cancel у webkit */
.npage-search__input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* глушим служебные украшалки webkit, чтобы не всплывали иконки */
.npage-search__input[type="search"]::-webkit-search-decoration,
.npage-search__input[type="search"]::-webkit-search-results-button,
.npage-search__input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* старый Edge/IE (на случай совместимости) */
.npage-search__input::-ms-clear,
.npage-search__input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
.npage-search__input::placeholder {
  opacity: 1;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* при раскрытии — placeholder исчезает */
[data-state="expanded"] .npage-search__input::placeholder {
  opacity: 0;
}

/* при сворачивании — возвращается */
[data-state="collapsed"] .npage-search__input::placeholder {
  opacity: 1;
}

.from-period {
  width: 1.5rem;
  height: 1.5rem;
}

/* Глобальные переменные для мобилки */
:root {
  --hdr-h: 5.5rem; /* подставь фактическую высоту шапки на мобилке */
  --ncal-pad-x: 1.5rem;
}

/* === Мобильный full-screen sheet === */
@media (max-width: 33.75rem) {
  .npage-period-wrap {
    position: static;
  } /* якорь больше не нужен для позиционирования */

  .ncal {
    position: fixed;
    inset: calc(var(--hdr-h) + 0.625rem) 0 0 0;
    z-index: 1000;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 1.5rem var(--ncal-pad-x) 1.5rem var(--ncal-pad-x);
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 0.5rem 4rem rgba(0, 0, 0, 0.15);
    background: #fff;
    max-inline-size: none; /* убираем фикс. ширину */
    inline-size: 100%;
    block-size: calc(100dvh - (var(--hdr-h) + 0.625rem));
    overflow: hidden;
    transform: translateY(0); /* для drag анимации */
    will-change: transform;
  }

  /* Перетягиваемая шторка */
  .ncal::before {
    content: "";
    justify-self: center;
    inline-size: 3.5rem;
    block-size: 0.3125rem;
    border-radius: 62.4375rem;
    background: #e6e6ec;
  }

  /* Панель: стрелка — год — стрелка, gap 2.75rem */
  .ncal__panel {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 2.75rem;
    justify-items: center;
  }
  .ncal__year {
    justify-self: center;
  }

  /* Сетка месяцев: гибкая, прячем скроллбар */
  .ncal__months {
    display: grid;
    gap: 1.5rem;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .ncal__months::-webkit-scrollbar {
    display: none;
  }

  /* Гибкий размер ячеек от ширины экрана */
  :root {
    --ncal-cell: clamp(
      2.25rem,
      calc((100vw - 2 * var(--ncal-pad-x)) / 7),
      3rem
    );
  }
  .ncal-month__grid {
    display: grid;
    grid-template-columns: repeat(7, var(--ncal-cell));
    grid-auto-rows: var(--ncal-cell);
    gap: 0;
    justify-content: start;
    inline-size: max-content;
  }

  .ncal__footer {
    display: grid;
    gap: 1.25rem;
  }
  .ncal__apply {
    inline-size: 100%;
    block-size: 3.25rem;
    border-radius: 1.25rem;
  }
}

/* Ховеры только там, где они есть */
@media (hover: hover) {
  .ncal__apply:not(:disabled):hover {
    background: #4038b0;
    color: #fff;
  }
}

.ncal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.24);
  z-index: 999;
}
@media (max-width: 33.75rem) {
  .ncal--sheet {
    position: fixed;
    inset: calc(var(--hdr-h, 3.5rem) + 0.625rem) 0 0 0;
    z-index: 1000;
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 100%;
    height: calc(100dvh - (var(--hdr-h, 3.5rem) + 0.625rem));
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 0.375rem 3rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
    animation: slideUp 0.25s ease-out;
  }

  /* Внутренний скролл */
  .ncal--sheet .ncal__months {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ncal--sheet .ncal__months::-webkit-scrollbar {
    display: none;
  }

  /* Тянем на всю ширину */
  .ncal--sheet .ncal-month__grid {
    width: 100%;
    justify-content: center;
  }

  /* Аккуратная шторка сверху */
  .ncal--sheet::before {
    content: "";
    justify-self: center;
    width: 3.5rem;
    height: 0.3125rem;
    border-radius: 62.4375rem;
    background: #ddd;
  }

  @keyframes slideUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

/* Мобильный sheet: жёстко переопределяем десктопные размеры/позиции */
@media (max-width: 33.75rem) {
  .ncal--sheet {
    position: fixed;
    left: auto;
    right: auto;
    top: auto;
    inset: calc(var(--hdr-h, 3.5rem) + 0.625rem) 0 0 0;

    z-index: 1000;
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 100vw;
    max-width: 100vw;
    height: calc(100dvh - (var(--hdr-h, 3.5rem) + 0.625rem));
    border-radius: 1.5rem 1.5rem 0 0;
    overflow: hidden;
    box-shadow: 0 0.375rem 3rem rgba(0, 0, 0, 0.1);
    transform: translateY(0);
  }

  /* скролл только внутри контента */
  .ncal--sheet .ncal__months {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ncal--sheet .ncal__months::-webkit-scrollbar {
    display: none;
  }

  /* сетка тянется ровно в ширину экрана */
  .ncal--sheet .ncal-month__grid {
    --ncal-pad-x: 1.5rem;
    --ncal-cell: clamp(
      2.25rem,
      calc((100vw - 2 * var(--ncal-pad-x)) / 7),
      3rem
    );
    display: grid;
    grid-template-columns: repeat(7, var(--ncal-cell));
    grid-auto-rows: var(--ncal-cell);
    gap: 0;
    justify-content: center;
    width: 100%;
  }

  /* панель: год и стрелки с gap 2.75rem */
  .ncal--sheet .ncal__panel {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-items: center;
    column-gap: 2.75rem;
  }

  /* шторка-«пилюля» сверху */
  .ncal--sheet::before {
    content: "";
    justify-self: center;
    width: 3.5rem;
    height: 0.3125rem;
    border-radius: 62.4375rem;
    background: #e6e6ec;
  }
}

@media (max-width: 33.75rem) {
  #jsCalendar.ncal--dragging {
    touch-action: none;
  } /* глушим тач во время драга */
}
/* Ручка для шторки + визуальная "пилюля" */
@media (max-width: 33.75rem) {
  #jsCalendar .ncal__grab {
    display: grid;
    place-items: center;
    height: 4rem; /* зона хвата */
    touch-action: none; /* отдаём жест нам, а не браузеру */
  }
  #jsCalendar .ncal__grab::before {
    content: "";
    width: 3.5rem;
    height: 0.3125rem;
    border-radius: 62.4375rem;
    background: #e6e6ec;
  }

  /* на время драга не даём браузеру скроллить */
  #jsCalendar.ncal--dragging {
    touch-action: none;
  }

  /* уже есть, но на всякий случай — скролл только внутри месяцев */
  #jsCalendar .ncal__months {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* между стрелками и годом — 2.75rem (только мобилка) */
  #jsCalendar .ncal__panel {
    grid-template-columns: auto 1fr auto;
    column-gap: 2.75rem;
    justify-items: center;
    align-items: center;
  }
}

/* Hover по дням показываем только там, где есть курсор */
@media (hover: hover) {
  .ncal-day:hover {
    background: rgba(0, 0, 0, 0.06);
  }
}
@media (hover: none) {
  .ncal-day:hover {
    background: transparent;
  }
}
/* На мобилке оставляем только интерактивную шторку .ncal__grab */
@media (max-width: 33.75rem) {
  .ncal::before,
  .ncal--sheet::before {
    content: none;
    display: none;
  }
}
/* Мобилка: дети календаря занимают ширину, ручка центрируется */
@media (max-width: 33.75rem) {
  #jsCalendar {
    justify-items: stretch;
  } /* перебиваем старое start */
  #jsCalendar .ncal__grab {
    display: grid;
    place-items: center;
    height: 4rem;
    touch-action: none;
    justify-self: stretch; /* или: justify-self: center; width:100%; */
    width: 100%;
  }
}
@media (max-width: 33.75rem) {
  /* выравниваем все по сетке */
  #jsCalendar {
    justify-items: stretch;
  }

  /* ручка */
  #jsCalendar .ncal__grab {
    display: grid;
    place-items: center;
    height: 2.75rem; /* делаем чуть меньше, чтобы не отъедала место */
    width: 100%;
    touch-action: none;
    justify-self: stretch;
  }

  /* сама "пилюля" */
  #jsCalendar .ncal__grab::before {
    content: "";
    width: 2.75rem;
    height: 0.125rem;
    border-radius: 62.4375rem;
    background: #e6e6ec;
    padding-top: 0.25rem;
  }

  /* убираем отступ сверху у всей сетки календаря */
  #jsCalendar {
    padding-top: 0;
  }
}

.npage-list {
  display: grid;
  row-gap: 6rem;
}
@media (max-width: 64rem) {
  .npage-list {
    row-gap: 4rem;
  }
}

.npage-pager__in {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  column-gap: 6.25rem;
}

.npage-pager__arrow {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1.125rem;
  background: #e6e6ec;
}
.npage-pager__arrow svg path {
  fill: #000;
}
.npage-pager__arrow.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.npage-pager__list {
  display: flex;
  align-items: center;
  column-gap: 4rem;
  padding: 0.9375rem;
  border-radius: 1.5rem;
}

.npage-pager__num {
  text-decoration: none;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 140%;
  letter-spacing: -0.03em;
  color: rgba(0, 4, 19, 0.5);
}
.npage-pager__num.is-active {
  color: #000413;
  pointer-events: none;
}

.npage-pager__dots {
  font-size: 1.5rem;
  color: rgba(0, 4, 19, 0.5);
  text-decoration: none;
}

.npage-pager {
  display: grid;
  justify-items: center;
}

.npage-pager__arrow--prev svg {
  transform: rotate(180deg);
}
/* планшеты: 541–1024 px */
@media (min-width: 33.8125rem) and (max-width: 64rem) {
  /* 2 карточки в ряд */
  .npage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* квадратные фото внутри карточек */
  .npage-card__media {
    aspect-ratio: 1 / 1;
  }
  .npage-card__media img,
  .npage-card__ph {
    width: 100%;
    height: 100%;
    object-fit: cover; /* вписываем без искажений */
    border-radius: 1.5rem; /* как в макете */
  }
}
@media (max-width: 64rem) {
  .npage-pager {
    /* растянуть саму навигацию */
    justify-items: stretch;
  }

  .npage-pager__in {
    width: 100%; /* важно: тянем на всю ширину контейнера */
    display: grid;
    grid-template-columns: 4rem 1fr 4rem; /* [prev] [numbers] [next] */
    align-items: center;
    column-gap: 0; /* без промежутка между зонами */
  }

  .npage-pager__arrow--prev {
    grid-column: 1;
    justify-self: start; /* прилипает влево */
  }
  .npage-pager__arrow--next {
    grid-column: 3;
    justify-self: end; /* прилипает вправо */
  }

  .npage-pager__list {
    grid-column: 2;
    justify-content: center; /* цифры по центру */
    padding: 0.9375rem; /* как в макете */
    column-gap: 4rem; /* расстояние между 1, 2, 3, … */
  }
}

/* ≤540: компактная пагинация, всё вмещается в экран */
@media (max-width: 33.75rem) {
  .npage-pager {
    justify-items: stretch;
  }

  .npage-pager__in {
    width: 100%;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; /* [←] [числа] [→] */
    align-items: center;
    column-gap: 0;
  }

  /* стрелки: 44×44, радиус 16; svg 8×16 */
  .npage-pager__arrow {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
  }
  .npage-pager__arrow svg {
    width: 0.5rem;
    height: 1rem;
    display: block;
  }
  .npage-pager__arrow--prev svg {
    transform: rotate(180deg);
  }

  /* числа: по центру, шрифт и интервалы как по ТЗ */
  .npage-pager__list {
    grid-column: 2;
    min-width: 0; /* позволяет центру сжиматься */
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 2rem; /* gap между 1,2,3, … */
    padding: 0.9375rem; /* внутренние паддинги только у чисел */
    border-radius: 1.5rem;
    white-space: nowrap;
    overflow: hidden; /* на всякий случай, без горизонт.скролла */
  }

  .npage-pager__num,
  .npage-pager__dots {
    font-weight: 500;
    font-size: 1rem;
    line-height: 140%;
    letter-spacing: -0.03em;
  }
  .npage-pager__num {
    color: rgba(0, 4, 19, 0.5);
    text-decoration: none;
  }
  .npage-pager__num.is-active {
    color: #000413;
    pointer-events: none;
  }
  .ncal {
    gap: 1rem;
  }
}