/* ═══════════════════════════════════════════════════════════════
   OLEKSANDRA STYLE — внутрішні сторінки
   Послуги, блог, правила, політика. Один спільний шаблон:
   обкладинка → блоки «заголовок ліворуч, зміст праворуч» →
   бордова глава із записом → футер.
   Підключається після css/base.css.
   ═══════════════════════════════════════════════════════════════ */

.service-page { padding-top: var(--nav-h); }

/* Старий клас кнопки на внутрішніх сторінках = бордова кнопка запису */
.btn--primary {
  background: var(--wine);
  color: var(--linen);
}
.btn--primary:hover { background: var(--ink); }

/* ─── Хлібні крихти ──────────────────────────────────────────── */
.breadcrumb { padding-top: clamp(1.6rem, 3vw, 2.6rem); }
.breadcrumb .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone-500);
}
.breadcrumb a {
  color: var(--ink-soft);
  transition: color 0.3s var(--ease);
}
.breadcrumb a:hover { color: var(--rouge); }
.breadcrumb .container > span:last-child { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════
   ОБКЛАДИНКА СТОРІНКИ
   ═══════════════════════════════════════════════════════════════ */
.service-hero {
  padding: clamp(2.2rem, 5vw, 4.5rem) 0 clamp(3.5rem, 7vw, 6rem);
}
.service-hero__inner {
  display: grid;
  gap: 3rem;
}
.service-hero__inner > * { min-width: 0; }
.service-hero .label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: clamp(1.4rem, 2.5vw, 2rem);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.service-hero .label::before {
  content: '';
  width: 2.2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.service-hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.7rem, 6.8vw, 6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 15ch;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.service-hero__text > p {
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: 1rem;
}
/* Перший абзац — лід, набраний антиквою */
.service-hero__text > p:first-of-type {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 1.4rem;
}
.service-hero__text strong { font-weight: 500; color: var(--ink); }
.service-hero__text .btn { margin-top: 1.4rem; }

/* Картка ціни — бордова глава в мініатюрі */
.service-hero__card {
  position: relative;
  align-self: start;
  overflow: hidden;
  padding: clamp(2rem, 3vw, 2.8rem);
  background: var(--wine);
  color: var(--on-night);
}
.service-hero__num {
  position: absolute;
  top: 0.4rem;
  right: 1.2rem;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 6rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(201, 168, 106, 0.3);
  pointer-events: none;
}
.service-hero__card-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.8rem;
}
.service-hero__price {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1.6rem;
}
.service-hero__facts { margin-bottom: 1.8rem; }
.service-hero__facts li {
  padding: 0.75rem 0;
  border-top: 1px solid var(--hair-night);
  font-size: 0.95rem;
  color: var(--on-night-soft);
}
.service-hero__facts li:last-child { border-bottom: 1px solid var(--hair-night); }
.service-hero__card-cta {
  width: 100%;
  background: var(--linen);
  color: var(--wine);
}
.service-hero__card-cta:hover { background: var(--gold); }
.service-hero__card-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--on-night-soft);
}
.service-hero__card-note:empty { display: none; }
.service-hero__card :focus-visible { outline-color: var(--gold); }

@media (min-width: 1024px) {
  .service-hero__inner:has(.service-hero__card) {
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.8fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
  .service-hero__card { position: sticky; top: calc(var(--nav-h) + 2rem); }
}

/* ═══════════════════════════════════════════════════════════════
   БЛОКИ ЗМІСТУ — заголовок ліворуч, зміст праворуч
   ═══════════════════════════════════════════════════════════════ */
.service-content { padding-bottom: var(--section); }

.service-block {
  display: grid;
  gap: 1.6rem;
  padding: clamp(2.8rem, 5vw, 4.5rem) 0;
  border-top: 1px solid var(--hair-strong);
}
.service-block > h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.service-block__body > * + * { margin-top: 1.2rem; }
.service-block__body > p { color: var(--ink-soft); max-width: 64ch; }
.service-block__body strong { font-weight: 500; color: var(--ink); }
.service-block__body a:not(.btn):not(.blog-card) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rouge);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.3s var(--ease);
}
.service-block__body a:not(.btn):not(.blog-card):hover { color: var(--rouge); }

