/* Editorial blog post layer (tripsterdevelopers.com, 2026-09-25).
   Loaded by shared/header.php only on body.page-blog-post. Restyles the existing post markup and the
   figures added by shared/post-visuals.php (.pv-cover, .pv-band, .pv-trio). Typography follows the site:
   Outfit 400 headings, Inter 400 body (assets/css/type.css). Handoff: Website/SITE-REVAMP-2026-09.md */
body.page-blog-post{--pv-ink:#0F172A;--pv-text:#334155;--pv-mute:#475569;--pv-line:#E2E8F0;--pv-red:#DC2626;--pv-tone:#F4F1EC;background:#FFFFFF}

/* header: left aligned, wide, calm (no pink glow) */
body.page-blog-post .post-hero{background:#FFFFFF!important;padding:clamp(40px,6vw,88px) 0 clamp(28px,3vw,40px)!important;text-align:left!important}
body.page-blog-post .post-hero::before,body.page-blog-post .post-hero::after{display:none!important}
body.page-blog-post .post-hero .td-container-sm{max-width:1200px!important;padding:0 clamp(16px,4vw,40px)}
body.page-blog-post .post-hero .breadcrumb{justify-content:flex-start!important;margin-bottom:22px}
body.page-blog-post .post-meta-top{justify-content:flex-start!important;flex-wrap:wrap;gap:10px 14px}
body.page-blog-post .post-title{font-family:'Outfit','Outfit Fallback',sans-serif!important;font-weight:400!important;font-size:clamp(2.3rem,5.2vw,4.4rem)!important;line-height:1.04!important;letter-spacing:-.025em!important;color:var(--pv-ink)!important;max-width:11.808em;margin:18px 0 22px!important;text-align:left!important}
body.page-blog-post .post-lead{font-size:clamp(1.1rem,1.5vw,1.35rem)!important;line-height:1.6!important;color:var(--pv-text)!important;max-width:39.1134em;text-align:left!important;margin:0!important}

/* cover */
.pv-cover{margin:0 0 clamp(40px,5vw,72px)}
.pv-cover .pv-in{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.pv-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:clamp(16px,2vw,28px);background:var(--pv-tone);box-shadow:0 30px 80px -40px rgba(15,23,42,.45)}

/* reading column */
body.page-blog-post .post-content-section{padding-top:0!important;background:#FFFFFF!important}
body.page-blog-post .post-content-section .td-container-sm{max-width:760px!important}
body.page-blog-post .post-content,body.page-blog-post .content-body{font-size:1.125rem;line-height:1.8;color:var(--pv-text)}
body.page-blog-post .content-body>p,body.page-blog-post .content-body>ul>li,body.page-blog-post .content-body>ol>li{color:var(--pv-text)}
body.page-blog-post .content-body > p:first-of-type{font-size:1.25rem;line-height:1.7;color:var(--pv-ink)}
body.page-blog-post .post-content h2,body.page-blog-post .content-body h2{font-family:'Outfit','Outfit Fallback',sans-serif!important;font-weight:400!important;font-size:clamp(1.75rem,3vw,2.4rem)!important;line-height:1.15!important;letter-spacing:-.015em;color:var(--pv-ink)!important;margin:clamp(48px,6vw,72px) 0 18px!important;padding-top:28px;border-top:1px solid var(--pv-line)}
body.page-blog-post .post-content>h3,body.page-blog-post .content-body>h3{font-family:'Outfit','Outfit Fallback',sans-serif!important;font-weight:400!important;font-size:1.4rem!important;color:var(--pv-ink)!important;margin:36px 0 12px!important}
body.page-blog-post .content-body a:not([class]){color:#B91C1C;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
body.page-blog-post .content-body table{font-size:.98rem}
body.page-blog-post .post-callout{border-radius:16px!important}

/* figures set into the article: break out wider than the text column */
.pv-band,.pv-trio{margin:clamp(40px,5vw,64px) calc(50% - min(50vw - 16px, 520px));}
.pv-band img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;border-radius:20px;background:var(--pv-tone);box-shadow:0 24px 60px -34px rgba(15,23,42,.45);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.pv-band > a:hover img{transform:translateY(-4px)}
.pv-band figcaption,.pv-trio figcaption{margin-top:12px;font-size:.92rem;line-height:1.5;color:var(--pv-mute)}
.pv-band figcaption a,.pv-trio figcaption a{color:var(--pv-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pv-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,20px);background:var(--pv-tone);border-radius:24px;padding:clamp(14px,2.4vw,28px)}
.pv-trio span{display:block}
.pv-trio img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:14px;background:#EAE6DF}
.pv-trio figcaption{grid-column:1/-1;margin-top:4px}
@media(max-width:600px){.pv-band,.pv-trio{margin-left:0;margin-right:0}}
body.page-blog-post .post-body .td-container-sm{max-width:760px!important}

/* contrast fixes on shared blog parts (WCAG AA, 2026-09-25) */
body.page-blog-post .breadcrumb .sep,body.page-blog .breadcrumb .sep{color:#64748B!important}
.post-tag{background:#B91C1C!important;color:#FFFFFF!important}
.dotc.y{color:#15803D!important}.dotc.n{color:#475569!important}
/* cross-sell accents are set inline per app; darken them just enough for AA */
.blog-cross-sell-kicker,.blog-cross-sell-learn{color:#1E293B!important}
.blog-cross-sell-cta{color:#FFFFFF!important;background-image:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3))!important}
body.page-blog-post .content-body a.td-btn-primary,body.page-blog-post .post-content a.td-btn-primary{color:#FFFFFF!important}
.r-pill{background:#15803D!important}

/* ---- blog index (body.page-blog), editorial layout on the existing markup (2026-09-25) ---- */
body.page-blog{background:#FFFFFF}
body.page-blog .blog-hero{background:#FFFFFF!important;text-align:left!important;padding:clamp(48px,7vw,104px) 0 clamp(20px,3vw,36px)!important}
body.page-blog .blog-hero .hero-glow{display:none!important}
body.page-blog .blog-hero .td-container,body.page-blog .blog-filter-nav .td-container,body.page-blog .blog-grid-section .td-container{max-width:1240px!important;padding:0 clamp(16px,4vw,40px)}
body.page-blog .blog-hero .breadcrumb{justify-content:flex-start!important}
body.page-blog .hero-title{font-family:'Outfit','Outfit Fallback',sans-serif!important;font-weight:400!important;font-size:clamp(2.8rem,7vw,6rem)!important;line-height:1!important;letter-spacing:-.03em!important;color:#0F172A!important;text-align:left!important;margin:20px 0 22px!important;max-width:14ch}
body.page-blog .hero-title .text-gradient{background:none!important;-webkit-text-fill-color:#0F172A!important;color:#0F172A!important}
body.page-blog .hero-subtitle{text-align:left!important;margin:0!important;max-width:60ch;font-size:clamp(1.05rem,1.4vw,1.25rem)!important;line-height:1.65!important;color:#334155!important}
body.page-blog .blog-filter-nav{background:#FFFFFF!important;border:0!important;position:static!important;padding:8px 0 clamp(24px,3vw,40px)!important}
body.page-blog .filter-list{justify-content:flex-start!important;flex-wrap:wrap;gap:8px!important}
body.page-blog .filter-link{border:1px solid #E2E8F0!important;background:#FFFFFF!important;color:#334155!important;border-radius:999px!important;padding:9px 16px!important;font-weight:500!important}
body.page-blog .filter-link.active{background:#0F172A!important;border-color:#0F172A!important;color:#FFFFFF!important}
body.page-blog .blog-grid-section{background:#FFFFFF!important;padding-top:0!important}
body.page-blog .blog-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(28px,3vw,44px) clamp(20px,2.4vw,32px)!important}
body.page-blog .blog-card{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important}
body.page-blog .blog-card .card-inner{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
body.page-blog .card-image-wrap{border-radius:18px!important;overflow:hidden;aspect-ratio:16/10;background:#F4F1EC}
body.page-blog .card-image{width:100%!important;height:100%!important;object-fit:cover!important;transition:transform .8s cubic-bezier(.16,1,.3,1)}
body.page-blog .blog-card:hover .card-image{transform:scale(1.04)}
body.page-blog .card-tag{background:#FFFFFF!important;color:#0F172A!important;border-radius:999px!important;font-weight:600!important}
body.page-blog .card-content{padding:18px 0 0!important}
body.page-blog .card-meta{color:#475569!important}
body.page-blog .card-title{font-family:'Outfit','Outfit Fallback',sans-serif!important;font-weight:400!important;font-size:clamp(1.25rem,1.6vw,1.5rem)!important;line-height:1.2!important;color:#0F172A!important;margin:8px 0 10px!important}
body.page-blog .card-desc{color:#334155!important;line-height:1.65!important}
body.page-blog .card-more{color:#B91C1C!important;font-weight:600!important}
@media(min-width:901px){
  body.page-blog .blog-grid .blog-card:first-child{grid-column:1/-1}
  body.page-blog .blog-grid .blog-card:first-child .card-inner{display:grid!important;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center}
  body.page-blog .blog-grid .blog-card:first-child .card-content{padding:0!important}
  body.page-blog .blog-grid .blog-card:first-child .card-title{font-size:clamp(1.8rem,3vw,2.75rem)!important;line-height:1.08!important}
  body.page-blog .blog-grid .blog-card:first-child .card-desc{font-size:1.1rem!important}
}
@media(min-width:601px) and (max-width:900px){body.page-blog .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){body.page-blog .blog-grid{grid-template-columns:minmax(0,1fr)!important}}
body.page-blog .page-link{border-radius:999px!important}
body.page-blog .page-link.active{background:#0F172A!important;color:#FFFFFF!important;border-color:#0F172A!important}
body.page-blog .blog-archive-index h2{font-family:'Outfit','Outfit Fallback',sans-serif!important;font-weight:400!important;font-size:clamp(1.8rem,3vw,2.6rem)!important;color:#0F172A!important}

/* tables and code blocks inside articles (2026-09-25) */
body.page-blog-post .content-body .tdp-table-wrap{overflow-x:auto;margin:28px 0;border:1px solid #E2E8F0;border-radius:16px;-webkit-overflow-scrolling:touch}
body.page-blog-post .content-body .tdp-table-wrap table{margin:0;min-width:620px}
body.page-blog-post .content-body table{width:100%;border-collapse:collapse;font-size:.97rem;line-height:1.6}
body.page-blog-post .content-body th{text-align:left;font:600 .78rem/1.4 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#475569;background:#F8FAFC;padding:14px 16px;border-bottom:1px solid #E2E8F0}
body.page-blog-post .content-body td{padding:16px;vertical-align:top;border-bottom:1px solid #E2E8F0;color:#334155}
body.page-blog-post .content-body tr:last-child td{border-bottom:0}
body.page-blog-post .content-body td code,body.page-blog-post .content-body li code,body.page-blog-post .content-body p code{word-break:normal;overflow-wrap:normal;white-space:nowrap}
body.page-blog-post .content-body pre{background:#0F172A;color:#E2E8F0;border-radius:16px;padding:22px 24px;margin:24px 0;overflow-x:auto;font-size:.92rem;line-height:1.7}
body.page-blog-post .content-body pre code{background:none!important;color:inherit!important;padding:0!important;border:0!important;font-size:inherit;white-space:pre;word-break:normal}
/* v4 2026-09-30: 'Outfit Fallback' in every Outfit stack, and .post-title 18ch -> 11.808em / .post-lead 62ch -> 39.1134em (same widths in the
   web fonts). ch follows the font on screen, so the title and lead rewrapped when Outfit/Inter arrived and pushed the cover down. */
/* v5 2026-09-30: 17 posts set .modern-post to 'Inter', sans-serif inline, with no fallback face, so the breadcrumb rewrapped when Inter
   arrived (b2b apps post 390px CLS 0.10). This restores the site body stack (Inter, then the metric-matched Inter Fallback). */
body.page-blog-post .modern-post{font-family:var(--td-font-body)}