/* SHIFT.camp — صفحه‌ی معرفی شخص (گوتنبرگ)، دو ستونه: کارت معرفی + محتوا
 * طبق DESIGN.md. همه‌ی قانون‌ها زیر .hkp (بلوک گروه بیرونی).
 * کلاس‌ها در ویرایشگر: بلوک ← پیشرفته ← «کلاس(های) CSS اضافی»
 *   hkp-wrap · hkp-card · hkp-main · hkp-sec · hkp-h2 (گروه دور عنوان) · hkp-rows · hkp-tl · hkp-y · hkp-more · hkp-gallery
 * در فهرست‌ها: عنوان عادی، سپس Shift+Enter و توضیح به‌صورت «ایتالیک» (کوچک و خاکستری نمایش داده می‌شود).
 */

.hkp {
  --ink: #0C0C0C; --text: var(--sc-text); --surface: #F4F5F7; --line: #E2E4E9; --accent: #3366FF;
  font-family: IRANYekanX, Roboto, Arial, sans-serif;
  color: var(--text); font-size: 16px; line-height: 1.9;
  direction: rtl; text-align: right;
}
.hkp *, .hkp *::before, .hkp *::after { box-sizing: border-box; }
.hkp > *, .hkp .wp-block-group > *, .hkp .wp-block-column > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.hkp p { margin: 0 !important; color: var(--text); font-size: 16px; line-height: 1.9; text-align: right; }
.hkp a { transition: color .15s ease-out, background-color .15s ease-out, border-color .15s ease-out; }
.hkp a:focus-visible, .hkp summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hkp h1, .hkp h2, .hkp h3 { font-family: inherit; letter-spacing: 0; text-transform: none; }
.hkp ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.hkp li { margin: 0 !important; list-style: none !important; }
.hkp img { margin: 0; }

.hkp-wrap {
  max-width: 1170px; margin: 0 auto !important;
  padding: clamp(32px, 6vw, 80px) 16px clamp(64px, 9vw, 120px);
  display: flex !important; flex-wrap: wrap; align-items: flex-start;
  gap: clamp(32px, 5vw, 64px);
}

