/* ============================================================
   VertexSMS Blog — listing + article + retained features.
   Depends on vertex-base.css (CSS variables, chrome, foot, btn-*).
   ============================================================ */

/* ===== shared section padding ===== */
.section-pad{padding:36px 0;border-bottom:1px solid var(--rule);position:relative;z-index:2}
.section-pad:last-of-type{border-bottom:none}

/* ===== blog index hero ===== */
.page-hero{padding:80px 0 64px;border-bottom:1px solid var(--rule);position:relative;z-index:2}

/* ===== blog grid (listing + related) ===== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.blog-card{background:var(--bg);display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s;border:1px solid var(--rule);overflow:hidden}
.blog-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
.blog-card-img{display:block;aspect-ratio:16/9;background-size:cover;background-position:center;background-color:var(--bg-3);border-bottom:1px solid var(--rule)}
.blog-card-body{padding:28px 28px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.blog-card .card-h{font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:-0.018em;color:var(--ink);line-height:1.25}
.blog-card .card-h a{color:inherit;transition:color .15s}
.blog-card .card-h a:hover{color:var(--signal)}
.blog-card .card-p{font-size:14px;color:var(--ink-2);line-height:1.55;flex:1}
.blog-card .card-link{margin-top:6px;padding-top:6px;font-family:var(--mono);font-size:12px;color:var(--signal);font-weight:500;display:inline-flex;align-items:center;gap:8px;letter-spacing:.02em}
.blog-card .card-link::after{content:"\2192"}
.blog-card .card-link:hover{color:#007AA3}
@media (max-width:980px){.blog-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (max-width:560px){.blog-grid{grid-template-columns:1fr;gap:16px}}

/* ===== load-more pagination ===== */
.pagination{display:flex;justify-content:center;margin-top:48px}
.pagination .load-more{
  background:#fff;color:var(--ink);border:1px solid var(--rule-2);
  font-family:var(--mono);font-size:13px;font-weight:500;
  padding:13px 32px;display:inline-flex;align-items:center;gap:10px;
  cursor:pointer;
  transition:border-color .15s,color .15s;
}
.pagination .load-more:hover{border-color:var(--signal);color:var(--signal)}
.pagination .load-more[disabled]{opacity:.5;pointer-events:none}
.pagination .load-more.is-loading{color:var(--ink-3);pointer-events:none}

/* ===== archive / tag / author / 404 hero ===== */
.archive{padding:64px 0 32px}
.archive__title{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05;letter-spacing:-0.035em;color:var(--ink)}
.archive__description{margin-top:14px;font-size:16px;color:var(--ink-2);max-width:60ch;line-height:1.55}

.author{padding:64px 0 32px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.author__media{flex-shrink:0}
.author__image{width:96px;height:96px;border-radius:50%;object-fit:cover;border:1px solid var(--rule)}
.author__content{flex:1;min-width:240px}
.author__title{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.1;letter-spacing:-0.03em;color:var(--ink)}
.author__bio{margin-top:10px;font-size:15px;color:var(--ink-2);line-height:1.55;max-width:60ch}
.author__links{display:flex;gap:18px;margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--ink-3);flex-wrap:wrap}
.author__links-item{display:inline-flex;align-items:center;gap:6px}
.author__links-icon svg{width:16px;height:16px;fill:currentColor}

