/* «О нас», «Контакты» и «Где мы» подвала (новая витрина, части 5в и 5г) — по эталону `docs/design/reference/layout.css`
   (`.about__*`, `.contacts`, `.places`, `.place-card`, `.hours`, `.map`). «О нас» (Р82) и «Контакты» (Р39) — широкие
   страницы. Размеры — токенами, цвета — ролями темы. */

/* Общее правило кнопок прежних экранов (`button` в app.css: заливка, тень, отступы, ширина во всю строку и блик) этим
   кнопкам не подходит — они начинают с чистого листа, как детали эталона (`components.css`). */
.places__item, .places__back, .about__shot { min-height: 0; margin: 0; box-shadow: none; background-image: none; letter-spacing: normal; }
button:is(.places__item, .places__back, .about__shot):not(:disabled):not(.ghost) { animation: none; }

/* ── «О нас»: широкая, как главная (Р82) ──────────────────────────────────
   Фото зала — баннером во всю ширину страницы, текст — колонкой для чтения по центру, факты — ровным рядом и галерея —
   сеткой во всю ширину, блок «Где мы» — колонкой. Края страницы — те же, что у главной и «Контактов». */
.screen[data-screen='about'] {
  max-width: var(--page-max); padding: var(--space-4) var(--gutter) var(--space-7);
  font-family: var(--font-text); font-size: var(--text-md); line-height: var(--leading-text); color: var(--ink);
}
.about-page { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.about-page h1 { margin: 0; font-family: var(--font-title); font-size: var(--title-lg); line-height: var(--leading-title); text-align: start; }
.about__brands { justify-self: start; }
.about__place { min-width: 0; }
.about__story { display: grid; gap: var(--space-7); min-width: 0; }
.about__column { display: grid; gap: var(--space-4); align-content: start; width: 100%; max-width: var(--column-max); min-width: 0; margin-inline: auto; }
.about__story h2 { margin: 0; font-family: var(--font-title); font-size: var(--title-xl); line-height: var(--leading-title); overflow-wrap: break-word; }
/* Фото зала — во всю ширину страницы, высотой первого экрана главной; кадр обрезается по краям (`cover`), а не
   сплющивается. Слов на фото нет — затемнять его незачем: заголовок под ним, в колонке. */
.about__hero {
  display: block; width: 100%; height: calc(var(--space-8) * 4); object-fit: cover;
  border-radius: var(--radius-xl); background: var(--cream);
}
@media (min-width: 768px) { .about__hero { height: calc(var(--space-8) * 5 + var(--space-6)); } }
@media (min-width: 1100px) { .about__hero { height: calc(var(--space-8) * 7); } }
.about__lead { margin: 0; font-size: var(--text-lg); line-height: var(--leading-text); }
.about__text { display: grid; gap: var(--space-3); }
.about__text p { margin: 0; }
.about__links { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-2); }
.about__links .btn--primary { color: var(--on-accent); }
/* Бренд без своего текста (Р83): логотип и название. */
.about__brand { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.about__story--bare .about__where { padding-top: var(--space-5); }
.about__logo {
  width: calc(var(--space-8) + var(--space-4)); height: calc(var(--space-8) + var(--space-4)); flex: none; padding: var(--space-2);
  border-radius: var(--radius-pill); background: var(--panel); border: 1px solid var(--border2); object-fit: contain;
}
.about__logo--letter { display: grid; place-items: center; color: var(--accent); font-family: var(--font-title); font-size: var(--title-lg); }
/* Факты — ровным рядом во всю ширину: ячейки одной ширины и высоты, число крупно; на телефоне — строкой «число —
   подпись», одна под другой. */
.about__facts {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; overflow: hidden;
  border: 1px solid var(--border2); border-radius: var(--radius-xl); background: var(--panel);
}
.about__facts div {
  display: grid; align-content: center; justify-items: center; gap: var(--space-1); min-width: 0;
  padding: var(--space-5); text-align: center;
}
.about__facts div + div { border-left: 1px solid var(--border2); }
.about__facts dt {
  max-width: 100%; font-family: var(--font-title); font-size: var(--title-xl); line-height: var(--leading-title);
  color: var(--accent); overflow-wrap: break-word;
}
.about__facts dd { margin: 0; color: var(--muted); }
@media (max-width: 767px) {
  .about__facts { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); }
  .about__facts div { display: flex; align-items: baseline; justify-content: flex-start; gap: var(--space-3); padding: var(--space-4); text-align: start; }
  .about__facts div + div { border-left: 0; border-top: 1px solid var(--border2); }
  /* Число — своей шириной, длинное (владелец вписал «с апреля 2014») переносится в пределах 60 %, а не обрезается. */
  .about__facts dt { flex: none; max-width: 60%; font-size: var(--title-lg); overflow-wrap: anywhere; }
  .about__facts dd { flex: 1 1 0; min-width: 0; }
}
/* Галерея — 4:3 во всю ширину: на ПК по четыре, на телефоне по две; по нажатию — крупно в окне. */
.about__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 768px) { .about__gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } }
.about__shot { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--cream); cursor: zoom-in; overflow: hidden; }
.about__shot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.about__shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* «Где мы» (Р83): точки бренда — каждая ссылкой на свою страницу «Контактов». Кнопка «Где мы» прокручивает сюда: заголовок
   не прячется под липкой шапкой. */
