/* Keep the breadcrumb below the full shared header. */
.blog-directory-page main { padding-top: var(--blog-header-height, 160px); }
.blog-directory-page { background: #fff; }
.blog-directory-page main > section { background: transparent; }
.blog-breadcrumb {
    padding: 15px 0;
    border-top: 1px solid #eadbc7;
    border-bottom: 1px solid #eadbc7;
    background: #fff8ee;
}

.blog-breadcrumb nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    color: #000000;
    font-size: 14px;
}

.blog-breadcrumb a {
    color: var(--primary);
    font-weight: 600;
    transition: color 0.25s ease;
}

.blog-breadcrumb a:hover,
.blog-breadcrumb a:focus-visible {
    color: var(--accent);
}

.blog-breadcrumb nav > span[aria-hidden="true"] {
    color: var(--accent);
}

.blog-intro { padding: 65px 0 55px; text-align: center; background: transparent; }
.blog-eyebrow { display: block; margin-bottom: 18px; color: var(--primary); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.blog-intro h1 { margin-bottom: 20px; color: var(--primary); font-family: var(--title); font-weight: 400; font-size: clamp(38px, 5vw, 60px); }
.blog-intro p { margin: 0; color: #000; line-height: 1.8; }
.blog-listing { padding: 65px 0 85px; }
.blog-listing .row > div { display: flex; }
.blog-card { display: flex; flex-direction: column; width: 100%; overflow: hidden; border: 1px solid #eaded4; border-radius: 18px; background: #fff; transition: box-shadow .2s ease; }
.blog-card:hover { box-shadow: 0 10px 30px rgba(104,17,38,.08); }
.blog-card-image {display: block;overflow: hidden;background: transparent;}
.blog-card-image img {
    display: block;
    width: 100%;
    height: 230px;
    max-height: 190px;
    min-height: 190px;
    object-fit: cover;
}
.blog-card-content { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 28px; }
.blog-category {margin-bottom: 16px;padding: 6px 11px;border-radius: 5px;background: #eaded4;color: var(--primary);font-size: 11px;font-weight: 600;}
.blog-card h2 {margin: 0 0 16px;font-family: var(--title);font-weight: 400;font-size: 18px;line-height: 1.35;}
.blog-card h2 a { color: var(--primary); }
.blog-card p {margin: 0 0 25px;color: #000;font-size: 14px;line-height: 1.85;}
.blog-read-more { display: inline-flex; align-items: center; gap: 16px; margin-top: auto; padding: 0 0 7px; border-bottom: 2px solid var(--accent); color: var(--primary); font-size: 13px; font-weight: 600; }
.blog-card a:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
@media (max-width: 767px) { .blog-intro { padding: 45px 0; } .blog-listing { padding: 40px 0 55px; } .blog-card-content { padding: 24px; } .blog-card h2 { font-size: 24px; } }
/* Blog article detail page. */
.blog-article-heading{padding:55px 0 35px;text-align:center}
.blog-article-heading h1{margin:0 0 22px;color:var(--primary);font:400 clamp(32px,4vw,50px)/1.25 var(--title)}
.blog-article-heading time{color:#746468;font-size:13px}
.blog-detail-section{padding:20px 0 80px}
.blog-detail-layout{display:grid;grid-template-columns:280px minmax(0,1fr);align-items:start;gap:55px}
.blog-toc{position:sticky;top:calc(var(--blog-header-height,160px) + 24px);max-height:calc(100dvh - var(--blog-header-height,160px) - 48px);overflow-y:auto;padding:5px 22px 15px 0;border-right:1px solid #eadbc7}
.blog-toc h2{margin:0 0 20px;color:var(--primary);font:400 24px/1.3 var(--title)}
.blog-toc nav{display:grid}
.blog-toc button{display:block;width:100%;text-align:left;background:transparent;border:0;cursor:pointer;font-family:inherit;padding:12px 0;border-bottom:1px solid #eee5dd;color:#51464a;font-size:13px;line-height:1.6}
.blog-toc button:hover,.blog-toc button:focus-visible{color:var(--primary)}
.blog-article-cover{display:block;width:100%;height:auto;margin-bottom:35px;border-radius:14px}
.blog-article section{padding:0;margin-bottom:35px;scroll-margin-top:calc(var(--blog-header-height,160px) + 25px)}
.blog-article p{margin:0 0 22px;color:#393236;font-size:15px;line-height:1.95}
.blog-article ul li{margin:0 0 22px;color:#393236;font-size:15px;line-height:1.95;}
.blog-article ul{list-style: disc;padding-left:20px;}
.blog-article h2,.blog-article h3{margin:0 0 20px;color:var(--primary);font-family:var(--title);font-weight:400;line-height:1.35}
.blog-article h2{font-size:32px}.blog-article h3{font-size:28px}
.blog-article h4{margin:26px 0 10px;color:var(--primary);font-size:17px;font-weight:600}
.blog-article p a{color:var(--primary);text-decoration:underline;text-underline-offset:4px}
@media(max-width:991px){.blog-detail-layout{grid-template-columns:220px minmax(0,1fr);gap:30px}}
@media(max-width:767px){.blog-article-heading{padding:35px 0 25px}.blog-detail-layout{grid-template-columns:1fr;gap:30px}.blog-toc{position:static;max-height:none;border-right:0;border-bottom:1px solid #eadbc7;padding-right:0}.blog-detail-section{padding-bottom:45px}.blog-article h2{font-size:27px}.blog-article h3{font-size:25px}}

/* Compact contents card, scoped to blog details. */
.blog-detail-page .blog-toc {
    padding: 24px 18px 18px;
    border: 1px solid #eadbc7;
    border-top: 3px solid var(--accent);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(104, 17, 38, .05);
    scrollbar-width: thin;
}
.blog-detail-page .blog-toc h2 {
    margin: 0 6px 18px;
    font-size: 25px;
}
.blog-detail-page .blog-toc nav {
    gap: 6px;
    counter-reset: contents;
}
.blog-detail-page .blog-toc button {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 11px 8px;
    border: 0;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.65;
    transition: background-color .2s, color .2s;
}
.blog-detail-page .blog-toc button::before {
    counter-increment: contents;
    content: counter(contents, decimal-leading-zero);
    padding-top: 1px;
    color: #ad843b;
    font-size: 11px;
    font-weight: 600;
}
.blog-detail-page .blog-toc button:hover,
.blog-detail-page .blog-toc button:focus-visible {
    background: #fff8ee;
    color: var(--primary);
}
.blog-detail-page .blog-toc button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
@media (max-width: 767px) {
    .blog-detail-page .blog-toc { padding: 22px 16px 16px; }
}