/* Blog pages. Built on the landing page components in custom.css (.str-header, .str-hero, .str-btn). Class prefix: str-blog / str-post / str-card. */
.str-blog{--str-blue:#1d62b6;--str-light:#80acfa;--str-ink:#12121e;--str-text:#202d3c;--str-green:#18cd5e;--str-tint:#f2f7ff;
  margin:0;font:400 19px/1.7 Lato,sans-serif;color:var(--str-text);background:#fff}
.str-blog *{box-sizing:border-box}
.str-prose a,.str-card-more,.str-post-nav a{color:var(--str-blue)}
.str-blog :focus-visible{outline:3px solid var(--str-light);outline-offset:3px}

/* Hero (compact variant of the landing hero) */
.str-hero--compact{min-height:0;display:block}
.str-hero--compact::before{background:linear-gradient(90deg,rgba(18,18,30,.9) 0%,rgba(18,18,30,.72) 60%,rgba(18,18,30,.5) 100%)}
.str-hero--compact .str-hero-inner{padding-top:176px;padding-bottom:104px}
.str-hero--compact .str-hero-inner>*{max-width:820px}
.str-hero--post .str-hero-inner{max-width:812px}
.str-blog .str-hero-title{color:#fff;font-size:clamp(2.25rem,5.5vw,3.75rem);margin:0 0 16px}
.str-blog .str-hero-lead{margin:0}
.str-hero-eyebrow a{color:#80acfa;text-decoration:none}
.str-hero-meta{color:#dbe6fb;font-size:16px;margin:0 0 14px}
.str-hero .str-tags{margin:0}
.str-hero .str-tags span{background:rgba(255,255,255,.16);color:#fff}

.str-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:10px 0 0;padding:0}
.str-tags span{display:inline-block;font:700 12px/1 Montserrat,sans-serif;letter-spacing:.06em;text-transform:uppercase;background:var(--str-tint);color:var(--str-blue);padding:7px 11px;border-radius:99px}

/* Body area (pale blue, content cards overlap the hero) */
.str-blog-body{background:var(--str-tint);padding:0 16px 80px}
.str-post-meta{font-size:15px;color:#57657a;margin:0 0 6px}

/* Index cards */
.str-cards{list-style:none;margin:-64px auto 0;padding:0;max-width:1168px;position:relative;z-index:3;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.str-card-post{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(18,18,30,.12);display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease}
.str-card-post:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(18,18,30,.18)}
.str-card-img{display:block;aspect-ratio:16/9;overflow:hidden;background:#dbe6fb}
.str-card-img img{display:block;width:100%;height:100%;object-fit:cover}
.str-card-body{padding:24px;display:flex;flex-direction:column;flex:1}
.str-card-body h2{font:900 24px/1.25 Montserrat,sans-serif;margin:0 0 10px}
.str-card-body h2 a{color:var(--str-ink);text-decoration:none}
.str-card-body h2 a:hover{color:var(--str-blue)}
.str-card-body>p{margin:0 0 6px;font-size:17px;line-height:1.55}
.str-card-body .str-tags{margin-bottom:16px}
.str-card-more{margin-top:auto;font:700 16px/1.2 Montserrat,sans-serif;text-decoration:none}
.str-card-more:hover{text-decoration:underline}

/* Post sheet */
.str-post-sheet{max-width:780px;margin:-64px auto 0;position:relative;z-index:3;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(18,18,30,.12);padding:48px 56px 32px}
.str-prose h2{font:900 28px/1.25 Montserrat,sans-serif;color:var(--str-ink);margin:2em 0 .5em}
.str-prose h2:first-child{margin-top:0}
.str-prose h3{font:700 22px/1.3 Montserrat,sans-serif;color:var(--str-ink);margin:1.6em 0 .4em}
.str-prose p,.str-prose ul,.str-prose ol,.str-prose blockquote,.str-prose pre,.str-prose figure{margin:0 0 1.2em}
.str-prose img{display:block;max-width:100%;height:auto;border-radius:12px;box-shadow:0 8px 24px rgba(18,18,30,.12)}
.str-prose blockquote{border-left:4px solid var(--str-light);background:var(--str-tint);padding:12px 20px;font-style:italic;border-radius:0 8px 8px 0}
.str-prose blockquote p:last-child{margin:0}
.str-prose code{background:var(--str-tint);padding:2px 5px;border-radius:3px;font-size:.9em}
.str-prose pre{background:var(--str-ink);color:#fff;padding:16px;overflow-x:auto;border-radius:8px}
.str-prose pre code{background:none;padding:0}
.str-prose hr{border:0;border-top:1px solid #d9e2ef;margin:2em 0}
.str-post-nav{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #e3ebf7;margin-top:32px;padding-top:24px;font:700 16px/1.4 Montserrat,sans-serif}
.str-post-nav a{max-width:48%;text-decoration:none}
.str-post-nav a:hover{text-decoration:underline}

/* Inline CTA button inside post bodies */
.str-blog-btn{display:inline-block;background:var(--str-green);color:#fff!important;font:700 20px/1.2 Montserrat,sans-serif;text-decoration:none;
  padding:16px 40px;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.08)}
.str-blog-btn:hover{filter:brightness(.95)}

/* Blue closing CTA with the landing page wave */
.str-blog-cta{background:linear-gradient(var(--str-tint) 72px,#1d62b6 72px);color:#fff;text-align:center;font-family:Lato,sans-serif}
.str-blog-cta::before{content:"";display:block;height:72px;background:linear-gradient(rgba(46,140,255,.7),rgba(46,140,255,.7)),url(../img/waves-2.png) center/100% 100% no-repeat}
.str-blog-cta-inner{max-width:720px;margin:0 auto;padding:24px 16px 80px}
.str-blog-cta h2{font:900 clamp(2rem,5vw,3.25rem)/1.1 Montserrat,sans-serif;color:#fff;margin:0 0 16px}
.str-blog-cta p{font-size:20px;line-height:1.55;margin:0 0 28px;color:#eef3fc}
.str-blog-cta .str-btn{display:inline-block;background:#18cd5e;color:#fff;font:700 20px/1.2 Montserrat,sans-serif;text-decoration:none;padding:16px 40px;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.2)}
.str-blog-cta .str-btn:hover{filter:brightness(.95)}

/* Footer (mirrors the landing page footer) */
.str-blog-footer{background:#12121e;color:#c9d3e3;font:400 14px/1.6 Montserrat,sans-serif;padding:40px 16px}
.str-blog-footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:32px}
.str-blog-footer p{margin:0 0 12px}
.str-blog-footer a{color:#fff}

@media (max-width:800px){
  .str-cards{grid-template-columns:1fr}
  .str-post-sheet{padding:32px 20px 24px}
  .str-blog-footer-inner{grid-template-columns:1fr}
}
@media (max-width:720px){
  .str-hero--compact .str-hero-inner{padding-top:112px;padding-bottom:88px}
  .str-blog{font-size:18px}
  .str-post-nav{flex-direction:column}
  .str-post-nav a{max-width:none}
  .str-blog-cta .str-btn{display:block}
}

/* Tables and button pairs inside posts */
.str-table{overflow-x:auto;margin:0 0 1.4em;border-radius:12px;box-shadow:0 0 0 1px #d9e2ef}
.str-table table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4;min-width:520px}
.str-table th{background:var(--str-ink);color:#fff;font:700 14px/1.3 Montserrat,sans-serif;text-align:left;padding:12px 14px}
.str-table td{padding:12px 14px;border-top:1px solid #e3ebf7}
.str-table tbody tr:nth-child(even){background:var(--str-tint)}
.str-table td:first-child{font-weight:700}
.str-blog-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;margin:0 0 1.2em}
.str-blog-btn--ghost{background:#fff;color:var(--str-blue)!important;box-shadow:inset 0 0 0 3px var(--str-blue)}
@media (max-width:720px){.str-blog-btns .str-blog-btn{display:block;width:100%;text-align:center}}

/* Blog index hero photo: mirrored so the toilet sits on the right, clear of the headline */
.str-hero-img--blog{transform:scaleX(-1);object-position:50% 72%}