/* =====================================================================
   О гостинице (about.html), глава II — только то, чего нет в base.css.
   Ритм: открытие главы и широкое фото холла → узкая колонка текста с буквицей
   рядом с фото 4:5 → «Наши преимущества» крупным кеглем (авторский момент страницы:
   список набран как оглавление книги) → отзывы гостей → форма отзыва.
   ===================================================================== */

/* ---------- Открытие главы ---------- */
.about-opener .opener__lead { max-width: 33em; }

/* ---------- Текст главы рядом с фото 4:5 ---------- */
.about-story > .g { align-items: start; }
.about-story__text { grid-column: 2 / span 6; }
/* Колонка текста длиннее фото: фото остаётся рядом, пока читается текст (без JS, без анимации) */
.about-story__media {
  grid-column: 9 / span 4;
  position: sticky;
  top: calc(var(--header-h) + var(--s-6));
  margin-top: clamp(0px, 2.4vw, 40px);
}

/* ---------- Наши преимущества: крупный список и «В каждом номере» ---------- */
.about-has > .g { align-items: end; }
.about-has__title { grid-column: 2 / span 6; grid-row: 1; }
.about-has__title,
.about-has__label { margin-bottom: clamp(32px, 1.25rem + 2vw, 56px); }
.about-has__label { grid-column: 9 / span 4; grid-row: 1; }
/* Колонки 2–7, как текст главы и главный отзыв: между двумя списками — целая колонка воздуха */
.about-has__list {
  grid-column: 2 / span 6; grid-row: 2; align-self: start;
  border-top: 1px solid var(--rule);
}
.about-has__list li {
  padding: .38em 0 .44em;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(1.375rem, 1.06rem + .95vw, 1.875rem);   /* 22 → 30: крупнее текста в 1,5 раза, мельче h3 */
  line-height: 1.24;
}
.about-has__kit { grid-column: 9 / span 4; grid-row: 2; align-self: start; }

/* ---------- Отзывы гостей ---------- */
.about-reviews__list { align-items: start; row-gap: clamp(40px, 1.5rem + 2vw, 64px); }
.about-reviews__list.is-pending { min-height: 24rem; }          /* место под отзывы, пока они загружаются */
html:not(.js) .about-reviews__more { display: none; }       /* отзывы вписал сервер; «Показать ещё» без JS не работает */
.about-reviews__list > .state,
.about-reviews__list > noscript { grid-column: 2 / span 8; }
.about-reviews__item { min-width: 0; }
.about-reviews__item--lead { grid-column: 2 / span 6; }
.about-reviews__item--tall { grid-row: span 2; }                /* длинный главный отзыв — рядом два */
.about-reviews__item--left { grid-column: 2 / span 6; }
.about-reviews__item--right { grid-column: 9 / span 4; }
.about-reviews__item:focus { outline: none; }                  /* фокус после «Показать ещё» — без рамки вокруг текста */
.about-reviews__item--left .review__quote { max-width: 32em; }
.about-reviews__more { margin-top: clamp(40px, 1.5rem + 2vw, 64px); }
.about-reviews__more-in {
  grid-column: 2 / span 10;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-5);
}
.about-reviews__more .link:hover .i { transform: translateY(3px); }

/* ---------- Оставить отзыв ---------- */
.about-write { margin-top: clamp(88px, 3rem + 6vw, 152px); }
.about-write__in { grid-column: 2 / span 6; }
.about-write__title { margin-bottom: var(--s-5); }
.about-write__body { min-height: 3.2rem; }
.about-write__body > .state { padding-block: 0; }
.about-write__signin { max-width: 34em; color: var(--ink-2); }
.about-write__signin a { color: var(--ink); transition: color .25s var(--ease-out); }
.about-write__signin a:hover { color: var(--terracotta); }
.about-write .form__actions { margin-top: var(--s-2); }
.about-write .form__note { max-width: 30em; }

/* Оценка: пять переключателей-звёзд. Сами radio скрыты визуально, но доступны с клавиатуры
   (Tab — в группу, стрелки — выбор); видимое состояние — заполненные звёзды и подпись «4 из 5». */
.about-rate__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-4); min-height: 46px; }
.about-rate__stars { display: inline-flex; margin-left: -9px; }
.about-rate__input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.about-rate__star {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--ink-3); cursor: pointer;
  transition: color .2s var(--ease-out);
}
.about-rate__star .i { grid-area: 1 / 1; width: 26px; height: 26px; }
.about-rate__star .i--on,
.about-rate__star.is-on .i--off { display: none; }
.about-rate__star.is-on .i--on { display: block; }
.about-rate__star.is-on { color: var(--gold); }
.about-rate__input:focus-visible + .about-rate__star { outline: 2px solid var(--terracotta); outline-offset: -3px; }
.about-rate__value { font-size: var(--fs-small); font-style: italic; color: var(--ink-3); }
.about-rate__value.is-set { font-style: normal; color: var(--ink); }
.field.is-invalid .about-rate__star:not(.is-on) { color: var(--terracotta-deep); }

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
  .about-story__text, .about-story__media,
  .about-has__title, .about-has__label, .about-has__list, .about-has__kit,
  .about-reviews__item--lead, .about-reviews__item--left, .about-reviews__item--right,
  .about-reviews__list > .state, .about-reviews__list > noscript,
  .about-reviews__more-in, .about-write__in { grid-column: 1 / -1; }
  .about-story__media { position: static; margin-top: var(--s-8); max-width: 520px; }
  .about-has__title, .about-has__label, .about-has__list, .about-has__kit { grid-row: auto; }
  .about-has__label { margin: var(--s-8) 0 var(--s-3); }
  .about-reviews__item--tall { grid-row: auto; }
}
@media (max-width: 640px) {
  .about-opener__frame { aspect-ratio: 4 / 3; }
  .about-write .form__actions > .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .about-rate__star { transition: none; }
}