/* IranTalent single post — Raz Salamat-inspired, RTL-first, shallow DOM. */
.single-post .it-main {
    width: min(calc(100% - 32px), 1400px);
    margin-inline: auto;
    padding-block: 16px 56px;
}

/* Breadcrumb is visually separated from the article/sidebar section. */
.it-single-breadcrumb {
    margin: 0 0 20px;
    padding: 10px 18px;
    overflow: hidden;
    border: 1px solid var(--it-border);
    border-radius: var(--it-radius);
    background: var(--it-surface);
    box-shadow: 0 4px 14px color-mix(in srgb, #0f172a 6%, transparent);
    color: var(--it-muted);
    font-size: .875rem;
}

.it-single-breadcrumb ol {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    list-style: none;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}
.it-single-breadcrumb ol::-webkit-scrollbar { display: none; }
.it-single-breadcrumb li { display: inline-flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.it-single-breadcrumb li + li::before {
    content: "›";
    margin-inline: 10px;
    color: var(--it-muted);
    font-size: 1rem;
}
.it-single-breadcrumb a { color: var(--it-primary); font-weight: 500; text-decoration: none; }
.it-single-breadcrumb a:hover { text-decoration: underline; }
.it-single-breadcrumb [aria-current="page"] { color: var(--it-text); }
[data-theme="dark"] .it-single-breadcrumb { background: var(--it-surface-2); }

.it-single__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 20px;
}
.it-single__layout--without-sidebar { grid-template-columns: minmax(0, 980px); justify-content: center; }

.it-single__main,
.it-single-author,
.it-single-related,
.it-comments {
    grid-column: 1;
    min-width: 0;
    border: 1px solid var(--it-border);
    border-radius: var(--it-radius);
    background: var(--it-surface);
}
.it-single__main { padding: 24px; }
.it-single__aside { grid-column: 2; grid-row: 1; min-width: 0; }

.it-single__kicker { display: inline-flex; margin: 0 0 10px; color: var(--it-secondary); font-weight: 600; }
.it-single__title {
    position: relative;
    margin: 0 0 20px;
    padding-block-end: 10px;
    color: var(--it-text);
    font-size: clamp(2rem, 4.4vw, 3.7rem);
    line-height: 1.28;
    letter-spacing: -.025em;
}
.it-single__title::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    width: 80px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(to left, var(--it-primary), color-mix(in srgb, var(--it-primary) 55%, white));
}

.it-single__meta {
    display: flex;
    align-items: center;
    gap: 8px 20px;
    margin: 0 0 14px;
    padding-block-end: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    color: var(--it-muted);
    font-size: .875rem;
    line-height: 2;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.it-single__meta::-webkit-scrollbar { display: none; }
.it-single__meta-item { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.it-single__meta-icon { display: inline-flex; width: 16px; height: 16px; flex: 0 0 16px; color: var(--it-primary); }
.it-single__meta-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.it-single__featured-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 30px;
    border-radius: 18px;
    object-fit: cover;
}
.it-single__lead {
    margin: 0 0 26px;
    padding: 0;
    background: transparent;
    color: color-mix(in srgb, var(--it-text) 84%, var(--it-muted));
    font-size: 1.075rem;
    font-weight: 300;
    line-height: 2;
}

/* TOC identical in behavior to Raz Salamat, recolored for IranTalent. */
.it-single-toc { margin: 0 0 22px; }
.it-single-toc__details {
    overflow: hidden;
    border: 1px solid var(--it-border);
    border-radius: var(--it-radius);
    background: var(--it-surface-2);
}
.it-single-toc__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
}
.it-single-toc__summary::-webkit-details-marker { display: none; }
.it-single-toc__title { color: var(--it-text); font-weight: 700; }
.it-single-toc__icon { display: inline-flex; width: 17px; height: 17px; color: var(--it-muted); transition: transform .2s ease; }
.it-single-toc__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.it-single-toc__details[open] .it-single-toc__icon { transform: rotate(180deg); }
.it-single-toc__list {
    max-height: 360px;
    margin: 0;
    padding: 8px 8px 10px;
    overflow-y: auto;
    overflow-x: hidden;
    border-top: 1px solid var(--it-border);
    list-style: none;
    counter-reset: it-toc-step;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--it-muted) 45%, transparent) transparent;
}
.it-single-toc__item { position: relative; margin: 0 0 4px; }
.it-single-toc__item--h2 { padding-inline-start: 30px; }
.it-single-toc__item--h2::before {
    content: counter(it-toc-step);
    counter-increment: it-toc-step;
    position: absolute;
    inset-inline-start: 2px;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--it-border);
    border-radius: 50%;
    background: var(--it-surface);
    color: var(--it-text);
    font-size: 11px;
    transform: translateY(-50%);
}
.it-single-toc__item--h3 { padding-inline-start: 40px; }
.it-single-toc__item--h3::before {
    content: "";
    position: absolute;
    inset-inline-start: 20px;
    top: 50%;
    width: 12px;
    height: 2px;
    border-radius: 999px;
    background: var(--it-border);
    transform: translateY(-50%);
}
.it-single-toc a { display: block; padding: 6px 0; color: var(--it-text); font-size: 13px; line-height: 1.7; text-decoration: none; }
.it-single-toc__item--h2 a { font-weight: 600; }
.it-single-toc__item--h3 a { color: var(--it-muted); font-size: 12px; font-weight: 500; }
.it-single-toc a:hover { color: var(--it-primary); }
[data-theme="dark"] .it-single-toc__details { background: var(--it-surface-2); }
[data-theme="dark"] .it-single-toc__item--h2::before { background: var(--it-bg); }

