/* Article-only styles: no changes to the shared navigation or application shell. */
.stc-blog-detail .stc-article-author { display: flex; align-items: center; gap: 20px; margin-top: 32px; padding: 24px; border: 1px solid #deebe3; border-radius: 16px; background: linear-gradient(110deg, #f1f8f4, #fff); }
.stc-blog-detail .stc-author-avatar { display: grid; place-items: center; flex: 0 0 72px; width: 72px; height: 72px; overflow: hidden; border-radius: 50%; border: 3px solid white; background: #dcefe4; color: #276349; font-size: 28px; font-weight: 700; box-shadow: 0 0 0 1px #dce8e0; }
.stc-blog-detail .stc-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.stc-blog-detail .stc-author-details { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.stc-blog-detail .stc-author-label { color: #587767; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.stc-blog-detail .stc-author-details h5 { margin: 5px 0 7px; color: #193f30; font-size: 19px; font-weight: 700; line-height: 1.4; }
.stc-blog-detail .stc-author-details p { margin: 0; color: #586a60; font-size: 13px; line-height: 1.7; white-space: pre-line; }
.stc-blog-detail .stc-author-link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 14px; padding: 10px 15px; border: 1px solid #cfe2d6; border-radius: 8px; background: #fff; color: #246347; font-size: 12px; font-weight: 600; }
.stc-blog-detail .stc-author-link:hover { background: #e8f4ec; border-color: #9fc7b0; }
.stc-blog-detail .stc-author-details a:hover { color: #267b54; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 640px) {
    .stc-blog-detail .stc-article-author { flex-direction: column; gap: 14px; padding: 18px; align-items: flex-start; min-width: 0; }
    .stc-blog-detail .stc-author-avatar { flex: 0 0 auto; width: 52px; height: 52px; }
    .stc-blog-detail .stc-author-details { flex: none; width: 100%; }
    .stc-blog-detail .stc-author-details h5 { font-size: 17px; }
    .stc-blog-detail .stc-author-link { margin-left: 0; max-width: 100%; box-sizing: border-box; }
}
.stc-blog-detail .blog-container { padding: 28px !important; }
.stc-blog-detail .stc-blog-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(24px, 3vw, 38px);
    margin-bottom: 28px;
    border-radius: 16px;
    background: #edf6f2;
    border: 1px solid #dcebe3;
    color: #173d32;
}
.stc-blog-hero-image {
    position: absolute;
    inset: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    max-width: none;
    object-fit: cover;
    filter: blur(3px);
    opacity: .7;
    z-index: -2;
}
.stc-blog-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(247, 252, 249, .96) 0%, rgba(239, 248, 244, .9) 60%, rgba(232, 245, 240, .76) 100%);
    z-index: -1;
    pointer-events: none;
}
.stc-blog-detail .stc-blog-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: #286d54;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}
.stc-blog-detail .stc-blog-hero h1 {
    max-width: 100%;
    margin: 0 0 22px;
    font-size: clamp(24px, 2.5vw, 36px);
    line-height: 1.3;
    letter-spacing: -.025em;
    font-weight: 700;
    color: #173d32;
}
.stc-blog-detail .stc-blog-hero .entry-meta {
    padding: 16px 0 0;
    border-color: rgba(37, 100, 74, .16);
    color: #486459;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    gap: 16px;
}
.stc-blog-detail .stc-blog-hero .entry-meta :is(a, i) { color: inherit; }
.stc-blog-detail .custom-content {
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: #374740 !important;
    overflow-wrap: anywhere;
}
.stc-blog-detail .custom-content p { margin: 0 0 16px !important; }
.stc-blog-detail .custom-content li { margin-bottom: 6px !important; }
.stc-blog-detail .custom-content span { margin: 0 !important; }
.stc-blog-detail .custom-content h1 { font-size: 25px !important; }
.stc-blog-detail .custom-content h2 { font-size: 22px !important; }
.stc-blog-detail .custom-content h3 { font-size: 19px !important; }
.stc-blog-detail .custom-content h4 { font-size: 17px !important; }
.stc-blog-detail .custom-content :is(h1,h2,h3,h4) {
    margin: 28px 0 12px !important;
    line-height: 1.4 !important;
    letter-spacing: -.015em;
}
.stc-blog-detail .custom-content :is(ul,ol) { margin: 0 0 18px !important; }
.stc-blog-detail .custom-content :is(img, figure.image, figure.image img) {
    display: block !important;
    float: none !important;
    clear: both !important;
    max-width: 100% !important;
    margin: 20px auto !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}
.stc-blog-detail .custom-content blockquote {
    margin: 20px 0;
    padding: 12px 18px;
    border-left: 3px solid #309775;
    background: #f0f7f3 !important;
}
.stc-blog-detail .custom-content pre {
    max-width: 100%;
    padding: 16px;
    overflow-x: auto;
    border-radius: 10px;
    background: #f1f5f4 !important;
}
.stc-blog-detail .custom-content :is(code, pre) { font-family: monospace !important; font-size: 13px; }
.stc-blog-detail .custom-content table { display: block; max-width: 100%; overflow-x: auto; }
.stc-blog-detail .stc-blog-recent { padding: 28px; background: #f5f8f7; border-color: #e3ebe6; }
.stc-blog-recent > div:first-child { gap: 16px; margin-bottom: 20px; }
.stc-blog-recent > div:first-child h3 { padding: 0; border: 0; font-size: 19px; letter-spacing: -.025em; color: #203b32; }
.stc-blog-recent > div:first-child a { font-size: 12px; white-space: nowrap; color: #227555; }
.stc-blog-detail .recent-post-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.stc-blog-detail .recent-post-grid > div { min-width: 0; border-color: #e1e9e5; border-radius: 12px; box-shadow: none; }
.stc-blog-detail .recent-post-grid > div:hover { border-color: #9fc9b6; box-shadow: 0 5px 18px rgba(24,65,48,.06); }
.stc-blog-detail .recent-post-grid > div > a { height: auto; aspect-ratio: 16 / 9; }
.stc-blog-detail .recent-post-grid > div > div { padding: 12px; gap: 10px; }
.stc-blog-detail .recent-post-grid > div > div > a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    min-height: 4.5em;
    margin: 0;
    color: #213d33;
}
.stc-blog-detail .recent-post-grid > div > div > div { border-top: 1px solid #edf2ef; padding-top: 10px; }
.stc-blog-detail .recent-post-grid p { font-size: 12px; line-height: 1.65; margin-bottom: 12px; -webkit-line-clamp: 2; }
.stc-blog-detail .recent-post-grid > div > div > div a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #237658;
    padding: 0;
    box-shadow: none;
    font-size: 12px;
}
.stc-blog-detail .stc-blog-link-icon { display: inline-block; font-size: 11px; line-height: 1; flex-shrink: 0; }
.stc-blog-detail a:focus-visible { outline: 2px solid #39ad87; outline-offset: 3px; }
@media (max-width: 1180px) {
    .stc-blog-detail .recent-post-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 210px;
        overflow-x: auto;
        padding: 3px 3px 12px;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        scrollbar-color: #abcbbb transparent;
    }
    .stc-blog-detail .recent-post-grid > div { scroll-snap-align: start; }
}
.stc-blog-detail .recent-post-grid:focus-visible { outline: 2px solid #39ad87; outline-offset: 3px; }
@media (max-width: 640px) {
    .stc-blog-detail .blog-container { padding: 14px !important; }
    .stc-blog-detail .stc-blog-hero { padding: 24px 18px; border-radius: 12px; }
    .stc-blog-detail .stc-blog-recent { padding: 20px 14px; }
    .stc-blog-detail .custom-content { font-size: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .stc-blog-detail .recent-post-grid * { transition: none !important; transform: none !important; }
}