/* Detail pages: blog post, project, service, tool — sidebars, cards, prose readability */
.card.card--pad{padding:var(--space-6,24px)}
.btn--block{display:flex;width:100%;justify-content:center}

/* Sidebar cards */
.side-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg,16px);padding:20px;box-shadow:var(--shadow-sm,0 1px 2px rgba(15,23,42,.05));min-width:0}
.side-card .side-title{display:flex;align-items:center;gap:10px;font:700 .95rem/1.3 var(--font-sans);letter-spacing:.01em;margin:0 0 14px;color:var(--c-ink)}
.side-card .side-title i,.side-card .side-title .cx-ico{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--c-primary-600) 12%,transparent);color:var(--c-primary-600);font-size:.8rem;flex:none}
.side-sub{margin:0 0 14px;color:var(--c-text-muted);font-size:.9rem;line-height:1.55}
.side-eyebrow{margin:0;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-accent-text)}
.side-name{margin:2px 0 0;font-weight:700;color:var(--c-ink)}
.side-card--author{display:flex;gap:14px;align-items:center}
.side-card--author img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--c-surface);box-shadow:0 0 0 2px var(--c-border)}
.side-card--author .side-sub{margin:0}
.side-card--accent{background:linear-gradient(145deg,color-mix(in srgb,var(--c-primary-600) 10%,var(--c-surface)),var(--c-surface) 70%);border-color:color-mix(in srgb,var(--c-primary-600) 25%,var(--c-border))}
.side-card .newsletter__row{display:grid;gap:8px}.side-card .newsletter .input{width:100%}.side-card .newsletter .btn{width:100%;justify-content:center}
.side-card .meta-list{gap:14px}
.side-card .meta-list>div{padding-bottom:12px;border-bottom:1px dashed var(--c-border)}.side-card .meta-list>div:last-child{border:0;padding:0}
.side-card .meta-list dd{color:var(--c-ink)}

/* TOC */
.toc{margin:0;padding:0;list-style:none;display:grid;gap:2px;max-height:min(46vh,360px);overflow:auto;overscroll-behavior:contain}
.toc-link{display:block;padding:7px 12px;border-left:2px solid var(--c-border);border-radius:0 8px 8px 0;font-size:.88rem;line-height:1.4;color:var(--c-text-muted);text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.toc-link:hover{background:var(--c-surface-2);color:var(--c-primary-600)}
.toc-link.is-active,.toc-link.active{border-left-color:var(--c-accent);background:color-mix(in srgb,var(--c-primary-600) 8%,transparent);color:var(--c-primary-600);font-weight:650}
.toc .toc-3 .toc-link{padding-left:24px;font-size:.84rem}

/* Recent posts / link lists */
.side-posts,.side-links{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.side-posts a{display:flex;gap:12px;align-items:center;padding:8px;margin:0 -8px;border-radius:12px;text-decoration:none;color:inherit;transition:background .2s}
.side-posts a:hover{background:var(--c-surface-2)}
.side-posts img,.side-posts__ph{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none;background:var(--c-surface-3)}
.side-posts__ph{display:grid;place-items:center;color:var(--c-text-faint)}
.side-posts strong{display:block;font-size:.9rem;line-height:1.35;color:var(--c-ink);font-weight:650}
.side-posts small{color:var(--c-text-faint);font-size:.78rem}
.side-links a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--c-text);font-size:.92rem;transition:background .2s,color .2s}
.side-links a:hover{background:var(--c-surface-2);color:var(--c-primary-600)}
.side-links b{min-width:26px;text-align:center;padding:1px 8px;border-radius:99px;background:var(--c-surface-3);font-size:.75rem;font-weight:700;color:var(--c-text-muted)}
.side-links i{font-size:.75rem;color:var(--c-text-faint);transition:transform .2s}.side-links a:hover i{transform:translateX(3px);color:var(--c-primary-600)}

/* Layout widths */
@media(min-width:1000px){.post-layout{grid-template-columns:minmax(0,1fr) 320px;max-width:1120px;margin-inline:auto;gap:48px}.post-side{top:calc(var(--header-h,72px) + 20px)}}
@media(min-width:960px){.project-side{top:calc(var(--header-h,72px) + 20px)}.project-layout{gap:48px}}
.post-side,.project-side{display:grid;gap:16px;align-content:start}