.it-single__main > :first-child { margin-block-start: 0; }
.it-single__main h2,
.it-single__main h3,
.it-single__main h4 { scroll-margin-top: 112px; color: var(--it-text); line-height: 1.55; }
.it-single__main h2 { position: relative; margin: 28px 0 12px; padding-inline-start: 18px; font-size: clamp(1.55rem, 2.6vw, 2rem); }
.it-single__main h2::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 4px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--it-primary) 70%, white), var(--it-primary));
    transform: translateY(-50%);
}
.it-single__main h3 { margin: 26px 0 11px; font-size: clamp(1.25rem, 2vw, 1.55rem); }
.it-single__main h4 { margin: 24px 0 10px; font-size: 1.15rem; }
.it-single__main p,
.it-single__main li { color: color-mix(in srgb, var(--it-text) 91%, var(--it-muted)); line-height: var(--it-body-line-height); }
.it-single__main p { margin: 0 0 16px; text-align: justify; text-align-last: right; }
.it-single__main ul,
.it-single__main ol { margin: 0 0 16px; padding-inline-start: 24px; }
.it-single__main li { margin-block-end: 6px; }
.it-single__main a { color: var(--it-primary); font-weight: 600; text-decoration: none; }
.it-single__main a:hover { text-decoration: underline; text-underline-offset: 3px; }
.it-single__main img { display: block; max-width: 100%; height: auto; margin: 20px auto; border-radius: 14px; }
.it-single__main > .it-single__featured-image { margin: 0 0 30px; }
.it-image-caption { margin: -12px 0 24px !important; color: var(--it-muted) !important; font-size: .85rem; text-align: center !important; text-align-last: center !important; }
.it-single__main blockquote { margin: 20px 0; padding: 12px 16px; border-inline-start: 3px solid var(--it-primary); border-radius: 10px; background: var(--it-surface-2); }

