/* Sparkling Hero страницы (префикс pgh__) */
.pgh {
  --pg-bg: var(--sp-bg, #00050B); --pg-card: var(--sp-card, #111924); --pg-text: var(--sp-text, #F8FCFF);
  --pg-accent: var(--sp-accent, #009CFF); --pg-accent-hi: var(--sp-accent-hi, #4FB3FF); --pg-dots: var(--pg-accent);
  --pg-on-accent: var(--sp-on-accent, #F8FCFF); --pg-ok: var(--sp-ok, #38FF6A); --pg-bg-opacity: .35;
  --pg-soft: color-mix(in srgb, var(--pg-text) 72%, transparent);
  --pg-muted: color-mix(in srgb, var(--pg-text) 45%, transparent);
  --pg-line: color-mix(in srgb, var(--pg-text) 9%, transparent);
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0; padding: 28px var(--offsets, 64px) 56px; background: var(--pg-bg); color: var(--pg-text);
  font-family: var(--sp-font, Arial, Helvetica, sans-serif);
}
.pgh *, .pgh *::before, .pgh *::after { box-sizing: border-box; }
.pgh::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(color-mix(in srgb, var(--pg-dots) 20%, transparent) 1.1px, transparent 1.3px); background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(55% 70% at 70% 30%, #000 10%, transparent 75%); mask-image: radial-gradient(55% 70% at 70% 30%, #000 10%, transparent 75%); opacity: .5; }
.pgh--nodots::before { display: none; }
.pgh__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: var(--pg-bg-opacity); pointer-events: none; border-radius: 0; }

/* защита от стилей темы */
.pgh h1, .pgh p, .pgh ul, .pgh li, .pgh ol { text-transform: none; letter-spacing: normal; margin: 0; padding: 0; }
.pgh ul, .pgh ol { list-style: none; }
.pgh li::before, .pgh li::marker { content: none; }
.pgh a { text-decoration: none; }
.pgh img { border-radius: 0; }

.pgh__inner { max-width: 1152px; margin: 0 auto; }

/* крошки темы внутри блока */
.pgh__crumbs .breadcrumbs { background: transparent; width: auto; }
.pgh__crumbs .breadcrumbs_list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; max-width: none; list-style: none; }
.pgh__crumbs .breadcrumbs_list li { display: inline-flex; align-items: center; }
.pgh__crumbs .breadcrumbs__link, .pgh__crumbs .breadcrumbs__link span { font-size: 13px; line-height: 1.4; font-weight: 400; color: var(--pg-soft); }
.pgh__crumbs a.breadcrumbs__link:hover, .pgh__crumbs a.breadcrumbs__link:hover span { color: var(--pg-accent); }
.pgh__crumbs .breadcrumbs__link.last, .pgh__crumbs .breadcrumbs__link.last span { color: var(--pg-muted); }
.pgh__crumbs .breadcrumbs__separator { font-size: 13px; color: var(--pg-muted); }

.pgh__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.pgh--answer .pgh__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.pgh--solo .pgh__grid { grid-template-columns: minmax(0, 1fr); }
.pgh--solo .pgh__text { max-width: 820px; }

.pgh__tag { display: inline-block; margin-top: 26px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--pg-accent) 35%, transparent); background: color-mix(in srgb, var(--pg-accent) 10%, transparent);
  font: 600 12px/1 var(--sp-mono, "Courier New", monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--pg-accent-hi); }
.pgh .pgh__title { margin-top: 16px; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.06; letter-spacing: -.035em; font-weight: 600; color: var(--pg-text); }
.pgh .pgh__lead { margin-top: 16px; font-size: 18px; line-height: 1.55; font-weight: 400; color: var(--pg-soft); max-width: 620px; }
.pgh__meta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.pgh__chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--pg-card) 70%, var(--pg-bg)); border: 1px solid var(--pg-line); font-size: 13px; line-height: 1.2; color: var(--pg-soft); }
.pgh__chip b { color: var(--pg-text); font-weight: 600; }
.pgh__chip time { color: inherit; }
.pgh__btns { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.pgh .pgh__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 18px; border-radius: 12px;
  font-size: 14px; font-weight: 700; white-space: nowrap; transition: opacity .15s; }
.pgh .pgh__btn:hover { opacity: .88; }
.pgh .pgh__btn--a { background: var(--pg-accent); color: var(--pg-on-accent); }
.pgh .pgh__btn--d { background: color-mix(in srgb, var(--pg-text) 6%, transparent); border: 1px solid var(--pg-line); color: var(--pg-text); font-weight: 600; }

.pgh__media { position: relative; min-height: 1px; }
.pgh__canvas { display: block; width: 100%; height: 380px; }
.pgh__img { display: block; width: 100%; max-height: 420px; height: auto; object-fit: contain; }

.pgh__qa { margin-top: 52px; padding: 24px; border-radius: 22px;
  background: radial-gradient(90% 90% at 100% 0%, color-mix(in srgb, var(--pg-accent) 16%, transparent), transparent 60%), var(--pg-card);
  border: 1px solid color-mix(in srgb, var(--pg-accent) 28%, transparent); }
.pgh .pgh__qa-k { font: 700 11px/1 var(--sp-mono, "Courier New", monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--pg-accent-hi); }
.pgh .pgh__qa-ans { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--pg-text); }
.pgh__qa-list { margin-top: 14px !important; border-top: 1px solid var(--pg-line); }
.pgh .pgh__qa-li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--pg-line);
  font-size: 14px; line-height: 1.45; color: var(--pg-soft); }
.pgh__qa-mark { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--pg-ok) 12%, transparent); color: var(--pg-ok); }
.pgh .pgh__qa-foot { margin-top: 12px; font: 600 11px/1.4 var(--sp-mono, "Courier New", monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--pg-muted); }

body.sp-hdr-c .pgh { padding-top: 12px; }

@media (max-width: 900px) {
  .pgh { padding: 22px 16px 40px; }
  .pgh__grid, .pgh--answer .pgh__grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pgh--image .pgh__media { order: -1; }
  .pgh__canvas { height: 220px; }
  .pgh__img { max-height: 240px; }
  .pgh--image .pgh__tag { margin-top: 10px; }
  .pgh__qa { margin-top: 26px; }
  .pgh .pgh__lead { font-size: 16.5px; }
  .pgh__btns .pgh__btn { flex: 1 1 auto; }
}