/* ==============================================================
   JELLI / BUDGET BITES — the blog's lists and a post's frame.
   Cards are the homepage's (.bites-card, home.css), the picked
   posts the design's .blog-feature-list (interior.css).
   ============================================================== */
.blog-hero{padding-bottom:70px}
.blog-hero-compact{padding-top:76px;padding-bottom:56px}
.blog-hero-compact h1{font-size:clamp(34px,4.2vw,56px)}
.blog-hero .interior-lead+.blog-search{margin-top:34px}

/* Search box */
.blog-search{display:flex;gap:10px;width:100%;max-width:520px;margin:30px auto 0}
.blog-search input{flex:1;min-width:0;height:48px;padding:0 16px;border-radius:10px;border:1px solid rgba(213,180,244,.28);background:rgba(155,104,203,.08);color:var(--text);font:400 15px var(--body);-webkit-appearance:none;appearance:none}
.blog-search input::placeholder{color:#A99BBE}
.blog-search input:focus-visible{outline:2px solid var(--button);outline-offset:2px;border-color:transparent}
.blog-search .btn{flex:none;height:48px}

/* Lists */
.blog-selected{margin:12px 0 96px}
.blog-feature-item small{text-transform:uppercase}
.blog-latest .interior-section-prelude{margin-bottom:33px}
.blog-grid{row-gap:22px}
.blog-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 18px;margin:46px 0 0}
.blog-pager ol{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;list-style:none;margin:0;padding:0}
.blog-pager li>a,.blog-pager li>span{display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border-radius:11px;border:1px solid rgba(213,180,244,.2);background:rgba(155,104,203,.055);color:#E1D5EC;font:600 14px var(--display);text-decoration:none;transition:border-color .2s,color .2s}
.blog-pager li>a:hover{border-color:rgba(255,230,108,.5);color:var(--button)}
.blog-pager li>span[aria-current]{background:var(--button);border-color:var(--button);color:var(--on-yellow)}
.blog-pager .blog-pager-gap{align-self:center;padding:0 3px;color:#9685AA}
.blog-pager-step{padding:11px 4px;color:var(--button);font:600 14px var(--display);text-decoration:none}
.blog-pager-step:hover{text-decoration:underline}
.blog-pager a:focus-visible{outline:2px solid var(--button);outline-offset:3px}

/* Search results */
.blog-results-head{font:600 clamp(24px,2.6vw,32px)/1.2 var(--display);letter-spacing:-.015em;margin:0 0 26px}
.blog-results-head:empty{display:none}
.blog-empty{max-width:640px;margin:0 auto;padding:40px 0;text-align:center;font:400 17px/1.7 var(--body);color:#CFC3DD}

/* A post */
.post-head{max-width:900px;margin:0 auto;padding:78px 0 44px;text-align:center}
.post-head h1{font:600 clamp(36px,4.6vw,62px)/1.1 var(--display);letter-spacing:-.03em;margin:0}
.post-categories{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 16px;margin-bottom:20px}
.post-categories a{font:600 11px/1.5 var(--display);letter-spacing:.17em;text-transform:uppercase;color:#CCA2F4;text-decoration:none}
.post-categories a:hover{color:var(--button)}
.post-date{display:block;margin-top:22px;font:400 14px/1.5 var(--body);color:#B7A6C8}
.post-cover{max-width:980px;margin:0 auto 52px;aspect-ratio:16/9;overflow:hidden;border-radius:22px;border:1px solid rgba(213,180,244,.2);background:#3B2455}
.post-cover img{display:block;width:100%;height:100%;object-fit:cover}
.post-body{max-width:740px;margin:0 auto}
.post-foot{max-width:740px;margin:60px auto 0;padding-top:28px;border-top:1px solid rgba(221,185,246,.18);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.post-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.post-tags>span,.post-share>span{margin-inline-end:6px;font:600 11px/1.5 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#B7A6C8}
.post-tags a{padding:6px 12px;border-radius:999px;border:1px solid rgba(213,180,244,.24);background:rgba(155,104,203,.07);color:#E1D5EC;font:500 13px/1.3 var(--body);text-decoration:none;transition:border-color .2s,color .2s}
.post-tags a:hover{border-color:rgba(255,230,108,.5);color:var(--button)}
.post-share{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-inline-start:auto}
.post-share a{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(218,187,246,.28);border-radius:11px;background:rgba(255,255,255,.035);color:#E1D5EC;transition:border-color .2s,color .2s}
.post-share a:hover{border-color:rgba(255,230,108,.56);color:var(--button)}
.post-share svg{display:block;width:19px;height:19px;fill:currentColor}
.post-latest{margin-top:110px}

@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:660px){.blog-grid{grid-template-columns:1fr}.blog-hero{padding-bottom:48px}.blog-hero-compact{padding-top:52px;padding-bottom:40px}.blog-selected{margin-bottom:64px}.blog-search .btn{padding-inline:16px}.post-head{padding:48px 0 32px}.post-cover{margin-bottom:34px;border-radius:17px}.post-foot{margin-top:44px}.post-share{margin-inline-start:0}.post-latest{margin-top:76px}.blog-pager-step{flex-basis:100%;text-align:center;padding:4px}}
@media(prefers-reduced-motion:reduce){.blog-pager li>a,.post-tags a,.post-share a{transition:none}}