/* =====================================================================
   360 HOTEL SOLUTIONS - blog-detail.css
   Page-specific styles for the single Blog Post page.
   Builds on the shared .hero-glow / .eyebrow / .hero-pill / .cta-band
   components already defined in style.css, rather than inventing
   parallel one-off styles.
   ===================================================================== */

.blog-detail-hero-band{position:relative;overflow:hidden;background:var(--white);padding:clamp(44px,7vw,76px) 0 40px;text-align:center;}
.blog-detail-hero-inner{position:relative;z-index:1;max-width:760px;margin:0 auto;}

.blog-breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted-light);margin-bottom:20px;}
.blog-breadcrumb a{color:var(--muted-light);transition:color .15s;}
.blog-breadcrumb a:hover{color:var(--blue);}
.blog-breadcrumb .sep{color:var(--gray);}
.blog-breadcrumb .current{color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;}

.blog-detail-hero-inner h1{font-size:clamp(28px,4vw,44px);line-height:1.12;letter-spacing:-0.02em;margin-bottom:22px;}

.blog-detail-pills{margin-bottom:0;justify-content:center;}
.hero-pill.accent{background:var(--tint-blue);color:var(--blue);border-color:rgba(14,99,255,0.25);}
.hero-pill.accent .ico{color:var(--blue);}

.blog-detail-main{background:var(--white);padding:0 0 96px;}
.blog-detail-wrap{max-width:760px;padding-top:50px}

.blog-detail-hero{border-radius:var(--radius);overflow:hidden;margin-bottom:36px;background:var(--bg);box-shadow:0 30px 70px -40px rgba(2,15,77,0.35);}
.blog-detail-hero img{width:100%;aspect-ratio:1200/630;object-fit:cover;display:block;}

.blog-detail-body{font-size:15.5px;line-height:1.8;color:var(--muted);}
.blog-detail-body>*+*{margin-top:18px;}
.blog-detail-body h2{font-size:clamp(19px,2.2vw,24px);line-height:1.3;color:var(--navy);margin-top:36px;}
.blog-detail-body h3{font-size:clamp(17px,1.8vw,20px);line-height:1.35;color:var(--navy);margin-top:30px;}
.blog-detail-body p{margin:0;}
.blog-detail-body ul,.blog-detail-body ol{display:grid;gap:10px;padding-left:22px;}
.blog-detail-body li{color:var(--muted);}
.blog-detail-body ul li{list-style:disc;}
.blog-detail-body ol li{list-style:decimal;}
.blog-detail-body strong{color:var(--navy);font-weight:800;}
.blog-detail-body a{color:var(--blue);font-weight:700;}
.blog-detail-body a:hover{color:var(--purple);}
.blog-detail-body img{width:100%;border-radius:16px;display:block;}

.blog-detail-body blockquote{background:var(--tint-blue);border-left:4px solid var(--blue);border-radius:0 16px 16px 0;padding:22px 26px;font-style:italic;color:var(--navy);font-size:16.5px;line-height:1.6;}
.blog-detail-body blockquote p{margin:0;}
.blog-detail-body blockquote cite,.blog-detail-body blockquote footer{display:block;margin-top:10px;font-style:normal;font-weight:800;font-size:13.5px;color:var(--blue);}

.blog-detail-author{display:flex;align-items:center;gap:16px;margin-top:48px;padding:22px;background:#fff;border:1px solid var(--gray);border-radius:var(--radius);box-shadow:0 24px 56px -34px rgba(2,15,77,0.2);}
.blog-detail-avatar{width:48px;height:48px;border-radius:50%;background:rgba(14,99,255,0.1);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.blog-detail-avatar svg{width:24px;height:24px;}
.blog-detail-author-name{font-size:15px;font-weight:800;color:var(--navy);}
.blog-detail-author-role{font-size:13px;color:var(--muted);}

@media(max-width:640px){
  .blog-detail-hero-band{padding:36px 0 32px;}
}