/* ============================================================
   blog-detail-enhance.css
   Blog detail page (Blog-Detail.aspx).

   Layout follows the service-page pattern the client picked as the
   reference: breadcrumb strip -> compact gradient hero (no oversized
   banner) -> a 2fr / 1fr grid with a sticky sidebar of cards.
   Colours stay on the Aledentz palette so the page matches the header,
   footer and the rest of the site.

   Class prefix: .bd-
   ============================================================ */

.bd-page {
    --bd-navy: #233a46;
    --bd-blue: #2491d0;
    --bd-blue-deep: #1b7bb5;
    --bd-teal: #00bf99;
    --bd-teal-light: #00dba5;
    --bd-off: #f6fafb;
    --bd-wash: #eef7fa;
    --bd-border: #e3eef1;
    --bd-text: #455f68;
    --bd-text-light: #8195a0;
    --bd-radius: 12px;
    --bd-radius-lg: 18px;
    --bd-shadow: 0 4px 20px rgba(35,58,70,.08);
    --bd-shadow-lg: 0 14px 40px rgba(35,58,70,.14);

    background: #fff;
}

/* ============================================================
   READING PROGRESS BAR
   ============================================================ */
.bd-progress {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    z-index: 1200;
    background: transparent;
    pointer-events: none;
}
.bd-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, #2491d0, #00dba5);
    box-shadow: 0 0 10px rgba(0,172,219,.55);
    transition: width .1s linear;
}

/* ============================================================
   BREADCRUMB STRIP
   ============================================================ */
