/* =====================================================================
   LANGBEIN ADR — BLOG + SINGLE POST CSS
   Paste into Appearance → Customize → Additional CSS
   (append below existing CSS — uses same tokens)
   Styles both blog index and single post template.
   ===================================================================== */

/* ---------- BLOG INDEX ---------- */
.lblog{
  font-family:var(--lb-sans);
  color:var(--lb-ink);
  background:var(--lb-paper);
  --page-gutter:clamp(20px, 2.75vw, 80px);
}

.lblog-header{
  background:var(--lb-paper-2);
  border-bottom:1px solid var(--lb-line);
  padding:80px var(--page-gutter) !important;
}
.lblog-h1{
  font-family:var(--lb-serif) !important;
  font-weight:500 !important;
  font-size:64px !important;
  line-height:1.05 !important;
  letter-spacing:-0.01em;
  margin:0 0 24px !important;
  color:var(--lb-ink);
  text-wrap:balance;
}
.lblog-h1 em{
  font-style:italic;
  font-weight:400;
  color:var(--lb-navy);
}
.lblog-lede{
  font-size:19px !important;
  line-height:1.6 !important;
  color:var(--lb-ink-2) !important;
  max-width:640px;
  margin:0 !important;
}

.lblog-posts{
  background:var(--lb-paper);
  padding:48px var(--page-gutter) 120px !important;
}
.lblog-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:24px !important;
}
.lblog-card:nth-child(n+11){ display:none; }
.lblog-card{
  background:#fff;
  border:1px solid var(--lb-line);
  border-radius:4px;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.lblog-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -20px rgba(11,60,93,0.2);
}
.lblog-card-img{
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--lb-paper-2);
}
.lblog-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.lblog-card:hover .lblog-card-img img{
  transform:scale(1.05);
}
.lblog-card-meta{
  padding:16px 18px 0;
  display:flex !important;
  gap:12px !important;
  font-family:var(--lb-mono);
  font-size:10px !important;
  text-transform:uppercase;
  letter-spacing:0.16em;
}
.lblog-card-cat a{
  color:var(--lb-teal) !important;
  text-decoration:none !important;
  font-weight:600 !important;
}
.lblog-card-date{
  color:var(--lb-ink-3) !important;
}
.lblog-card-title{
  padding:10px 18px 0;
  margin:0 !important;
}
.lblog-card-title a{
  font-family:var(--lb-serif) !important;
  font-weight:500 !important;
  font-size:20px !important;
  line-height:1.25 !important;
  color:var(--lb-ink) !important;
  text-decoration:none !important;
  transition:color .2s ease;
}
.lblog-card:hover .lblog-card-title a{
  color:var(--lb-navy) !important;
}
.lblog-card-excerpt{
  padding:8px 18px 0;
}
.lblog-card-excerpt p{
  font-size:14px !important;
  line-height:1.55 !important;
  color:var(--lb-ink-2) !important;
  margin:0 !important;
}
.lblog-card-more{
  display:inline-block;
  padding:18px;
  font-family:var(--lb-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:var(--lb-teal);
  text-decoration:none;
  transition:color .2s ease;
}
.lblog-card-more:hover{
  color:var(--lb-navy);
}

.lblog-pagination{
  margin-top:80px !important;
  display:flex !important;
  gap:12px !important;
  justify-content:center !important;
}
.lblog-pagination a,
.lblog-pagination .page-numbers{
  padding:10px 18px;
  font-family:var(--lb-mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--lb-ink-2);
  text-decoration:none;
  border:1px solid var(--lb-line);
  background:#fff;
  transition:all .2s ease;
}
.lblog-pagination a:hover,
.lblog-pagination .page-numbers.current{
  background:var(--lb-navy);
  color:#fff;
  border-color:var(--lb-navy);
}

/* ---------- SINGLE POST ---------- */
.lpost{
  font-family:var(--lb-sans);
  color:var(--lb-ink);
  background:var(--lb-paper);
  --page-gutter:clamp(20px, 2.75vw, 80px);
}
.lpost-header{
  background:linear-gradient(180deg, var(--lb-paper-2), var(--lb-paper));
  text-align:center;
  padding:88px var(--page-gutter) 52px !important;
}
.lpost-cat{
  display:inline-flex;
  font-family:var(--lb-mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--lb-teal);
  margin-bottom:20px;
}
.lpost-cat a{
  font-family:var(--lb-mono) !important;
  font-size:11px !important;
  text-transform:uppercase !important;
  letter-spacing:0.2em !important;
  color:var(--lb-teal) !important;
  text-decoration:none !important;
  font-weight:600 !important;
}
.lpost-title{
  font-family:var(--lb-serif) !important;
  font-weight:500 !important;
  font-size:clamp(44px, 4vw, 68px) !important;
  line-height:1.1 !important;
  letter-spacing:-0.01em;
  margin:0 auto 24px !important;
  color:var(--lb-ink) !important;
  text-wrap:balance;
  max-width:1120px;
}
.lpost-meta{
  display:flex !important;
  gap:12px !important;
  justify-content:center;
  font-family:var(--lb-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--lb-ink-3);
}
.lpost-sep{
  color:var(--lb-line);
}

.lpost-featured-img{
  display:block;
  width:100%;
  max-width:1180px;
  aspect-ratio:21/9;
  object-fit:cover;
  border-radius:4px;
  overflow:hidden;
  background:var(--lb-paper-2);
  margin:0 auto;
  box-shadow:0 24px 60px -42px rgba(11,60,93,0.45);
}
.lpost-featured-video{
  width:100%;
  max-width:1180px;
  margin:0 auto !important;
  background:var(--lb-navy);
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 24px 60px -42px rgba(11,60,93,0.55);
}
.lpost-featured-video iframe{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:0;
}
.lpost-featured{
  padding-left:var(--page-gutter) !important;
  padding-right:var(--page-gutter) !important;
  padding-bottom:56px !important;
  background:var(--lb-paper);
}

.lpost-content{
  background:#fff;
  padding:72px var(--page-gutter) 88px !important;
}
.lpost-content > *{
  max-width:920px;
  margin-left:auto !important;
  margin-right:auto !important;
}
.lpost-content p{
  font-size:19px !important;
  line-height:1.78 !important;
  color:var(--lb-ink-2) !important;
  margin:0 0 24px !important;
}
.lpost-content h2{
  font-family:var(--lb-serif) !important;
  font-weight:500 !important;
  font-size:42px !important;
  line-height:1.2 !important;
  margin:48px 0 20px !important;
  color:var(--lb-navy) !important;
}
.lpost-content h3{
  font-family:var(--lb-serif) !important;
  font-weight:500 !important;
  font-size:28px !important;
  line-height:1.3 !important;
  margin:36px 0 16px !important;
  color:var(--lb-ink) !important;
}
.lpost-content ul,
.lpost-content ol{
  font-size:18px;
  line-height:1.75;
  color:var(--lb-ink-2);
  margin:0 auto 24px !important;
  padding-left:1.35em;
  list-style-position:outside;
  text-align:left;
}
.lpost-content li{
  margin:0 0 8px;
  padding-left:4px;
}
.lpost-content blockquote{
  margin:40px 0;
  padding:28px 32px;
  border-left:3px solid var(--lb-teal);
  background:var(--lb-paper-2);
  font-family:var(--lb-serif);
  font-style:italic;
  font-size:22px;
  line-height:1.5;
  color:var(--lb-navy);
}
.lpost-video{
  margin:44px auto !important;
  max-width:920px;
}
.lpost-video iframe{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:0;
  border-radius:4px;
  background:var(--lb-navy);
  box-shadow:0 24px 60px -42px rgba(11,60,93,0.55);
}
.lpost-video figcaption{
  margin-top:12px;
  font-size:14px;
  line-height:1.5;
  color:var(--lb-ink-3);
  text-align:center;
}

.lpost-author-bio{
  background:var(--lb-paper-2);
  border-top:1px solid var(--lb-line);
  padding:64px var(--page-gutter) !important;
}
.lpost-bio-card{
  max-width:920px;
  margin:0 auto;
  padding:32px 36px;
  background:#fff;
  border:1px solid var(--lb-line);
  box-shadow:0 18px 42px -32px rgba(11,60,93,0.35);
}
.lpost-bio-avatar{
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  background:var(--lb-paper);
}
.lpost-bio-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.lpost-bio-name{
  font-family:var(--lb-serif);
  font-weight:500;
  font-size:26px;
  line-height:1.2;
  color:var(--lb-navy);
  margin-bottom:4px;
}
.lpost-bio-title{
  font-family:var(--lb-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:var(--lb-teal);
  margin-bottom:16px;
}
.lpost-bio-text{
  font-size:15px;
  line-height:1.6;
  color:var(--lb-ink-2);
  margin:0 0 16px;
}
.lpost-bio-link{
  font-family:var(--lb-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:var(--lb-teal);
  text-decoration:none;
  transition:color .2s ease;
}
.lpost-bio-link:hover{
  color:var(--lb-navy);
}

.lpost-related{
  background:var(--lb-paper);
  padding:80px var(--page-gutter) 120px !important;
}
.lpost-related-head{
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:56px;
}
.lpost-related-h2{
  font-family:var(--lb-serif) !important;
  font-weight:500 !important;
  font-size:44px !important;
  line-height:1.1 !important;
  margin:12px 0 0 !important;
  color:var(--lb-ink) !important;
}
.lpost-related-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:32px !important;
  max-width:1180px;
  margin:0 auto;
}

.lpost-cta-band{
  background:var(--lb-navy);
  color:#fff;
  padding:100px var(--page-gutter);
  position:relative;
  overflow:hidden;
}
.lpost-cta-band::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 500px 260px at 80% 50%, rgba(31,161,153,0.2), transparent 70%);
}
.lpost-cta-band-inner{
  max-width:none;
  margin:0 auto;
  position:relative;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:60px;
  align-items:center;
}
.lpost-cta-band h2{
  font-family:var(--lb-serif) !important;
  font-weight:500 !important;
  font-size:48px !important;
  line-height:1.1 !important;
  margin:0 !important;
  color:#fff !important;
  text-wrap:balance;
}
.lpost-cta-band h2 em{
  color:var(--lb-teal);
  font-style:italic;
}
.lpost-cta-band-sub{
  font-size:16px !important;
  line-height:1.6 !important;
  color:rgba(255,255,255,0.75) !important;
  margin-top:16px !important;
}
.lpost-cta-band-actions{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.lpost-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:16px 28px;
  border-radius:2px;
  font-family:var(--lb-sans);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:all .2s ease;
  border:1px solid transparent;
}
.lpost-btn-primary{
  background:var(--lb-teal);
  color:#fff;
}
.lpost-btn-primary:hover{
  background:var(--lb-teal-deep);
  transform:translateY(-1px);
  box-shadow:0 10px 24px -12px rgba(15,27,42,0.4);
}
.lpost-cta-contact{
  padding:24px 28px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  font-family:var(--lb-mono);
  font-size:13px;
  color:rgba(255,255,255,0.8);
  letter-spacing:0.08em;
  display:flex;
  align-items:center;
  gap:14px;
}
.lpost-cta-contact svg{
  color:var(--lb-teal);
  flex-shrink:0;
}
.lpost-cta-contact strong{
  color:#fff;
  font-weight:500;
  margin-left:auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .lblog-grid{
    grid-template-columns:repeat(3, 1fr) !important;
  }
  .lpost-related-grid{
    grid-template-columns:repeat(2, 1fr) !important;
  }
  .lpost-cta-band-inner{
    grid-template-columns:1fr;
    gap:40px;
  }
}

@media (max-width: 720px){
  .lblog-h1,
  .lpost-title{
    font-size:38px !important;
  }
  .lblog-grid,
  .lpost-related-grid{
    grid-template-columns:1fr !important;
  }
  .lpost-bio-card{
    grid-template-columns:1fr;
    text-align:center;
  }
  .lpost-bio-avatar{
    max-width:120px;
    margin:0 auto;
  }
  .lpost-cta-band{
    padding:72px 16px;
  }
  .lpost-cta-band h2{
    font-size:34px !important;
  }
}