/* IHI Editorial Presentation v11; source: pilot/static/ihi-editorial-v1.css; scoped under .ihi-article */
.ihi-article {
  --ihi-text: #19302a;
  --ihi-muted: #5e716b;
  --ihi-primary: #2f7d61;
  --ihi-primary-soft: #edf7f1;
  --ihi-warning: #b54848;
  --ihi-warning-soft: #fff1f1;
  --ihi-border: #d8e4de;
  --ihi-radius: 10px;
  --ihi-space-1: .5rem;
  --ihi-space-2: .875rem;
  --ihi-space-3: 1.25rem;
  --ihi-space-4: 2rem;
  --ihi-body-size: 1.125rem;
  --ihi-body-leading: 1.85;
  --ihi-arabic-size: clamp(1.75rem, 3vw, 2rem);
  --ihi-arabic-leading: 2;
  --ihi-content-width: 800px;
}
.ihi-article .ihi-preview-page { margin: 0; background: #f7faf8; }
.ihi-article .ihi-preview-label { margin: var(--ihi-space-3) 0 var(--ihi-space-1); color: var(--ihi-primary); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.ihi-article .ihi-title { margin: var(--ihi-space-2) 0 var(--ihi-space-1); color: var(--ihi-text); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; }
.ihi-article .ihi-meta { margin-bottom: var(--ihi-space-3); color: var(--ihi-muted); font-size: .95rem; }
.ihi-article .ihi-featured-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #dcebe3, #f1f6f3); color: var(--ihi-muted); font-size: .95rem; }
.ihi-article .ihi-featured-placeholder span { padding: .75rem 1rem; border: 1px solid var(--ihi-border); border-radius: var(--ihi-radius); background: rgba(255,255,255,.7); }
.ihi-article .ihi-title + .ihi-meta + .ihi-featured-placeholder { margin-bottom: var(--ihi-space-4); }
.ihi-article {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--ihi-content-width);
  margin-inline: auto;
  color: var(--ihi-text);
  font-size: 18px !important;
  line-height: 1.85 !important;
  overflow-wrap: anywhere;
}
.ihi-article *,
.ihi-article *::before,
.ihi-article *::after { box-sizing: border-box; }
.ihi-article .ihi-paragraph { margin: 0 0 1.5rem; font-size: 18px !important; line-height: 1.85 !important; }
.ihi-article .ihi-h2 { margin: 3.25rem 0 1rem; font-size: 30px !important; font-weight: 700; line-height: 1.25 !important; }
.ihi-article .ihi-h3 { margin: 2.25rem 0 .75rem; font-size: 23px !important; font-weight: 700; line-height: 1.35 !important; }
.ihi-article .ihi-arabic {
  direction: rtl;
  text-align: right;
  margin: 2rem 0 1.25rem;
  font-family: "Noto Naskh Arabic", "Amiri", "Scheherazade New", serif;
  font-size: clamp(26px, 3vw, 30px) !important;
  line-height: 2 !important;
  overflow-wrap: anywhere;
}
.ihi-article bdi[dir="rtl"] { direction: rtl; unicode-bidi: isolate; font-family: "Noto Naskh Arabic", "Amiri", "Scheherazade New", serif; }
.ihi-article .ihi-footnote-marker { margin-inline-start: .2em; color: var(--ihi-primary); font-size: .75em; vertical-align: super; }
.ihi-article .ihi-footnote-preview { display: inline; margin-inline-start: .25em; color: var(--ihi-muted); font-size: .9em; unicode-bidi: isolate; }
.ihi-article .ihi-footnote-preview bdi[dir="rtl"] { font-size: 1.05em; }
.ihi-article .ihi-footnotes { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--ihi-border); color: var(--ihi-muted); }
.ihi-article .ihi-footnotes h2 { margin: 0 0 .75rem; color: var(--ihi-text); font-size: 1.25rem; }
.ihi-article .ihi-footnotes ol { margin: 0; padding-inline-start: 1.5rem; }
.ihi-article .ihi-footnotes li { margin-bottom: 1rem; padding-inline-start: .25rem; line-height: 1.8; }
.ihi-article .ihi-footnote-body { max-width: 100%; overflow-wrap: anywhere; }
.ihi-article .ihi-footnote-body bdi[dir="rtl"] { unicode-bidi: isolate; }
.ihi-article .ihi-footnote-body bdi[dir="ltr"] { direction: ltr; unicode-bidi: isolate; }
.ihi-article .ihi-footnote-body .ihi-arabic { margin: .5rem 0; font-size: 1.05em !important; }
.ihi-article .ihi-footnote-anchor { margin: .5rem 0 1rem; min-height: 1.75rem; text-align: start; }
.ihi-article .ihi-footnote-anchor-label { display: inline-block; padding: .2rem .55rem; border: 1px solid var(--ihi-border); border-radius: 999px; background: var(--ihi-primary-soft); color: var(--ihi-muted); font-size: .82em; line-height: 1.4; }
.ihi-article .ihi-footnote-anchor .ihi-footnote-marker { display: inline-block; margin-inline-start: .2rem; padding: .15rem .4rem; border: 1px solid var(--ihi-primary); border-radius: 999px; color: var(--ihi-primary); font-size: .8em; font-weight: 700; }
.ihi-article .ihi-translation { margin: .5rem 0 2rem; color: var(--ihi-muted); font-size: 18px !important; line-height: 1.8 !important; }
.ihi-article .ihi-faedah,
.ihi-article .ihi-perhatian,
.ihi-article .ihi-kesimpulan,
.ihi-article .ihi-reference {
  margin: var(--ihi-space-3) 0;
  padding: var(--ihi-space-2) var(--ihi-space-3);
  border: 1px solid var(--ihi-border);
  border-inline-start: 4px solid var(--ihi-primary);
  border-radius: var(--ihi-radius);
}
.ihi-article .ihi-faedah { background: var(--ihi-primary-soft); }
.ihi-article .ihi-quote { margin: var(--ihi-space-3) 0; padding: var(--ihi-space-2) var(--ihi-space-3); border-inline-start: 4px solid var(--ihi-primary); color: var(--ihi-muted); }
.ihi-article .ihi-perhatian { background: var(--ihi-warning-soft); border-inline-start-color: var(--ihi-warning); }
.ihi-article .ihi-kesimpulan { background: #f3f8f5; }
.ihi-article .ihi-reference { color: var(--ihi-muted); font-size: .95em; line-height: 1.65; }
.ihi-article .ihi-highlight,
.ihi-article .ihi-info-box,
.ihi-article .ihi-note-box,
.ihi-article .ihi-summary-box {
  margin: var(--ihi-space-4) 0;
  padding: var(--ihi-space-3) var(--ihi-space-4);
  border: 1px solid var(--ihi-border);
  border-radius: var(--ihi-radius);
}
.ihi-article .ihi-highlight { background: var(--ihi-primary-soft); border-inline-start: 4px solid var(--ihi-primary); }
.ihi-article .ihi-info-box { background: #fbf8f0; border-inline-start: 4px solid var(--ihi-primary); }
.ihi-article .ihi-note-box { background: #fff8ed; border-inline-start: 4px solid #b9782c; }
.ihi-article .ihi-summary-box { background: #f3f8f5; border-inline-start: 4px solid var(--ihi-primary); }
.ihi-article .ihi-highlight .ihi-paragraph,
.ihi-article .ihi-info-box .ihi-paragraph,
.ihi-article .ihi-note-box .ihi-paragraph,
.ihi-article .ihi-summary-box .ihi-paragraph { margin: 0; }
.ihi-article .ihi-list { margin-block: var(--ihi-space-3); padding-inline-start: 1.5rem; }
.ihi-article .ihi-step-list {
  margin-block: var(--ihi-space-4);
  padding: var(--ihi-space-2) var(--ihi-space-3) var(--ihi-space-2) 2.25rem;
  border-inline-start: 4px solid var(--ihi-primary);
  border-radius: var(--ihi-radius);
  background: linear-gradient(90deg, var(--ihi-primary-soft), #fff 72%);
}
.ihi-article .ihi-step-list > li { padding: .7rem .5rem; line-height: 1.8; }
.ihi-article .ihi-step-list > li::marker { color: var(--ihi-primary); font-weight: 700; }
.ihi-article .ihi-footnotes { color: var(--ihi-muted); font-size: .94em; }
.ihi-article .ihi-footnotes h2 { font-size: 1.2rem; margin-top: var(--ihi-space-5); }
.ihi-article .ihi-footnotes .ihi-footnote-body { line-height: 1.75; }
.ihi-article .ihi-reference { opacity: .92; }
.ihi-article .ihi-translation { color: var(--ihi-muted); margin-block: var(--ihi-space-2) var(--ihi-space-4); line-height: 1.8; }
.ihi-article .ihi-footnotes.ihi-reference { margin-top: var(--ihi-space-5); }
.ihi-article .ihi-footnotes .ihi-list { font-size: .95em; }
.ihi-article .ihi-featured-frame { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--ihi-radius); background: #f1f6f3; }
.ihi-article .ihi-featured-image { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: var(--ihi-radius); }
.ihi-article .ihi-featured-contexts { display: grid; gap: var(--ihi-space-4); margin: var(--ihi-space-4) 0; }
.ihi-article .ihi-featured-context { margin: 0; }
.ihi-article .ihi-featured-context-label { display: block; margin-bottom: var(--ihi-space-2); color: var(--ihi-muted); font-size: .85rem; font-weight: 700; }
.ihi-article .ihi-featured-display { width: 100%; overflow: hidden; border-radius: var(--ihi-radius); background: #f1f6f3; }
.ihi-article .ihi-featured-display img { display: block; width: 100%; height: 100%; }
.ihi-article .ihi-featured-slideshow { aspect-ratio: 550 / 301; }
.ihi-article .ihi-featured-card { aspect-ratio: 300 / 178; }
.ihi-article .ihi-featured-thumbnail { aspect-ratio: 1 / 1; max-width: 150px; }
.ihi-article .ihi-featured-slideshow img,
.ihi-article .ihi-featured-card img { object-fit: cover; object-position: center; }
.ihi-article .ihi-featured-thumbnail img { object-fit: cover; object-position: center; }
.ihi-article .ihi-featured-safe-debug { position: relative; outline: 2px dashed #b54b42; }
.ihi-article .ihi-featured-safe-debug::after { content: "display-safe center zone"; position: absolute; left: 22.6%; right: 22.6%; top: 22.7%; bottom: 22.7%; border: 2px dashed #1b7a45; pointer-events: none; color: #1b7a45; font-size: .72rem; padding: .25rem; box-sizing: border-box; }
.ihi-article .ihi-featured-placeholder { display: flex; height: auto; min-height: 12rem; }
.ihi-article @media (max-width: 700px) {
  .ihi-preview-page > .ihi-article { padding-inline: 1rem; }
  .ihi-article { font-size: 18px !important; line-height: 1.8 !important; }
  .ihi-paragraph { font-size: 18px !important; line-height: 1.8 !important; }
  .ihi-title { font-size: 34px; }
  .ihi-h2 { font-size: 27px !important; margin-top: 2.5rem; }
  .ihi-h3 { font-size: 21px !important; margin-top: 1.75rem; }
  .ihi-arabic { font-size: clamp(22px, 6.5vw, 26px) !important; line-height: 1.95 !important; margin-block: 1.5rem 1rem; }
  .ihi-translation { font-size: 18px !important; line-height: 1.75 !important; }
  .ihi-faedah, .ihi-perhatian, .ihi-kesimpulan, .ihi-reference { padding: var(--ihi-space-2); }
  .ihi-highlight, .ihi-info-box, .ihi-note-box, .ihi-summary-box { padding: var(--ihi-space-2) var(--ihi-space-3); }
  .ihi-step-list { padding-inline-start: 2rem; margin-block: var(--ihi-space-3); }
  .ihi-step-list > li { padding-block: .55rem; }
}

