/* ==========================================================================
   Khavarzadeh.com — brand redesign components (1405-08)
   The four profit leaks, the self-diagnosis, the diagnosis-conversation band,
   quick contact and the article bridge. Built on kh.css tokens only; every
   leak keeps its own series colour wherever it appears.
   ========================================================================== */

.kh-leak--price  { --leak: var(--series-a); }
.kh-leak--acq    { --leak: var(--series-b); }
.kh-leak--churn  { --leak: var(--series-d); }
.kh-leak--blind  { --leak: var(--series-c); }

/* --- draft marking (removed once Ramin approves a text) ------------------ */
.kh-draft {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.55rem;
  border: 1px dashed var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: var(--fs-label);
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}
.kh-draft-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 0.45rem var(--sp-3);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: center;
}

/* --- header call to action ----------------------------------------------- */
.kh-header__cta { margin-inline-start: var(--sp-2); }
@media (max-width: 900px) { .kh-header__cta { display: none; } }

/* --- credential line under the hero -------------------------------------- */
.kh-cred {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
  color: var(--text-2);
  font-size: var(--fs-small);
}
.kh-cred span { position: relative; }
.kh-cred span + span::before {
  content: '';
  position: absolute;
  inset-inline-start: -0.62rem;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-3);
}
.kh-cred b { color: var(--text); font-weight: 600; }

/* --- the four leaks ------------------------------------------------------- */
.kh-leaks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
@media (max-width: 1080px) { .kh-leaks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .kh-leaks { grid-template-columns: 1fr; } }

.kh-leakcard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-top: 3px solid var(--leak);
  border-radius: var(--radius);
  background: var(--surface);
}
.kh-leakcard__num {
  color: var(--leak);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
}
.kh-leakcard__title { font-size: var(--fs-h3); }
.kh-leakcard__sign { color: var(--text-2); font-size: var(--fs-small); line-height: 1.9; }
.kh-leakcard__tools {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: var(--sp-2) 0 0;
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--border-soft);
  list-style: none;
  font-size: var(--fs-small);
}
.kh-leakcard__tools a { color: var(--text); text-decoration: none; }
.kh-leakcard__tools a:hover { color: var(--leak); }
.kh-leakcard__tools a::before { content: '← '; color: var(--leak); }

/* --- method page: one leak per block ------------------------------------- */
.kh-leakblock {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border-soft);
}
@media (max-width: 760px) { .kh-leakblock { grid-template-columns: 1fr; gap: var(--sp-2); } }
.kh-leakblock__num {
  color: var(--leak);
  font-family: var(--font-mono);
  font-size: 2.6rem;
  line-height: 1;
}
.kh-leakblock__title { font-size: var(--fs-h2); margin-bottom: var(--sp-2); }
.kh-leakblock__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
@media (max-width: 960px) { .kh-leakblock__grid { grid-template-columns: 1fr; gap: var(--sp-3); } }
.kh-leakblock h3 {
  margin-bottom: var(--sp-2);
  color: var(--leak);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.kh-leakblock ul { margin: 0; padding-inline-start: 1.1rem; color: var(--text-2); font-size: var(--fs-small); line-height: 2; }
.kh-leakblock li::marker { color: var(--leak); }

/* --- self-diagnosis ------------------------------------------------------- */
.kh-quiz { display: flex; flex-direction: column; gap: var(--sp-2); counter-reset: q; }
.kh-quiz__q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  counter-increment: q;
}
@media (max-width: 620px) { .kh-quiz__q { grid-template-columns: 1fr; } }
.kh-quiz__text::before {
  content: counter(q, persian) '. ';
  color: var(--text-3);
}
.kh-quiz__text small { display: block; margin-top: 0.2rem; color: var(--text-3); font-size: var(--fs-caption); }
.kh-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.kh-seg button {
  min-width: 4.2rem;
  min-height: 2.5rem;
  padding: 0 var(--sp-3);
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
}
.kh-seg button + button { border-inline-start: 1px solid var(--border); }
.kh-seg button[aria-pressed='true'] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.kh-seg button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