.about__where { display: grid; gap: var(--space-4); min-width: 0; scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.about__where h3 { margin: 0; font-family: var(--font-title); font-size: var(--title-md); line-height: var(--leading-title); }
.about__where h3:focus:not(:focus-visible) { outline: none; }
.about__points {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--space-8) * 4 + var(--space-5))), 1fr));
  gap: var(--space-3); margin: 0; padding: 0; list-style: none;
}
.about__points--one { grid-template-columns: minmax(0, 1fr); }
.about__point {
  display: grid; gap: var(--space-3); align-content: space-between; height: 100%; padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--panel); color: var(--ink);
  text-decoration: none; transition: border-color var(--motion-fast) var(--ease);
}
.about__point-text { display: grid; gap: var(--space-1); min-width: 0; }
/* Одна точка на ПК — строкой: адрес и часы слева, «Карта и контакты →» справа. */
@media (min-width: 768px) {
  .about__points--one .about__point { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); }
}
.about__point:hover { border-color: var(--gold2); }
.about__point:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.about__point-name { font-weight: var(--weight-semibold); line-height: var(--leading-title); overflow-wrap: anywhere; }
.about__point-address, .about__point-today { color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.about__point-more { color: var(--accent); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.about-photo { width: min(100%, calc(var(--space-8) * 15)); }
.about-photo__head { justify-content: flex-end; padding: var(--space-3) var(--space-3) 0; }
.about-photo__body { padding: var(--space-3) var(--space-5) var(--space-5); }
.about-photo__body img { display: block; width: 100%; height: auto; max-height: calc(100vh - var(--space-8) * 2); object-fit: contain; border-radius: var(--radius-lg); }

/* ── «Контакты»: слева поиск и список (или карточка точки), справа карта; телефон — карта сверху ───────────── */
.screen[data-screen='contacts'] {
  max-width: var(--page-max); padding: var(--space-4) var(--gutter) var(--space-7);
  font-family: var(--font-text); font-size: var(--text-md); line-height: var(--leading-text); color: var(--ink);
}
.contacts-page { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.contacts-page h1 { margin: 0; font-family: var(--font-title); font-size: var(--title-lg); line-height: var(--leading-title); text-align: start; }
.contacts { display: grid; grid-template-columns: calc(var(--space-8) * 5 + var(--space-5)) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.contacts--no-map { grid-template-columns: minmax(0, calc(var(--space-8) * 8)); }
.places { display: grid; gap: var(--space-3); min-width: 0; }
.places__browse { display: grid; gap: var(--space-3); }
.places__browse[hidden], .places__card[hidden], .places__empty[hidden] { display: none; }
.places__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.places__item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--panel); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; transition: border-color var(--motion-fast) var(--ease);
}
.places__item:hover, .places__item[aria-current="true"] { border-color: var(--gold2); }
.places__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.places__logo, .place-card__logo {
  width: var(--control-md); height: var(--control-md); flex: none; border-radius: var(--radius-pill); background: var(--cream);
  object-fit: contain; padding: var(--space-1);
}
.places__logo--letter, .place-card__logo--letter {
  display: grid; place-items: center; color: var(--accent); font-family: var(--font-title); font-size: var(--title-sm);
}
.places__text { display: grid; min-width: 0; line-height: var(--leading-title); gap: var(--space-1); }
.places__name { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.places__address { color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.places__status, .place-card__status, .about__point-status { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.places__status.is-open, .place-card__status.is-open, .about__point-status.is-open { color: var(--ink); }
.places__status.is-open::before, .place-card__status.is-open::before, .about__point-status.is-open::before {
  content: ""; display: inline-block; width: var(--space-2); height: var(--space-2); margin-right: var(--space-2);
  border-radius: var(--radius-pill); background: var(--ok); vertical-align: middle;
}
.places__empty { margin: 0; color: var(--muted); }
.places__card { display: grid; gap: var(--space-3); }
.places__back { width: auto; min-height: var(--tap); border: 0; background: transparent; padding: 0; font: inherit; font-weight: var(--weight-semibold); cursor: pointer; }

.place-card { display: grid; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--panel); min-width: 0; }
.drawer .place-card { padding: 0; border: 0; }
.place-card__head { display: flex; align-items: center; gap: var(--space-3); }
.place-card__name { display: grid; gap: var(--space-1); min-width: 0; }
.place-card__title { margin: 0; font-family: var(--font-title); font-size: var(--title-sm); line-height: var(--leading-title); overflow-wrap: anywhere; }
.place-rows { display: grid; gap: var(--space-3); margin: 0; }
.place-row {
  display: grid; grid-template-columns: calc(var(--space-8) + var(--space-2)) minmax(0, 1fr); gap: var(--space-3);
  padding-top: var(--space-3); border-top: 1px solid var(--border2);
}
.place-row__label { color: var(--muted); font-size: var(--text-sm); }
/* Самый узкий телефон: подпись строки — над значением, иначе часы с перерывом не помещаются рядом с ней. */
@media (max-width: 359px) { .place-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }
.place-row__value { display: grid; gap: var(--space-2); margin: 0; min-width: 0; overflow-wrap: break-word; }
.place-row__value a { color: var(--accent); }
.place-card__routes { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.place-card__line { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
/* Номер — одной строкой: «425-54-» на одной строке и «66» на другой не набрать; длинная почта переносится где угодно. */
.place-card__line a[href^="tel:"] { white-space: nowrap; }
.place-card__line a[href^="mailto:"] { min-width: 0; overflow-wrap: anywhere; }
.place-card__line .icon-btn { width: var(--control-md); height: var(--control-md); flex: none; color: var(--muted); }
.place-card__line .icon-btn svg { width: var(--icon-md); height: var(--icon-md); }
.hours { border-collapse: collapse; }
.hours th, .hours td { padding: var(--space-1) 0; text-align: left; vertical-align: top; font-weight: var(--weight-regular); }
.hours th { padding-right: var(--space-3); color: var(--muted); white-space: nowrap; }
.hours__row.is-today th, .hours__row.is-today td { color: var(--ink); font-weight: var(--weight-semibold); }
.hours__time > span { white-space: nowrap; }
.hours__today { color: var(--muted); font-weight: var(--weight-regular); font-size: var(--text-sm); }
.hours__why { display: block; color: var(--muted); font-weight: var(--weight-regular); font-size: var(--text-sm); }
.hours--dates { display: grid; gap: var(--space-1); }
.hours__caption { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.hours__dates { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.hours__dates .hours__days { color: var(--muted); }
.hours__dates .is-today, .hours__dates .is-today .hours__days { color: var(--ink); font-weight: var(--weight-semibold); }
.hours__note { margin: 0; color: var(--muted); font-size: var(--text-sm); }

/* Карта: окно Яндекса после согласия; до него — рисунок карты и заглушка поверх. */
.map {
  position: sticky; top: calc(var(--header-h) + var(--space-4)); overflow: hidden; min-width: 0;
  height: max(calc(var(--space-8) * 7), calc(100vh - var(--header-h) - var(--space-8) * 2));
  border: 1px solid var(--border2); border-radius: var(--radius-xl); background: var(--cream);
}
.map__frame { display: block; width: 100%; height: 100%; border: 0; }
.map__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__art * { vector-effect: non-scaling-stroke; }
.map__ground { fill: var(--cream); }
.map__park { fill: var(--pistachio); opacity: 0.35; }
.map__river { fill: none; stroke: var(--lilac); stroke-width: 14; opacity: 0.35; }
.map__street { fill: none; stroke: var(--panel); stroke-width: 6; }
.map__stub {
  position: absolute; left: 50%; top: 50%; z-index: var(--z-raised); transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: var(--space-2); width: min(calc(100% - var(--space-6)), calc(var(--space-8) * 6));
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-2);
  text-align: center;
}
.map__title { font-family: var(--font-title); font-size: var(--title-sm); font-weight: var(--weight-medium); line-height: var(--leading-title); }
.map__why { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-title); }
.map__stub .btn--primary { color: var(--on-accent); }
.map__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-4); font-size: var(--text-sm); }
.map__links a { color: var(--accent); }
@media (max-width: 767px) {
  .contacts, .contacts--no-map { grid-template-columns: minmax(0, 1fr); }
  .map { order: -1; position: relative; top: auto; height: calc(var(--space-8) * 4 + var(--space-5)); }
  .map__stub { padding: var(--space-3) var(--space-4); gap: var(--space-1); }
  .map__why { font-size: var(--text-xs); }
}

/* ── Подвал «Где мы»: точки сайта (название и адрес) и «Все контакты и карта →» ─────────────────────────────── */
.footwhere[data-points] [data-site="address"], .footwhere[data-points] .foothours { display: none; }
.footpoints { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.footpoints[hidden], .footcontacts[hidden] { display: none; }
.footpoints li { display: grid; gap: var(--space-1); line-height: var(--leading-title); }
.footpoints span { color: var(--footmuted); font-size: var(--text-sm); }
.footcontacts { margin-top: var(--space-1); }

@media (prefers-reduced-motion: reduce) {
  .places__item, .about__point { transition: none; }
}