/* ==========================================================================
   CERTINAL — blog.css   (Blog ARCHIVE page sections)
   --------------------------------------------------------------------------
   Loaded only by src/pages/blog/index.astro via Base's `pageStyles` prop,
   after tokens.css (foundation) + shell.css (chrome). Layout pattern is
   recreated from a reference, fully restyled with Certinal DS tokens:
   lime/dark palette, dark-on-lime, tone-on-tone gradients, radii ≤20px, 8pt.
   Sections: hero · featured · (sticky sidebar + card grid) · pagination ·
   events banner · newsletter.
   ========================================================================== */

.blogWrap{max-width:1360px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}

/* ==========================================================================
   1. HERO — centered, soft lime wash
   ========================================================================== */
.blogHero{position:relative;overflow:hidden;background:var(--n-50)}
.blogHeroBg{position:absolute;inset:0;pointer-events:none}
.blogHeroBg::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 70% at 50% -10%,rgba(205,247,87,.45),transparent 70%),
  radial-gradient(40% 50% at 12% 20%,rgba(212,249,121,.32),transparent 70%),
  radial-gradient(40% 50% at 88% 16%,rgba(205,247,87,.28),transparent 70%),
  linear-gradient(#F5F7FC,#FDFFF4 60%,#F1FCDB)}
.blogHeroBg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(121,150,27,.06) 1px,transparent 1px),
  linear-gradient(rgba(121,150,27,.06) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 0%,rgba(0,0,0,.7),transparent 75%);
  mask-image:radial-gradient(70% 70% at 50% 0%,rgba(0,0,0,.7),transparent 75%)}
/* brand ripple bleeding from the lower-right (behind content via z-index) */
.blogHero::after{content:"";position:absolute;right:-140px;bottom:-140px;width:min(500px,44%);aspect-ratio:1;
  background:url('/assets/patterns/layered-circle.svg') no-repeat center/contain;opacity:.34;pointer-events:none;z-index:0}
.blogHeroInner{position:relative;z-index:1;max-width:820px;margin:0 auto;text-align:center;
  padding:calc(var(--nav-offset) + clamp(40px,6vh,72px)) clamp(20px,4vw,40px) clamp(48px,7vh,80px)}
.blogHeroEyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.8);
  border:1px solid var(--n-200);border-radius:var(--r-full);padding:7px 16px;
  font-size:var(--text-xs);font-weight:var(--w-primary);letter-spacing:.2em;text-transform:uppercase;
  color:var(--lime-800);box-shadow:0 4px 14px rgba(62,79,5,.06);margin-bottom:22px}
.blogHeroEyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime-500)}
.blogHeroTitle{font-size:var(--h1);font-weight:var(--w-primary);line-height:var(--lh-h1);
  letter-spacing:-.03em;color:var(--n-950);text-wrap:balance}
.blogHeroSub{font-size:var(--text-lg);line-height:var(--lh-body);color:var(--text-secondary);
  max-width:640px;margin:clamp(18px,3vh,26px) auto 0}

/* ==========================================================================
   2. SHARED CARD LOOK (featured + grid)
   ========================================================================== */
.blogCardMedia{position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--lime-200),var(--lime-400) 55%,var(--lime-500))}
.blogCardImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.blogCardMedia::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 15% 12%,rgba(255,255,255,.5),transparent 55%),
  radial-gradient(circle at 80% 85%,rgba(62,79,5,.14),transparent 45%);
  opacity:.9}
.blogCardMedia::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(circle,rgba(20,20,21,.05) 1px,transparent 1.4px);background-size:16px 16px;opacity:.5}
.blogTag{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;
  background:var(--n-950);color:var(--lime-400);font-size:11px;font-weight:var(--w-primary);
  letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-full)}
.blogCardMeta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:14px;border-top:1px solid var(--border)}
.blogCardAuthor{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-sm);
  font-weight:var(--w-secondary);color:var(--lime-800)}
