/* ==========================================================================
   blog.css — blog listing page
   Ported verbatim from the inline <style> block of blog.html.
   Shared tokens, base, buttons, header and footer live in global.css.
   ========================================================================== */
/* ------------------------------------------------------------------
   Blog page — page-specific styles only.
   Shared tokens, base, buttons, header & footer: assets/global.css
   ------------------------------------------------------------------ */

/* Blog hero + search */
.blog-hero{background:linear-gradient(180deg,var(--ivory-deep),var(--ivory));text-align:center;padding-top:clamp(3rem,7vw,5rem);padding-bottom:clamp(2.6rem,6vw,3.6rem)}
.blog-hero .eyebrow{display:block;margin-bottom:1rem}
.blog-hero h1{font-size:clamp(2.3rem,5.4vw,3.6rem);margin-bottom:.7rem}
.blog-hero p{color:var(--muted);max-width:54ch;margin:0 auto 2.1rem;font-size:clamp(1.02rem,1.5vw,1.15rem)}
.search{display:flex;gap:.6rem;max-width:540px;margin:0 auto;flex-wrap:wrap}
.search input{flex:1 1 240px;padding:.9rem 1.2rem;border-radius:999px;border:1.5px solid var(--line);font-family:var(--sans);font-size:.98rem;background:#fff;color:var(--ink)}
.search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(176,129,60,.15)}
.search .btn{flex:0 0 auto}

/* Blog listing */
.blog-main{padding-block:clamp(2.4rem,6vw,3.6rem) var(--sect)}
.result-meta{color:var(--muted);font-size:.92rem;margin-bottom:1.7rem;min-height:1.3em}
.result-meta strong{color:var(--navy);font-weight:700}
.result-meta .clear{color:var(--gold);font-weight:700;cursor:pointer;margin-left:.5rem}
.result-meta .clear:hover{text-decoration:underline}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.b-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:1.7rem 1.6rem;box-shadow:0 22px 42px -34px rgba(27,42,71,.4);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.b-card:hover{transform:translateY(-5px);box-shadow:0 32px 52px -34px rgba(27,42,71,.45);border-color:var(--gold-bright)}
.b-cat{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.b-title{font-family:var(--serif);font-weight:600;font-size:1.42rem;line-height:1.2;margin-bottom:.55rem}
.b-excerpt{color:var(--muted);font-size:.95rem;line-height:1.55;margin-bottom:1.3rem;flex:1}
.b-meta{font-size:.76rem;color:var(--muted);display:flex;gap:.5rem;align-items:center;margin-bottom:.9rem}
.b-link{font-family:var(--sans);font-weight:700;font-size:.85rem;color:var(--navy);transition:color .25s ease}
.b-card:hover .b-link{color:var(--gold)}

.no-results{text-align:center;padding:3.5rem 1rem;color:var(--muted)}
.no-results h3{font-size:1.6rem;margin-bottom:.5rem}

/* Pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:.4rem;margin-top:clamp(2.6rem,6vw,3.6rem);flex-wrap:wrap}
.pagination button{min-width:44px;height:44px;padding:0 .85rem;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--navy);font-family:var(--sans);font-weight:700;font-size:.9rem;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.pagination button:hover:not(:disabled):not(.active){border-color:var(--gold);color:var(--gold)}
.pagination button.active{background:var(--navy);color:var(--ivory);border-color:var(--navy);cursor:default}
.pagination button:disabled{opacity:.4;cursor:not-allowed}
.pagination .ellipsis{color:var(--muted);padding:0 .2rem}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:var(--ivory);padding:.85rem 1.4rem;border-radius:999px;font-size:.9rem;font-family:var(--sans);box-shadow:0 20px 40px -20px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;z-index:200}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Responsive (page grid) */
@media(max-width:900px){ .blog-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .blog-grid{grid-template-columns:1fr} }