/* ---------- کارت معرفی ---------- */
.hkp-card {
  flex: 1 1 280px; max-width: 100%;
  background: var(--surface); border-radius: 10px; padding: 28px;
  display: flex !important; flex-direction: column; gap: 20px;
}
@media (min-width: 850px) { .hkp-card { position: sticky; top: 110px; } }
.hkp-id { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 16px; }
.hkp-id > div, .hkp-id > .wp-block-group { display: flex; flex-direction: column; }
.hkp-avatar { flex: 0 0 64px; width: 64px !important; height: 64px; border-radius: 999px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.hkp-avatar img { display: block; width: 64px !important; height: 64px !important; object-fit: cover; border-radius: 999px; }
.hkp-name { margin: 0 !important; padding: 0; font-size: 24px !important; line-height: 1.3 !important; font-weight: 700; color: var(--ink) !important; }
.hkp .hkp-role { font-size: 13px; line-height: 1.6; }
.hkp .hkp-lead { font-size: 15px; line-height: 1.8; }

.hkp-btn { width: 100%; }
.hkp .wp-block-buttons { display: flex; }
.hkp-btn .wp-block-button__link {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 44px; padding: 0 20px; margin: 0;
  border-radius: 5px; background: var(--ink) !important; color: #fff !important;
  border: 1.5px solid var(--ink);
  font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none !important;
}
.hkp-btn .wp-block-button__link:hover { background: #fff !important; color: var(--ink) !important; }

.hkp-facts { border-top: 1px solid var(--line); }
.hkp-facts li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
  font-size: 14px; line-height: 1.5;
}
.hkp-facts li:last-child { border-bottom: 0; }
.hkp-facts strong, .hkp-facts b { color: var(--ink); font-weight: 700; }

.hkp .hkp-social { display: flex !important; flex-wrap: nowrap; gap: 8px !important; padding: 0 !important; margin: 0 !important; }
.hkp .hkp-social .wp-social-link {
  margin: 0 !important; width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 999px; background: #fff !important; border: 1px solid var(--line);
  color: var(--ink) !important; transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
.hkp .hkp-social .wp-social-link a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 !important; color: inherit !important; }
.hkp .hkp-social .wp-social-link svg { width: 18px; height: 18px; fill: currentColor; }
.hkp .hkp-social .wp-social-link:hover { background: var(--ink) !important; border-color: var(--ink); color: #fff !important; transform: none; }

/* ---------- محتوا ---------- */
.hkp-main { flex: 999 1 560px; min-width: 0; display: flex !important; flex-direction: column; gap: clamp(48px, 6vw, 72px); }
.hkp-sec { display: flex !important; flex-direction: column; }
.hkp-about { gap: 16px; }
.hkp-about a { color: var(--accent) !important; text-decoration: none; }
.hkp-about a:hover { text-decoration: underline; }

/* عنوان بخش: برچسب سیاه + خط ۳px تمام‌عرض */
.hkp-h2 { border-bottom: 3px solid var(--ink); margin-bottom: 16px !important; line-height: 0; }
.hkp-h2 h2, .hkp h2.wp-block-heading {
  display: inline-block; width: auto !important; max-width: 100%; margin: 0 !important; padding: 6px 16px !important;
  background: var(--ink); color: #fff !important;
  font-size: 19px !important; line-height: 1.45 !important; font-weight: 700;
}
.hkp-about .hkp-h2 { margin-bottom: 8px !important; }
.hkp-teach .hkp-h2, .hkp-certs .hkp-h2 { margin-bottom: 24px !important; }

.hkp .hkp-two { gap: clamp(40px, 5vw, 56px) !important; margin: 0 !important; }
.hkp .hkp-two > .wp-block-column { min-width: 0; }

.hkp-rows li, .hkp-tl li { display: block; color: var(--ink); font-size: 15px; line-height: 1.7; }
.hkp-rows li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.hkp-rows em, .hkp-tl em { display: inline-block; margin-top: 2px; font-style: normal; font-size: 13px; line-height: 1.6; color: var(--text); }

/* خط زمانی تدریس */
.hkp-tl { border-right: 1px solid var(--line); padding-right: 24px !important; display: flex !important; flex-direction: column; gap: 32px; }
.hkp-tl { gap: 0 !important; }
.hkp-tl ul { display: flex; flex-direction: column; gap: 12px; margin-top: 10px !important; }
.hkp-tl > h3.hkp-y:not(:first-child) { margin-top: 32px !important; }
.hkp h3.hkp-y {
  display: flex; align-items: center; gap: 12px; margin: 0 -30px 0 0 !important; padding: 0;
  color: var(--ink) !important; font-size: 15px !important; font-weight: 700; line-height: 1.6 !important;
}
.hkp h3.hkp-y::before { content: ""; width: 11px; height: 11px; border-radius: 999px; background: var(--ink); border: 2px solid #fff; flex: 0 0 auto; }

.hkp .hkp-teach > .hkp-more { margin-top: 32px !important; }
.hkp-more > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: 5px; border: 1.5px solid var(--ink); background: #fff; color: var(--ink);
  font-size: 14px; font-weight: 700; line-height: 1;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.hkp-more > summary::-webkit-details-marker { display: none; }
.hkp-more > summary::marker { content: ""; }
.hkp-more > summary:hover { background: var(--ink); color: #fff; }
.hkp-more[open] > summary { margin-bottom: 32px; }

/* گواهی‌نامه‌ها */
.hkp .hkp-gallery { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px !important; margin: 0 !important; }
.hkp .hkp-gallery .wp-block-image {
  width: auto !important; margin: 0 !important;
  aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  transition: border-color .15s ease-out;
}
.hkp .hkp-gallery .wp-block-image:hover { border-color: var(--ink); }
.hkp .hkp-gallery .wp-block-image img { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 8px; }
.hkp .hkp-gallery figcaption { display: none; }

@media (max-width: 549px) {
  .hkp-card { padding: 24px 20px; }
  .hkp p { font-size: 15px; }
  .hkp .hkp-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; }
}