/* ============================================================
   MOTTO Automotive - Blog / Article styles
   Loads after style.css; reuses fonts + brand colours.
   ============================================================ */
:root{
  --b-navy:#0A1D3A; --b-navy-2:#112a52; --b-gold:#C6A76E;
  --b-ink:#1a2233; --b-body:#3a4356; --b-muted:#6b7588;
  --b-line:#e6e9ef; --b-paper:#ffffff; --b-soft:#f5f7fa;
}
.blog-main{background:var(--b-soft);}

/* ---- shared hero band ---- */
.blog-hero{
  background:linear-gradient(160deg,#112a52 0%,#0A1D3A 70%);
  color:#fff; padding:140px 24px 56px; position:relative; overflow:hidden;
}
.blog-hero__inner{max-width:820px;margin:0 auto;position:relative;z-index:2;}
.blog-hero__kicker{
  font-family:'Manrope',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--b-gold);
}
.blog-hero h1{
  font-family:'Saira Condensed',sans-serif;font-weight:500;text-transform:uppercase;
  font-size:clamp(34px,5.2vw,60px);line-height:1.04;letter-spacing:-.01em;margin:14px 0 16px;
}
.blog-hero__meta{font-family:'Manrope',sans-serif;font-size:14px;color:#aebbd2;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.blog-hero__meta span:not(:last-child)::after{content:"·";margin-left:10px;color:#5b6c8c;}
.blog-hero__lede{font-family:'Manrope',sans-serif;font-size:18px;line-height:1.6;color:#d4ddec;margin-top:18px;max-width:680px;}

/* ---- breadcrumbs ---- */
.crumbs{max-width:820px;margin:0 auto;padding:18px 24px 0;font-family:'Manrope',sans-serif;font-size:13px;color:var(--b-muted);}
.crumbs a{color:var(--b-muted);text-decoration:none;}
.crumbs a:hover{color:var(--b-navy);}
.crumbs span{margin:0 6px;color:#bcc4d2;}

/* ---- article body ---- */
.article{max-width:820px;margin:0 auto;padding:0 24px 80px;}
.article__card{
  background:var(--b-paper);margin-top:-36px;position:relative;z-index:3;
  border-radius:14px;box-shadow:0 24px 60px rgba(10,29,58,.12);
  padding:clamp(28px,5vw,60px);
}
.article__figure{margin:0 0 30px;border-radius:10px;overflow:hidden;background:var(--b-soft);}
.article__figure img{width:100%;height:auto;display:block;}
.article__figure figcaption{font-family:'Manrope',sans-serif;font-size:13px;color:var(--b-muted);padding:10px 4px 0;}
.article__body{font-family:'Manrope',sans-serif;color:var(--b-body);font-size:17px;line-height:1.75;}
.article__body p{margin:0 0 20px;}
.article__body h2{
  font-family:'Saira Condensed',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:-.005em;
  color:var(--b-navy);font-size:clamp(24px,3.4vw,32px);margin:40px 0 14px;
}
.article__body h3{font-family:'Saira Condensed',sans-serif;font-weight:600;text-transform:uppercase;color:var(--b-ink);font-size:21px;margin:28px 0 10px;letter-spacing:.01em;}
.article__body a{color:#1d4ed8;text-decoration:underline;text-underline-offset:2px;}
.article__body strong{color:var(--b-ink);}
.article__body ul,.article__body ol{margin:0 0 22px;padding-left:22px;}
.article__body li{margin:0 0 9px;}
.article__body blockquote{
  margin:26px 0;padding:16px 22px;border-left:3px solid var(--b-gold);
  background:var(--b-soft);border-radius:0 8px 8px 0;
  font-size:19px;color:var(--b-ink);font-style:italic;
}
.article__body figure{margin:26px 0;}
.article__body figure img{width:100%;height:auto;border-radius:10px;display:block;}

/* ---- end CTA ---- */
.article__cta{
  margin-top:44px;padding:30px;border-radius:12px;
  background:linear-gradient(150deg,#112a52,#0A1D3A);color:#fff;text-align:center;
}
.article__cta h3{font-family:'Saira Condensed',sans-serif;font-weight:500;text-transform:uppercase;font-size:26px;margin:0 0 8px;color:#fff;}
.article__cta p{font-family:'Manrope',sans-serif;color:#c4d0e4;margin:0 0 18px;}
.article__cta .btn{display:inline-flex;}

/* ---- related / back link ---- */
.article__nav{max-width:820px;margin:0 auto;padding:8px 24px 70px;}
.article__nav a{font-family:'Manrope',sans-serif;font-weight:600;color:var(--b-navy);text-decoration:none;font-size:15px;}
.article__nav a:hover{color:var(--b-gold);}

/* ---- blog index grid ---- */
.blog-list{max-width:1080px;margin:0 auto;padding:48px 24px 90px;}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:26px;}
.post-card{
  background:#fff;border:1px solid var(--b-line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease;
}
.post-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(10,29,58,.14);}
.post-card__media{aspect-ratio:16/10;overflow:hidden;background:var(--b-soft);display:block;}
.post-card__media picture{display:block;width:100%;height:100%;}
.post-card__media img{width:100%;height:100%;object-fit:cover;display:block;}
.post-card__body{padding:22px;display:flex;flex-direction:column;flex:1;}
.post-card__cat{font-family:'Manrope',sans-serif;font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--b-gold);}
.post-card__title{font-family:'Saira Condensed',sans-serif;font-weight:500;text-transform:uppercase;color:var(--b-navy);font-size:23px;line-height:1.1;margin:10px 0 10px;}
.post-card__title a{color:inherit;text-decoration:none;}
.post-card__excerpt{font-family:'Manrope',sans-serif;color:var(--b-body);font-size:14.5px;line-height:1.6;flex:1;}
.post-card__more{font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;color:var(--b-navy);margin-top:16px;text-decoration:none;}
.post-card__more:hover{color:var(--b-gold);}

/* ---- Force solid nav on blog pages (no transparent-at-top state) ---- */
.blog-page .nav,
.blog-page .nav.is-scrolled{
  background:linear-gradient(135deg,rgba(0,76,130,.92) 0%,rgba(10,29,58,.96) 100%);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.blog-page .nav__brand,
.blog-page .nav__wordmark,
.blog-page .nav__link{color:#fff;}
.blog-page .nav__mark,
.blog-page .nav__mark img{background:transparent !important;background-color:transparent !important;}
.blog-page .nav__toggle span{background:#fff;}

/* ---- About / author page ---- */
.author-head{display:flex;gap:30px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
.author-photo-wrap{display:block;width:170px;height:170px;flex-shrink:0;}
.author-photo{width:170px;height:170px;border-radius:50%;object-fit:cover;object-position:center 30%;border:3px solid var(--b-gold);box-shadow:0 10px 30px rgba(10,29,58,.18);}
.author-head__name{font-family:'Saira Condensed',sans-serif;font-weight:500;text-transform:uppercase;color:var(--b-navy);font-size:34px;line-height:1.05;margin:0 0 6px;}
.author-head__role{font-family:'Manrope',sans-serif;font-weight:600;color:var(--b-ink);font-size:15px;margin:0 0 4px;}
.author-head__tag{font-family:'Manrope',sans-serif;color:var(--b-muted);font-size:14px;margin:0 0 14px;}
.btn-linkedin{display:inline-flex;align-items:center;gap:8px;background:#0A66C2;color:#fff;font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;padding:9px 16px;border-radius:8px;text-decoration:none;}
.btn-linkedin:hover{background:#08538f;}
.btn-linkedin svg{width:16px;height:16px;fill:#fff;}

/* ---- LinkedIn post embed ---- */
.li-post{margin:10px 0 6px;}
.li-card{border:1px solid var(--b-line);border-radius:12px;padding:22px 24px;background:#fff;}
.li-card__head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.li-card__avatar{width:46px;height:46px;border-radius:50%;background:#0A1D3A;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.li-card__avatar img{width:100%;height:100%;object-fit:contain;padding:6px;}
.li-card__who b{font-family:'Manrope',sans-serif;color:var(--b-ink);font-size:15px;display:block;}
.li-card__who span{font-family:'Manrope',sans-serif;color:var(--b-muted);font-size:12.5px;}
.li-card__text{font-family:'Manrope',sans-serif;color:var(--b-body);font-size:15.5px;line-height:1.7;}
.li-card__text a{color:#0A66C2;text-decoration:none;}
.li-card__text a:hover{text-decoration:underline;}
.li-embed{width:100%;border:1px solid var(--b-line);border-radius:12px;margin-top:16px;background:#fff;}
.li-viewlink{display:inline-block;margin-top:12px;font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;color:#0A66C2;text-decoration:none;}

/* ---- Homepage Insights section: centered header + centered grid ---- */
#blog .collection__head{grid-template-columns:1fr;justify-items:center;text-align:center;max-width:760px;margin-left:auto;margin-right:auto;}
#blog .collection__intro{max-width:58ch;margin-left:auto;margin-right:auto;}
#blog .blog-grid{max-width:1120px;margin-left:auto;margin-right:auto;}

.blog-hero__meta a{color:#fff;text-decoration:underline;text-underline-offset:2px;}

/* ---- Article author box (E-E-A-T) ---- */
.author-box{display:flex;gap:16px;align-items:flex-start;margin:40px 0 0;padding:20px 22px;border:1px solid var(--b-line);border-radius:12px;background:var(--b-soft);font-family:'Manrope',sans-serif;font-size:14.5px;line-height:1.65;color:var(--b-body);}
.author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--b-gold);flex-shrink:0;}
.author-box__label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--b-muted);font-weight:600;margin-bottom:4px;}
.author-box b a{color:var(--b-navy);text-decoration:none;}
.author-box b a:hover{color:var(--b-gold);}
.author-box__li{display:inline-block;margin-top:6px;color:#0A66C2;text-decoration:none;font-weight:600;}