/* ============================================================
   IDS Blog — supplemental styles
   Harmonized with the site theme:
     accent  #ff8e31 (orange)   dark #1f252e / #15191f
     body    Open Sans          headings Merriweather serif
   ============================================================ */

.blog-wrap { padding: 70px 0; }
@media (max-width: 767px){ .blog-wrap { padding: 45px 0; } }

/* ---------- Listing grid ---------- */
/* Flexbox wrap so cards always align to the left edge (fixes the
   Bootstrap float "hang" where a shorter card lets the next one ride up)
   and so cards in the same row share equal height. */
.blog-grid { margin: 0 -15px; display: flex; flex-wrap: wrap; }
.blog-grid > [class*="col-"] { display: flex; }
@media (max-width: 767px){ .blog-grid > [class*="col-"] { width: 100%; } }
.blog-card {
    background: #fff;
    border: 1px solid #e6e6e6;
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: auto;
    transition: box-shadow .2s ease, transform .2s ease;
}
.blog-card:hover { box-shadow: 0 10px 30px rgba(21,25,31,.10); transform: translateY(-3px); }

.blog-card__media { display: block; overflow: hidden; background: #f2f2ee; }
.blog-card__media img {
    width: 100%; height: 220px; object-fit: cover; display: block;
    transition: transform .35s ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.04); }

/* Slim placeholder bar when there is no featured image */
.blog-card__media--ph { height: 8px; background: #ff8e31; }

.blog-card__body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1 1 auto; }
.blog-card__date {
    font-family: "Open Sans", sans-serif;
    font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
    color: #ff8e31; font-weight: 600; margin-bottom: 10px;
}
.blog-card__title { font-size: 22px; line-height: 1.3; margin: 0 0 12px; }
.blog-card__title a { color: #15191f; }
.blog-card__title a:hover { color: #ff8e31; text-decoration: none; }
.blog-card__excerpt { color: #595959; font-size: 15px; line-height: 1.65; margin: 0 0 20px; flex: 1 1 auto; }

.blog-readmore {
    align-self: flex-start;
    display: inline-block; background: #ff8e31; color: #fff;
    padding: 11px 22px; font-size: 13px; text-transform: uppercase;
    letter-spacing: .04em; font-weight: 600; border-radius: 0;
}
.blog-readmore:hover, .blog-readmore:focus { background: #15191f; color: #fff; text-decoration: none; }

/* ---------- Empty state ---------- */
.blog-empty {
    text-align: center; padding: 60px 20px; color: #767676;
    border: 1px dashed #d9d9d9; background: #fafafa;
}

/* ---------- Pagination ---------- */
.blog-pager { text-align: center; margin-top: 20px; }
.blog-pager a, .blog-pager span {
    display: inline-block; min-width: 40px; padding: 9px 12px; margin: 0 3px;
    border: 1px solid #e6e6e6; color: #15191f; font-size: 14px;
}
.blog-pager a:hover { background: #ff8e31; border-color: #ff8e31; color: #fff; text-decoration: none; }
.blog-pager .current { background: #15191f; border-color: #15191f; color: #fff; }

/* ---------- Single post ---------- */
.post-single { max-width: 820px; margin: 0 auto; }
.post-meta {
    font-family: "Open Sans", sans-serif; font-size: 13px; color: #767676;
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 22px;
}
.post-meta .sep { color: #d9d9d9; margin: 0 8px; }
.post-meta strong { color: #ff8e31; font-weight: 600; }

.post-hero { margin: 0 0 34px; }
.post-hero img { width: 100%; height: auto; display: block; }

.post-body { font-size: 17px; line-height: 1.8; color: #333; }
.post-body p { margin: 0 0 22px; }
.post-body h2 { font-size: 30px; margin: 40px 0 16px; color: #15191f; }
.post-body h3 { font-size: 24px; margin: 32px 0 14px; color: #15191f; }
.post-body h4 { font-size: 20px; margin: 26px 0 12px; color: #15191f; }
.post-body a { color: #ff8e31; text-decoration: underline; }
.post-body a:hover { color: #15191f; }
.post-body ul, .post-body ol { margin: 0 0 22px; padding-left: 24px; }
.post-body li { margin-bottom: 8px; }
.post-body img { max-width: 100%; height: auto; margin: 20px 0; }
.post-body blockquote {
    border-left: 4px solid #ff8e31; background: #f6f6f4;
    margin: 26px 0; padding: 16px 24px; color: #444; font-style: italic;
}
.post-body pre {
    background: #15191f; color: #f2f2ee; padding: 18px 20px; overflow-x: auto;
    font-size: 14px; margin: 0 0 22px;
}
.post-body code { font-family: Menlo, Consolas, monospace; }

.post-back { margin-top: 46px; padding-top: 26px; border-top: 1px solid #e6e6e6; }
.post-back a {
    display: inline-block; background: #15191f; color: #fff;
    padding: 12px 24px; font-size: 13px; text-transform: uppercase;
    letter-spacing: .04em; font-weight: 600;
}
.post-back a:hover { background: #ff8e31; text-decoration: none; }