/* =========================================================================
   MIVA blog / news — light, minimal, readable. Loaded only on blog pages.
   Scales from small phones to large monitors via clamp() + auto-fill grids.
   ========================================================================= */

.blogpage{background:#ECEBE4;color:#26323c}
.blogwrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}

/* ---- listing hero ---- */
.bloghero{padding-top:clamp(118px,17vh,176px);padding-bottom:clamp(28px,5vh,52px)}
.bloghero .eyebrow{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7a8390;margin-bottom:20px}
.bloghero h1{font-family:'Archivo';font-weight:800;font-size:clamp(34px,6vw,72px);letter-spacing:-.03em;line-height:1.02;color:#0f2042;max-width:16ch}
.bloghero .lead{font-size:clamp(15px,1.7vw,20px);color:#46535f;line-height:1.5;max-width:56ch;margin-top:20px}

/* ---- controls: search + category filter ---- */
.blogctrl{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:center;justify-content:space-between;margin-top:clamp(28px,5vh,46px);padding-bottom:24px;border-bottom:1px solid rgba(15,32,66,.12)}
.blogsearch{position:relative;flex:1 1 220px;max-width:380px}
.blogsearch i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#8b97a3;font-size:17px}
.blogsearch input{width:100%;background:#fff;border:1px solid rgba(15,32,66,.14);border-radius:30px;padding:11px 18px 11px 42px;font-family:'Inter';font-size:14px;color:#1a2330}
.blogsearch input::placeholder{color:#9aa4ae}
.blogsearch input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(62,130,248,.12)}
.blogcats{display:flex;flex-wrap:wrap;gap:8px}
.catbtn{background:#fff;border:1px solid rgba(15,32,66,.14);border-radius:30px;padding:8px 16px;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#46535f;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.catbtn:hover{border-color:var(--accent);color:#1F5AD0}
.catbtn.active{background:#0f2042;border-color:#0f2042;color:#fff}

/* ---- featured (latest) post ---- */
.blogfeat{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin:clamp(34px,5vh,58px) 0 clamp(8px,2vh,20px)}
.blogfeat a.fimg{display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#dfe1dc center/cover no-repeat;text-decoration:none}
.blogfeat .ftag{font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#1F5AD0;margin-bottom:14px}
.blogfeat .meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#8b97a3;margin-bottom:14px}
.blogfeat .meta .cat{color:#1F5AD0}
.blogfeat h2{font-family:'Archivo';font-weight:700;font-size:clamp(24px,3.1vw,42px);letter-spacing:-.02em;line-height:1.08;margin:0 0 14px}
.blogfeat h2 a{color:#0f2042;text-decoration:none}
.blogfeat h2 a:hover{color:#1F5AD0}
.blogfeat p{font-size:clamp(15px,1.4vw,17px);color:#46535f;line-height:1.62;max-width:54ch}
.blogfeat .more{margin-top:20px}

.morelink{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#1F5AD0;text-decoration:none}
.morelink i{transition:transform .25s}
.morelink:hover i{transform:translateX(4px)}

/* ---- card grid ---- */
.bloggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(20px,3vw,32px);padding:clamp(30px,5vh,56px) 0 clamp(60px,9vh,110px)}
.bcardx{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(15,32,66,.10);border-radius:13px;overflow:hidden;text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.bcardx:hover{transform:translateY(-4px);box-shadow:0 24px 46px -24px rgba(15,32,66,.34);border-color:rgba(15,32,66,.2)}
.bcardx .ph{aspect-ratio:16/10;background:#dfe1dc center/cover no-repeat}
.bcardx .bd{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.bcardx .meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-family:'JetBrains Mono';font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8b97a3;margin-bottom:12px}
.bcardx .meta .cat{color:#1F5AD0}
.bcardx .meta .dot{width:3px;height:3px;border-radius:50%;background:#c2c8c0}
.bcardx h3{font-family:'Archivo';font-weight:700;font-size:clamp(17px,1.5vw,20px);letter-spacing:-.01em;line-height:1.22;color:#0f2042;margin:0 0 10px}
.bcardx p{font-size:14px;color:#56636e;line-height:1.6;margin:0;flex:1}
.bcardx .more{margin-top:18px;font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#1F5AD0;display:flex;align-items:center;gap:6px}
.bcardx:hover h3{color:#1F5AD0}

.blognoresult{grid-column:1/-1;text-align:center;padding:60px 20px;color:#6b7680;font-size:15px}

@media(max-width:760px){
  .blogfeat{grid-template-columns:1fr;gap:20px}
  .blogfeat a.fimg{aspect-ratio:16/9}
  .blogctrl{flex-direction:column;align-items:stretch}
  .blogsearch{max-width:none;flex:0 0 auto}
  .blogcats{justify-content:flex-start}
}

/* =========================================================================
   Single post (reader)
   ========================================================================= */
.postwrap{max-width:880px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.posthero{padding-top:clamp(116px,16vh,168px)}
.posthero .back{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6b7680;text-decoration:none;margin-bottom:26px}
.posthero .back:hover{color:#1F5AD0}
.posthero .meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8b97a3;margin-bottom:18px}
.posthero .meta .cat{color:#1F5AD0}
.posthero .meta .dot{width:3px;height:3px;border-radius:50%;background:#bcc3bb}
.posthero h1{font-family:'Archivo';font-weight:700;font-size:clamp(29px,4.4vw,50px);letter-spacing:-.018em;line-height:1.12;color:#0f2042;margin:0}
.posthero .byline{margin-top:20px;font-size:13.5px;color:#6b7680}

.postfeat{max-width:880px;margin:clamp(26px,4vh,44px) auto 0;padding:0 clamp(20px,5vw,40px)}
.postfeat .img{aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#dfe1dc center/cover no-repeat}

.postbody{font-size:clamp(16px,1.1vw,18.5px);line-height:1.82;color:#2b3640;padding:clamp(34px,5vh,56px) 0 clamp(20px,3vh,30px)}
.postbody > *:first-child{margin-top:0}
.postbody p{margin:0 0 22px}
.postbody h2{font-family:'Archivo';font-weight:700;font-size:clamp(22px,2.6vw,31px);color:#0f2042;letter-spacing:-.02em;line-height:1.2;margin:42px 0 16px}
.postbody h3{font-family:'Archivo';font-weight:700;font-size:clamp(18px,2vw,23px);color:#0f2042;letter-spacing:-.01em;margin:32px 0 12px}
.postbody ul,.postbody ol{margin:0 0 24px;padding-left:0;list-style:none}
.postbody ul li{position:relative;padding-left:26px;margin-bottom:13px;line-height:1.65}
.postbody ul li::before{content:"";position:absolute;left:4px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.postbody ol{counter-reset:n;padding-left:0}
.postbody ol li{position:relative;padding-left:34px;margin-bottom:13px;line-height:1.65;counter-increment:n}
.postbody ol li::before{content:counter(n);position:absolute;left:0;top:0;font-family:'JetBrains Mono';font-size:13px;color:#1F5AD0;font-weight:500}
/* Quill outputs BULLET lists as <ol><li data-list="bullet"> — render those as a dot, not a number */
.postbody ol li[data-list="bullet"]{padding-left:26px;counter-increment:none}
.postbody ol li[data-list="bullet"]::before{content:"";left:4px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--accent);font-family:inherit}
.postbody blockquote{margin:30px 0;padding:4px 0 4px 24px;border-left:3px solid var(--accent);font-family:'Archivo';font-weight:600;font-size:clamp(18px,2.1vw,24px);line-height:1.4;color:#0f2042}
.postbody a{color:#1F5AD0;text-decoration:underline;text-underline-offset:2px}
.postbody strong{color:#0f2042;font-weight:600}

.postend{max-width:880px;margin:0 auto;padding:clamp(28px,4vh,40px) clamp(20px,5vw,40px) 0;border-top:1px solid rgba(15,32,66,.12)}
.postend .share{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6b7680}
.postend .share a{display:inline-flex;align-items:center;gap:7px;color:#0f2042;text-decoration:none;border:1px solid rgba(15,32,66,.16);border-radius:30px;padding:8px 15px;transition:border-color .2s,color .2s}
.postend .share a:hover{border-color:var(--accent);color:#1F5AD0}

/* related */
.related{max-width:1200px;margin:0 auto;padding:clamp(46px,7vh,80px) clamp(20px,5vw,64px) clamp(60px,9vh,110px)}
.related .rh{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7a8390;margin-bottom:24px}

@media(max-width:640px){
  .postfeat .img{aspect-ratio:16/10;border-radius:12px}
}