/* Портал Борисоглебска — страница «О городе» (gorod.html). Только стили этой страницы.
   Подключение: core/fonts.css → core/base.css → css/site.css → css/page-gorod.css → core/a11y.css
   Правила сайта: цвета только var(--c-*), --c-illu-* только внутри декоративных SVG, размеры в rem.

   1. Первый экран с панорамой: .gorod-head
   2. История: .history (липкий заголовок + лента)
   3. Символы: .symbols .legend
   4. Что посмотреть: .mosaic--gorod .place--feature .place--media .place--grove
   5. Люди: .people-layout .people-group
   6. День города: .city-day
   7. Версия для слабовидящих */

/* 1. Первый экран: панорама стоит на нижней линейке блока */
.page-head--art { padding-bottom: 0; }
.gorod-head { display: grid; gap: 1.75rem; }
.gorod-head > * { min-width: 0; }
.gorod-head__art { aspect-ratio: 16 / 9; margin-inline: calc(-1 * var(--gutter)); }
.gorod-head__art svg { width: 100%; height: 100%; }
@media (min-width: 40rem) { .gorod-head__art { width: min(100%, 32rem); aspect-ratio: 600 / 340; margin-inline: auto 0; } }
@media (min-width: 64rem) {
  .gorod-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 0rem + 4vw, 5rem); align-items: end; }
  .gorod-head__text { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
  .gorod-head__art { width: 100%; }
}

/* 2. История: точка года закрашивается, когда до неё дошла линия (page-gorod.js) */
.history { display: grid; gap: 2.5rem; }
.history > * { min-width: 0; }
.history .history__head { margin-bottom: 0; }
.history__art, .history__note { display: none; }
.history .timeline__item::before { transition: background-color var(--dur-2) var(--ease-in-out); }
.history .timeline__item.is-passed::before { background: var(--c-accent); }
/* Липкие заголовки — только когда экран достаточно высокий, чтобы колонка поместилась целиком */
@media (min-width: 64rem) and (min-height: 44rem) {
  .history__aside, .people-layout > .section-head { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}
@media (min-width: 64rem) {
  .history { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(2.5rem, 0rem + 5vw, 6rem); align-items: start; }
  .history__art { display: block; margin-top: 2.25rem; overflow: hidden; aspect-ratio: 32 / 26; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-bg); }
  .history__art svg { width: 100%; height: 100%; }
  .history__note { display: block; margin-top: 0.625rem; }
}

