/* ============================================================================
   ch-118d — صفحه‌ی اول: دو مسیر (متخصص و کارجو، سازمان و شرکت) درست بعد از سرصفحه، در یک نوار تمام‌عرض دو رنگ.
   ch-122: رنگ نیمه‌ی سازمان‌ها از آبی کبالتی به زغالی برند (--tk-charcoal) برگشت: همان دو رنگ اصلی سایت، زرد و زغالی، تخت و
   بی‌گرادیان. نیمه‌ی متخصص‌ها زرد برند با متن تیره و دکمه‌ی زغالی، نیمه‌ی سازمان‌ها زغالی با متن سفید و دکمه‌ی زرد (آینه‌ی هم).
   نشان «یا» یک دایره‌ی سفید تخت روی مرز دو رنگ است. بی آیکون، بی سایه.
   کل هر نیمه با دکمه‌ی اصلی‌اش پیوند است (::after کشیده) و با نشستن نشانگر کمی روشن‌تر می‌شود.
   رنگ هر نیمه با ::before ساخته می‌شود که تا لبه‌ی صفحه کشیده و با overflow نوار بریده می‌شود، پس صفحه پهن نمی‌شود.
   متن هر نیمه در همان قاب .pub-container بقیه‌ی بخش‌هاست. نوار در تم روز و شب یکسان است.
   قالب: templates/site_pages/_home_paths.html. چند قاعده‌ی دیگر صفحه‌ی اول هم پایین همین فایل است.
   ============================================================================ */
.hpz{--hpz-me:#ffc218;--hpz-me-on:#ffcd3f;--hpz-me-ink:#181a1d;--hpz-me-soft:rgba(24,26,29,.82);
  --hpz-org:#181a1d;--hpz-org-on:#202327;--hpz-org-ink:#ffffff;--hpz-org-soft:rgba(255,255,255,.78);
  --hpz-pad:clamp(56px,6.2vw,100px);--hpz-gap:clamp(32px,4.6vw,76px);
  position:relative;overflow:hidden;background:var(--hpz-me)}
