/*
 * Блоки страницы (docs/25, docs/28): «Настоятель и духовенство», «История по годам», «Правила посещения»,
 * «Как добраться», цена в карточке поездки, «Помочь монастырю». «Святыни», «Поездки», «Вопросы и ответы»
 * собраны из готовых .op-card, .op-grid, .op-split, .op-accordion, .op-badge. Только токены, mobile-first.
 * Фокус и prefers-reduced-motion заданы глобально в base.css.
 */

/* ---- Настоятель и духовенство ---- */
.op-person {
  min-width: 0;
  text-align: center;
}

.op-person__photo {
  width: 100%;
  max-width: calc(var(--space-24) * 2);
  aspect-ratio: 1;
  margin: 0 auto var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-full);
}

.op-person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.op-person__name {
  margin-bottom: var(--space-1);
  font-size: var(--text-h4);
}

.op-person__role {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.op-person > :last-child {
  margin-bottom: 0;
}

/* Имя и фото — ссылки на страницу священнослужителя (docs/79): имя тёмное, как заголовок */
a.op-person__photo {
  display: block;
}

.op-person__name a {
  color: inherit;
  text-decoration: none;
}

.op-person__name a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Страница священнослужителя: фото сверху на телефоне, слева от биографии с 48rem; без фото — одна колонка */
.op-person-page {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}

.op-person-page__photo {
  width: 12rem;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.op-person-page__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.op-person-page__body {
  min-width: 0;
  max-width: var(--container-narrow);
}

.op-person-page__body .op-person__role {
  margin-bottom: 0;
}

.op-person-page__back {
  margin: var(--space-8) 0 0;
}

@media (min-width: 48rem) {
  .op-person-page--photo {
    gap: var(--space-12);
    grid-template-columns: 18rem minmax(0, 1fr);
    align-items: start;
  }

  .op-person-page__photo {
    width: 100%;
  }
}

/* ---- История по годам: вертикальная лента, маркер стоит на линии ---- */
.op-timeline {
  max-width: var(--container-narrow);
  margin: 0;
  padding: 0;
  list-style: none;
}

.op-timeline__item {
  position: relative;
  padding: 0 0 var(--space-8) var(--space-6);
  border-left: var(--border-width-strong) solid var(--color-border);
}

.op-timeline__item:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

/* Центр маркера (--space-4) совпадает с серединой линии (--border-width-strong) */
.op-timeline__item::before {
  content: "";
  position: absolute;
  top: var(--space-1);
  left: calc(var(--space-2) * -1 - var(--border-width));
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-decor);
}

.op-timeline__year {
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

.op-timeline__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-h4);
}

.op-timeline__media {
  max-width: calc(var(--space-24) * 3);
  margin-top: var(--space-3);
}

.op-timeline__item > :last-child {
  margin-bottom: 0;
}

/* ---- Правила посещения ---- */
.op-rules {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.op-rules__item {
  padding-left: var(--space-4);
  border-left: var(--border-width-strong) solid var(--color-decor);
}

.op-rules__title {
  margin-bottom: var(--space-1);
  font-size: var(--text-h5);
}

.op-rules__item > :last-child {
  margin-bottom: 0;
}

/* ---- Как добраться: нумерованные шаги ---- */
.op-steps {
  display: grid;
  gap: var(--space-5);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  counter-reset: op-steps;
}

.op-steps__item {
  display: grid;
  grid-template-columns: var(--hit-min) minmax(0, 1fr);
  gap: var(--space-4);
  counter-increment: op-steps;
}

.op-steps__item::before {
  content: counter(op-steps);
  display: grid;
  place-items: center;
  width: var(--hit-min);
  height: var(--hit-min);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-heading);
  font-size: var(--text-h5);
  font-weight: var(--font-weight-bold);
}

.op-steps__title {
  margin-bottom: var(--space-1);
  font-size: var(--text-h5);
}

.op-steps__item p {
  margin-bottom: 0;
}

/* ---- Поездки: цена текстом ---- */
.op-card__price {
  margin-bottom: var(--space-4);
  font-weight: var(--font-weight-semibold);
}

/* ---- Помочь монастырю: мягкий фон не перебивается чередованием секций главной (.op-sections, sections.css) ---- */
.op-sections > section.op-help.op-section:nth-of-type(n) {
  background: var(--color-section-tint);
}

/* Длинные слова и адреса переносятся, блоки не шире экрана на 320 px */
.op-person,
.op-timeline__item,
.op-rules__item,
.op-steps__item,
.op-card__price {
  overflow-wrap: anywhere;
}

/* ---- Встроенный код (docs/52): чужой виджет не шире колонки и без прокрутки страницы вбок ---- */
.op-embed-code__note {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
}

.op-embed-code {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.op-embed-code iframe,
.op-embed-code img,
.op-embed-code video {
  max-width: 100%;
}

/* ---- Лента новостей (docs/54): карточки столбиком, фото слева, текст справа; на телефоне фото над текстом ---- */
.op-feed {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.op-feed > li {
  margin: 0;
}

.op-feed__media {
  border-radius: 0;
}

.op-feed__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-4) var(--space-5);
}

