/**
 * Спільні блоки внутрішніх сторінок (макети MacBook Pro - 4 / 5 / 7 / 9).
 */

.page-hero,
.about-hero,
.contacts-hero {
  position: relative;
  overflow: hidden;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero__inner,
.about-hero__inner,
.contacts-hero .container {
  position: relative;
  z-index: 1;
}

/* Заголовок секції внутрішньої сторінки: 75px, висота рядка як ink-box макета */
.page-section__title {
  font-weight: 100;
  font-size: var(--fs-h2);
  line-height: 53px;
  text-transform: uppercase;
}

/* --------------------------------------------------------- Смужка контактів */

.contact-strip {
  display: grid;
  gap: 32.3px;
  align-content: start;
}

.contact-strip__row {
  display: grid;
  gap: 24px;
}
.contact-strip__row::after {
  content: "";
  display: block;
  height: 1.2px;
  background: rgba(255, 255, 255, 0.32);
}
.contact-strip__row > svg,
.contact-strip__row > a {
  grid-row: 1;
}
.contact-strip__row {
  grid-template-columns: auto 1fr;   /* у макеті пошта 35.98, слухавка 29.99 */
  align-items: center;
  column-gap: 19.2px;
  row-gap: 24px;
}
.contact-strip__row::after { grid-column: 1 / -1; }

.contact-strip a {
  font-weight: 500;
  font-size: 20.4px;
  line-height: 26.1px;
  transition: color var(--dur) var(--ease);
}
.contact-strip a:hover { color: var(--accent); }

/* ----------------------------------------------------------- Нижній блок */

.page-outro__inner {
  display: grid;
  grid-template-columns: 594px 627px;
  justify-content: space-between;
  align-items: start;
}

.page-outro--split .page-outro__inner {
  grid-template-columns: 597px 595px;
}

.page-outro__col { display: grid; gap: 35px; }

.page-outro__lead {
  font-weight: 100;
  font-size: var(--fs-lg);
  line-height: 41.5px;
}

.page-outro__note {
  font-weight: 100;
  font-size: var(--fs-lg);
  line-height: 31.2px;
}

.page-outro .btn { height: 78px; padding: 18px 12px; }

/* ------------------------------------------------------- Нижнє фото сторінки */

.page { position: relative; z-index: 0; }

/* Нижнє фото сторінки лежить під текстом — у макеті блок контактів на нього накладається */
/* Нижче за шари затемнення сторінки (.veils лежать у контейнері з z-index:-1),
   щоб розтяжки з макета накривали фото, а не навпаки. */
.page-bottom-photo { position: relative; z-index: -2; }
.page-bottom-photo img { width: 100%; height: auto; }

/* ------------------------------------------- Текстова сторінка (page.php) */
/* Макета НЕМАЄ (Політика конфіденційності та подібні сторінки). Зроблено мовою
   внутрішніх сторінок: H1 стоїть на тій самій висоті й тим самим кеглем, що
   заголовки героїв «Цін» / «Про нас» / «Контактів» (верх 308, 95 / 104.5, вага
   100, капс), текст — колонка 760 зліва по сітці, 18 / 29.9 (--lh-body-loose).
   Мобільна версія — assets/css/mobile/41-text-page.css. */

.page--text .text-page__head { padding-top: 308px; }

.text-page__title {
  max-width: 1341px;
  font-weight: 100;
  font-size: var(--fs-h1);
  line-height: 104.5px;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.text-page__body {
  max-width: 760px;
  margin-top: 96px;
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body-loose);
}

.text-page__body > * + * { margin-top: 18px; }

.text-page__body h2,
.text-page__body h3 {
  margin-top: 64px;
  font-weight: 300;
  font-size: 30px;
  line-height: 38px;
  text-transform: uppercase;
}
.text-page__body h3 { margin-top: 40px; font-size: var(--fs-lg); line-height: var(--lh-lg); }
.text-page__body h2 + *,
.text-page__body h3 + * { margin-top: 20px; }

/* Списки: мідна риска 16×1.2 на рівні середини першого рядка — та сама тонка
   лінія, якою на сайті підкреслені пункти меню й розділені контакти. Рамкою, а
   не фоном: товщину рамки браузер округлює однаково, і під zoom усі риски
   виходять рівні (фоном 1.2px давав то 1, то 2 пікселі екрана). */
.text-page__body ul,
.text-page__body ol {
  display: grid;
  gap: 10px;
  padding: 0;
}
.text-page__body li {
  position: relative;
  padding-left: 34px;
}
.text-page__body ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14.35px;
  width: 16px;
  height: 0;
  border-top: 1.2px solid var(--accent);
}
.text-page__body ol { counter-reset: text-page-ol; }
.text-page__body ol > li { counter-increment: text-page-ol; }
.text-page__body ol > li::before {
  content: counter(text-page-ol) ".";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.text-page__body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur) var(--ease);
}
.text-page__body a:hover { color: var(--ink); }

.text-page__body strong,
.text-page__body b { font-weight: 500; }

/* Рядок «Редакція від …» — службовий, приглушений */
.text-page__body .text-page__meta { color: var(--ink-muted); }

/* Рядок «Політика конфіденційності» у футері (його немає у Figma): на самій
   сторінці політики він мідний — як активний пункт меню. page.css не вантажиться
   на головній, але там цей стан і не потрібен. */
.site-footer__contacts .site-footer__privacy[aria-current="page"] { color: var(--accent); }