/* Blog page styles — page-specific layer only, following the same pattern as
   css/career.css and css/about.css: the shared design system (tokens, hero,
   animated vector background, jump nav, cards, FAQ, motion and reveal
   states) lives in css/services.css, which is loaded first.

   Everything is scoped to .sd-page so it cannot leak into other components. */

.sd-page .sd-breadcrumb { margin-top: 18px; }

/* ---------- category filter chips ---------- */
.sd-page .sd-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; padding: 0; list-style: none; }
.sd-page .sd-chip {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--sd-line); background: #fff; color: #344962;
    border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 700;
    cursor: pointer; text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.sd-page .sd-chip:hover { border-color: #0057d9; color: #0057d9; transform: translateY(-2px); }
.sd-page .sd-chip[aria-pressed="true"] { background: #0057d9; border-color: #0057d9; color: #fff; }
.sd-page .sd-chip:focus-visible { outline: 3px solid #008886; outline-offset: 2px; }
.sd-page .sd-chip span { color: #8fa1b8; font-weight: 700; font-size: 12px; }
.sd-page .sd-chip[aria-pressed="true"] span { color: rgba(255, 255, 255, .78); }

/* ---------- featured post ---------- */
.sd-page .sd-post--featured { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; overflow: hidden; }
.sd-page .sd-post--featured .sd-post-media { height: 100%; min-height: 280px; }
.sd-page .sd-post--featured .sd-post-body { padding: 30px 32px; }
.sd-page .sd-post--featured h3 { font-size: clamp(21px, 2.2vw, 27px); margin: 10px 0 10px; }

/* ---------- post cards ---------- */
.sd-page .sd-post { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.sd-page .sd-post-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #eef4fb; }
.sd-page .sd-post-media img { width: 100%; height: 100%; object-fit: contain; padding: 18px; transition: transform .35s cubic-bezier(.2, .8, .3, 1); }
.sd-page .sd-post:hover .sd-post-media img { transform: scale(1.05); }
.sd-page .sd-post-tag {
    position: absolute; left: 14px; top: 14px; z-index: 2;
    background: rgba(0, 87, 217, .92); color: #fff;
    border-radius: 999px; padding: 5px 12px; font-size: 11.5px; font-weight: 800;
    letter-spacing: .4px; text-transform: uppercase;
}
.sd-page .sd-post-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px 22px 20px; }
.sd-page .sd-post-body h3 { font-size: 19px; margin: 0 0 8px; line-height: 1.35; }
.sd-page .sd-post-body h3 a { color: inherit; text-decoration: none; }
.sd-page .sd-post-body h3 a:hover { color: #0057d9; }
.sd-page .sd-post-excerpt { font-size: 14.5px; margin: 0 0 16px; color: var(--sd-muted); }
.sd-page .sd-post-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sd-page .sd-post-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #6b7693; }
.sd-page .sd-post-meta i { color: #12c8a2; }

/* ---------- newsletter ---------- */
.sd-page .sd-subscribe {
    display: grid; grid-template-columns: 1.25fr 1fr; gap: 34px; align-items: center;
    border: 1px solid #cddfeb; border-radius: 22px;
    background: linear-gradient(120deg, #eaf2ff, #e9faf3); padding: 40px;
}
.sd-page .sd-subscribe h3 { margin: 8px 0 8px; font-size: clamp(20px, 2.1vw, 26px); }
.sd-page .sd-subscribe-form { display: flex; gap: 10px; flex-wrap: wrap; }
.sd-page .sd-subscribe-form input {
    flex: 1 1 220px; min-height: 48px; border: 1px solid #153d67; border-radius: 10px;
    padding: 0 14px; font: inherit; font-size: 14.5px; background: #fff; color: #12243b;
}
.sd-page .sd-subscribe-form input:focus-visible { outline: 3px solid #008886; outline-offset: 2px; }
.sd-page .sd-subscribe-note { font-size: 12.5px; color: var(--sd-muted); margin: 10px 0 0; }

@media (max-width: 991px) {
    .sd-page .sd-post--featured { grid-template-columns: 1fr; }
    .sd-page .sd-subscribe { grid-template-columns: 1fr; padding: 30px 22px; gap: 22px; }
}
@media (max-width: 600px) {
    .sd-page .sd-post--featured .sd-post-body { padding: 22px 20px; }
}