/* Внутренние страницы: калькулятор (/calculator/) и общие для блога элементы — шапка страницы, хлебные крошки, CTA.
   Подключается после styles.css. */

/* ---------- шапка страницы ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: clip;
  padding: calc(var(--header-h) + 64px) 0 clamp(44px, 6vw, 72px);
  background: radial-gradient(60% 90% at 88% 0%, rgba(var(--acc-rgb), .16), transparent 70%), var(--ink-900);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(242, 239, 230, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(242, 239, 230, .05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 80% 10%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 90% at 80% 10%, #000 20%, transparent 75%);
}
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; color: var(--fg-3); margin-bottom: 22px; }
.crumbs a { color: var(--fg-2); text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; }
.page-hero__title {
  font-family: var(--f-display); font-weight: var(--fw-display-2, 600); font-size: clamp(36px, 5.2vw, 72px);
  line-height: 1.04; letter-spacing: var(--ls-display, -0.035em); text-wrap: balance; max-width: 20ch;
}
.page-hero__title:focus { outline: none; }
.page-hero__lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--fg-2); max-width: 64ch; margin-top: 22px; text-wrap: pretty; }
.page-hero .perks { margin: 40px 0 0; }
.page-hero .perks li { color: var(--fg-2); }
.page-hero .perks i { color: var(--acc-text); }

/* ---------- калькулятор на своей странице ---------- */
.calc-section--page { padding-top: clamp(40px, 5vw, 72px); }

.guide { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.guide__formula { background: var(--ink-900); color: #F2EFE6; border-radius: var(--r-panel); padding: clamp(24px, 3vw, 40px); }
.guide__label { font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--acc-text); margin-bottom: 14px; }
.guide__eq { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; text-wrap: pretty; }
.guide__eq b { color: var(--acc-text); font-weight: 600; }
.guide__eq--sm { font-size: 16px; color: #ADA899; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); }
.guide__steps { counter-reset: st; display: grid; gap: 20px; }
.guide__steps li { counter-increment: st; position: relative; padding-left: 54px; font-size: 16.5px; line-height: 1.55; color: var(--fg-2); }
.guide__steps li::before {
  content: counter(st); position: absolute; left: 0; top: -3px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--acc-fill); color: var(--on-acc); display: grid; place-items: center; font-weight: 600; font-size: 15px;
}
.guide__steps b { color: var(--fg); }

/* ---------- призыв в конце страницы ---------- */
.page-cta { padding: clamp(64px, 8vw, 112px) 0; }
.page-cta__inner { display: flex; gap: 32px 64px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.page-cta__inner > div:first-child { max-width: 760px; }
.page-cta__actions { display: flex; gap: 16px 28px; align-items: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .guide { grid-template-columns: 1fr; }
  .page-hero { padding-top: calc(var(--header-h) + 36px); }
}

/* текущий раздел в меню (калькулятор, блог) */
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--lime); }
.mobile-nav a[aria-current="page"] { color: var(--acc-text); }
.page--calc .page-hero__title { font-size: clamp(34px, 4.4vw, 60px); }
.page--calc .page-hero { padding-bottom: clamp(36px, 4.5vw, 56px); }
.page--calc .page-hero .perks { margin-top: 32px; }