/* Общие контейнеры и типографика путеводителя, маршрутов и страницы города. */
.editorial-container {
  width: min(1240px, calc(100% - 64px));
  margin-inline: auto;
}
.editorial-page h2 {
  font-size: 64px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.editorial-page .editorial-container p {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
}
/* Путеводитель: тематические ссылки и группы справочных списков. */
.guide-content {
  padding-top: 106px;
}
.guide-topics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  font-size: 24px;
  font-weight: 800;
}
.guide-topics a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}
.guide-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px 40px;
  margin-top: 93px;
}
.guide-group--museums,
.guide-group--gastronomy {
  grid-column: 1/-1;
}
.guide-group h2 {
  font-size: 24px;
  border-bottom: 1px solid #fff;
  padding-bottom: 14px;
  letter-spacing: 0;
}
.guide-group ul {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
}
.guide-group--museums ul,
.guide-group--gastronomy ul {
  columns: 2;
  column-gap: 55px;
}
.guide-group li {
  break-inside: avoid;
}
.guide-bottom {
  margin-top: 93px;
}
.guide-bottom h2 {
  font-size: 24px;
  letter-spacing: 0;
}
/* Маршруты: вводные разделы, текст и карта. */
.routes-intro {
  padding: 90px 0 110px;
}
.routes-intro section + section {
  margin-top: 85px;
}
.routes-intro h2 {
  font-size: 48px;
  margin-bottom: 45px;
  max-width: 1000px;
}
.route-intro-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  align-items: start;
}
.route-intro-columns > img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 30px;
}
/* Справочники маршрутов: колонки объектов с пиктограммами и контактами. */
.route-directories {
  padding-top: 110px;
}
.route-directory + .route-directory {
  margin-top: 100px;
}
.route-directory h2 {
  margin-bottom: 60px;
}
.directory-columns {
  columns: 2;
  column-gap: 85px;
}
.directory-entry {
  break-inside: avoid;
  display: flex;
  gap: 25px;
  padding-bottom: 24px;
}
.directory-icon {
  width: 37px;
  height: 37px;
  object-fit: contain;
  flex-shrink: 0;
}
.directory-entry h3 {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}
.editorial-page .directory-entry p {
  font-size: 20px;
  line-height: 1.3;
  margin-top: 0;
}
/* Петропавловск: первый экран и историческая часть. */
.city-page-hero {
  height: 754px;
}
.city-page-hero .hero-caption {
  padding-top: 255px;
}
.city-history {
  padding-bottom: 110px;
}
.city-history-flow {
  position: relative;
  margin-top: -143px;
  display: grid;
  gap: 60px;
}
.city-opening-row {
  display: grid;
  grid-template-columns: 640fr 540fr;
  align-items: center;
  gap: 60px;
  margin-bottom: 30px;
}
.city-opening-row > img {
  width: 100%;
  height: 341px;
  object-fit: cover;
  border-radius: 30px;
}
.city-region-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 30px;
}
.city-region-row h2 {
  margin-bottom: 35px;
}
.city-region-row img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 30px;
}
.city-history-photo {
  width: 100%;
  height: 654px;
  object-fit: cover;
  border-radius: 30px;
}
.city-history-photo[src$='petropavlovsk-history-photo-01.png'] {
  object-position: center 15%;
}
/* Светлая часть страницы города и чередующиеся достопримечательности. */
.city-white {
  padding-top: 110px;
}
.region-information h2 {
  margin-bottom: 55px;
}
.region-information h2 span {
  font-size: inherit;
}
.city-attractions {
  display: grid;
  gap: 80px;
  margin-top: 140px;
}
.city-attraction h2 {
  margin-bottom: 60px;
}
.city-attraction-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.city-attraction-row > img {
  width: 100%;
  height: 620px;
  object-fit: cover;
  border-radius: 30px;
}
.city-attraction--reverse h2 {
  text-align: right;
}
.city-attraction--reverse .city-attraction-row > img {
  order: 2;
}
.city-attraction-row > div {
  min-width: 0;
}
.editorial-page .city-attraction-row p {
  line-height: 1.35;
}
.city-page .useful,
.routes-page .useful {
  background: #f3f3f3;
}
/* Планшеты и компактные мониторы: размеры текста, фото и промежутки. */
@media (max-width: 1200px) {
  .editorial-page h2 {
    font-size: 48px;
  }
  .city-opening-row,
  .city-region-row,
  .city-attraction-row {
    gap: 35px;
  }
  .city-attraction-row > img {
    height: 560px;
  }
  .city-history-photo {
    height: auto;
    aspect-ratio: 1240/654;
  }
  .editorial-page .editorial-container p {
    font-size: 18px;
  }
  .city-history-flow {
    margin-top: -70px;
  }
  .city-opening-row > img {
    height: 290px;
  }
  .directory-columns {
    column-gap: 40px;
  }
  .routes-intro h2 {
    font-size: 42px;
  }
  .route-intro-columns {
    gap: 35px;
  }
  .directory-entry h3 {
    font-size: 18px;
  }
}
/* Мобильная версия: справочники и фотоблоки в одну колонку. */
@media (max-width: 768px) {
  .editorial-container {
    width: calc(100% - 40px);
  }
  .editorial-page h2 {
    font-size: clamp(28px, 6vw, 42px);
    overflow-wrap: break-word;
  }
  .editorial-page .editorial-container p {
    font-size: 16px;
    line-height: 1.55;
  }
  .guide-content {
    padding-top: 40px;
  }
  .guide-topics {
    gap: 15px;
    font-size: 17px;
    grid-template-columns: 1fr;
  }
  .guide-groups {
    grid-template-columns: 1fr;
    gap: 45px;
    margin-top: 45px;
  }
  .guide-group--museums,
  .guide-group--gastronomy {
    grid-column: auto;
  }
  .guide-group h2,
  .guide-bottom h2 {
    font-size: 23px;
  }
  .guide-group ul {
    margin-top: 20px;
    font-size: 16px;
  }
  .guide-group li {
    margin-bottom: 8px;
  }
  .guide-group--museums ul,
  .guide-group--gastronomy ul {
    columns: 1;
  }
  .guide-bottom {
    margin-top: 45px;
    gap: 30px;
  }
  .routes-intro {
    padding: 40px 0 60px;
  }
  .routes-intro h2 {
    font-size: 30px;
    margin-bottom: 30px;
  }
  .routes-intro section + section {
    margin-top: 50px;
  }
  .route-intro-columns {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .route-intro-columns > img {
    height: auto;
    aspect-ratio: 1.3;
  }
  .route-directories {
    padding-top: 55px;
  }
  .route-directory h2 {
    margin-bottom: 35px;
  }
  .directory-columns {
    columns: 1;
  }
  .directory-entry {
    gap: 15px;
    padding-bottom: 25px;
  }
  .directory-icon {
    width: 28px;
    height: 28px;
  }
  .directory-entry h3 {
    font-size: 17px;
  }
  .route-directory + .route-directory {
    margin-top: 40px;
  }
  .city-page-hero .hero-caption {
    padding-top: 190px;
  }
  .city-history {
    padding-bottom: 55px;
  }
  .city-history-flow {
    margin-top: -30px;
    gap: 40px;
  }
  .city-opening-row,
  .city-region-row,
  .city-attraction-row {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .city-opening-row > img {
    height: auto;
    aspect-ratio: 1.8;
  }
  .city-opening-row h2 br {
    display: none;
  }
  .city-region-row h2 {
    margin-bottom: 25px;
  }
  .city-region-row img {
    height: auto;
    aspect-ratio: 1.5;
  }
  .city-opening-row > img,
  .city-region-row img,
  .city-history-photo,
  .city-attraction-row > img {
    border-radius: 20px;
  }
  .city-white {
    padding-top: 55px;
  }
  .region-information h2 {
    margin-bottom: 30px;
  }
  .city-attractions {
    gap: 55px;
    margin-top: 60px;
  }
  .city-attraction h2 {
    margin-bottom: 25px;
  }
  .city-attraction--reverse h2 {
    text-align: left;
  }
  .city-attraction--reverse .city-attraction-row > img {
    order: 0;
  }
  .city-attraction-row > img {
    height: auto;
    aspect-ratio: 1;
  }
  .city-history-photo {
    aspect-ratio: 1.6;
  }
}
/* Уточнения по макетам: карта слева, заголовок справа, скругления тёмных разделов. */
.route-intro-columns {
  align-items: center;
  margin-bottom: 30px;
  grid-template-columns: 605fr 575fr;
  gap: 60px;
}
.route-intro-columns > img {
  height: auto;
  aspect-ratio: 605/298;
}
.route-intro-columns h2 {
  margin: 0;
}
.city-region-row {
  align-items: center;
}
.city-region-row h2 {
  margin: 0;
}
.city-attraction--reverse h2 {
  text-align: left;
}
.city-attraction:not(.city-attraction--reverse) h2 {
  text-align: right;
}
.routes-intro,
.city-history {
  border-radius: 0 0 80px 80px;
  background: radial-gradient(ellipse at 80% 45%, #12032b, transparent 55%), #000;
}
.guide-content {
  background: radial-gradient(ellipse at 80% 35%, #130329, transparent 60%), #000;
}
@media (max-width: 768px) {
  .route-intro-columns {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .city-attraction:not(.city-attraction--reverse) h2 {
    text-align: left;
  }
  .routes-intro,
  .city-history {
    border-radius: 0 0 35px 35px;
  }
}
.guide-bottom h2 {
  font-size: 24px;
  overflow-wrap: break-word;
}
.guide-topics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 768px) {
  .guide-topics {
    grid-template-columns: 1fr;
  }
}