/* ===== article hero ===== */
.article-hero{padding:48px 0 32px;border-bottom:1px solid var(--rule)}
.article-hero .page-eyebrow{margin-bottom:14px}
.article-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05;letter-spacing:-0.035em;color:var(--ink);max-width:22ch}
.article-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--mag);letter-spacing:-0.02em}
.article-meta{margin-top:18px;display:flex;gap:14px;align-items:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.article-meta time{color:var(--signal)}
.article-cover{margin:24px 0 0;border:1px solid var(--rule);background:var(--bg-3);overflow:hidden}
.article-cover img{display:block;width:100%;height:auto;aspect-ratio:16/8;object-fit:cover}

/* ===== article body wrap ===== */
.article-body-wrap{padding:48px 0 80px}
.article-back{max-width:760px;margin:0 auto 28px;font-family:var(--mono);font-size:12px}
.article-back a{color:var(--signal);display:inline-flex;align-items:center;gap:6px}
.article-back a:hover{color:#007AA3}
.article-tags{margin:0 auto 24px;max-width:760px;display:flex;flex-wrap:wrap;gap:8px}
.article-tags a{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--rule-2);padding:6px 10px;transition:color .15s,border-color .15s}
.article-tags a:hover{color:var(--signal);border-color:var(--signal)}

/* ===== article body prose ===== */
.article-body{max-width:760px;margin:0 auto;font-family:var(--display);font-size:17px;line-height:1.7;color:var(--ink-2)}
.article-body > *:first-child{margin-top:0}
.article-body p{margin:0 0 1.1em}
.article-body p:last-child{margin-bottom:0}
.article-body strong,.article-body b{color:var(--ink);font-weight:600}
.article-body em,.article-body i{font-style:italic}
.article-body a{color:var(--signal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:color .15s}
.article-body a:hover{color:#007AA3}
.article-body h2{font-family:var(--display);font-weight:700;font-size:1.7rem;line-height:1.18;letter-spacing:-0.02em;color:var(--ink);margin:2em 0 .7em}
.article-body h3{font-family:var(--display);font-weight:600;font-size:1.3rem;line-height:1.25;letter-spacing:-0.015em;color:var(--ink);margin:1.7em 0 .6em}
.article-body h4{font-family:var(--display);font-weight:600;font-size:1.08rem;color:var(--ink);margin:1.5em 0 .5em}
.article-body ul,.article-body ol{margin:0 0 1.1em 0;padding-left:1.4em}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body li{margin:.4em 0}
.article-body figure{margin:1.6em 0}
.article-body figure img,.article-body img{max-width:100%;height:auto;display:block;border:1px solid var(--rule)}
.article-body figcaption{margin-top:8px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);text-align:center;letter-spacing:.04em}
.article-body blockquote{margin:1.5em 0;padding:14px 20px;border-left:3px solid var(--signal);background:var(--bg-2);font-style:italic;color:var(--ink)}
.article-body blockquote p{margin:0}
.article-body hr{border:none;border-top:1px solid var(--rule);margin:2em 0}
.article-body code{font-family:var(--mono);font-size:.92em;background:var(--bg-2);padding:1px 6px;border:1px solid var(--rule);border-radius:2px}
.article-body pre{font-family:var(--mono);font-size:13px;background:var(--bg-2);border:1px solid var(--rule);padding:16px 18px;overflow-x:auto;line-height:1.55;margin:1.4em 0}
.article-body pre code{background:none;border:none;padding:0}
.article-body table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:14.5px;display:block;overflow-x:auto}
.article-body th,.article-body td{border:1px solid var(--rule);padding:8px 12px;text-align:left;vertical-align:top}
.article-body th{background:var(--bg-2);font-weight:600;color:var(--ink)}

/* Ghost Koenig cards */
.article-body .kg-image{max-width:100%;height:auto;display:block}
.article-body .kg-image-card{margin:1.6em 0}
.article-body .kg-image-card.kg-width-wide .kg-image{max-width:none;width:calc(100% + 80px);margin-left:-40px}
.article-body .kg-image-card.kg-width-full .kg-image{max-width:none;width:100vw;margin-left:calc(50% - 50vw)}
.article-body .kg-embed-card{margin:1.6em 0;text-align:center}
.article-body .kg-embed-card iframe{max-width:100%}
.article-body .kg-gallery-container{display:flex;flex-direction:column;gap:8px;margin:1.6em 0}
.article-body .kg-gallery-row{display:flex;gap:8px}
.article-body .kg-gallery-image{flex:1 1 0%}
.article-body .kg-bookmark-card{margin:1.6em 0;border:1px solid var(--rule)}
.article-body .kg-bookmark-card a{text-decoration:none}
.article-body .kg-bookmark-container{display:flex;align-items:stretch}
.article-body .kg-bookmark-content{padding:18px 20px;flex:1;display:flex;flex-direction:column;gap:6px}
.article-body .kg-bookmark-title{font-weight:600;color:var(--ink);font-size:15px}
.article-body .kg-bookmark-description{font-size:13.5px;color:var(--ink-2);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.article-body .kg-bookmark-metadata{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:auto;display:flex;gap:10px;align-items:center}
.article-body .kg-bookmark-thumbnail{flex-shrink:0;max-width:30%}
.article-body .kg-bookmark-thumbnail img{height:100%;width:100%;object-fit:cover;display:block}
.article-body .kg-card-hascaption .kg-image{margin:0 auto}

@media (max-width:760px){
  .article-body{font-size:16px}
  .article-body h2{font-size:1.45rem}
  .article-body h3{font-size:1.18rem}
}

/* ===== post-bottom CTA (retained) ===== */
.section-cta{
  padding:48px 0 64px;border-top:1px solid var(--rule);
  position:relative;z-index:2;text-align:center;
}
.section-cta .cta-note{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--ink-3);margin-bottom:18px;
}

/* ===== related posts section (retained) ===== */
.section-related{padding:48px 0 80px;border-top:1px solid var(--rule);position:relative;z-index:2}
.section-related .sec-head{margin-bottom:32px}
.section-related .sec-h{font-size:clamp(1.6rem,2.6vw,2.2rem)}

/* ===== access notice (members-only posts) ===== */
.access-notice{
  max-width:760px;margin:0 auto;padding:24px;
  border:1px solid var(--rule-2);background:var(--bg-2);
  font-family:var(--mono);font-size:13px;color:var(--ink-2);text-align:center;
}