/* تم شب: نیمه‌ی زغالی یک پله روشن‌تر از پس‌زمینه‌ی صفحه تا از آن جدا بماند (همچنان تخت) */
[data-theme="dark"] .hpz{--hpz-org:#1f2227;--hpz-org-on:#272a30}
/* دو نیمه سه ردیف مشترک دارند (subgrid): عنوان، توضیح و دکمه‌های دو طرف هم‌ترازند، با اینکه عنوان متخصص‌ها بزرگ‌تر است */
.hpz-bar{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hpz-way{position:relative;isolation:isolate;min-width:0;display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;justify-items:start;padding-block:var(--hpz-pad)}
.hpz-way::before{content:"";position:absolute;inset-block:0;z-index:-1;transition:background-color .2s ease}
.hpz-way--me{padding-inline-end:var(--hpz-gap);color:var(--hpz-me-ink)}
.hpz-way--me::before{inset-inline:-100vw 0;background:var(--hpz-me)}
.hpz-way--org{padding-inline-start:var(--hpz-gap);color:var(--hpz-org-ink)}
.hpz-way--org::before{inset-inline:0 -100vw;background: #244d8b;}
.hpz-way--me:hover::before{background:var(--hpz-me-on)}
.hpz-way--org:hover::before{background:var(--hpz-org-on)}

.hpz-title{align-self:end;margin:0;font-weight:900;line-height:1.3;color:inherit;text-wrap:balance}
.hpz-way--me .hpz-title{font-size:clamp(30px,3.3vw,48px)}
.hpz-way--org .hpz-title{font-size:clamp(27px,2.85vw,41px)}
.hpz-desc{margin:14px 0 0;max-width:27em;font-size:clamp(16px,1.25vw,18.5px);font-weight:600;line-height:1.8;text-wrap:pretty}
.hpz-way--me .hpz-desc{color:var(--hpz-me-soft)}
.hpz-way--org .hpz-desc{color:var(--hpz-org-soft)}

.hpz-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-top:34px}
.hpz-go{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 34px;border-radius:999px;
  font-size:16px;font-weight:800;text-decoration:none;white-space:nowrap;transition:background-color .18s ease,color .18s ease}
/* کل نیمه ناحیه‌ی کلیک دکمه‌ی اصلی است (تا لبه‌ی صفحه) */
.hpz-go::after{content:"";position:absolute;inset-block:0;z-index:0}
.hpz-way--me .hpz-go::after{inset-inline:-100vw 0}
.hpz-way--org .hpz-go::after{inset-inline:0 -100vw}
.hpz-way--me .hpz-go{background:var(--hpz-me-ink);color:#ffffff}
.hpz-way--me:hover .hpz-go{background:#000000}
.hpz-way--org .hpz-go{background:var(--hpz-me);color:var(--hpz-me-ink)}
.hpz-way--org:hover .hpz-go{background:var(--hpz-me-on);color:var(--hpz-me-ink)}
.hpz-alt{position:relative;z-index:1;font-size:15.5px;font-weight:800;color:inherit;text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:8px;text-decoration-color:currentColor;padding:6px 0}
.hpz-way--me .hpz-alt{text-decoration-color:rgba(24,26,29,.35)}
.hpz-way--org .hpz-alt{text-decoration-color:rgba(255,255,255,.45)}
.hpz-alt:hover{text-decoration-color:currentColor}
.hpz-way--me .hpz-go:focus-visible,.hpz-way--me .hpz-alt:focus-visible{outline:3px solid var(--hpz-me-ink);outline-offset:4px;border-radius:999px}
.hpz-way--org .hpz-go:focus-visible,.hpz-way--org .hpz-alt:focus-visible{outline:3px solid var(--hpz-me);outline-offset:4px;border-radius:999px}

/* مرز دو رنگ و نشان «یا» روی آن */
.hpz-or{position:absolute;z-index:2;inset-block:0;left:50%;width:0;pointer-events:none}
.hpz-or b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;font-size:16px;font-weight:900;color:var(--hpz-me-ink);background:#ffffff}

/* تبلت و گوشی: دو نیمه زیر هم، هر کدام با رنگ خودش تا دو لبه، و «یا» روی مرز افقی */
@media (max-width:860px){
  .hpz{--hpz-pad:clamp(40px,8vw,56px)}
  .hpz-bar{grid-template-columns:minmax(0,1fr)}
  .hpz-way--me{padding-inline-end:0}
  .hpz-way--org{padding-inline-start:0}
  .hpz-way--me::before,.hpz-way--org::before,.hpz-way--me .hpz-go::after,.hpz-way--org .hpz-go::after{inset-inline:-100vw}
  .hpz-or{position:relative;inset:auto;left:auto;width:auto;height:0;margin:0}
  .hpz-way--org{padding-top:calc(var(--hpz-pad) + 10px)}          /* جا برای نشان «یا» روی مرز */
}
@media (max-width:640px){
  .hpz-way--me .hpz-title{font-size:28px}
  .hpz-way--org .hpz-title{font-size:25px}
  .hpz-desc{font-size:16px}
  .hpz-acts{gap:16px 20px;padding-top:26px}
  .hpz-way{justify-items:stretch}
  .hpz-go{flex:1 1 100%}
  .hpz-alt{margin-inline:auto}
  .hpz-or b{width:44px;height:44px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.hpz-way::before,.hpz-go{transition:none}}

/* «تست‌کاو برای چه کسی است؟»: چهار کارت پیونددار (دانشجو، سازمان، طراح، آموزشگاه) */
.pub-aud.pub-aud--4{grid-template-columns:repeat(4,minmax(0,1fr))}
a.pub-aud-card--go{display:flex;flex-direction:column;align-items:flex-start;color:inherit;text-decoration:none}
a.pub-aud-card--go:focus-visible{outline:3px solid var(--tk-amber,#ffc218);outline-offset:3px}
.pub-aud-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:800;color:var(--tk-ink,#1a1c1f)}
.pub-aud-go svg{width:15px;height:15px;transition:transform .2s var(--tk-ease)}
a.pub-aud-card--go:hover .pub-aud-go svg{transform:translateX(-3px)}
@media (max-width:1100px){.pub-aud.pub-aud--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pub-aud.pub-aud--4{grid-template-columns:minmax(0,1fr)}}

/* صفحه‌ی اول، گوشی: فقط چهار کارت حوزه (بقیه با «مشاهده‌ی همه‌ی دسته‌بندی‌ها») */
@media (max-width:640px){
  .sk-mkt-tax-card.is-m-extra{display:none!important}
}