/* ==========================================================================
   dzn studios blog. Loaded after combined-theme.css on /blog/ pages and used
   for the "Latest" cards on the home page. Everything is scoped to blog
   classes so the theme is untouched.
   ========================================================================== */

/* ---- Title banner ------------------------------------------------------ */
.post-head .row{padding-top:120px;padding-bottom:100px}
.post-head h1{font-size:2.3em;line-height:1.2;max-width:900px;margin:0 auto;text-transform:none}
.post-head h4{margin-top:18px}
.post-kicker{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px;text-shadow:0 0 3px #333}
.post-kicker a{color:#fff;text-decoration:none}
.post-kicker a:hover{color:#87D4DC}

/* ---- Article body ------------------------------------------------------ */
.post-section{padding-top:40px}
.post{max-width:760px;margin:0 auto;padding:0 20px;color:#3f4448;font-size:18px;line-height:1.75}
.post p{font-size:1em;margin:0 0 22px}
.post h2{text-align:left;font-size:1.55em;line-height:1.3;margin:52px 0 16px;color:#22272b;font-weight:700}
.post h3{font-size:1.18em;line-height:1.35;margin:32px 0 10px;color:#22272b;font-weight:700}
.post ul,.post ol{margin:0 0 24px 1.3em;padding:0}
.post ul{list-style:disc}
.post ol{list-style:decimal}
.post li{margin:0 0 10px;padding-left:4px}
.post li > ul,.post li > ol{margin-top:10px;margin-bottom:8px}
.post a{color:#2a7fa0;text-decoration:underline;text-underline-offset:3px}
.post a:hover{color:#1f6985}
.post strong{color:#22272b}
.post blockquote{background:#f1f5f7;border-radius:12px;padding:20px 24px;margin:0 0 28px;font-size:1.05em;color:#22272b}
.post blockquote p:last-child{margin-bottom:0}
.post blockquote cite{display:block;font-size:.8em;font-style:normal;color:#6b737b;margin-top:8px}
.post hr{border:0;border-top:1px solid #e3e7ea;margin:40px 0}
.post-meta{font-size:.85em;color:#6b737b;margin:0 0 26px}
.post-meta a{color:#3f4448;text-decoration:none}
.post-meta time{color:#3f4448}

/* Short answer, shown first so readers and AI tools get the point at once */
.post .answer{background:#eef8fa;border:1px solid #cfe9ee;border-radius:12px;padding:22px 24px;margin:0 0 30px}
.post .answer .label{display:block;font-size:.72em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#1b6f80;margin-bottom:6px}
.post .answer p:last-child,.post .answer ul:last-child{margin-bottom:0}

/* Neutral note box */
.post .note{background:#fff;border:1px solid #e3e7ea;border-radius:12px;padding:18px 22px;margin:0 0 30px;font-size:.92em}
.post .note p:last-child{margin-bottom:0}

/* Images */
.post figure{margin:0 0 34px}
.post figure img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid #e3e7ea;background:#fff}
.post figure.natural img{width:auto;max-width:100%;margin:0 auto}
.post figcaption{font-size:.8em;color:#6b737b;margin-top:10px;line-height:1.5}
.post-cover{margin-bottom:34px}

/* Table of contents */
.post .toc{background:#fff;border:1px solid #e3e7ea;border-radius:12px;padding:18px 22px 8px;margin:0 0 36px;font-size:.92em}
.post .toc strong{display:block;margin-bottom:8px}
.post .toc ol{margin-bottom:10px}
.post .toc li{margin-bottom:6px}
.post .toc a{text-decoration:none}

/* Code */
.post code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:#f1f3f5;border-radius:4px;padding:2px 6px;color:#0f2a3a}
.post pre{background:#0f2a3a;color:#e8f3f6;border-radius:10px;padding:16px 18px;margin:0 0 26px;overflow-x:auto;font-size:.82em;line-height:1.6}
.post pre code{background:none;color:inherit;padding:0;font-size:1em}
.post .regex-box{display:flex;align-items:center;gap:12px;background:#0f2a3a;border-radius:10px;padding:16px 18px;margin:0 0 26px}
.post .regex-box code{background:none;color:#fff;font-size:1.05em;padding:0;flex:1;white-space:pre;overflow-x:auto}
.post .copy-btn{font:600 13px/1 Raleway,sans-serif;color:#0f2a3a;background:#87D4DC;border:0;border-radius:6px;padding:9px 12px;cursor:pointer}
.post .copy-btn:hover{background:#a6e1e7}

/* Tables */
.post .table-wrap{overflow-x:auto;margin:0 0 30px}
.post table{width:100%;border-collapse:separate;border-spacing:0;font-size:.88em;background:#fff;border:1px solid #e3e7ea;border-radius:10px;overflow:hidden;margin:0 0 30px}
.post .table-wrap table{margin:0}
.post th,.post td{text-align:left;padding:12px 14px;border-bottom:1px solid #edf0f2;vertical-align:top}
.post th{background:#f6f8f9;font-weight:700;color:#22272b}
.post tr:last-child td{border-bottom:0}
.post td code{white-space:normal;word-break:break-all}

/* Numbered idea lists and template lists */
.post ol.ideas{list-style:none;margin-left:0;counter-reset:idea var(--start,0)}
.post ol.ideas > li{counter-increment:idea;position:relative;padding-left:48px;margin-bottom:14px}
.post ol.ideas > li::before{content:counter(idea);position:absolute;left:0;top:1px;width:34px;height:26px;line-height:26px;text-align:center;font-size:.78em;font-weight:700;color:#1b6f80;background:#eef8fa;border-radius:6px}
.post ul.templates{list-style:none;margin-left:0}
.post ul.templates li{background:#fff;border:1px solid #e3e7ea;border-radius:8px;padding:10px 14px;margin-bottom:8px;font-size:.95em}

/* Gallery (packaging post) */
.post .gallery-item{margin:0 0 44px}
.post .gallery-item h3{margin-top:0}
.post .gallery-item figure{margin-bottom:14px}
.post .gallery-item figure img{max-height:720px;object-fit:contain}

/* Steps */
.post ol.steps{list-style:none;margin-left:0;counter-reset:step}
.post ol.steps > li{counter-increment:step;position:relative;padding-left:46px;margin-bottom:20px}
.post ol.steps > li::before{content:counter(step);position:absolute;left:0;top:0;width:30px;height:30px;line-height:30px;text-align:center;border-radius:50%;background:#2a7fa0;color:#fff;font-weight:700;font-size:.85em}

/* FAQ */
.post-faq h3{margin-top:26px}

/* Call to action */
.post-cta{background:#fff;border:1px solid #e3e7ea;border-radius:12px;padding:26px 26px 22px;margin:48px 0 20px}
.post-cta h2{margin-top:0 !important;font-size:1.35em !important}
.post-cta p{margin-bottom:18px}
.post .post-cta-button{display:inline-block;background:#2a7fa0;color:#fff;text-decoration:none;border-radius:6px;padding:12px 20px;font-weight:600;margin:0 16px 8px 0}
.post .post-cta-button:hover{background:#1f6985;color:#fff}
.post .post-cta-link{display:inline-block;margin-bottom:8px}

/* ---- Cards (index, related posts, home page) --------------------------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.post-card{background:#fff;border:1px solid #e3e7ea;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:#3f4448;transition:border-color .2s,transform .2s}
.post-card:hover{border-color:#a9d3de;transform:translateY(-2px)}
.post-card img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-bottom:1px solid #e3e7ea}
.post-card-body{display:block;padding:18px 20px 22px}
.post-card-meta{display:block;font-size:13px;color:#6b737b}
.post-card-cat{color:#1b6f80;font-weight:600}
.post-card .post-card-title{display:block;text-align:left;font-size:1.12em;line-height:1.35;margin:8px 0 10px;color:#22272b;font-weight:700;text-transform:none}
.post-card-excerpt{display:block;font-size:15px;line-height:1.6}

.post-related{background:#fff;border-top:1px solid #e3e7ea;padding:50px 0 60px}
.post-related-inner,.blog-index-inner{max-width:1080px;margin:0 auto;padding:0 20px}
.post-related h2{text-align:left;font-size:1.4em;margin:0 0 24px;color:#22272b}
.post-related-all{margin:26px 0 0;font-size:.95em}
.post-related-all a{color:#2a7fa0}

/* ---- Blog index ---------------------------------------------------------- */
.blog-index-intro{max-width:760px;margin:0 auto 34px;padding:0 20px;text-align:center;font-size:17px;line-height:1.7;color:#3f4448}
.blog-filter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 30px;padding:0 20px}
.blog-filter button{font:600 13px/1 Raleway,sans-serif;color:#3f4448;background:#fff;border:1px solid #d9dee2;border-radius:999px;padding:9px 14px;cursor:pointer}
.blog-filter button[aria-pressed="true"]{background:#2a7fa0;border-color:#2a7fa0;color:#fff}
.post-card.featured{grid-column:1/-1;flex-direction:row}
.post-card.featured img{width:56%;aspect-ratio:auto;border-bottom:0;border-right:1px solid #e3e7ea}
.post-card.featured .post-card-body{padding:30px 32px;align-self:center}
.post-card.featured .post-card-title{font-size:1.5em}

/* ---- Home page "Latest" section ------------------------------------------ */
#latestBlog .post-grid{max-width:1180px;margin:0 auto;padding:0 20px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

@media (max-width:760px){
  .post{font-size:16.5px}
  .post-head .row{padding-top:100px;padding-bottom:80px}
  .post-head h1{font-size:1.65em;padding:0 10px}
  .post .regex-box{flex-direction:column;align-items:stretch}
  .post table{font-size:.8em}
  .post th,.post td{padding:10px}
  .post-card.featured{flex-direction:column}
  .post-card.featured img{width:100%;border-right:0;border-bottom:1px solid #e3e7ea;aspect-ratio:1200/630}
  .post-card.featured .post-card-body{padding:18px 20px 22px}
  .post-card.featured .post-card-title{font-size:1.12em}
}

/* Small print under galleries and credits */
.post .gallery-full{font-size:.85em;margin-top:-10px}
.post .post-credit{font-size:.85em;color:#6b737b}