/**
 * Beverly Hills Lux Ride — Blog Styles
 * Integrated with main site theme system
 * v1.0 — 2026-03-29
 */

/* ============================================
   BLOG HUB — GRID & CARDS
   ============================================ */
.blog-hub{padding:clamp(100px,12vw,140px) 0 60px}
.blog-container{max-width:1200px;margin:0 auto;padding:0 24px}

.blog-hero{text-align:center;margin-bottom:60px}
.blog-hero-label{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border-radius:100px;background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.2);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#D4AF37;margin-bottom:20px}
.blog-hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(32px,6vw,56px);font-weight:700;color:var(--text-primary);line-height:1.1;margin-bottom:16px}
.blog-hero h1 em{color:#D4AF37;font-style:normal}
.blog-hero-sub{font-size:clamp(14px,1.8vw,17px);color:var(--text-secondary);max-width:700px;margin:0 auto;line-height:1.7}

.blog-stats{display:flex;justify-content:center;gap:40px;margin-top:30px;flex-wrap:wrap}
.blog-stat{text-align:center}
.blog-stat-num{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,4vw,42px);font-weight:700;color:#D4AF37;line-height:1}
.blog-stat-lbl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-top:4px}

/* Section headers */
.blog-sh{margin-bottom:36px}
.blog-sh-label{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#D4AF37;margin-bottom:10px}
.blog-sh-title{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,3.5vw,36px);font-weight:700;color:var(--text-primary)}
.blog-sh-title em{color:#D4AF37;font-style:normal}

/* Featured card */
.blog-featured{display:flex;gap:32px;padding:32px;border-radius:20px;background:var(--bg-card,rgba(255,255,255,.03));border:1px solid var(--border-color,rgba(255,255,255,.08));text-decoration:none;color:inherit;transition:all .3s cubic-bezier(.16,1,.3,1);margin-bottom:48px}
.blog-featured:hover{border-color:rgba(212,175,55,.3);transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.2)}
.blog-featured-body{flex:1}
.blog-featured-cat{display:inline-block;padding:4px 12px;border-radius:100px;background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.2);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#D4AF37;margin-bottom:14px}
.blog-featured-title{font-family:'Cormorant Garamond',serif;font-size:clamp(22px,3vw,32px);font-weight:700;color:var(--text-primary);margin-bottom:12px;line-height:1.2}
.blog-featured-excerpt{font-size:15px;color:var(--text-secondary);line-height:1.7;margin-bottom:16px}
.blog-featured-meta{display:flex;gap:16px;font-size:13px;color:var(--text-muted)}
.blog-featured-icon{display:flex;align-items:center;justify-content:center;width:80px;flex-shrink:0}
.blog-featured-icon svg{width:48px;height:48px;stroke:rgba(212,175,55,.4);stroke-width:1.2;fill:none}

/* Blog grid */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px;margin-bottom:48px}

/* Blog card */
.blog-card{display:flex;flex-direction:column;padding:28px;border-radius:16px;background:var(--bg-card,rgba(255,255,255,.03));border:1px solid var(--border-color,rgba(255,255,255,.08));text-decoration:none;color:inherit;transition:all .3s cubic-bezier(.16,1,.3,1)}
.blog-card:hover{border-color:rgba(212,175,55,.3);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.15)}