/* Article body */
.post-main{display:grid;gap:24px;min-width:0}
.post-cover{margin:0;border-radius:var(--radius-xl,22px);box-shadow:var(--shadow-md);border:1px solid var(--c-border)}
.post-content{max-width:none;font-size:1.0625rem;line-height:1.8}
.prose div[style*="text-align"],.prose p[style*="text-align: center"]:not(:has(img)){text-align:left!important}
.post-content>p:first-of-type::first-line{font-weight:500}
.post-main>.card{border-radius:var(--radius-lg,16px)}
.author-box{background:linear-gradient(145deg,var(--c-surface-2),var(--c-surface))}
.author-box img{width:72px;height:72px;box-shadow:0 0 0 3px var(--c-surface),0 0 0 4px var(--c-border)}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.post-nav .btn{height:auto;min-height:48px;padding:12px 16px;white-space:normal;text-align:left;justify-content:flex-start;line-height:1.35}
.post-nav .btn[rel=next]{text-align:right;justify-content:flex-end;grid-column:2}
@media(max-width:600px){.post-nav{grid-template-columns:1fr}.post-nav .btn[rel=next]{grid-column:auto}}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}

/* Share */
.share__btn{transition:transform .2s,background .2s,color .2s,border-color .2s}.share__btn:hover{transform:translateY(-2px);background:var(--c-primary-600);border-color:var(--c-primary-600);color:#fff}

/* Section blocks on project/service pages */
.project-layout>.stack>section,.project-layout>.stack .stack>section{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg,16px);padding:24px 26px}
.project-layout .section-title{font-size:1.25rem;margin:0 0 14px;display:flex;align-items:center;gap:10px}
.project-layout .section-title::before{content:"";width:4px;height:1.1em;border-radius:4px;background:var(--c-accent)}
.feature-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.feature-list li{padding:10px 12px;border-radius:10px;background:var(--c-surface-2)}
.feature-list i{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--c-success) 16%,transparent);font-size:.65rem;margin-top:.1em}
.process-list li{padding:14px 16px;border-radius:12px;background:var(--c-surface-2)}
.gallery img{transition:transform .35s}.gallery a{display:block;overflow:hidden;border-radius:var(--radius-md)}.gallery a:hover img{transform:scale(1.04)}

