/* ============================================================================
   ch-169r/169t — کاشی‌های تایپوگرافیک حوزه‌های مهارتی (قالب: templates/site_pages/_home_domains.html)
   در صفحهٔ اول و صفحهٔ /exams/ مشترک است. همهٔ رنگ‌ها از توکن‌های سایت (--tk-*) یا پنل (--sk-*) با مقدار پیش‌فرض.
   ============================================================================ */
.hdm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.hdm-grid .hdm-tile{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:168px;height:100%;padding:24px 24px 20px;
  border-radius:22px;background:var(--tk-surface,var(--sk-surface,#fff));box-shadow:inset 0 0 0 1px var(--tk-line,var(--sk-line,rgba(26,28,31,.10)));color:var(--tk-ink,var(--sk-ink,#1a1c1f));text-decoration:none;
  transition:box-shadow .2s ease,transform .2s ease}
.hdm-grid .hdm-tile::before{content:"";position:absolute;inset-block-start:0;inset-inline:24px;height:3px;border-radius:0 0 3px 3px;background:var(--tk-amber,var(--sk-amber,#ffc218));
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .3s ease}
.hdm-grid .hdm-tile:hover{box-shadow:inset 0 0 0 1px var(--tk-line-strong,var(--sk-line-strong,rgba(26,28,31,.16))),0 18px 40px -28px rgba(24,26,29,.45);transform:translateY(-2px)}
.hdm-grid .hdm-tile:hover::before,.hdm-grid .hdm-tile:focus-visible::before{transform:scaleX(1)}
.hdm-grid .hdm-tile:focus-visible{outline:2px solid var(--tk-ink,var(--sk-ink,#1a1c1f));outline-offset:3px}
/* قاب کاشی روی تصویر هم کشیده شود (تصویر لبهٔ بالایی را نپوشاند) */
.hdm-grid .hdm-tile::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--tk-line,var(--sk-line,rgba(26,28,31,.10)));pointer-events:none}
.hdm-grid .hdm-tile::before{z-index:3}
.hdm-grid .hdm-cover{display:block;margin:-24px -24px 18px;aspect-ratio:16/8.5;overflow:hidden;background:var(--tk-surface-2,var(--sk-surface-2,#f4f3ef));border-bottom:1px solid var(--tk-line,var(--sk-line,rgba(26,28,31,.10)))}
.hdm-grid .hdm-cover img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;transition:transform .35s ease}
.hdm-grid .hdm-tile:hover .hdm-cover img{transform:scale(1.03)}
.hdm-grid .hdm-name{margin:0;font-family:var(--tk-font-heading,var(--sk-font-heading,inherit));font-size:18.5px;font-weight:850;line-height:1.6;overflow-wrap:anywhere;text-wrap:balance}
.hdm-grid .hdm-en{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:4px;font-family:'TKInterLatin','Inter',var(--tk-font,var(--sk-font,inherit)),sans-serif;font-size:12.5px;font-weight:500;line-height:1.55;color:var(--tk-ink-faint,var(--sk-ink-faint,rgba(26,28,31,.4)));direction:ltr;text-align:right;text-wrap:balance}
.hdm-grid .hdm-meta{margin-top:auto;padding-top:22px;font-size:13.5px;font-weight:700;color:var(--tk-ink-soft,var(--sk-ink-soft,rgba(26,28,31,.62)))}
.hdm-grid .hdm-meta b{font-family:var(--tk-font-heading,var(--sk-font-heading,inherit));font-weight:850;color:var(--tk-ink,var(--sk-ink,#1a1c1f))}
.hdm-grid .hdm-meta--soon{color:var(--tk-ink-faint,var(--sk-ink-faint,rgba(26,28,31,.4)))}
.hdm-grid .hdm-word{position:absolute;z-index:-1;inset-inline-end:-6px;bottom:-14px;max-width:none;white-space:nowrap;pointer-events:none;
  font-family:'TKInterLatin','Inter',var(--tk-font-heading,var(--sk-font-heading,inherit)),sans-serif;font-size:58px;font-weight:800;line-height:1;letter-spacing:-.03em;
  color:var(--tk-ink,var(--sk-ink,#1a1c1f));opacity:.045;direction:ltr;transition:opacity .25s ease}
.hdm-grid .hdm-tile:hover .hdm-word{opacity:.08}
.hdm-grid .hdm-tile:has(.hdm-cover) .hdm-word{display:none}
@media (max-width:1000px){.hdm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .hdm-grid{gap:10px}
  .hdm-grid .hdm-item.is-m-extra{display:none}
  .hdm-grid .hdm-tile{min-height:150px;padding:18px 16px 16px;border-radius:18px}
  .hdm-grid .hdm-cover{margin:-18px -16px 14px}
  .hdm-grid .hdm-name{font-size:16px}
  .hdm-grid .hdm-word{font-size:40px;bottom:-10px}
  .hdm-grid .hdm-meta{padding-top:16px;font-size:12.5px}
}


.hdm-grid .hdm-item{margin:0;padding:0;list-style:none}
.hdm-grid .hdm-item[hidden]{display:none}
/* ch-169x — گوشی: همان کاشی تصویردار دوستونی؛ نام فارسی کوچک‌تر (حداکثر دو خط) و بی نام لاتین */
@media (max-width:640px){
  .hdm-grid .hdm-name{font-size:14px;line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-wrap:pretty}
  .hdm-grid .hdm-en{display:none}
  .hdm-grid .hdm-meta{padding-top:12px;font-size:12px}
  .hdm-grid .hdm-tile{min-height:0}
}