/* 3. Символы */
.symbols { display: grid; gap: 2.5rem; }
.symbols > * { min-width: 0; }
.symbols__note { margin-top: 1rem; max-width: 38rem; }
.symbols__figure { display: grid; gap: 0.625rem; align-content: start; }
.symbols__art { overflow: hidden; aspect-ratio: 1; max-width: 26rem; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-surface); }
.symbols__art svg { width: 100%; height: 100%; }
@media (min-width: 56rem) {
  .symbols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 0rem + 5vw, 6rem); align-items: center; }
  .symbols__figure { order: -1; }
  .symbols__art { max-width: none; }
}
.legend { margin: 2rem 0 0; border-top: 1px solid var(--c-ink); }
.legend > div { display: grid; gap: 0.25rem 2rem; padding-block: 1rem 1.125rem; border-bottom: 1px solid var(--c-line); }
@media (min-width: 40rem) { .legend > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.legend dt { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; }
.legend dd { margin: 0; color: var(--c-ink-2); }
.symbols__facts { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin: 1.75rem 0 0; }
.symbols__facts > div { display: grid; gap: 0.125rem; }
.symbols__facts dt { font-size: 0.875rem; color: var(--c-ink-2); }
.symbols__facts dd { margin: 0; font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }

/* 4. Что посмотреть: своя раскладка мозаики */
@media (min-width: 64rem) {
  .mosaic--gorod { grid-auto-flow: row; grid-template-areas: "a a b c" "a a d e" "f f g h" "i i i i"; }
  .mosaic--gorod > :nth-child(1) { grid-area: a; }
  .mosaic--gorod > :nth-child(2) { grid-area: b; }
  .mosaic--gorod > :nth-child(3) { grid-area: c; }
  .mosaic--gorod > :nth-child(4) { grid-area: d; }
  .mosaic--gorod > :nth-child(5) { grid-area: e; }
  .mosaic--gorod > :nth-child(6) { grid-area: f; }
  .mosaic--gorod > :nth-child(7) { grid-area: g; }
  .mosaic--gorod > :nth-child(8) { grid-area: h; }
  .mosaic--gorod > :nth-child(9) { grid-area: i; }
}
.mosaic--gorod .place__foot .link-arrow { margin-left: auto; }
.place--feature .place__art { aspect-ratio: 15 / 8; }
:is(.place--feature, .place--grove) .place__title { font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem); line-height: 1.15; }
:is(.place--feature, .place--grove) .place__text { font-size: 1rem; max-width: 36rem; }
@media (min-width: 40rem) {
  .place--media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); grid-template-rows: auto auto 1fr; column-gap: 1.75rem; row-gap: 0.5rem; }
  .place--media > * { grid-column: 1; }
  /* Иллюстрация сбоку не задаёт высоту плитки: её задаёт текст */
  .place--media > .place__art { position: relative; grid-column: 2; grid-row: 1 / -1; aspect-ratio: auto; min-height: 10rem; margin: -1.25rem -1.25rem -1rem 0; }
  .place--media > .place__art svg { position: absolute; inset: 0; }
  .place--media > .place__foot { align-self: end; }
  .place--grove { grid-template-rows: auto auto auto 1fr; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.place--media .place__art { background: none; }
/* На телефоне места между двумя крупными карточками — список с разделителями */
@media (max-width: 39.9375rem) {
  .mosaic--gorod { gap: 0; }
  .mosaic--gorod .place:not(.place--feature, .place--grove) { padding-inline: 0; border-width: 0 0 1px; border-radius: 0; background: none; }
  .mosaic--gorod .place:not(.place--feature, .place--grove) .place__foot { padding-top: 0; border-top: 0; }
  .mosaic--gorod .place--feature { margin-bottom: 0.25rem; }
  .mosaic--gorod .place--grove { margin-top: 1rem; }
  .place--media:not(.place--grove) .place__art { display: none; }
}
.place__stats { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; margin: 0.5rem 0 0; }
.place__stats > div { display: flex; flex-direction: column-reverse; gap: 0.125rem; }
.place__stats dt { font-size: 0.875rem; }
.place__stats dd { margin: 0; font-family: var(--font-display); font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.375rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.place__stats small { font-family: var(--font-text); font-size: 1rem; font-weight: 500; letter-spacing: 0; }

/* 5. Люди */
.people-layout { display: grid; gap: 0; }
.people-layout > * { min-width: 0; }
@media (min-width: 64rem) {
  .people-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(2.5rem, 0rem + 5vw, 6rem); align-items: start; }
  .people-layout > .section-head { margin-bottom: 0; }
}
.people-group + .people-group { margin-top: clamp(2.25rem, 1.75rem + 1.5vw, 3rem); }
.people-group__title { margin-bottom: 0.75rem; font-family: var(--font-text); font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--c-ink-2); }
@media (min-width: 40rem) { .people-group .person { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); column-gap: 2rem; } }

/* 6. День города */
.city-day { padding-block: clamp(3rem, 2rem + 3.5vw, 5rem); }
.city-day__grid { display: grid; gap: 1.75rem 3rem; align-items: center; }
.city-day__grid > * { min-width: 0; }
@media (min-width: 48rem) { .city-day__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.city-day__date { order: -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--c-line-on-brand); font-family: var(--font-display); font-weight: 600; line-height: 0.9; }
.city-day__num { font-size: clamp(4.5rem, 3.2rem + 4.5vw, 7.5rem); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.city-day__month { font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.75rem); letter-spacing: -0.01em; }
.city-day__lead { margin-top: 1rem; max-width: 36rem; font-size: var(--fs-lead); line-height: 1.5; }
.city-day__more { margin-top: 0.75rem; max-width: 36rem; }

/* 7. Версия для слабовидящих */
html[data-a11y="on"] .page-head--art { padding-bottom: 2rem; }
html[data-a11y="on"] :is(.history__aside, .people-layout > .section-head) { position: static; }
html[data-a11y="on"] .place--media { display: flex; }
html[data-a11y="on"] :is(.symbols, .legend > div) { grid-template-columns: minmax(0, 1fr); }
html[data-a11y="on"] .mosaic--gorod .place { padding-inline: 0.75rem; }
html[data-a11y="on"] .mosaic--gorod .place__title { font-size: 1rem; }
html[data-a11y="on"] .place__stats dd { font-size: 1.5rem; }
html[data-a11y="on"] .symbols__facts dd { font-size: 1.25rem; }
html[data-a11y="on"] :is(.legend dt, .symbols__facts dt) { overflow-wrap: anywhere; }