.blogCardAuthor::before{content:"";width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--lime-300),var(--lime-500));border:1px solid rgba(92,115,18,.25)}
.blogCardDate{font-size:var(--text-sm);color:var(--text-muted)}

/* ==========================================================================
   3. FEATURED — 2 large cards
   ========================================================================== */
.blogFeatured{padding:clamp(40px,6vh,64px) 0 0}
.blogFeaturedGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,32px)}
.featCard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:inset 0 1px #fff,0 10px 30px rgba(62,79,5,.06);
  transition:transform .32s var(--ease-lift),box-shadow .32s,border-color .32s}
.featCard:hover{transform:translateY(-5px);border-color:var(--lime-600);
  box-shadow:0 22px 48px rgba(62,79,5,.14)}
.featCard .blogCardMedia{height:clamp(190px,22vw,250px)}
.featCardBody{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.2vw,30px)}
.featCardTitle{font-size:var(--h5);font-weight:var(--w-primary);line-height:var(--lh-h5);
  letter-spacing:-.01em;color:var(--n-950);margin-bottom:12px;transition:color .2s}
.featCard:hover .featCardTitle{color:var(--lime-800)}
.featCardExcerpt{font-size:var(--text-md);line-height:var(--lh-body);color:var(--text-secondary);
  margin-bottom:20px}

/* ==========================================================================
   4. MAIN — sticky filter sidebar + card grid
   ========================================================================== */
.blogMain{display:grid;grid-template-columns:300px 1fr;gap:clamp(24px,3vw,44px);
  padding:clamp(36px,5vh,56px) 0 clamp(48px,7vh,80px);align-items:start}

/* --- sticky sidebar --- */
.blogSidebar{position:sticky;top:96px;align-self:start;min-width:0}  /* min-width:0 so the grid track can't be blown out by chip content */
.blogSidebarInner{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(22px,1.8vw,28px);box-shadow:0 10px 30px rgba(62,79,5,.05)}
.sidebarTitle{font-size:var(--h6);font-weight:var(--w-primary);color:var(--n-950);margin-bottom:18px}
.blogSearch{position:relative;margin-bottom:26px}
.blogSearch input{width:100%;height:46px;padding:0 16px 0 42px;font:inherit;font-size:var(--text-sm);
  color:var(--n-950);background:var(--n-50);border:1px solid var(--n-200);border-radius:var(--r-full);
  transition:border-color .2s,background .2s,box-shadow .2s}
.blogSearch input::placeholder{color:var(--text-muted)}
.blogSearch input:focus{outline:none;background:#fff;border-color:var(--lime-600);
  box-shadow:0 0 0 4px rgba(205,247,87,.28)}
.blogSearch .searchIcon{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);pointer-events:none;display:flex}
.filterGroup + .filterGroup{margin-top:24px;padding-top:24px;border-top:1px solid var(--border)}
.filterLabel{font-size:var(--text-xs);font-weight:var(--w-primary);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:14px}
.chipRow{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;padding:8px 14px;font-size:var(--text-sm);
  font-weight:var(--w-secondary);color:var(--text-secondary);background:var(--n-50);
  border:1px solid var(--n-200);border-radius:var(--r-full);cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,transform .18s var(--ease-lift)}
.chip:hover{color:var(--n-950);background:rgba(205,247,87,.28);border-color:var(--lime-500);transform:translateY(-1px)}
.chipActive{background:var(--lime-400);border-color:var(--lime-400);color:var(--n-950);font-weight:var(--w-primary)}
.chipActive:hover{background:var(--lime-400)}

/* --- card grid --- */
.blogContent{min-width:0}   /* prevent the inner grid from blowing out the 1fr column */
.blogGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,1.6vw,24px)}
.blogCard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:inset 0 1px #fff,0 8px 22px rgba(62,79,5,.05);
  transition:transform .3s var(--ease-lift),box-shadow .3s,border-color .3s}