/* Related cards */
.section--alt .section-head{margin-bottom:24px}
@media(prefers-reduced-motion:reduce){.share__btn,.gallery img,.side-links i{transition:none!important}}
/* single-line headings on listing + detail heroes (ellipsis only when truly too long; full text stays in the DOM and title attr) */
.page-hero__title{font-size:clamp(1.45rem,1.2rem + 1.1vw,2.1rem);line-height:1.25;letter-spacing:-.015em;max-width:100%}
@media(min-width:720px){.page-hero__title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:719px){.page-hero__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:1.4rem}}
.page-hero__lead{font-size:1rem;max-width:46rem}
.section-title,.section-head h2{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);line-height:1.25}
.card__title{font-size:1.1rem;line-height:1.3}
.card__title a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prose h2{font-size:1.45rem}.prose h3{font-size:1.2rem}.prose h4{font-size:1.05rem}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:16px 0 0;padding:0;color:var(--c-text-muted);font-size:.9rem}
.post-meta li+li::before{content:"·";margin-right:18px;color:var(--c-text-faint)}
.side-card .side-title,.side-name,.side-posts strong,.side-card .meta-list dd{color:var(--c-heading,var(--c-text))}
[data-theme="dark"] .side-card .side-title,[data-theme="dark"] .side-name,[data-theme="dark"] .side-posts strong,[data-theme="dark"] .side-card .meta-list dd{color:#eef2fa}
[data-theme="dark"] .side-card--accent{background:linear-gradient(145deg,color-mix(in srgb,var(--c-primary-600) 18%,var(--c-surface)),var(--c-surface) 70%)}
@media(max-width:719px){.post-meta{gap:4px 14px;font-size:.85rem}.post-meta li+li::before{display:none}}

/* Share band (bottom of content pages) */
.sharebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;padding:22px 26px;border-radius:var(--radius-xl,22px);border:1px solid color-mix(in srgb,var(--c-primary-600) 22%,var(--c-border));background:linear-gradient(135deg,color-mix(in srgb,var(--c-primary-600) 9%,var(--c-surface)),var(--c-surface) 65%);box-shadow:var(--shadow-sm);margin-top:8px;min-width:0}
.sharebar__text{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 260px}
.sharebar__icon{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--c-primary-600);color:#fff;font-size:1.1rem}
.sharebar__title{font:700 1.05rem/1.3 var(--font-sans);margin:0;color:var(--c-ink)}
[data-theme="dark"] .sharebar__title{color:#eef2fa}
.sharebar__text p{margin:2px 0 0;color:var(--c-text-muted);font-size:.9rem}
.sharebar__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sharebar__list li[hidden]{display:none}
.sharebar__btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:99px;border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);font:600 .85rem/1 var(--font-sans);text-decoration:none;cursor:pointer;transition:transform .2s,background .2s,color .2s,border-color .2s,box-shadow .2s}
.sharebar__btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:#fff;border-color:transparent}
.sharebar__btn--x:hover{background:#111}.sharebar__btn--in:hover{background:#0a66c2}.sharebar__btn--fb:hover{background:#1877f2}.sharebar__btn--wa:hover{background:#128c4a}.sharebar__btn--em:hover{background:#b45309}.sharebar__btn--copy:hover,.sharebar__btn--native:hover{background:var(--c-primary-600)}
.sharebar__btn.is-done{background:#146c43;color:#fff;border-color:transparent}
.sharebar__btn:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px}
@media(max-width:640px){.sharebar{padding:18px;border-radius:18px}.sharebar__list{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.sharebar__btn{width:100%;justify-content:center;padding:0 8px}.sharebar__btn span{font-size:.8rem}}
@media(max-width:380px){.sharebar__list{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.sharebar__btn{transition:none}.sharebar__btn:hover{transform:none}}
@media(max-width:999px){.side-card--author{display:none}}

/* ===== Strong headings (frontend-wide) ===== */
h1,h2,h3,.page-hero__title,.section-title,.hero__title,.card__title,.course-detail-title,.cta-title,.section-head h2,.band h2,.prose h2,.prose h3,.prose h4,.side-title,.person__name{font-weight:700}
h4,h5,h6{font-weight:700}
.hero__title{font-weight:700;letter-spacing:-.025em}
.prose blockquote{font-weight:500}

/* ===== Inline SVG icons ===== */
.cx-ico{flex:none;display:inline-block;vertical-align:-.2em}

/* ===== Meta row under titles ===== */
.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;list-style:none;margin:16px 0 0;padding:0;color:var(--c-text-muted);font-size:.92rem}
.meta-row__item{display:inline-flex;align-items:center;gap:8px;min-width:0}
.meta-row__item .cx-ico{color:var(--c-primary-600);opacity:.9}
.meta-row__item--by{font-weight:650;color:var(--c-ink);padding:4px 14px 4px 4px;border-radius:99px;background:color-mix(in srgb,var(--c-primary-600) 8%,transparent);border:1px solid var(--c-border)}
[data-theme="dark"] .meta-row__item--by{color:#eef2fa}
.meta-row__avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--c-surface)}
.meta-row__avatar--ph{display:grid;place-items:center;background:var(--c-primary-600);color:#fff;font-weight:700;font-size:.85rem}
.page-hero .meta-row{margin:18px 0 0}
@media(max-width:600px){.meta-row{gap:8px 14px;font-size:.85rem}}
.legacy-page .page-hero__title{margin:0}

/* ===== Person (author / instructor) card ===== */
.person{position:relative;display:grid;gap:14px;min-width:0}
.person__top{display:flex;gap:16px;align-items:center;min-width:0}
.person__photo{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--c-surface);box-shadow:0 0 0 2px color-mix(in srgb,var(--c-accent) 70%,transparent),var(--shadow-md)}
.person__photo--ph{display:grid;place-items:center;background:linear-gradient(135deg,var(--c-primary-600),var(--c-primary));color:#fff;font:700 1.9rem var(--font-sans)}
.person__label{margin:0 0 2px;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--c-accent-text)}
.person__name{margin:0;font:700 1.15rem/1.25 var(--font-sans);color:var(--c-ink);overflow-wrap:anywhere}
[data-theme="dark"] .person__name{color:#eef2fa}
.person__role{margin:3px 0 0;color:var(--c-text-muted);font-size:.9rem}
.person__bio{margin:0;color:var(--c-text);font-size:.93rem;line-height:1.65}
.person__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.person__link{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);text-decoration:none;transition:transform .2s,background .2s,color .2s,border-color .2s}
.person__link:hover{transform:translateY(-2px);color:#fff;border-color:transparent}
.person__link--x:hover{background:#111}.person__link--linkedin:hover{background:#0a66c2}.person__link--github:hover{background:#24292f}.person__link--facebook:hover{background:#1877f2}.person__link--globe:hover{background:var(--c-primary-600)}.person__link--mail:hover{background:#b45309}
.person__link:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px}
/* sidebar variant: centred stack */
.person--side{text-align:center;justify-items:center}
.person--side .person__top{flex-direction:column;gap:10px}
.person--side .person__photo{width:96px;height:96px}
.person--side .person__links{justify-content:center}
.person--side .person__bio{text-align:left}
/* box variant: wide card under articles / course instructor pane */
.person--box{padding:24px;border:1px solid var(--c-border);border-radius:var(--radius-xl,22px);background:linear-gradient(135deg,color-mix(in srgb,var(--c-primary-600) 7%,var(--c-surface)),var(--c-surface) 60%);box-shadow:var(--shadow-sm)}
.person--box .person__photo{width:96px;height:96px}
@media(max-width:560px){.person--box .person__top{flex-direction:column;align-items:flex-start}}
.side-card--author{padding:24px 20px;background:linear-gradient(180deg,color-mix(in srgb,var(--c-primary-600) 8%,var(--c-surface)),var(--c-surface) 55%)}
@media(max-width:999px){.side-card--author{display:block}.post-side .side-card--author{display:none}}

/* ===== Info list in sidebars ===== */
.info-list{margin:0;display:grid}
.info-list>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--c-border)}
.info-list>div:last-child{border:0;padding-bottom:0}
.info-list dt{display:flex;align-items:center;gap:8px;color:var(--c-text-muted);font-size:.88rem}
.info-list dt .cx-ico{color:var(--c-primary-600)}
.info-list dd{margin:0;font-weight:650;color:var(--c-ink);text-align:right;font-size:.92rem}
[data-theme="dark"] .info-list dd{color:#eef2fa}
.side-card .side-title .cx-ico{color:var(--c-primary-600)}
.side-card .side-title{gap:8px}
.sharebar__btn .cx-ico{flex:none}.sharebar__icon .cx-ico{width:22px;height:22px}
.feature-list i,.feature-list .cx-ico{flex:none}
.feature-list .cx-ico{color:var(--c-success);margin-top:.25em}
@media(prefers-reduced-motion:reduce){.person__link{transition:none}.person__link:hover{transform:none}}

/* light CTA blocks */
.cta-band{background:linear-gradient(135deg,color-mix(in srgb,var(--c-primary-600) 7%,var(--c-surface)),var(--c-surface) 70%);border:1px solid var(--c-border);border-radius:var(--radius-xl,22px);color:var(--c-text)}
.cta-band .section-title{color:var(--c-ink);margin-bottom:.5rem}
[data-theme="dark"] .cta-band .section-title{color:#f1f4fa}
.cta-band p{color:var(--c-text-muted)}

/* ===== Tool detail page ===== */
.tool-main{display:grid;gap:22px;min-width:0}
.tool-workspace{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg,16px);box-shadow:var(--shadow-md);overflow:hidden;scroll-margin-top:calc(var(--header-h,72px) + 16px)}
.tool-workspace__bar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:10px 14px;background:linear-gradient(180deg,var(--c-surface-2),var(--c-surface));border-bottom:1px solid var(--c-border)}
.tool-workspace__title{display:inline-flex;align-items:center;gap:9px;font-weight:650;font-size:.92rem;color:var(--c-ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
[data-theme="dark"] .tool-workspace__title{color:#f1f4fa}
.tool-live{width:9px;height:9px;border-radius:50%;background:#22a06b;box-shadow:0 0 0 0 rgba(34,160,107,.5);animation:toolPulse 2.2s infinite;flex:none}
@keyframes toolPulse{70%{box-shadow:0 0 0 8px rgba(34,160,107,0)}100%{box-shadow:0 0 0 0 rgba(34,160,107,0)}}
.tool-workspace__badges .chip--soft{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--c-success) 12%,transparent);color:var(--c-success);border:0}
.tool-workspace__actions{display:inline-flex;gap:4px}
.tool-workspace__actions .icon-btn{width:2.25rem;height:2.25rem;border-color:var(--c-border);background:var(--c-surface)}
.tool-stage{position:relative;padding:0;margin:0;border:0;background:var(--c-surface)}
.tool-frame{display:block;width:100%;border:0;background:var(--c-surface);min-height:260px}
.tool-workspace.is-full{position:fixed;inset:0;z-index:calc(var(--z-header,50) + 5);border-radius:0;display:flex;flex-direction:column;box-shadow:none}
.tool-workspace.is-full .tool-stage{flex:1;overflow:auto}
.tool-workspace.is-full .tool-frame{height:100%!important;min-height:0}
body.tool-full{overflow:hidden}
.tool-section{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg,16px);padding:clamp(18px,3vw,28px);scroll-margin-top:calc(var(--header-h,72px) + 16px);min-width:0}
.tool-section__title{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--c-border);font:700 1.12rem/1.3 var(--font-sans);color:var(--c-ink)}
[data-theme="dark"] .tool-section__title{color:#f1f4fa}
.tool-section__title .cx-ico{color:var(--c-accent-text);flex:none}
.tool-section .prose{font-size:1rem}
.tool-section .prose>:first-child{margin-top:0}.tool-section .prose>:last-child{margin-bottom:0}
.tool-main>.tag-list{margin:0}
@media (max-width:600px){
  .tool-workspace__badges{display:none}
  .tool-workspace__bar{padding:8px 10px}
  .tool-section{padding:16px}
}
.tool-workspace:fullscreen{display:flex;flex-direction:column;border-radius:0;border:0;width:100%;height:100%}
.tool-workspace:fullscreen .tool-stage{flex:1;overflow:auto}
.tool-workspace:fullscreen .tool-frame{height:100%!important;min-height:0}

/* ===== Author / builder card (box variant) v2 ===== */
.person--box{position:relative;overflow:hidden;padding:clamp(20px,3vw,30px);border:1px solid var(--c-border);border-radius:var(--radius-xl,22px);background:linear-gradient(160deg,color-mix(in srgb,var(--c-primary-600) 6%,var(--c-surface)),var(--c-surface) 55%);box-shadow:var(--shadow-sm)}
.person--box::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--c-primary-600),var(--c-accent))}
.person--box .person__top{display:contents}
.person--box{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"photo id" "photo bio" "photo links";column-gap:clamp(16px,3vw,26px);row-gap:10px;align-items:start}
.person--box .person__photo{grid-area:photo;width:112px;height:112px;align-self:start}
.person--box .person__id{grid-area:id;min-width:0}
.person--box .person__bio{grid-area:bio;max-width:62ch}
.person--box .person__links{grid-area:links;margin-top:4px}
.person--box .person__name{font-size:1.3rem}
@media (max-width:599px){
  .person--box{grid-template-columns:minmax(0,1fr);grid-template-areas:"photo" "id" "bio" "links";justify-items:center;text-align:center;row-gap:12px;padding:26px 20px 22px}
  .person--box .person__photo{width:112px;height:112px;margin-inline:auto}
  .person--box .person__id{display:grid;justify-items:center}
  .person--box .person__label{margin-bottom:4px}
  .person--box .person__bio{text-align:center;max-width:44ch;font-size:.95rem}
  .person--box .person__links{justify-content:center;gap:10px;padding-top:14px;margin-top:2px;border-top:1px dashed var(--c-border);width:100%}
  .person--box .person__link{width:44px;height:44px}
}