/* ============================================================
   Appointify — blog styles (extends assets/css/styles.css)
   Light look · Poppins headings + Cabin body · green accents
   ============================================================ */

/* ---------- breadcrumb ---------- */
.crumbs{font-family:var(--font-sans);font-size:.85rem;color:var(--muted);margin-bottom:1rem}
.crumbs a{color:var(--muted);border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.crumbs a:hover{color:var(--green-dark);border-color:var(--green)}
.crumbs span{color:var(--muted-2)}

/* ---------- post hero ---------- */
.post-hero{padding:clamp(40px,6vw,72px) 0 clamp(20px,3vw,32px)}
.post-hero .eyebrow{margin-bottom:.75rem}
.post-h1{font-size:clamp(2rem,4vw,3rem);max-width:20ch;margin:0 0 .7rem}
.post-meta{font-family:var(--font-sans);color:var(--muted);font-size:.92rem;margin:0}
.post-meta time{color:var(--muted)}

/* ---------- feature image ---------- */
.post-feature{margin:clamp(20px,3vw,32px) 0 0}
.post-feature img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow)}

/* ---------- post body ---------- */
.post-wrap{max-width:760px;margin-inline:auto}
.post-body{font-family:var(--font-sans);font-size:1.075rem;line-height:1.75;color:var(--text)}
.post-body h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:2.1em 0 .55em;line-height:1.2}
.post-body h3{font-size:clamp(1.15rem,1.6vw,1.35rem);margin:1.6em 0 .4em}
.post-body p{margin:0 0 1.15em}
.post-body a{color:var(--green-dark);font-weight:600;border-bottom:1px solid rgba(15,183,47,.35);transition:border-color .15s,color .15s}
.post-body a:hover{color:var(--green);border-color:var(--green)}
.post-body strong{color:var(--ink)}
.post-list{margin:0 0 1.3em;padding:0;list-style:none}
.post-list li{position:relative;padding-left:1.9em;margin-bottom:.6em}
.post-list li::before{content:"";position:absolute;left:0;top:.55em;width:1.05em;height:1.05em;
  background:var(--green);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.7em no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/.7em no-repeat}

/* floated inline image */
.post-inline{margin:.4em 0 1.2em;max-width:340px}
.post-inline img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.post-inline figcaption{font-size:.82rem;color:var(--muted-2);margin-top:.5em;text-align:center}
@media(min-width:620px){
  .post-inline{float:right;max-width:300px;margin:.3em 0 1.1em 1.8em}
}

/* in-post CTA */
.post-cta{margin:1.6em 0;clear:both}
.post-cta .btn{margin:.25em .4em .25em 0}

/* ---------- related ---------- */
.post-related{border-top:1px solid var(--line);margin-top:clamp(40px,5vw,64px);padding-top:clamp(32px,4vw,48px)}
.post-related h2{font-size:clamp(1.4rem,2vw,1.8rem);margin-bottom:1.2rem;text-align:center}

/* ---------- blog index + related cards ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(20px,2.5vw,30px)}
.post-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.post-card-img{width:100%;aspect-ratio:16/9;object-fit:cover}
.post-card-body{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;flex:1}
.card-cat{display:inline-block;font-family:var(--font-display);font-weight:600;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--green-dark);margin-bottom:.5rem}
.post-card h2,.post-card h3{font-size:1.18rem;line-height:1.25;margin:0 0 .5rem;color:var(--ink)}
.card-excerpt{font-family:var(--font-sans);color:var(--muted);font-size:.95rem;line-height:1.55;margin:0 0 .9rem;flex:1}
.card-meta{font-family:var(--font-sans);color:var(--muted-2);font-size:.82rem;margin-top:auto}

/* blog index hero spacing */
.bloghero{padding:clamp(48px,6vw,84px) 0 clamp(28px,3.5vw,40px)}