.bd-crumb {
    background: #f6fafb;
    border-bottom: 1px solid #e3eef1;
    padding: 13px 0;
}
.bd-crumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.bd-crumb-list li {
    font-size: 13px;
    line-height: 20px;
    color: #8195a0;
}
.bd-crumb-list li a { color: #233a46; transition: color .25s ease; }
.bd-crumb-list li a:hover { color: #00bf99; text-decoration: none; }
.bd-crumb-list li:not(:last-child):after {
    content: "\203A";
    margin-left: 8px;
    color: #b9cbd3;
}
/* the current page never wraps to a second line on its own */
.bd-crumb-list li:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   COMPACT HERO
   ============================================================ */
.bd-hero {
    position: relative;
    overflow: hidden;
    padding: 58px 0 54px;
    text-align: center;
    background: linear-gradient(135deg, #233a46 0%, #2491d0 100%);
    color: #fff;
}
.bd-hero:before {
    content: "";
    position: absolute;
    top: -130px; right: -80px;
    width: 340px; height: 340px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
}
.bd-hero:after {
    content: "";
    position: absolute;
    bottom: -150px; left: -70px;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: rgba(0,219,165,.13);
}
.bd-hero .container { position: relative; z-index: 2; }
.bd-hero h1 {
    font-size: 38px;
    line-height: 50px;
    font-weight: 800;
    color: #fff;
    margin: 0 auto 14px;
    max-width: 900px;
}
.bd-hero-sub {
    max-width: 680px;
    margin: 0 auto 20px;
    font-size: 16px;
    line-height: 28px;
    color: rgba(255,255,255,.82);
}

/* meta row */
.bd-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 9px 24px;
    font-size: 13px;
    color: rgba(255,255,255,.9);
}
.bd-meta span { display: inline-flex; align-items: center; }
.bd-meta i { margin-right: 7px; color: #00dba5; font-size: 14px; }

/* ============================================================
   TWO COLUMN LAYOUT
   ============================================================ */
.bd-section { padding: 54px 0 70px; }
.bd-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 44px;
    align-items: start;
}
.bd-main { min-width: 0; }

/* ============================================================
   FEATURED IMAGE
   A source wider than the column fills a band; a smaller or taller one
   is shown whole, framed, over a blurred copy of itself. The script
   picks the treatment once it knows the natural size.
   ============================================================ */
.bd-figure {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 330px;
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: var(--bd-radius-lg);
    background-color: #e8f2f5;
    background-repeat: no-repeat;
    background-position: center;
    /* the element paints nothing itself - it only carries the inline
       background-image so :before can inherit it */
    background-size: 0 0;
    box-shadow: var(--bd-shadow);
}
.bd-figure.bd-fig-contain {
    height: auto;
    padding: 34px 26px;
}
.bd-figure.bd-fig-contain img { max-height: 560px; }
.bd-figure:before {
    content: "";
    position: absolute;
    top: -40px; right: -40px; bottom: -40px; left: -40px;
    background-image: inherit;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-filter: blur(26px);
    filter: blur(26px);
    transform: scale(1.12);
}
.bd-figure:after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(180deg, rgba(35,58,70,.08) 0%, rgba(35,58,70,.22) 100%);
}
.bd-figure img {
    position: relative;
    z-index: 2;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(16,32,40,.30);
}
.bd-figure img.bd-img-fill {
    width: 100%;
    height: 100%;
    max-height: none;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
}
.bd-figure .bd-datechip {
    position: absolute;
    z-index: 3;
    top: 18px; left: 18px;
    background: linear-gradient(135deg, #2491d0, #00acdb);
    color: #fff;
    border-radius: 10px;
    padding: 9px 13px;
    text-align: center;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(0,172,219,.38);
}
.bd-datechip b { display: block; font-size: 20px; font-weight: 800; }
.bd-datechip i { font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }

/* ============================================================
   ARTICLE BODY TYPOGRAPHY
   (styles the CKEditor HTML stored in Blog_Master._desc)
   ============================================================ */
.bd-body { font-size: 16px; line-height: 30px; color: #455f68; }
/* editors often repeat the post title as an <h1> at the top of the body.
   The script strips that one; anything else is demoted so a stray heading
   can never tower over the hero title. */
.bd-body h1,
.bd-body h2 {
    font-size: 26px;
    line-height: 35px;
    color: #233a46;
    font-weight: 700;
    margin: 36px 0 15px;
    padding-left: 15px;
    position: relative;
    scroll-margin-top: 90px;
}
.bd-body h1:before,
.bd-body h2:before {
    content: "";
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 4px;
    border-radius: 3px;
    background: linear-gradient(180deg, #2491d0, #00dba5);
}
.bd-body h3,
.bd-body h4 {
    color: #233a46;
    font-weight: 700;
    margin: 30px 0 13px;
    position: relative;
    scroll-margin-top: 90px;
}
.bd-body h3 { font-size: 20px; line-height: 30px; }
.bd-body h4 { font-size: 17px; line-height: 27px; }
.bd-body h2 + h3,
.bd-body h3 + h4 { margin-top: 20px; }
.bd-body > *:first-child { margin-top: 0; }

.bd-body > p:first-of-type {
    font-size: 17.5px;
    line-height: 32px;
    color: #3c545e;
}
.bd-body p { margin: 0 0 20px; line-height: 30px; }

.bd-body ul, .bd-body ol { margin: 0 0 22px; padding-left: 0; }
.bd-body ul { list-style: none; }
.bd-body ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 11px;
    line-height: 28px;
}
.bd-body ul li:before {
    content: "";
    position: absolute;
    left: 4px; top: 11px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #00dba5;
}
.bd-body ol { padding-left: 22px; }
.bd-body ol li { margin-bottom: 11px; line-height: 28px; padding-left: 6px; }
.bd-body ol li::marker { color: #2491d0; font-weight: 700; }
/* CKEditor wraps every list item in its own <p>. Without this the
   paragraph margin lands inside the bullet and the list falls apart. */
.bd-body li > p { margin: 0 0 8px; line-height: 28px; font-size: inherit; }
.bd-body li > p:last-child { margin-bottom: 0; }
.bd-body li > ul,
.bd-body li > ol { margin: 10px 0 0; }
.bd-body ul ul li:before { background: transparent; box-shadow: inset 0 0 0 2px #00dba5; }

.bd-body a { color: #2491d0; font-weight: 600; }
.bd-body a:hover { color: #00acdb; text-decoration: underline; }

.bd-body blockquote {
    margin: 28px 0;
    padding: 20px 24px;
    border: 0;
    border-left: 4px solid #00dba5;
    background: #f1f8f9;
    border-radius: 0 var(--bd-radius) var(--bd-radius) 0;
    font-size: 17px;
    line-height: 30px;
    font-style: italic;
    color: #3c545e;
}
.bd-body img { max-width: 100%; height: auto; border-radius: var(--bd-radius); margin: 10px 0 22px; }
.bd-body table { width: 100%; margin: 0 0 24px; border-collapse: collapse; font-size: 15px; }
.bd-body table th,
.bd-body table td { border: 1px solid #e3eef1; padding: 12px 14px; text-align: left; }
.bd-body table th { background: #f1f8f9; color: #233a46; font-weight: 700; }
.bd-body table tr:nth-child(even) td { background: #fafdfd; }
.bd-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 24px; }
.bd-tablewrap table { margin-bottom: 0; }
.bd-body hr { border: 0; border-top: 1px solid #e8f0f2; margin: 32px 0; }
.bd-body iframe { max-width: 100%; border-radius: var(--bd-radius); }

/* callout, the equivalent of the reference page's info box. Add
   class="bd-info" to a paragraph in the editor to use it. */
.bd-body .bd-info,
.bd-body .info-box {
    background: #e4f9f2;
    border-left: 4px solid #00a37f;
    border-radius: 0 var(--bd-radius) var(--bd-radius) 0;
    padding: 16px 20px;
    margin: 24px 0;
    font-size: 15px;
    line-height: 27px;
    color: #14503f;
}

/* ============================================================
   TABLE OF CONTENTS
   Built by script from the <h2> headings, when there are enough.
   ============================================================ */
.bd-toc {
    margin: 0 0 32px;
    padding: 22px 26px 18px;
    border: 1px solid #e0eef3;
    border-radius: var(--bd-radius);
    background: #f8fcfd;
}
.bd-toc-head {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #2491d0;
    margin: 0 0 12px;
}
.bd-toc-head i { font-size: 14px; color: #00bf99; }
.bd-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: bdtoc;
}
.bd-toc ol li { counter-increment: bdtoc; margin: 0; padding: 0; }
.bd-toc ol li:before { display: none; }
.bd-toc a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    font-size: 14.5px;
    line-height: 23px;
    font-weight: 600;
    color: #3c545e;
    border-bottom: 1px dashed rgba(36,145,208,.16);
    transition: color .2s ease, padding-left .2s ease;
}
.bd-toc ol li:last-child a { border-bottom: 0; }
.bd-toc a:before {
    content: counter(bdtoc, decimal-leading-zero);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    color: #9fbcc8;
}
.bd-toc a:hover { color: #2491d0; padding-left: 4px; text-decoration: none; }
.bd-toc a:hover:before { color: #00bf99; }

/* ============================================================
   FAQ ACCORDION
   The script turns the "Frequently Asked Questions" heading and the
   <h3> question / answer pairs that follow it into this block.
   ============================================================ */
.bd-faq { margin: 26px 0 6px; }
.bd-faq-item {
    border: 1px solid #e3eef1;
    border-radius: var(--bd-radius);
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.bd-faq-item.is-open { border-color: #cfe8f3; box-shadow: var(--bd-shadow); }
.bd-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 17px 22px;
    border: 0;
    background: #fff;
    text-align: left;
    font-family: inherit;
    font-size: 16px;
    line-height: 26px;
    font-weight: 700;
    color: #233a46;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.bd-faq-q:hover { background: #f6fbfd; color: #2491d0; }
.bd-faq-item.is-open .bd-faq-q { color: #2491d0; }
.bd-faq-q .bd-faq-txt { flex: 1 1 auto; }
.bd-faq-q .bd-faq-icon {
    flex: 0 0 26px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #eef7fa;
    color: #2491d0;
    font-size: 17px;
    font-weight: 400;
    font-style: normal;
    line-height: 25px;
    text-align: center;
    transition: transform .3s ease, background .25s ease, color .25s ease;
}
.bd-faq-item.is-open .bd-faq-icon {
    transform: rotate(45deg);
    background: linear-gradient(135deg, #2491d0, #00acdb);
    color: #fff;
}
.bd-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.bd-faq-a-inner { padding: 0 22px 18px; border-top: 1px solid #eef5f7; }
.bd-faq-a-inner p { margin: 14px 0 0; font-size: 15.5px; line-height: 28px; }

/* ============================================================
   SHARE BAR
   ============================================================ */
.bd-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    padding: 16px 20px;
    border: 1px solid #e3eef1;
    border-radius: var(--bd-radius);
    background: #f8fcfd;
}
.bd-share-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #6b8794;
    margin-right: 6px;
}
.bd-share a, .bd-share button {
    position: relative;
    overflow: hidden;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid #e3eef1;
    background: #fff;
    font-size: 15px;
    line-height: 38px;
    text-align: center;
    padding: 0;
    transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, color .25s ease, border-color .25s ease;
}
.bd-share .bd-fb { color: #3b5998; }
.bd-share .bd-wa { color: #25d366; }
.bd-share .bd-tw { color: #1a1d21; }
.bd-share .bd-in { color: #0a66c2; }
.bd-share .bd-copy { color: #2491d0; }
.bd-share a:after, .bd-share button:after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: inherit;
    transform: scale(0);
    opacity: 0;
    transition: transform .32s cubic-bezier(.2,.8,.3,1), opacity .32s ease;
}
.bd-share .bd-fb:after { background: #3b5998; }
.bd-share .bd-wa:after { background: #1eb955; }
.bd-share .bd-tw:after { background: #101214; }
.bd-share .bd-in:after { background: #0a66c2; }
.bd-share .bd-copy:after { background: linear-gradient(135deg, #2491d0, #00acdb); }
.bd-share a i, .bd-share button i { position: relative; z-index: 2; }
.bd-share a:hover, .bd-share button:hover,
.bd-share a:focus, .bd-share button:focus {
    color: #fff;
    border-color: transparent;
    transform: translateY(-3px);
    outline: none;
}
.bd-share a:hover:after, .bd-share button:hover:after,
.bd-share a:focus:after, .bd-share button:focus:after { transform: scale(1); opacity: 1; }
.bd-copied {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #0e9e7e;
    background: #e4f9f2;
    border: 1px solid #c9f0e4;
    border-radius: 999px;
    padding: 6px 12px;
}

/* ============================================================
   CTA BAND at the foot of the article
   ============================================================ */
.bd-cta {
    margin-top: 30px;
    border-radius: var(--bd-radius-lg);
    padding: 30px 32px;
    background: linear-gradient(135deg, #2491d0 0%, #00bf99 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}
.bd-cta-copy h3 { color: #fff; font-size: 21px; font-weight: 700; margin: 0 0 7px; }
.bd-cta-copy p { color: rgba(255,255,255,.92); font-size: 14.5px; margin: 0; line-height: 1.6; }
.bd-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   BUTTONS
   ============================================================ */
.bd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
    border: 2px solid transparent;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.bd-btn-solid { background: #fff; color: #2491d0 !important; box-shadow: 0 8px 18px rgba(0,0,0,.14); }
.bd-btn-solid:hover { background: #233a46; color: #fff !important; transform: translateY(-2px); text-decoration: none; }
.bd-btn-ghost { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.65); }
.bd-btn-ghost:hover { background: #fff; color: #2491d0 !important; transform: translateY(-2px); text-decoration: none; }
.bd-btn-primary {
    background: linear-gradient(135deg, #2491d0, #00acdb);
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(0,172,219,.34);
}
.bd-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,172,219,.44); text-decoration: none; }
.bd-btn-outline { background: transparent; color: #2491d0 !important; border-color: #cfe3ec; }
.bd-btn-outline:hover { background: #2491d0; color: #fff !important; border-color: #2491d0; text-decoration: none; }
.bd-btn-block { width: 100%; }

/* ============================================================
   STICKY SIDEBAR
   ============================================================ */
/* The cards scroll with the page, as on the reference layout. Sticky was
   tried and dropped: the four cards together are taller than a laptop
   viewport, so pinning them just cut the bottom card off. */
.bd-side { min-width: 0; }
.bd-side-inner { position: relative; }

.bd-side-card {
    background: #f8fcfd;
    border: 1px solid #e3eef1;
    border-radius: var(--bd-radius);
    padding: 22px 24px;
    margin-bottom: 22px;
}
.bd-side-card h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #233a46;
}
.bd-side-card h4 i { color: #00bf99; font-size: 15px; }

/* dark booking card */
.bd-side-cta {
    background: linear-gradient(140deg, #233a46 0%, #1b5f83 100%);
    border-color: transparent;
    box-shadow: var(--bd-shadow);
}
.bd-side-cta h4 { color: #fff; }
.bd-side-cta h4 i { color: #00dba5; }
.bd-side-cta p {
    color: rgba(255,255,255,.75);
    font-size: 13.5px;
    line-height: 23px;
    margin: 0 0 16px;
}
.bd-side-cta .bd-btn { margin-bottom: 9px; }
.bd-side-cta .bd-btn:last-child { margin-bottom: 0; }
.bd-side-cta .bd-btn-white { background: #fff; color: #233a46 !important; }
.bd-side-cta .bd-btn-white:hover { background: #00dba5; color: #0d3a30 !important; transform: translateY(-2px); text-decoration: none; }

/* treatment / page link list */
.bd-side-links { list-style: none; margin: 0; padding: 0; }
.bd-side-links li { margin: 0; padding: 0; }
.bd-side-links li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    font-size: 14px;
    line-height: 22px;
    color: #455f68;
    border-bottom: 1px solid #e6eff2;
    transition: color .25s ease, padding-left .25s ease;
}
.bd-side-links li:last-child a { border-bottom: 0; }
.bd-side-links li a:after {
    content: "\f105"; /* fa-angle-right */
    font-family: FontAwesome;
    color: #b9cbd3;
    font-size: 14px;
    transition: color .25s ease, transform .25s ease;
}
.bd-side-links li a:hover { color: #2491d0; padding-left: 5px; text-decoration: none; }
.bd-side-links li a:hover:after { color: #00bf99; transform: translateX(3px); }

/* recent posts with a thumbnail */
.bd-side-posts { list-style: none; margin: 0; padding: 0; }
.bd-side-posts li { margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid #e6eff2; }
.bd-side-posts li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.bd-side-post { display: flex; align-items: flex-start; gap: 12px; }
.bd-side-post-img {
    flex: 0 0 62px;
    width: 62px; height: 62px;
    border-radius: 10px;
    overflow: hidden;
    background: #e8f2f5;
}
.bd-side-post-img img { width: 100%; height: 100%; object-fit: cover; }
.bd-side-post-txt { flex: 1 1 auto; min-width: 0; }
.bd-side-post-txt strong {
    display: block;
    font-size: 13.5px;
    line-height: 21px;
    font-weight: 700;
    color: #233a46;
    transition: color .25s ease;
}
.bd-side-post:hover .bd-side-post-txt strong { color: #2491d0; }
.bd-side-post-date { display: block; margin-top: 5px; font-size: 11.5px; color: #8195a0; }
.bd-side-post-date i { color: #00bf99; margin-right: 5px; }

/* tinted note card */
.bd-side-note {
    background: #e9f9f4;
    border: 1px solid #cdf0e4;
    border-left: 4px solid #00bf99;
}
.bd-side-note h4 { color: #0e7a63; }
.bd-side-note h4 i { color: #0e7a63; }
.bd-side-note p { font-size: 13.5px; line-height: 23px; color: #3d6a5f; margin: 0 0 14px; }

/* ============================================================
   RELATED POSTS  (full width strip under the grid)
   ============================================================ */
.bd-related { margin-top: 64px; }
.bd-related-title {
    font-size: 25px;
    font-weight: 800;
    color: #233a46;
    margin: 0 0 26px;
    padding-bottom: 15px;
    position: relative;
}
.bd-related-title:after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 60px; height: 4px;
    border-radius: 3px;
    background: linear-gradient(90deg, #2491d0, #00dba5);
}
.bd-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.bd-rel-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e3eef1;
    border-radius: var(--bd-radius);
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.bd-rel-card:hover {
    transform: translateY(-6px);
    border-color: #cfe8f3;
    box-shadow: var(--bd-shadow-lg);
}
.bd-rel-media { display: block; height: 190px; overflow: hidden; background: #e8f2f5; }
.bd-rel-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bd-rel-card:hover .bd-rel-media img { transform: scale(1.08); }
.bd-rel-body { padding: 20px 22px 18px; display: flex; flex-direction: column; flex: 1; }
.bd-rel-date { font-size: 12px; color: #8195a0; margin-bottom: 8px; }
.bd-rel-date i { color: #00bf99; margin-right: 5px; }
.bd-rel-title { margin: 0 0 9px; font-size: 17px; line-height: 25px; font-weight: 700; }
.bd-rel-title a { color: #233a46; transition: color .25s ease; }
.bd-rel-title a:hover { color: #2491d0; }
.bd-rel-excerpt {
    margin: 0 0 16px;
    color: #5b7682;
    font-size: 13.5px;
    line-height: 23px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bd-rel-more {
    margin-top: auto;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #2491d0;
}
.bd-rel-more i { transition: transform .25s ease; margin-left: 5px; }
.bd-rel-more:hover { color: #00acdb; }
.bd-rel-more:hover i { transform: translateX(5px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199px) {
    .bd-hero h1 { font-size: 33px; line-height: 44px; }
    .bd-grid { gap: 34px; }
    .bd-figure { height: 300px; }
}

@media (max-width: 991px) {
    /* the sidebar drops under the article and its cards sit side by side */
    .bd-grid { grid-template-columns: 1fr; gap: 46px; }
    .bd-side-inner {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 22px;
        align-items: start;
    }
    .bd-hero { padding: 48px 0 44px; }
    .bd-hero h1 { font-size: 28px; line-height: 38px; }
    .bd-hero-sub { font-size: 15px; line-height: 26px; }
    .bd-section { padding: 42px 0 56px; }
    .bd-figure { height: 300px; }
    .bd-figure.bd-fig-contain { padding: 26px 18px; }
    .bd-figure.bd-fig-contain img { max-height: 460px; }
    .bd-body { font-size: 15.5px; line-height: 29px; }
    .bd-body > p:first-of-type { font-size: 16.5px; line-height: 30px; }
    .bd-body h1, .bd-body h2 { font-size: 23px; line-height: 32px; }
    .bd-body h3 { font-size: 19px; line-height: 29px; }
    .bd-rel-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (max-width: 767px) {
    .bd-side-inner { grid-template-columns: 1fr; }
    .bd-hero { padding: 38px 0 36px; }
    .bd-hero h1 { font-size: 24px; line-height: 34px; }
    .bd-hero-sub { margin-bottom: 16px; }
    .bd-meta { gap: 8px 16px; font-size: 12.5px; }
    .bd-section { padding: 32px 0 46px; }
    .bd-figure { height: 210px; margin-bottom: 24px; border-radius: var(--bd-radius); }
    .bd-figure.bd-fig-contain { padding: 20px 14px; }
    .bd-figure.bd-fig-contain img { max-height: 360px; }
    .bd-figure .bd-datechip { top: 13px; left: 13px; padding: 8px 11px; }
    .bd-datechip b { font-size: 18px; }
    .bd-body h1, .bd-body h2 { font-size: 21px; line-height: 30px; padding-left: 13px; }
    .bd-toc { padding: 18px 16px 14px; margin-bottom: 26px; }
    .bd-toc a { font-size: 14px; }
    .bd-faq-q { padding: 15px 16px; font-size: 15.5px; line-height: 25px; gap: 12px; }
    .bd-faq-a-inner { padding: 0 16px 16px; }
    .bd-cta { padding: 24px 20px; text-align: center; justify-content: center; }
    .bd-cta-actions { justify-content: center; width: 100%; }
    .bd-side-card { padding: 20px 18px; }
    .bd-related { margin-top: 44px; }
    .bd-related-title { font-size: 21px; margin-bottom: 22px; }
    .bd-rel-grid { grid-template-columns: 1fr; gap: 20px; }
    .bd-rel-media { height: 185px; }
}

@media (max-width: 480px) {
    .bd-hero h1 { font-size: 21px; line-height: 30px; }
    .bd-share { padding: 14px 14px; gap: 8px; }
    .bd-share a, .bd-share button { width: 36px; height: 36px; line-height: 34px; font-size: 14px; }
    .bd-btn { padding: 11px 20px; font-size: 12.5px; }
}