/* ==========================================================================
   Procedure detail template (shared by all ~20 خدمات pages) — spec 10
   ========================================================================== */

.procedure-hero {
  min-block-size: 42vh;
  display: flex;
  align-items: center;
  background: var(--color-white);
}

.procedure-hero__badge {
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(var(--color-accent-rgb), 0.18);
  color: var(--color-navy);
  font-size: var(--fs-small);
  font-weight: 700;
  margin-block-end: var(--space-4);
}

.procedure-hero__desc {
  color: var(--text-muted-on-light);
  max-inline-size: 60ch;
  margin-block-start: var(--space-3);
}

.procedure-section {
  padding-block: var(--space-12);
  max-inline-size: 760px;
  margin-inline: auto;
}

.procedure-section:nth-child(even) {
  background: var(--color-mist);
}

.procedure-placeholder-note {
  font-size: var(--fs-small);
  color: var(--text-muted-on-light);
  font-style: italic;
}

/* ---- Real article-style content (used by standalone procedure pages) ---- */
.procedure-intro {
  font-size: var(--fs-h4);
  line-height: 1.9;
  color: var(--text-on-light);
}

.procedure-prose p {
  line-height: 1.9;
  color: var(--text-on-light);
  margin-block-end: var(--space-4);
}

.procedure-benefits {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-6);
}

.procedure-benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  line-height: 1.7;
}

.procedure-benefits li svg {
  flex-shrink: 0;
  inline-size: 20px;
  block-size: 20px;
  color: var(--color-accent);
  margin-block-start: 3px;
}

/* Exclusion-style list (e.g. "who is NOT a candidate") — same layout as
   .procedure-benefits, but a muted/neutral icon color instead of the
   accent checkmark, so it doesn't visually read as a positive list. */
.procedure-benefits--exclusion li svg {
  color: var(--text-muted-on-light);
}

.procedure-type-block {
  margin-block-end: var(--space-8);
}

.procedure-type-block__title {
  font-size: var(--fs-h4);
  margin-block-end: var(--space-3);
}

.procedure-type-block__title span {
  color: var(--color-accent);
  margin-inline-end: var(--space-2);
}

.procedure-subtype {
  margin-block: var(--space-5);
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--color-line);
}

.procedure-subtype__title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin-block-end: var(--space-2);
}

/* ---- Process steps — compact numbered list (Timeline visual language,
   scaled down; no scroll-fill animation needed at this smaller scale) ---- */
.process-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.process-step {
  display: flex;
  gap: var(--space-4);
}

.process-step__number {
  flex-shrink: 0;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-small);
}

.process-step__title {
  font-weight: 700;
  margin-block-end: var(--space-1);
}

.process-step__desc {
  color: var(--text-muted-on-light);
  font-size: var(--fs-small);
}

.recovery-article-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-block-start: var(--space-4);
  font-weight: 700;
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- FAQ accordion (scoped to this page, mirrors the About-page pattern) ---- */
.faq-item {
  border-block-end: 1px solid var(--color-line);
}

.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  inline-size: 100%;
  padding-block: var(--space-5);
  text-align: start;
  font-weight: 700;
}

.faq-item__trigger svg {
  flex-shrink: 0;
  inline-size: 18px;
  block-size: 18px;
  color: var(--color-accent);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.faq-item[data-open="true"] .faq-item__trigger svg {
  transform: rotate(180deg);
}

.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-standard);
}

.faq-item[data-open="true"] .faq-item__panel {
  grid-template-rows: 1fr;
}

.faq-item__panel-inner {
  overflow: hidden;
}

.faq-item__answer {
  padding-block-end: var(--space-5);
  color: var(--text-muted-on-light);
  font-size: var(--fs-small);
}

/* ---- CTA ---- */
.procedure-cta {
  text-align: center;
  padding-block: var(--space-6);
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  margin-block: var(--space-8);
}

.procedure-cta p {
  margin-block-end: var(--space-4);
  font-weight: 600;
}

/* ---- Related care articles (مراقبت‌های مربوط) — links to blog posts,
   visually distinct from related-procedure buttons ---- */
.related-articles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .related-articles {
    grid-template-columns: repeat(2, 1fr);
  }
}

.related-articles a {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.related-articles a:hover {
  border-color: var(--color-accent);
}

.related-articles__icon {
  flex-shrink: 0;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: rgba(var(--color-accent-rgb), 0.15);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.related-articles__icon svg {
  inline-size: 18px;
  block-size: 18px;
}

.related-articles__title {
  font-weight: 700;
  font-size: var(--fs-small);
}

/* ---- Related procedures — minimal editorial list, not another card grid ---- */
.related-procedures {
  display: flex;
  flex-direction: column;
}

.related-procedures a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-3);
  padding-inline-start: var(--space-6);
  border-block-end: 1px solid var(--color-line);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--color-navy);
  transition: padding-inline-start var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}

.related-procedures a:first-child {
  border-block-start: 1px solid var(--color-line);
}

/* Accent bar grows in from the reading-start edge on hover/focus */
.related-procedures a::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0;
  inline-size: 3px;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.related-procedures a:hover,
.related-procedures a:focus-visible {
  padding-inline-start: var(--space-8);
  background: rgba(var(--color-navy-rgb), 0.03);
}

.related-procedures a:hover::before,
.related-procedures a:focus-visible::before {
  transform: scaleY(1);
}

.related-procedures a svg {
  flex-shrink: 0;
  inline-size: 18px;
  block-size: 18px;
  color: var(--color-accent);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.related-procedures a:hover svg {
  transform: translateX(-4px);
}