/* =========================================================
   BenTreder.com blog sync
   Matches global + comfort theme styling
   ========================================================= */

body.blogPage .wrap{
  width:min(calc(100% - 28px), 1120px);
}

body.blogPage main{
  position:relative;
  z-index:2;
}

body.blogPage .blog-shell{
  display:grid;
  gap:18px;
}

body.blogPage .blog-hero-card,
body.blogPage .blog-content-card,
body.blogPage .blog-list-card,
body.blogPage article,
body.blogPage .post,
body.blogPage .post-card,
body.blogPage .article-card,
body.blogPage .blog-card{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.76)),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(239,246,241,.88)) !important;
  border:1px solid rgba(21,42,35,.11) !important;
  border-radius:28px !important;
  box-shadow:0 18px 48px rgba(34,55,45,.13) !important;
  padding:28px !important;
  color:#17211d !important;
}

body.blogPage .blog-hero-card::before,
body.blogPage .blog-content-card::before,
body.blogPage .blog-list-card::before,
body.blogPage article::before,
body.blogPage .post::before,
body.blogPage .post-card::before,
body.blogPage .article-card::before,
body.blogPage .blog-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 180px at 0% 0%, rgba(89,168,126,.10), transparent 58%),
    radial-gradient(420px 160px at 100% 0%, rgba(199,159,89,.06), transparent 60%);
}

body.blogPage h1{
  margin:0 0 12px;
  color:#17211d !important;
  font-size:clamp(34px, 6vw, 58px) !important;
  line-height:1.02 !important;
  letter-spacing:-.04em !important;
  font-weight:1000 !important;
}

body.blogPage h2{
  color:#17211d !important;
  font-size:clamp(26px, 4vw, 40px) !important;
  line-height:1.06 !important;
  letter-spacing:-.03em !important;
  font-weight:1000 !important;
  margin:28px 0 10px !important;
}

body.blogPage h3{
  color:#17211d !important;
  font-size:clamp(20px, 3vw, 28px) !important;
  line-height:1.12 !important;
  letter-spacing:-.02em !important;
  font-weight:950 !important;
  margin:22px 0 8px !important;
}

body.blogPage p,
body.blogPage li{
  color:#53635c !important;
  font-size:16px !important;
  line-height:1.8 !important;
  font-weight:700 !important;
}

body.blogPage ul,
body.blogPage ol{
  padding-left:1.2rem;
}

body.blogPage a{
  overflow-wrap:anywhere;
}

body.blogPage main a:not(.btn):not(.pill):not(.tag):not(.proof):not(.mobileDrawerLink):not(.mobileDrawerMini):not(.dock a){
  color:#2f5a49 !important;
  text-decoration:none !important;
}

body.blogPage main a:not(.btn):not(.pill):not(.tag):not(.proof):not(.mobileDrawerLink):not(.mobileDrawerMini):not(.dock a):hover{
  color:#1d4636 !important;
}

body.blogPage blockquote{
  margin:20px 0 !important;
  padding:18px 20px !important;
  border-left:3px solid rgba(85,174,123,.72) !important;
  border-radius:0 18px 18px 0 !important;
  background:rgba(255,255,255,.72) !important;
  color:#53635c !important;
}

body.blogPage table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:18px;
  background:rgba(255,255,255,.74) !important;
  border:1px solid rgba(21,42,35,.10) !important;
  display:block;
  overflow-x:auto;
}

body.blogPage th,
body.blogPage td{
  padding:12px 14px !important;
  text-align:left;
  border-bottom:1px solid rgba(21,42,35,.08) !important;
}

body.blogPage th{
  color:#17211d !important;
  font-weight:900 !important;
  background:rgba(255,255,255,.82) !important;
}

body.blogPage td{
  color:#53635c !important;
}

body.blogPage img{
  border-radius:20px;
}

body.blogPage .blog-post-list,
body.blogPage .post-list,
body.blogPage .article-list{
  display:grid;
  gap:16px;
}

body.blogPage .blog-post-list a,
body.blogPage .post-list a,
body.blogPage .article-list a,
body.blogPage .post-preview,
body.blogPage .blog-preview{
  display:block;
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(21,42,35,.11);
  background:
    radial-gradient(360px 160px at 0% 0%, rgba(89,168,126,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,250,246,.82));
  box-shadow:0 14px 30px rgba(34,55,45,.10);
  transition:transform .18s ease, filter .18s ease, border-color .18s ease;
}

body.blogPage .blog-post-list a:hover,
body.blogPage .post-list a:hover,
body.blogPage .article-list a:hover,
body.blogPage .post-preview:hover,
body.blogPage .blog-preview:hover{
  transform:translateY(-2px);
  filter:brightness(1.015);
  border-color:rgba(85,174,123,.24);
}

body.blogPage .breadcrumbs{
  margin:6px 0 18px;
}

@media (max-width:860px){
  body.blogPage .wrap{
    width:min(calc(100% - 16px), 1120px);
  }

  body.blogPage .blog-hero-card,
  body.blogPage .blog-content-card,
  body.blogPage .blog-list-card,
  body.blogPage article,
  body.blogPage .post,
  body.blogPage .post-card,
  body.blogPage .article-card,
  body.blogPage .blog-card{
    padding:20px !important;
    border-radius:22px !important;
  }

  body.blogPage h1{
    font-size:clamp(30px, 8vw, 44px) !important;
  }
}