/* «Авторы фотографий», /avtory-foto/ (письмо МедиаЦЕХа 07, Product Owner 01.11; рамка, раздел 5.16).
   Обычная страница платформы: светлая, Onest, знак без рамки. Сверху метка «ЦЕХ.<номер> · Регион»,
   заголовок и строка о лицензиях; ниже — список: слева маленький кадр (срез угла, как на сайте),
   справа «где на сайте», название и пары «Автор / Источник / Лицензия / Изменения».
   Подвал — короткий (.scenario-footer из scenario.css) в цветах платформы. Сначала телефон. */

.page-credits {
  /* короткий подвал берёт цвета страницы через --sc-* */
  --sc-bg: var(--color-bg);
  --sc-text: var(--color-text);
  --sc-muted: var(--color-text-muted);
  --sc-line: var(--color-line);
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--color-bg);
}
.page-credits .site-header { border-bottom: var(--border-thin) solid var(--color-line); }

.credits { flex: 1 0 auto; }
.credits__inner { max-width: var(--credits-col); padding-top: var(--space-7); padding-bottom: var(--space-8); }

.credits__label { margin: 0; font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
.credits__title { margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-display); line-height: var(--lh-heading); letter-spacing: -0.01em; }
.credits__lead { max-width: 38rem; margin: var(--space-3) 0 0; font-size: var(--fs-body); line-height: var(--lh-text); color: var(--color-text-muted); }

.credits__list { margin: var(--space-6) 0 0; padding: 0; list-style: none; border-top: var(--border-thin) solid var(--color-line); }
.credit { display: grid; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: var(--border-thin) solid var(--color-line); }
.credit__image {
  display: block;
  width: 100%;
  max-width: var(--credit-image);
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--credit-cut)), calc(100% - var(--credit-cut)) 100%, 0 100%);
}
.credit__body { min-width: 0; }
.credit__use { margin: 0; font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
.credit__title { margin: var(--space-1) 0 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); overflow-wrap: anywhere; }
.credit__facts { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--fs-small); line-height: var(--lh-text); }
.credit__fact { display: grid; grid-template-columns: var(--credit-dt) minmax(0, 1fr); gap: var(--space-3); }
.credit__fact dt { color: var(--color-text-muted); }
.credit__fact dd { margin: 0; overflow-wrap: anywhere; }
.credit__fact a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-button-line); text-underline-offset: 0.2em; }
.credit__fact a:hover { text-decoration-color: currentColor; }

@media (max-width: 719px) {
  .credit__fact { grid-template-columns: var(--credit-dt-phone) minmax(0, 1fr); }
}
@media (min-width: 720px) {
  .credits__inner { padding-top: var(--space-8); }
  .credit { grid-template-columns: var(--credit-image) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
}