@media (min-width: 1024px) {
  .service-block {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .service-block > h2 {
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
  }
}

/* Кроки роботи та «що входить» */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2.4rem 2rem;
}
.step-card {
  padding-top: 1.3rem;
  border-top: 1px solid var(--hair-strong);
}
.step-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--wine);
  margin-bottom: 1.1rem;
}
.step-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.2;
  margin-bottom: 0.55rem;
}
.step-card p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Перелік — нумеровані рядки з волосяними лініями */
.includes-list { counter-reset: inc; border-bottom: 1px solid var(--hair); }
/* Без grid: у пунктах буває <strong> + текст, і сітка розкладала б їх по різних клітинках */
.includes-list li {
  counter-increment: inc;
  position: relative;
  padding: 1rem 0 1rem 2.6rem;
  border-top: 1px solid var(--hair);
  line-height: 1.55;
}
.includes-list li::before {
  content: counter(inc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.2rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--wine);
}

/* Питання й відповіді (статичні — тексти мають збігатися зі schema) */
.faq-list { counter-reset: q; border-bottom: 1px solid var(--hair-strong); }
.faq-item {
  counter-increment: q;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  padding: 1.6rem 0;
  border-top: 1px solid var(--hair-strong);
}
.faq-item::before {
  content: counter(q, decimal-leading-zero);
  grid-row: 1;
  padding-top: 0.55rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--wine);
}
.faq-item > * { grid-column: 2; }
.faq-item h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.3;
  margin-bottom: 0.6rem;
}
.faq-item p { color: var(--ink-soft); }
.faq-item p + p { margin-top: 0.6rem; }

/* ─── Блог: картки статей ────────────────────────────────────── */
.blog-list {
  display: grid;
  gap: 3rem 2rem;
}
@media (min-width: 720px) {
  .blog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.blog-card { display: block; }
.blog-card__cover {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  transition: transform 1.2s var(--ease), filter 0.8s var(--ease);
}
/* обрізаємо збільшення обкладинки за її межами */
.blog-card { overflow: hidden; }
.blog-card__body {
  position: relative;
  background: var(--linen);
  padding-top: 1.2rem;
}
.blog-card__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
  transition: color 0.4s var(--ease);
}
.blog-card__desc {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.blog-card__more {
  display: inline-flex;
  gap: 0.5rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
}
.blog-card__more span { transition: transform 0.6s var(--ease); }
.blog-card:hover .blog-card__cover { transform: scale(1.04); }
.blog-card:hover .blog-card__title { color: var(--rouge); }
.blog-card:hover .blog-card__more span { transform: translateX(4px); }

/* ═══════════════════════════════════════════════════════════════
   ЗАПИС — бордова глава наприкінці сторінки
   ═══════════════════════════════════════════════════════════════ */
.cta-section {
  position: relative;
  overflow: hidden;
  padding-block: var(--section);
  background: var(--wine);
  color: var(--on-night);
}
.cta-section::before {
  content: '';
  position: absolute;
  right: -20%;
  top: -40%;
  width: 70vw;
  height: 70vw;
  background: radial-gradient(circle, rgba(201, 168, 106, 0.12), transparent 62%);
  pointer-events: none;
}
.cta-section .container { position: relative; }
.cta-section h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 5.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 16ch;
  margin-bottom: 1.6rem;
}
.cta-section p {
  color: var(--on-night-soft);
  max-width: 48ch;
  margin-bottom: 2.2rem;
}
.cta-section .btn--primary {
  background: var(--linen);
  color: var(--wine);
}
.cta-section .btn--primary:hover { background: var(--gold); }
.cta-section .cta-section__note {
  margin: 1.6rem 0 0;
  font-size: 0.9rem;
}
.cta-section__note a {
  color: var(--on-night);
  text-decoration: underline;
  text-decoration-color: rgba(242, 238, 231, 0.4);
  text-underline-offset: 3px;
  transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease);
}
.cta-section__note a:hover { color: var(--gold); text-decoration-color: var(--gold); }
.cta-section :focus-visible { outline-color: var(--gold); }

/* Блок без заголовка (завершальний абзац) — у колонці змісту */
@media (min-width: 1024px) {
  .service-block--plain .service-block__body { grid-column: 2; }
}

/* Бордовий запис і бордовий футер поруч — розділяємо тонкою лінією */
.cta-section + .footer { box-shadow: inset 0 1px 0 var(--hair-night); }

/* Великі заголовки на світлому фоні — бордові */
.service-hero h1,
.service-block > h2 { color: var(--wine); }