.kh-quiz__result {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.kh-quiz__result[hidden] { display: none; }
.kh-quiz__leaks { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0; }
.kh-quiz__leak {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--leak);
  border-radius: 999px;
  color: var(--text);
  font-size: var(--fs-small);
  text-decoration: none;
}
.kh-quiz__leak::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--leak); }
.kh-progress { height: 4px; border-radius: 4px; background: var(--border-soft); overflow: hidden; }
.kh-progress > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.3s ease; }

/* --- the diagnosis-conversation band ------------------------------------- */
.kh-talk {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    var(--surface);
}
@media (max-width: 860px) { .kh-talk { grid-template-columns: 1fr; padding: var(--sp-4); gap: var(--sp-4); } }
.kh-talk__title { font-size: var(--fs-h2); margin: var(--sp-2) 0; }
.kh-talk__lede { color: var(--text-2); line-height: 2; }
.kh-talk__steps { margin: var(--sp-3) 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-small); line-height: 2.1; }
.kh-talk__steps b { color: var(--text); font-weight: 600; }

.kh-quick { display: flex; flex-direction: column; gap: var(--sp-2); }
.kh-quick a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 3.2rem;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.kh-quick a:hover { border-color: var(--accent); }
.kh-quick a.is-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.kh-quick small { color: inherit; opacity: 0.75; font-weight: 400; font-size: var(--fs-caption); }
.kh-quick .kh-icon { width: 1.15rem; height: 1.15rem; }

/* --- case study template -------------------------------------------------- */
.kh-casegrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
@media (max-width: 760px) { .kh-casegrid { grid-template-columns: 1fr; } }
.kh-casecard {
  padding: var(--sp-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.kh-casecard dl { display: grid; gap: var(--sp-3); margin: var(--sp-3) 0 0; }
.kh-casecard dt { color: var(--text-3); font-size: var(--fs-caption); }
.kh-casecard dd { margin: 0.15rem 0 0; color: var(--text-2); font-size: var(--fs-small); line-height: 1.9; }
.kh-casecard .kh-ph { color: var(--text-3); font-style: italic; }

/* --- article bridge ------------------------------------------------------- */
.kh-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--leak);
  border-radius: var(--radius);
  background: var(--surface);
}
@media (max-width: 620px) { .kh-bridge { grid-template-columns: 1fr; } }
.kh-bridge__kicker { color: var(--leak); font-size: var(--fs-caption); font-weight: 600; }
.kh-bridge__text { margin-top: 0.25rem; color: var(--text-2); font-size: var(--fs-small); line-height: 1.9; }
.kh-bridge__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* --- byline (Ramin's own writing) ---------------------------------------- */
.kh-byline { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-2); font-size: var(--fs-small); }
.kh-byline img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.kh-tag--own { border-color: var(--accent); color: var(--accent); }

/* --- tool result interpretation ------------------------------------------ */
.kh-reading {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}
.kh-reading__title { font-size: var(--fs-body); font-weight: 700; margin-bottom: var(--sp-2); }
.kh-reading p { color: var(--text-2); font-size: var(--fs-small); line-height: 2; }
.kh-reading__cta { margin-top: var(--sp-3); font-size: var(--fs-small); }
.kh-reading__cta a { color: var(--accent); }

/* --- mobile sticky contact (phones only) --------------------------------- */
.kh-mobilebar { display: none; }
@media (max-width: 620px) {
  .kh-mobilebar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    border-top: 1px solid var(--border);
    background: var(--border);
  }
  .kh-mobilebar a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.1rem;
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-small);
    font-weight: 600;
    text-decoration: none;
  }
  .kh-mobilebar a.is-primary { background: var(--accent); color: var(--on-accent); }
  body.has-mobilebar { padding-bottom: 3.2rem; }
}

/* --- page pieces used by the live templates ------------------------------ */
.kh-narrow { max-width: 52rem; }
.kh-leaks__lede { max-width: 46rem; margin-bottom: var(--sp-4); line-height: 2; }
.kh-leakcard__title a { color: inherit; text-decoration: none; }
.kh-leakcard__title a:hover { color: var(--leak); }
.kh-leakblock__sign { line-height: 2; max-width: 44rem; }
.kh-leakblock__tools { margin-top: var(--sp-4); }
.kh-diagband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.kh-diagband > div { max-width: 40rem; }
.kh-cred--about { margin-top: var(--sp-3); padding-top: 0; border-top: 0; font-size: var(--fs-body); }