.bc-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.bc-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(212,175,55,.08);flex-shrink:0}
.bc-icon svg{width:20px;height:20px;stroke:#D4AF37;stroke-width:2;fill:none}
.bc-meta{display:flex;flex-direction:column}
.bc-cat{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#D4AF37}
.bc-date{font-size:12px;color:var(--text-muted)}

.bc-title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:10px;line-height:1.3}
.bc-excerpt{font-size:14px;color:var(--text-secondary);line-height:1.65;margin-bottom:16px;flex:1}
.bc-footer{display:flex;justify-content:space-between;align-items:center}
.bc-read{font-size:13px;font-weight:600;color:#D4AF37;display:flex;align-items:center;gap:6px}
.bc-read svg{width:14px;height:14px}
.bc-time{font-size:12px;color:var(--text-muted)}

/* CTA Section */
.blog-cta{text-align:center;padding:48px 32px;border-radius:20px;background:linear-gradient(135deg,rgba(212,175,55,.06),rgba(212,175,55,.02));border:1px solid rgba(212,175,55,.15);margin-bottom:48px}
.blog-cta-title{font-family:'Cormorant Garamond',serif;font-size:clamp(22px,3vw,32px);font-weight:700;color:var(--text-primary);margin-bottom:8px}
.blog-cta-title em{color:#D4AF37;font-style:normal}
.blog-cta-sub{font-size:14px;color:var(--text-secondary);margin-bottom:20px}
.blog-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.blog-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:100px;font-size:14px;font-weight:600;text-decoration:none;transition:all .3s ease}
.blog-cta-btn.gold{background:linear-gradient(135deg,#D4AF37,#B8941F);color:#000}
.blog-cta-btn.gold:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,175,55,.4)}
.blog-cta-btn.outline{border:1px solid var(--border-color);color:var(--text-secondary)}
.blog-cta-btn.outline:hover{border-color:rgba(212,175,55,.4);color:#D4AF37}
.blog-cta-btn svg{width:16px;height:16px}

/* CEO callout */
.blog-ceo{display:flex;gap:24px;padding:28px;border-radius:16px;background:var(--bg-card,rgba(255,255,255,.03));border:1px solid var(--border-color,rgba(255,255,255,.08));text-decoration:none;color:inherit;transition:all .3s ease;margin-bottom:48px}
.blog-ceo:hover{border-color:rgba(212,175,55,.2)}
.blog-ceo-img{width:60px;height:60px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid rgba(212,175,55,.3)}
.blog-ceo-img img{width:100%;height:100%;object-fit:cover}
.blog-ceo-name{font-weight:700;color:var(--text-primary);font-size:16px}
.blog-ceo-role{font-size:12px;color:#D4AF37;margin-bottom:8px}
.blog-ceo-text{font-size:14px;color:var(--text-secondary);line-height:1.6}

/* ============================================
   BLOG POST — ARTICLE STYLES
   ============================================ */
.blog-post{padding:clamp(100px,12vw,140px) 0 60px}
.blog-post-container{max-width:820px;margin:0 auto;padding:0 24px}

/* Post header */
.bp-header{text-align:center;margin-bottom:48px}
.bp-cat{display:inline-block;padding:6px 16px;border-radius:100px;background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.2);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#D4AF37;margin-bottom:16px}
.bp-title{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,5vw,48px);font-weight:700;color:var(--text-primary);line-height:1.12;margin-bottom:16px}
.bp-subtitle{font-size:clamp(14px,1.6vw,17px);color:var(--text-secondary);max-width:650px;margin:0 auto 20px;line-height:1.7}
.bp-meta{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}
.bp-meta a{color:#D4AF37;text-decoration:none}
.bp-meta svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px;stroke:currentColor;fill:none}

/* Article body */
.bp-body{margin-bottom:48px}
.bp-body h2{font-family:'Cormorant Garamond',serif;font-size:clamp(22px,3vw,30px);font-weight:700;color:var(--text-primary);margin:40px 0 16px;line-height:1.2}
.bp-body h3{font-size:18px;font-weight:700;color:var(--text-primary);margin:28px 0 12px}
.bp-body p{font-size:16px;color:var(--text-secondary);line-height:1.85;margin-bottom:16px}
.bp-body ul,.bp-body ol{padding-left:24px;margin-bottom:16px}
.bp-body li{font-size:16px;color:var(--text-secondary);line-height:1.7;margin-bottom:8px;padding-left:8px}
.bp-body li::marker{color:#D4AF37}
.bp-body strong{color:var(--text-primary)}
.bp-body a{color:#D4AF37;text-decoration:none;border-bottom:1px solid rgba(212,175,55,.3)}
.bp-body a:hover{border-bottom-color:#D4AF37}

/* Glass card sections */
.bp-card{padding:32px;border-radius:16px;background:var(--bg-card,rgba(255,255,255,.03));border:1px solid var(--border-color,rgba(255,255,255,.08));margin-bottom:24px}
.bp-card h2{margin-top:0}

/* Highlight box */
.bp-highlight{padding:24px 28px;border-radius:12px;border-left:3px solid #D4AF37;background:rgba(212,175,55,.04);margin:24px 0}
.bp-highlight p{margin-bottom:0}

/* FAQ */
.bp-faq{margin:48px 0}
.bp-faq-title{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,3vw,32px);font-weight:700;color:var(--text-primary);text-align:center;margin-bottom:28px}
.bp-faq details{border-bottom:1px solid var(--border-color,rgba(255,255,255,.08));padding:20px 0}
.bp-faq details:first-of-type{border-top:1px solid var(--border-color,rgba(255,255,255,.08))}
.bp-faq summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:600;color:var(--text-primary);list-style:none}
.bp-faq summary::-webkit-details-marker{display:none}
.bp-faq summary::after{content:'+';font-size:22px;color:#D4AF37;font-weight:300;transition:transform .3s}
.bp-faq details[open] summary::after{transform:rotate(45deg)}
.bp-faq .bp-faq-answer{padding:12px 0 4px;font-size:15px;color:var(--text-secondary);line-height:1.75}

/* Related posts */
.bp-related{margin:48px 0}
.bp-related-title{font-family:'Cormorant Garamond',serif;font-size:clamp(22px,3vw,28px);font-weight:700;color:var(--text-primary);text-align:center;margin-bottom:24px}
.bp-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.bp-related-card{padding:20px;border-radius:14px;background:var(--bg-card,rgba(255,255,255,.03));border:1px solid var(--border-color,rgba(255,255,255,.08));text-decoration:none;text-align:center;transition:all .3s ease}
.bp-related-card:hover{border-color:rgba(212,175,55,.3);transform:translateY(-3px)}
.bp-related-card h4{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:4px}
.bp-related-card p{font-size:12px;color:var(--text-muted)}

/* Post CTA */
.bp-cta{text-align:center;padding:40px 28px;border-radius:16px;background:linear-gradient(135deg,rgba(212,175,55,.08),rgba(212,175,55,.02));border:1px solid rgba(212,175,55,.15);margin:48px 0}
.bp-cta h3{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:8px}
.bp-cta p{font-size:14px;color:var(--text-secondary);margin-bottom:16px}
.bp-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Breadcrumb */
.bp-breadcrumb{padding:clamp(90px,10vw,110px) 0 0;max-width:820px;margin:0 auto;padding-left:24px;padding-right:24px}
.bp-breadcrumb a,.bp-breadcrumb span{font-size:13px;color:var(--text-muted);text-decoration:none}
.bp-breadcrumb a:hover{color:#D4AF37}
.bp-breadcrumb .sep{margin:0 8px;opacity:.5}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:768px){
  .blog-grid{grid-template-columns:1fr}
  .blog-featured{flex-direction:column}
  .blog-featured-icon{width:100%;height:60px}
  .blog-stats{gap:24px}
  .blog-ceo{flex-direction:column;text-align:center}
  .blog-ceo-img{margin:0 auto}
  .bp-related-grid{grid-template-columns:1fr 1fr}
  .bp-cta-btns{flex-direction:column;align-items:center}
}
@media(max-width:480px){
  .bp-related-grid{grid-template-columns:1fr}
  .bp-meta{flex-direction:column;gap:8px}
}