.op-feed__meta {
  margin: 0 0 var(--space-2);
}

.op-feed__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.op-feed__text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  color: var(--color-text-muted);
}

@media (min-width: 48rem) {
  .op-feed {
    gap: var(--space-6);
  }

  .op-feed__item:not(.op-card--text) {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) 2fr;
  }

  .op-feed__item .op-feed__media {
    height: 100%;
    min-height: 12rem;
    aspect-ratio: auto;
  }

  .op-feed__body {
    justify-content: center;
    padding: var(--space-6);
  }
}

/*
 * ---- Новости компактно (docs/55): три средние карточки, остальные строками с маленьким фото ----
 * Телефон: средняя только первая, остальные строками. От 48rem: средние по три в ряд, строки в две колонки.
 */
.op-compact {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.op-compact__item {
  min-width: 0;
  margin: 0;
}

.op-compact__card {
  position: relative;
  display: grid;
  height: 100%;
}

.op-compact__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.op-compact__meta {
  margin: 0 0 var(--space-1);
}

.op-compact__text {
  display: -webkit-box;
  margin: var(--space-2) 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--color-text-muted);
}

/* Средняя карточка: фото сверху, тень и скругление как у .op-card */
.op-compact__item--first .op-compact__card {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-ui);
}

.op-compact__item--first .op-compact__card:hover {
  box-shadow: var(--shadow-raised);
}

.op-compact__item--first .op-compact__media {
  border-radius: 0;
}

.op-compact__item--first .op-compact__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.op-compact__item--first .op-compact__title {
  font-size: var(--text-h5);
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.op-compact__item--first.op-compact__item--nophoto .op-compact__card {
  border-top: var(--border-width-strong) solid var(--color-decor);
}

/* Строка: маленькое квадратное фото слева, разделитель снизу */
.op-compact__item:not(.op-compact__item--first) .op-compact__card {
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-3);
  align-items: start;
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.op-compact__item--nophoto:not(.op-compact__item--first) .op-compact__card {
  grid-template-columns: 1fr;
}

.op-compact__item:not(.op-compact__item--first) .op-compact__media {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
}

.op-compact__item:not(.op-compact__item--first) .op-compact__text {
  display: none;
}

.op-compact__item:not(.op-compact__item--first) .op-compact__title a:hover {
  color: var(--color-primary);
}

@media (min-width: 48rem) {
  .op-compact {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .op-compact__item--row {
    grid-column: span 3;
  }

  .op-compact__item--top {
    grid-column: span 2;
  }

  /* На компьютере средние все три (вес выше, чем у правил строк с :not(--first)) */
  .op-compact__item.op-compact__item--top .op-compact__card {
    grid-template-columns: none;
    align-content: start;
    gap: 0;
    padding-bottom: 0;
    overflow: hidden;
    border-bottom: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-ui);
  }

  .op-compact__item.op-compact__item--top .op-compact__card:hover {
    box-shadow: var(--shadow-raised);
  }

  .op-compact__item.op-compact__item--top .op-compact__media {
    aspect-ratio: 3 / 2;
    border-radius: 0;
  }

  .op-compact__item.op-compact__item--top .op-compact__body {
    padding: var(--space-4) var(--space-5) var(--space-5);
  }

  .op-compact__item.op-compact__item--top .op-compact__title {
    font-size: var(--text-h5);
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .op-compact__item.op-compact__item--top .op-compact__text {
    display: -webkit-box;
  }

  .op-compact__item.op-compact__item--top.op-compact__item--nophoto .op-compact__card {
    height: auto; /* без фото — по высоте текста, а не пустая карточка во весь ряд */
    border-top: var(--border-width-strong) solid var(--color-decor);
  }
}

/* ---- Быстрые ссылки (docs/78): плитки .op-card--feature, вся плитка — ссылка. На телефоне две в ряд,
   с 48rem — три (четыре плитки — по две), с 64rem — все в ряд (шесть — по три). ---- */
.op-quick {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.op-quick--1 {
  grid-template-columns: minmax(0, 1fr);
}

.op-quick__item .op-card__body {
  padding: var(--space-4);
}

.op-quick__item .op-card__icon {
  margin-bottom: var(--space-3);
}

.op-quick__title {
  margin-bottom: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-h6);
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}

.op-quick__text {
  font-size: var(--text-sm);
}

@media (min-width: 48rem) {
  .op-quick {
    gap: var(--space-6);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .op-quick--1 {
    grid-template-columns: minmax(0, 1fr);
  }

  .op-quick--2,
  .op-quick--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .op-quick__item .op-card__body {
    padding: var(--space-6);
  }

  .op-quick__title {
    font-size: var(--text-h5);
  }
}

@media (min-width: 64rem) {
  .op-quick--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .op-quick--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .op-quick--5 .op-card__body {
    padding: var(--space-4);
  }
}