/* ===========================================================================
   Blog post detail pages (shared)

   Every /blog/<slug>/ page renders from src/templates/blog-post.html with
   content from src/blogs.json, and shares this one stylesheet - same
   pattern as service-page.css/industry-page.css/solution-page.css. Sample
   content today; swapping blogs.json for a CMS response later needs no
   changes here.
   =========================================================================== */

/* theme default is .site-content{padding-top:40px} - drop it so the hero
   starts flush against the header */
body.sts-blog-post-page .site-content {
    padding-top: 0;
    padding-bottom: 0;
}

/* ------------------------------------------------------------------ hero -- */
.sts-blog-post .sts-page-header .overlay {
    background-color: transparent;
    background-image: linear-gradient(0deg, #000000, #00000029);
}

.sts-blog-post .entry-thumbnail img {
    object-position: center center;
}

.sts-blog-post__category {
    display: inline-block;
    color: var(--color-primary, #f25b09);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* smaller than the theme default (clamp(36px,4.2vw,84px) from
   page-header.css) - a blog post title reads as an article headline, not a
   full hero statement like the hub pages */
.sts-blog-post .sts-page-header .entry-title {
    font-size: clamp(28px, 3.2vw, 52px);
    max-width: 26ch;
}

.sts-blog-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #ffffffb3;
    font-size: 15px;
    margin-top: 18px;
}

/* ------------------------------------------------------------- article ---- */
.sts-blog-post .sts-element.sts-element-bl-body {
    --display: flex;
    --flex-direction: column;
    --padding-top: 110px;
    --padding-bottom: 90px;
}

/* two columns: article (wider) + sidebar. max-width keeps the pair from
   stretching edge to edge on very wide screens, same ceiling the article
   alone used to have. */
.sts-blog-post__layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 70px;
    max-width: 1180px;
    margin-inline: auto;
    align-items: start;
}

.sts-blog-post__excerpt {
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.5;
    color: var(--e-global-color-text, #d9d9d9);
    margin: 0 0 40px;
}

.sts-blog-post__article h2 {
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.2;
    margin: 48px 0 18px;
    /* clearance from the fixed header when a TOC link scrolls one of these
       into view - honoured by the native scrollIntoView fallback in
       scripts.html; ScrollSmoother's own scrollTo() sets its own offset */
    scroll-margin-top: 120px;
}

.sts-blog-post__article p {
    font-size: 17px;
    line-height: 1.75;
    color: var(--e-global-color-text, #b8b8b8);
    margin: 0 0 20px;
}

/* --------------------------------------------------------------- sidebar -- */
.sts-blog-post__sidebar {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.sts-blog-post__toc,
.sts-blog-post__related,
.sts-blog-post__categories {
    padding: 32px 30px;
    border: 1px solid #ffffff1a;
    border-radius: 18px;
    background: #ffffff08;
}

.sts-blog-post__toc h3,
.sts-blog-post__related h3,
.sts-blog-post__categories h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid #ffffff1a;
}

.sts-blog-post__toc h3 .states-side-svg-icon {
    color: var(--color-primary, #f25b09);
}

/* numbered badges on a connecting rail, like a mini timeline down the card -
   the vertical line between badges is one shared background gradient on the
   list rather than a per-item border, so it reads as one continuous rail */
.sts-blog-post__toc ol {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.sts-blog-post__toc li:not(:last-child) {
    position: relative;
}

.sts-blog-post__toc li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 38px;
    bottom: -6px;
    width: 1px;
    background: #ffffff1f;
}

.sts-blog-post__toc a {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 11px 0;
    text-decoration: none;
}

.sts-blog-post__toc-num {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #ffffff2e;
    background: #101010;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-primary, #f25b09);
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

.sts-blog-post__toc-title {
    padding-top: 6px;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--e-global-color-text, #b8b8b8);
    transition: color .25s ease, transform .25s ease;
}

.sts-blog-post__toc a:hover .sts-blog-post__toc-num {
    background: var(--color-primary, #f25b09);
    border-color: var(--color-primary, #f25b09);
    color: #0a0a0a;
    transform: scale(1.08);
}

.sts-blog-post__toc a:hover .sts-blog-post__toc-title {
    color: #fff;
    transform: translateX(3px);
}

.sts-blog-post__related {
    display: flex;
    flex-direction: column;
}

.sts-blog-post__related-card {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid #ffffff14;
    text-decoration: none;
}

.sts-blog-post__related h3 + .sts-blog-post__related-card {
    border-top: none;
    padding-top: 0;
}

.sts-blog-post__related-img {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    border-radius: 10px;
    overflow: hidden;
}

.sts-blog-post__related-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sts-blog-post__related-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sts-blog-post__related-cat {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-primary, #f25b09);
}

.sts-blog-post__related-title {
    font-size: 14px;
    line-height: 1.35;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sts-blog-post__related-meta {
    font-size: 12px;
    color: #ffffff80;
}

/* ------------------------------------------------------------ categories -- */
.sts-blog-post__categories-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sts-blog-post__categories-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--e-global-color-text, #b8b8b8);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.sts-blog-post__categories-list a:hover {
    background: #ffffff0d;
    color: #fff;
}

.sts-blog-post__categories-list a.is-active {
    background: var(--color-primary, #f25b09);
    color: #0a0a0a;
    font-weight: 600;
}

.sts-blog-post__categories-count {
    flex-shrink: 0;
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #ffffff14;
    font-size: 11.5px;
    text-align: center;
    color: inherit;
}

.sts-blog-post__categories-list a.is-active .sts-blog-post__categories-count {
    background: #0a0a0a26;
}

@media (max-width: 1024px) {
    .sts-blog-post .sts-element.sts-element-bl-body { --padding-top: 90px; --padding-bottom: 70px; }
    .sts-blog-post__layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 44px; }
}

@media (max-width: 900px) {
    .sts-blog-post__layout { grid-template-columns: 1fr; }
    .sts-blog-post__sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
    .sts-blog-post__toc, .sts-blog-post__related, .sts-blog-post__categories { flex: 1 1 280px; }
}

@media (max-width: 767px) {
    .sts-blog-post .sts-element.sts-element-bl-body { --padding-top: 64px; --padding-bottom: 50px; }
    .sts-blog-post__article h2 { font-size: 24px; margin: 34px 0 14px; }
    .sts-blog-post__article p { font-size: 16px; }
    .sts-blog-post__sidebar { flex-direction: column; }
    .sts-blog-post__toc, .sts-blog-post__related, .sts-blog-post__categories { padding: 22px; }
}