.blogCard:hover{transform:translateY(-4px);border-color:var(--lime-600);box-shadow:0 18px 40px rgba(62,79,5,.13)}
.blogCard .blogCardMedia{height:clamp(150px,12vw,172px)}
.blogCardBody{display:flex;flex-direction:column;flex:1;padding:clamp(18px,1.4vw,22px)}
.blogCardTitle{font-size:var(--text-lg);font-weight:var(--w-primary);line-height:1.32;
  letter-spacing:-.01em;color:var(--n-950);margin-bottom:10px;transition:color .2s}
.blogCard:hover .blogCardTitle{color:var(--lime-800)}
.blogCardExcerpt{font-size:var(--text-sm);line-height:var(--lh-body);color:var(--text-secondary);margin-bottom:18px}

/* --- dark card variant (rhythm) --- */
.blogCard.dark{background:linear-gradient(160deg,#1E1F21,#141415);border-color:rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.24)}
.blogCard.dark:hover{border-color:rgba(205,247,87,.5);box-shadow:0 22px 46px rgba(0,0,0,.36)}
.blogCard.dark .blogCardMedia{background:linear-gradient(140deg,#2A2C2F,#161718)}
.blogCard.dark .blogCardMedia::after{background:radial-gradient(120% 90% at 20% 10%,rgba(205,247,87,.22),transparent 55%)}
.blogCard.dark .blogCardMedia::before{background:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1.4px);background-size:16px 16px}
.blogCard.dark .blogTag{background:var(--lime-400);color:var(--n-950)}
.blogCard.dark .blogCardTitle{color:#fff}
.blogCard.dark:hover .blogCardTitle{color:var(--lime-400)}
.blogCard.dark .blogCardExcerpt{color:rgba(255,255,255,.66)}
.blogCard.dark .blogCardMeta{border-top-color:rgba(255,255,255,.1)}
.blogCard.dark .blogCardAuthor{color:var(--lime-400)}
.blogCard.dark .blogCardDate{color:rgba(255,255,255,.45)}

/* ==========================================================================
   5. PAGINATION
   ========================================================================== */
.blogPagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(32px,4vh,48px)}
.pageBtn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px;font-size:var(--text-sm);
  font-weight:var(--w-button);border-radius:var(--r-full);border:1px solid var(--n-200);background:#fff;
  color:var(--n-950);cursor:pointer;transition:background .2s,border-color .2s,transform .2s var(--ease-lift),box-shadow .2s}
.pageBtn:hover{border-color:var(--lime-600);transform:translateY(-1px)}
.pageBtnNext{background:var(--lime-400);border-color:var(--lime-400)}
.pageBtnNext:hover{background:var(--lime-500);box-shadow:0 10px 24px rgba(121,150,27,.3)}
.pageBtn[disabled],.pageBtnPrev[disabled]{opacity:.45;cursor:not-allowed;transform:none;border-color:var(--n-200)}
.pageInfo{font-size:var(--text-sm);color:var(--text-muted)}

/* ==========================================================================
   6. EVENTS — dark feature banner
   ========================================================================== */
.eventsSection{padding:clamp(16px,3vh,32px) 0 clamp(48px,7vh,80px)}
.eventsTitle{font-size:var(--h4);font-weight:var(--w-primary);letter-spacing:-.02em;color:var(--n-950);
  margin-bottom:22px}
.eventBanner{position:relative;overflow:hidden;border-radius:var(--r-lg);isolation:isolate;
  min-height:clamp(300px,34vw,380px);display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(28px,3.4vw,48px);color:#fff;
  background:linear-gradient(115deg,#171A12 0%,#12140E 45%,#0C0D09 100%)}
.eventBanner::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 90% at 88% 20%,rgba(205,247,87,.28),transparent 60%),
  radial-gradient(50% 80% at 10% 90%,rgba(121,150,27,.30),transparent 62%)}
.eventBanner::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
  linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:52px 52px;
  -webkit-mask-image:radial-gradient(80% 80% at 80% 20%,rgba(0,0,0,.9),transparent 75%);
  mask-image:radial-gradient(80% 80% at 80% 20%,rgba(0,0,0,.9),transparent 75%)}
.eventMeta{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.eventTag{display:inline-flex;align-items:center;background:var(--lime-400);color:var(--n-950);
  font-size:11px;font-weight:var(--w-primary);letter-spacing:.1em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--r-full)}
.eventDate{font-size:var(--text-sm);color:rgba(255,255,255,.7)}
.eventBannerTitle{font-size:var(--h3);font-weight:var(--w-primary);line-height:var(--lh-h3);
  letter-spacing:-.02em;max-width:18ch;margin-bottom:14px;color:#fff}   /* explicit: base reset sets h1-h6 dark */
.eventExcerpt{font-size:var(--text-md);line-height:var(--lh-body);color:rgba(255,255,255,.72);
  max-width:60ch;margin-bottom:26px}
.eventCta{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;
  background:#fff;color:var(--n-950);font-weight:var(--w-button);font-size:var(--btn-size);
  border-radius:var(--r-full);transition:transform .2s var(--ease-lift),box-shadow .2s,background .2s,color .2s}
.eventCta:hover{background:var(--lime-400);transform:translateY(-2px);box-shadow:0 14px 32px rgba(205,247,87,.3)}
.eventCta svg{transition:transform .2s var(--ease-lift)}
.eventCta:hover svg{transform:translate(2px,-2px)}

/* ==========================================================================
   7. NEWSLETTER — full-bleed lime section (dark text on lime)
   ========================================================================== */
.newsletterSection{position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--lime-300),var(--lime-400) 52%,var(--lime-500));
  padding:clamp(56px,9vh,104px) clamp(20px,4vw,40px)}