/* Content tables, with horizontal scrolling and no visible scrollbar. */
.it-table-wrap {
    margin: 20px 0;
    padding-block-end: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--it-border);
    border-radius: var(--it-radius);
    background: var(--it-surface);
    box-shadow: 0 4px 14px color-mix(in srgb, #0f172a 5%, transparent);
    direction: rtl;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.it-table-wrap::-webkit-scrollbar { display: none; }
.it-table-wrap table {
    width: max-content !important;
    min-width: 100%;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    color: var(--it-text);
    direction: rtl;
    font-size: .9rem;
}
.it-table-wrap th,
.it-table-wrap td {
    min-width: 88px;
    max-width: 260px;
    padding: 10px 12px;
    border: 0;
    border-block-end: 1px solid color-mix(in srgb, var(--it-border) 70%, transparent);
    background: transparent;
    color: var(--it-text);
    text-align: right;
    vertical-align: top;
    white-space: normal;
}
.it-table-wrap thead th { position: sticky; top: 0; z-index: 1; background: var(--it-surface-2); font-weight: 700; }
.it-table-wrap tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--it-surface-2) 52%, transparent); }
.it-table-wrap tbody tr:hover { background: color-mix(in srgb, var(--it-primary) 7%, var(--it-surface)); }
.it-table-wrap tbody tr:last-child td { border-block-end: 0; }
[data-theme="dark"] .it-table-wrap { background: var(--it-surface-2); }
[data-theme="dark"] .it-table-wrap thead th { background: color-mix(in srgb, var(--it-surface-2) 76%, var(--it-bg)); }

.it-single-faq { margin-block-start: 44px; padding-block-start: 28px; border-block-start: 1px solid var(--it-border); }
.it-single-faq > h2 { margin-block-start: 0; }
.it-single-faq details { margin-block: 10px; padding: 14px 17px; border: 1px solid var(--it-border); border-radius: 12px; background: var(--it-surface-2); }
.it-single-faq summary { cursor: pointer; color: var(--it-text); font-weight: 600; }

.it-single-author,
.it-single-related,
.it-comments { margin-block-start: 0; padding: 22px; }
.it-single-author { display: flex; align-items: flex-start; gap: 16px; }
.it-single-author__avatar { flex: 0 0 auto; border-radius: 50%; }
.it-single-author h2 { margin: 0 0 6px; font-size: 1.1rem; }
.it-single-author p { margin: 0; color: var(--it-muted); }
.it-single-related > h2 { margin-block-start: 0; }
.it-single-related .it-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.it-widget { margin: 0 0 16px; padding: 18px; border: 1px solid var(--it-border); border-radius: 14px; background: var(--it-surface); }
.it-widget__title { margin: 0 0 12px; font-size: 1.05rem; }

