/*
Theme Name: Ambani Book Child
Theme URI: https://ambanibook.id/
Description: Custom blog layout for Ambani Book using Astra as the parent theme.
Author: Ambani Book
Template: astra
Version: 1.1.0
*/

.ab-blog-wrap{max-width:1180px;margin:30px auto;padding:0 20px}
.ab-breadcrumb{font-size:14px;color:#6b7280;margin:0 0 18px}
.ab-breadcrumb a{color:#4b5563;text-decoration:none}
.ab-hero{position:relative;overflow:hidden;border-radius:18px;background:#111827;margin-bottom:28px}
.ab-hero img{display:block;width:100%;height:430px;object-fit:cover}
.ab-hero-title{position:absolute;left:0;right:0;bottom:0;padding:90px 34px 28px;background:linear-gradient(transparent,rgba(0,0,0,.9));color:#fff}
.ab-hero-title h1{margin:0;max-width:900px;color:#fff;font-size:42px;line-height:1.18}
.ab-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px;align-items:start}
.ab-main,.ab-side-box,.ab-related{background:#fff;border-radius:16px;padding:28px;box-shadow:0 5px 24px rgba(0,0,0,.06)}
.ab-meta{font-size:14px;color:#707782;margin:-4px 0 22px}
.ab-content h2,.ab-content h3{line-height:1.35}
.ab-content img{max-width:100%;height:auto;border-radius:12px}
.ab-side{display:flex;flex-direction:column;gap:20px}
.ab-side-box h2,.ab-related h2,.ab-faq h2{font-size:22px;margin:0 0 15px}
.ab-side-post{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #e7e9ed;text-decoration:none!important;color:#20242a}
.ab-side-post:last-child{border-bottom:0}
.ab-side-post img{width:88px;height:66px;object-fit:cover;border-radius:9px;flex:none;background:#eee}
.ab-side-post span{display:flex;flex-direction:column;min-width:0}
.ab-side-post strong{font-size:14px;line-height:1.35}
.ab-side-post small{color:#7b818b;font-size:12px;margin-top:5px}
.ab-related{margin-top:25px}
.ab-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ab-related-card{text-decoration:none!important;color:#20242a;border:1px solid #e8e9ec;border-radius:12px;overflow:hidden}
.ab-related-card img{width:100%;height:145px;object-fit:cover;display:block;background:#eee}
.ab-related-card strong{display:block;padding:12px;font-size:15px;line-height:1.4}
.ab-faq{margin-top:28px}
.ab-faq details{border:1px solid #e5e7eb;border-radius:10px;padding:12px 15px;margin:10px 0}
.ab-faq summary{font-weight:700;cursor:pointer}
.ab-no-image{height:430px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px}
@media(max-width:900px){
 .ab-layout{grid-template-columns:1fr}
 .ab-hero img,.ab-no-image{height:340px}
}
@media(max-width:600px){
 .ab-blog-wrap{padding:0 12px}
 .ab-main,.ab-side-box,.ab-related{padding:20px}
 .ab-hero img,.ab-no-image{height:260px}
 .ab-hero-title{padding:65px 18px 18px}
 .ab-hero-title h1{font-size:28px}
 .ab-related-grid{grid-template-columns:1fr}
}

/* Keep blog sidebar visible while scrolling */
.ab-side {
    position: sticky;
    top: 90px;
    align-self: start;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    scrollbar-width: thin;
}

@media (max-width: 900px) {
    .ab-side {
        position: static;
        max-height: none;
        overflow: visible;
    }
}