.newsletterSection::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(50% 120% at 15% 0%,rgba(255,255,255,.5),transparent 55%),
  radial-gradient(50% 120% at 85% 100%,rgba(62,79,5,.14),transparent 55%)}
/* brand ripple anchored to the bottom-right corner (visible on the lime band; dark text stays clear) */
.newsletterSection::after{content:"";position:absolute;right:-70px;bottom:-90px;width:min(420px,40%);aspect-ratio:1;
  background:url('/assets/patterns/layered-circle.svg') no-repeat center/contain;opacity:.45;pointer-events:none;z-index:0}
.newsletterInner{position:relative;z-index:1;max-width:640px;margin:0 auto;text-align:center}
@media (prefers-reduced-motion:no-preference){
  .blogHero::after{animation:certBreathe 13s ease-in-out infinite,certDrift 16s ease-in-out infinite}
  .newsletterSection::after{animation:certBreathe 10s ease-in-out .6s infinite,certDrift 15s ease-in-out infinite}
}
.newsletterTitle{font-size:var(--h2);font-weight:var(--w-primary);line-height:var(--lh-h2);
  letter-spacing:-.02em;color:var(--n-950);text-wrap:balance}
.newsletterSub{font-size:var(--text-lg);line-height:var(--lh-body);color:var(--lime-900);
  margin:16px auto 0;max-width:520px}
.newsletterForm{display:flex;align-items:center;gap:8px;margin:clamp(26px,4vh,38px) auto 0;
  background:#fff;border-radius:var(--r-full);padding:7px 7px 7px 8px;max-width:520px;
  box-shadow:0 16px 40px rgba(62,79,5,.18)}
.newsletterForm input{flex:1;min-width:0;height:48px;padding:0 18px;border:0;background:transparent;
  font:inherit;font-size:var(--text-md);color:var(--n-950)}
.newsletterForm input::placeholder{color:var(--text-muted)}
.newsletterForm input:focus{outline:none}
.newsletterBtn{flex:0 0 auto;height:48px;padding:0 28px;border:0;border-radius:var(--r-full);
  background:var(--n-950);color:var(--lime-400);font-weight:var(--w-button);font-size:var(--btn-size);
  cursor:pointer;transition:background .2s,transform .2s var(--ease-lift),box-shadow .2s}
