/* Pars Khazar | Editorial Extras 2.0 — candidate, not installed.
   LOAD AFTER existing Bootstrap 5. No reset, no Bootstrap utility replacements.
   Components activate only below an explicit .pkx root. No forced specificity or JS.
   Legacy .pk-guide is deliberately untouched.
*/
.pkx {
  --pkx-accent: #c6202a;
  --pkx-accent-deep: #a71b27;
  --pkx-ink: #2d2a2b;
  --pkx-text: #514c4f;
  --pkx-line: #ebe1df;
  --pkx-surface: #fbf7f5;
  --pkx-highlight: #fff1ec;
  --pkx-radius: 20px;
  container: pkx-content / inline-size;
}
.pkx :where(.pkx-hero,.pkx-hero *,.pkx-flow,.pkx-flow *,
  .pkx-path,.pkx-path *,.pkx-contrast,.pkx-contrast *,
  .pkx-pullquote,.pkx-pullquote *,.pkx-spotlight,.pkx-spotlight *) { box-sizing: border-box; }

/* 01. Editorial cover: an asymmetric composition and an intentional image stage,
   not a second general-purpose Bootstrap card or grid. */
.pkx .pkx-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, .87fr);
  align-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--pkx-line);
  border-radius: var(--pkx-radius);
  background: linear-gradient(135deg, #fff 9%, #fff9f6 70%, #faece8);
}
.pkx .pkx-hero__copy { position: relative; z-index: 1; min-width: 0; padding: clamp(24px, 4cqw, 54px); }
.pkx .pkx-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--pkx-accent-deep); font-size: .78rem; font-weight: 700; }
.pkx .pkx-hero__eyebrow::before { content: ""; display: inline-block; width: 24px; height: 2px; background: currentColor; }
.pkx .pkx-hero__title { color: var(--pkx-ink); font-size: clamp(1.65rem, 4.15cqw, 2.65rem); font-weight: 800; line-height: 1.55; margin: 14px 0; }
.pkx .pkx-hero__desc { color: var(--pkx-text); line-height: 2; margin: 0; max-width: 56ch; }
.pkx .pkx-hero__stage {
  display: grid;
  place-items: center;
  position: relative;
  min-width: 0;
  align-self: stretch;
  padding: 26px;
  background: radial-gradient(ellipse at 55% 48%, #fff 5%, #f7e6e2 52%, transparent 74%);
}
.pkx .pkx-hero__stage::before,.pkx .pkx-hero__stage::after {
  content: ""; position: absolute; border: 1px solid #d9b7b5; opacity: .55;
  border-radius: 50%; width: min(75%, 270px); aspect-ratio: 1; pointer-events: none;
}
.pkx .pkx-hero__stage::after { width: min(58%, 210px); opacity: .34; }
.pkx .pkx-hero__image { display: block; position: relative; z-index: 1; max-width: 100%; width: auto; height: auto; max-height: 320px; object-fit: contain; }
.pkx .pkx-hero__note { position: absolute; z-index: 2; inset: auto auto 15px 15px; background: #fff; color: var(--pkx-ink); border: 1px solid #eddcd8; padding: 8px 12px; border-radius: 10px; font-size: .75rem; box-shadow: 0 6px 15px #38252010; }

/* 02. Flowing editorial photo: the prose uses full available width below a
   short image; this is deliberately not a Bootstrap two-column grid. */
.pkx .pkx-flow { display: flow-root; min-width: 0; }
.pkx .pkx-flow__media { float: right; width: min(var(--pkx-flow-media-width, 43%), 400px); max-width: 100%; margin: 4px 0 16px clamp(16px, 3cqw, 32px); padding: 10px; border: 1px solid var(--pkx-line); border-radius: 17px; background: #fff; }
.pkx .pkx-flow--compact { --pkx-flow-media-width: 34%; }
.pkx .pkx-flow--reverse .pkx-flow__media { float: left; margin: 4px clamp(16px, 3cqw, 32px) 16px 0; }
.pkx .pkx-flow__media img { display: block; max-width: 100%; width: 100%; height: auto; border-radius: 10px; }
.pkx .pkx-flow__media figcaption { color: #796e6f; font-size: .76rem; text-align: center; line-height: 1.7; padding-top: 8px; }
.pkx .pkx-flow__content { color: var(--pkx-text); line-height: 2; }
.pkx .pkx-flow__content > *:first-child { margin-top: 0; }

/* 03. Reading path: a single editorial connector and automatic, decorative
   counters. Keep semantic <ol> in the HTML. */
.pkx .pkx-path { list-style: none; counter-reset: pkx-step; margin: 0; padding: 0 0 0 0; position: relative; }
.pkx .pkx-path::before { content: ""; position: absolute; top: 16px; bottom: 30px; right: 20px; width: 2px; background: linear-gradient(var(--pkx-accent), #edcfca); }
.pkx .pkx-path__item { counter-increment: pkx-step; position: relative; padding: 0 62px 29px 0; min-height: 55px; }
.pkx .pkx-path__item:last-child { padding-bottom: 0; }
.pkx .pkx-path__item::before { content: counter(pkx-step, decimal-leading-zero); position: absolute; right: 0; top: 0; width: 42px; height: 42px; display: grid; place-items: center; background: #fff; border: 2px solid #e5b1ac; color: var(--pkx-accent-deep); border-radius: 50%; font-size: .79rem; font-weight: 800; line-height: 1; }
.pkx .pkx-path__heading { color: var(--pkx-ink); font-size: 1.05rem; font-weight: 750; line-height: 1.65; margin: 0 0 4px; }
.pkx .pkx-path__detail { margin: 0; color: var(--pkx-text); line-height: 1.95; }

/* 04. Contrast rail: one continuous comparison surface with a shared central
   axis, instead of repeating Bootstrap cards for each side. */
.pkx .pkx-contrast { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: hidden; border: 1px solid var(--pkx-line); border-radius: var(--pkx-radius); background: #fff; }
.pkx .pkx-contrast__side { position: relative; padding: clamp(18px, 3cqw, 30px); min-width: 0; }
.pkx .pkx-contrast__side + .pkx-contrast__side { border-inline-start: 1px solid var(--pkx-line); background: #fffcfb; }
.pkx .pkx-contrast__label { display: inline-block; margin: 0 0 12px; padding: 3px 12px; border-radius: 99px; background: var(--pkx-highlight); color: var(--pkx-accent-deep); font-size: .76rem; font-weight: 750; }
.pkx .pkx-contrast__title { margin: 0 0 11px; font-size: clamp(1.05rem, 2.25cqw, 1.35rem); color: var(--pkx-ink); font-weight: 800; line-height: 1.6; }
.pkx .pkx-contrast__body { color: var(--pkx-text); line-height: 1.95; }
.pkx .pkx-contrast__body > *:last-child { margin-bottom: 0; }
.pkx .pkx-contrast__takeaway { grid-column: 1/-1; padding: 15px clamp(18px,3cqw,30px); background: #f7f0ed; border-top: 1px solid var(--pkx-line); color: #514144; line-height: 1.95; }

/* 05. Pull quote: editorial emphasis using a single border and whitespace;
   only quote actual source text, not invented endorsements. */
.pkx .pkx-pullquote { margin: 1.75rem 0; padding: clamp(16px, 2.6cqw, 27px) clamp(19px, 3.2cqw, 34px); border-inline-start: 4px solid var(--pkx-accent); border-radius: 14px 0 0 14px; background: linear-gradient(90deg, #fff 0%, var(--pkx-surface)); color: var(--pkx-ink); font-size: clamp(1.02rem,2.4cqw,1.25rem); font-weight: 650; line-height: 2; }
.pkx .pkx-pullquote > *:last-child { margin-bottom: 0; }

/* 06. Visual spotlight: image and real caption can be paired in an asymmetric
   band without covering content or replacing the source image. */
.pkx .pkx-spotlight { display: grid; grid-template-columns: minmax(0,1.16fr) minmax(0,.84fr); align-items: stretch; border: 1px solid var(--pkx-line); border-radius: var(--pkx-radius); overflow: hidden; background: var(--pkx-surface); }
.pkx .pkx-spotlight__visual { min-width: 0; display: grid; place-items: center; padding: clamp(14px,2.7cqw,28px); background: #fff; }
.pkx .pkx-spotlight__visual img { display: block; max-width: 100%; width: auto; height: auto; max-height: 350px; object-fit: contain; }
.pkx .pkx-spotlight__text { min-width: 0; align-self: center; padding: clamp(18px,3.5cqw,40px); color: var(--pkx-text); line-height: 2; }
.pkx .pkx-spotlight__text > *:last-child { margin-bottom: 0; }

@container pkx-content (max-width: 650px) {
  .pkx .pkx-hero, .pkx .pkx-contrast, .pkx .pkx-spotlight { grid-template-columns: minmax(0,1fr); }
  .pkx .pkx-hero__stage { min-height: 180px; padding: 16px 22px 24px; }
  .pkx .pkx-hero__image { max-height: 230px; }
  .pkx .pkx-hero__note { inset: auto auto 9px 9px; }
  .pkx .pkx-contrast__side + .pkx-contrast__side { border-inline-start: 0; border-top: 1px solid var(--pkx-line); }
  .pkx .pkx-spotlight__visual img { max-height: 280px; }
}
@container pkx-content (max-width: 560px) {
  .pkx .pkx-flow__media,.pkx .pkx-flow--reverse .pkx-flow__media { float: none; width: 100%; max-width: 100%; margin: 0 0 16px; }
  .pkx .pkx-path__item { padding-right: 55px; }
}