/* Comments — ported from Raz Salamat behavior and styling. */
.it-comments { --itc-danger:#dc2626; --itc-success:#15803d; --itc-warning:#b45309; position:relative; color:var(--it-text); }
[data-theme="dark"] .it-comments { --itc-danger:#fca5a5; --itc-success:#6ee7b7; --itc-warning:#fdba74; }
.it-comments__heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:22px; border-bottom:1px solid var(--it-border); }
.it-comments__heading-main { min-width:0; }
.it-comments__section-title { display:flex; align-items:center; gap:9px; color:var(--it-text); font-size:1.15rem; font-weight:700; }
.it-comments__section-icon { display:inline-flex; width:24px; height:24px; color:var(--it-primary); }
.it-comments__section-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.it-comments__heading-text { margin:8px 0 0; color:var(--it-muted); font-size:14px; line-height:1.9; }
.it-comments__count { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:0 13px; border:1px solid var(--it-border); border-radius:999px; background:var(--it-surface-2); color:var(--it-primary); font-size:13px; font-weight:700; white-space:nowrap; }
.it-comments__form-home { height:0; }
.it-comments__form-panel { width:100%; margin:24px 0 0; padding:22px; border:1px solid var(--it-border); border-radius:18px; background:var(--it-surface); box-sizing:border-box; }
.it-comment.is-replying > .it-comments__form-panel { margin:14px 0 0; border-color:color-mix(in srgb,var(--it-primary) 55%,var(--it-border)); box-shadow:0 0 0 4px color-mix(in srgb,var(--it-primary) 10%,transparent); }
.it-comments__form-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:17px; }
.it-comments__form-title { margin:0; color:var(--it-text); font-size:18px; font-weight:700; }
.it-comments__form-head p { margin:4px 0 0; color:var(--it-muted); font-size:13px; }
.it-comments__cancel { border:0; border-radius:10px; padding:7px 11px; background:var(--it-surface-2); color:var(--itc-danger); font-size:12px; font-weight:700; }
.it-comments__replying { width:100%; margin:-3px 0 14px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--it-primary) 30%,var(--it-border)); border-radius:11px; background:color-mix(in srgb,var(--it-primary) 7%,var(--it-surface)); color:var(--it-primary); font-size:13px; font-weight:600; box-sizing:border-box; }
.it-comments__form { position:relative; display:grid; width:100%; gap:15px; }
.it-comments__identity-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.it-comments__field { position:relative; display:grid; gap:7px; min-width:0; }
.it-comments__field label { color:var(--it-text); font-size:13px; font-weight:700; }
.it-comments__field label span { color:var(--itc-danger); }
.it-comments__field input,
.it-comments__field textarea { display:block; width:100%; max-width:100%; border:1px solid color-mix(in srgb,var(--it-border) 80%,var(--it-text)); border-radius:13px; background:var(--it-bg); color:var(--it-text); padding:12px 14px; outline:0; box-sizing:border-box; transition:border-color .18s ease,box-shadow .18s ease; }
.it-comments__field input { height:48px; }
.it-comments__field textarea { min-height:132px; padding-bottom:34px; line-height:1.95; resize:vertical; }
.it-comments__field input:focus,
.it-comments__field textarea:focus { border-color:var(--it-primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--it-primary) 12%,transparent); }
.it-comments__counter { position:absolute; inset-inline-end:12px; inset-block-end:9px; color:var(--it-muted); font-size:10px; }
.it-comments__remember,
.it-comments__logged-in { display:flex; align-items:center; gap:8px; color:var(--it-muted); font-size:12px; }
.it-comments__remember input { width:17px; height:17px; accent-color:var(--it-primary); }
.it-comments__logged-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--it-primary); color:#fff; font-weight:700; }
.it-comments__captcha { max-width:360px; }
.it-comments__captcha-row { display:flex; align-items:center; gap:8px; }
.it-comments__captcha-question { display:flex; align-items:center; justify-content:center; flex:0 0 112px; min-height:44px; padding:0 12px; border:1px solid color-mix(in srgb,var(--it-primary) 38%,var(--it-border)); border-radius:13px; background:color-mix(in srgb,var(--it-primary) 8%,var(--it-surface-2)); color:var(--it-primary); font-size:16px; font-weight:700; direction:ltr; }
.it-comments__captcha-equals { color:var(--it-text); font:700 19px/1 sans-serif; }
.it-comments__captcha-input { flex:0 1 110px; width:110px!important; min-width:76px!important; max-width:110px!important; height:44px!important; padding:0 10px!important; text-align:center; direction:ltr; }
.it-comments__trap { position:absolute!important; inset-inline-start:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; opacity:0!important; pointer-events:none!important; }
.it-comments__submit-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.it-comments__submit { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:0 20px; border:1px solid var(--it-primary); border-radius:13px; background:var(--it-primary); color:#fff; font-size:14px; font-weight:700; cursor:pointer; }
.it-comments__submit:hover { background:color-mix(in srgb,var(--it-primary) 86%,#000); }
.it-comments__submit:disabled { opacity:.62; cursor:wait; }
.it-comments__submit svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.it-comments__status { min-height:24px; color:var(--it-muted); font-size:13px; font-weight:600; }
.it-comments__status.is-success { color:var(--itc-success); }
.it-comments__status.is-error { color:var(--itc-danger); }
.it-comments__status.is-loading { color:var(--it-primary); }
.it-comments__list-wrap { margin-top:28px; }
.it-comments__list-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; }
.it-comments__list-title { margin:0; color:var(--it-text); font-size:17px; font-weight:700; }
.it-comments__list-head span { color:var(--it-muted); font-size:12px; }
.it-comments__list,
.it-comment__children { list-style:none; margin:0; padding:0; }
.it-comments__list { display:grid; gap:14px; }
.it-comment { position:relative; width:100%; min-width:0; margin:0; }
.it-comment__card { display:grid; grid-template-columns:44px minmax(0,1fr); gap:13px; padding:17px; border:1px solid var(--it-border); border-radius:var(--it-radius); background:var(--it-bg); transition:border-color .2s ease,background-color .2s ease; }
.it-comment__card:hover { border-color:color-mix(in srgb,var(--it-primary) 35%,var(--it-border)); background:color-mix(in srgb,var(--it-primary) 3%,var(--it-bg)); }
.it-comment--pending > .it-comment__card { border-style:dashed; background:color-mix(in srgb,var(--itc-warning) 4%,var(--it-bg)); }
.it-comment__avatar { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--it-primary); color:#fff; font-size:15px; font-weight:700; }
.it-comment__main { min-width:0; }
.it-comment__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
.it-comment__identity { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.it-comment__author { color:var(--it-text); font-size:14px; font-weight:700; }
.it-comment__pending { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border-radius:999px; background:color-mix(in srgb,var(--itc-warning) 14%,transparent); color:var(--itc-warning); font-size:10px; font-weight:700; }
.it-comment__time { color:var(--it-muted); font-size:11px; white-space:nowrap; }
.it-comment__content { color:var(--it-text); font-size:14px; line-height:2; overflow-wrap:anywhere; }
.it-comment__content p:last-child { margin-bottom:0; }
.it-comment__actions { display:flex; align-items:center; margin-top:10px; }
.it-comment__reply { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border:0; border-radius:9px; background:transparent; color:var(--it-primary); font-size:11px; font-weight:700; cursor:pointer; }
.it-comment__reply:hover { background:color-mix(in srgb,var(--it-primary) 8%,transparent); }
.it-comment__reply svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.it-comment__children { display:grid; gap:11px; margin-block-start:11px; margin-inline-start:34px; padding-inline-start:18px; border-inline-start:2px solid color-mix(in srgb,var(--it-primary) 14%,var(--it-border)); }
.it-comments__empty { display:grid; justify-items:center; gap:6px; padding:30px 18px; border:1px dashed color-mix(in srgb,var(--it-primary) 35%,var(--it-border)); border-radius:var(--it-radius); background:var(--it-bg); text-align:center; }
.it-comments__empty[hidden] { display:none; }
.it-comments__empty svg { width:34px; height:34px; fill:none; stroke:var(--it-primary); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.it-comments__empty strong { color:var(--it-text); font-size:14px; }
.it-comments__empty span { color:var(--it-muted); font-size:12px; }
.it-comments__more { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; margin-top:15px; border:1px solid var(--it-border); border-radius:12px; background:var(--it-bg); color:var(--it-primary); font-size:13px; font-weight:700; cursor:pointer; }
.it-comments__more:hover { border-color:color-mix(in srgb,var(--it-primary) 42%,var(--it-border)); background:color-mix(in srgb,var(--it-primary) 6%,var(--it-bg)); }
.it-comments__more:disabled { opacity:.65; cursor:wait; }
.it-comments__more svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.it-comments__more.is-loading svg { animation:it-comments-bounce .8s ease-in-out infinite alternate; }
@keyframes it-comments-bounce { to { transform:translateY(4px); } }

@media (min-width: 992px) {
    .it-single__aside { position: sticky; inset-block-start: 108px; }
    .it-single__meta { flex-wrap: wrap; overflow-x: visible; white-space: normal; padding-block-end: 0; }
}

@media (max-width: 991px) {
    .it-single__layout,
    .it-single__layout--without-sidebar { grid-template-columns: minmax(0, 1fr); }
    .it-single__aside { grid-column: 1; grid-row: auto; }
}

@media (max-width: 640px) {
    .single-post .it-main { width: min(calc(100% - 24px), 1400px); padding-block-start: 8px; }
    .it-single-breadcrumb { margin-inline: -12px; padding-inline: 12px; border-radius: 0; border-inline: 0; box-shadow: none; }
    .it-single__main,
    .it-single-author,
    .it-single-related,
    .it-comments { border-radius: 14px; }
    .it-single__main { padding: 18px 15px; }
    .it-single__title { font-size: clamp(1.75rem, 8vw, 2.35rem); }
    .it-single__featured-image { margin-block-end: 28px; border-radius: 12px; }
    .it-single__lead { margin-block-end: 24px; font-size: 1rem; }
    .it-single-related .it-grid--cards { grid-template-columns: 1fr; }
    .it-single-author { padding: 18px 16px; }
    .it-comments { padding: 18px 15px; }
    .it-comments__heading { display:grid; }
    .it-comments__count { justify-self:start; }
    .it-comments__form-panel { padding:16px; }
    .it-comments__identity-fields { grid-template-columns:1fr; }
    .it-comments__submit { width:100%; }
    .it-comments__status { width:100%; text-align:center; }
    .it-comment__card { grid-template-columns:38px minmax(0,1fr); gap:10px; padding:14px; }
    .it-comment__avatar { width:38px; height:38px; font-size:13px; }
    .it-comment__head { align-items:flex-start; }
    .it-comment__children { margin-inline-start:12px; padding-inline-start:10px; }
}

/* Article sidebar — same shallow card pattern used by Raz Salamat; related posts stay in main content. */
.it-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.it-sidebar-block {
    padding: 14px 16px;
    border: 1px solid var(--it-border);
    border-radius: var(--it-radius);
    background: var(--it-surface);
}
.it-sidebar-head {
    margin: 0 0 10px;
    color: var(--it-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
}
.it-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.it-sidebar-item {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    grid-template-rows: min-content min-content;
    column-gap: 10px;
    row-gap: 3px;
    align-items: start;
    min-width: 0;
    list-style: none;
}
.it-sidebar-thumb {
    grid-column: 1;
    grid-row: 1 / 3;
    display: block;
    inline-size: 78px;
    aspect-ratio: 300 / 188;
    overflow: hidden;
    border-radius: 10px;
    background: var(--it-surface-2);
    text-decoration: none;
}
.it-sidebar-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.it-sidebar-title {
    grid-column: 2;
    grid-row: 1;
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--it-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.it-sidebar-title:hover { color: var(--it-primary); }
.it-sidebar-meta {
    grid-column: 2;
    grid-row: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 1px;
    color: var(--it-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
}
.it-sidebar-meta__icon {
    display: inline-flex;
    inline-size: 13px;
    block-size: 13px;
    flex: 0 0 13px;
    color: var(--it-primary);
}
.it-sidebar-meta__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
[data-theme="dark"] .it-sidebar-block {
    background: var(--it-surface-2);
    border-color: var(--it-border);
}
[data-theme="dark"] .it-sidebar-thumb { background: var(--it-bg); }

@media (max-width: 991px) {
    .it-sidebar { position: static; }
}

/* Related posts — 3-column desktop grid; horizontal one-card carousel with a 40px next-card peek on tablet/mobile. */
.it-single-related > h2 {
    margin: 0 0 18px;
}
.it-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.it-related-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--it-border);
    border-radius: 16px;
    background: var(--it-surface);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.it-related-card:hover {
    border-color: color-mix(in srgb, var(--it-primary) 32%, var(--it-border));
    box-shadow: 0 8px 24px color-mix(in srgb, #0f172a 8%, transparent);
    transform: translateY(-2px);
}
.it-related-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--it-surface-2);
}
.it-related-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .28s ease;
}
.it-related-card:hover .it-related-card__image {
    transform: scale(1.025);
}
.it-related-card__body {
    padding: 14px 15px 15px;
}
.it-related-card__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.85;
}
.it-related-card__title a {
    display: -webkit-box;
    overflow: hidden;
    color: var(--it-text);
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.it-related-card__title a:hover {
    color: var(--it-primary);
}
.it-related-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--it-muted);
    font-size: 12px;
    line-height: 1.5;
}
.it-related-card__date-icon {
    display: inline-flex;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: var(--it-primary);
}
.it-related-card__date-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.it-related-card__date {
    white-space: nowrap;
}
[data-theme="dark"] .it-related-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
@media (max-width: 991px) {
    .it-related-grid {
        --it-related-gap: 12px;
        display: flex;
        gap: var(--it-related-gap);
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 6px;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .it-related-grid::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    .it-related-card {
        flex: 0 0 calc(100% - var(--it-related-gap) - 40px);
        width: calc(100% - var(--it-related-gap) - 40px);
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }
    .it-related-card__body {
        padding: 13px 14px 14px;
    }
}