.newsletterBtn:hover{background:var(--n-800);transform:translateY(-1px);box-shadow:0 12px 28px rgba(20,20,21,.28)}

/* ==========================================================================
   7b. ARCHIVE ADDITIONS — chip links, numbered pager, client results view,
       solo (no-sidebar) layout, category back-link. Shared by every archive.
   ========================================================================== */
[hidden]{display:none!important}

/* hero back-link (shown on category archives) */
.blogHeroBack{display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-size:var(--text-sm);font-weight:var(--w-button);color:var(--lime-800);transition:gap .2s,color .2s}
.blogHeroBack:hover{gap:12px;color:var(--lime-900)}
.blogHeroBack svg{width:16px;height:16px}

/* chips-as-links (category filter) — inherit .chip look, kill underline */
a.chip{text-decoration:none}

/* solo layout: no sidebar, grid uses the full content width */
.blogMainSolo{grid-template-columns:1fr}

/* numbered pagination */
.pageNums{display:flex;align-items:center;gap:6px;margin:0 4px}
.pageNum{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 6px;border-radius:var(--r-md);
  font-size:var(--text-sm);font-weight:var(--w-secondary);color:var(--n-700);
  transition:background .18s,color .18s,border-color .18s}
.pageNum:hover{background:rgba(205,247,87,.28);color:var(--n-950)}
.pageNumActive{background:var(--n-950);color:var(--lime-400);font-weight:var(--w-primary)}
.pageNumActive:hover{background:var(--n-950);color:var(--lime-400)}
.pageEllipsis{color:var(--text-muted);padding:0 2px}
.pageBtn[aria-disabled="true"]{opacity:.45;pointer-events:none}
a.pageBtn{text-decoration:none}

/* client-side filtered results view (search / year) */
.archiveResultsWrap{min-width:0}
.archiveResultsHead{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.archiveCount{font-size:var(--text-sm);font-weight:var(--w-secondary);color:var(--n-700)}
.archiveClear{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;font:inherit;
  font-size:var(--text-sm);font-weight:var(--w-button);color:var(--n-700);background:var(--n-50);
  border:1px solid var(--n-200);border-radius:var(--r-full);cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.archiveClear:hover{color:var(--n-950);border-color:var(--lime-600);background:rgba(205,247,87,.28)}
.archiveClear svg{width:15px;height:15px}
.archiveEmpty{text-align:center;padding:clamp(48px,9vh,88px) 20px}
.archiveEmptyTitle{font-size:var(--h5);font-weight:var(--w-primary);color:var(--n-950);margin-bottom:8px}
.archiveEmptySub{font-size:var(--text-md);color:var(--text-secondary)}
.archiveMoreWrap{display:flex;justify-content:center;margin-top:clamp(28px,4vh,40px)}
.showMoreBtn{cursor:pointer}

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */
@media (max-width:1200px){
  .blogMain:not(.blogMainSolo){grid-template-columns:260px 1fr}
  .blogGrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1023px){
  /* sidebar unpins and moves to the top; chips wrap (full-width sidebar has room).
     `.blogMain.blogMain` = specificity (0,2,0) so it beats the max-width:1200
     `.blogMain:not(.blogMainSolo)` two-column rule and collapses to one column. */
  .blogMain.blogMain{grid-template-columns:1fr;gap:28px}
  .blogSidebar{position:static;top:auto}
}
@media (max-width:768px){
  .blogFeaturedGrid{grid-template-columns:1fr}
  .blogGrid{grid-template-columns:1fr}
  .eventBannerTitle{font-size:var(--h4)}
  /* let the numbered pager + results header wrap instead of forcing the column wide */
  .blogPagination{flex-wrap:wrap;gap:10px}
  .pageNums{flex-wrap:wrap;justify-content:center}
  .archiveResultsHead{flex-wrap:wrap}
}
@media (max-width:520px){
  .newsletterForm{flex-direction:column;border-radius:var(--r-lg);padding:12px}
  .newsletterForm input{width:100%;text-align:center}
  .newsletterBtn{width:100%}
}