/* ============================================================
   FINDISE — blog listing (the posts page and every category
   archive). Scoped under .fin-list so nothing can leak out.
   ============================================================ */

.fin-list{
  --ink:#141419; --body:#3A3D4C; --meta:#5B5F73;
  --acc:#8636F8; --acc-tint:#F4EDFF;
  --page:#F4F4F5; --card:#FFFFFF; --line:#E4E4E8; --hair:#EDEDF0;
  --r:14px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--body); -webkit-font-smoothing:antialiased;
}

/* The theme paints the page white. The grey is what stops white cards on a
   white page reading as an empty screen, so it is applied to the body. */
body.fin-list-page{ background:#F4F4F5; }

.fin-list *,.fin-list *::before,.fin-list *::after{box-sizing:border-box}
.fin-list a{color:inherit;text-decoration:none}
.fin-list :focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
.fin-list-wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---- heading ---- */
.fin-list-head{padding:72px 0 36px;text-align:center}
.fin-list h1.fin-list-title{
  margin:0;font-size:clamp(30px,3.4vw,40px);line-height:1.1;letter-spacing:-.028em;
  font-weight:600;color:var(--ink);
}
.fin-list-desc{margin:14px auto 0;max-width:70ch;font-size:16.5px;line-height:1.6;color:var(--meta)}

/* ---- category rail ----
   One line however many categories exist. Fades and arrows appear only when
   the rail actually overflows, so six categories stay a clean centred row. */
.fin-railwrap{position:relative;border-bottom:1px solid var(--line);margin-bottom:2px}
.fin-rail{
  display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;padding:0 0 34px;
  justify-content:center;scrollbar-width:none;-ms-overflow-style:none;
}
.fin-rail::-webkit-scrollbar{display:none}
.fin-railwrap.is-scrollable .fin-rail{justify-content:flex-start}
.fin-chip{
  flex:0 0 auto;font-size:13.5px;font-weight:500;color:var(--body);background:var(--card);
  border:1px solid var(--line);border-radius:8px;padding:8px 13px;line-height:1.2;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  transition:border-color .14s,background .14s,color .14s;
}
.fin-chip .n{font-size:11.5px;font-weight:600;color:#6C6F80}
.fin-chip:hover{border-color:#D2BEFB;background:#FCFAFF;color:var(--body)}
.fin-chip.is-on{background:var(--acc);border-color:var(--acc);color:#fff}
.fin-chip.is-on .n{color:rgba(255,255,255,.72)}
.fin-fade{position:absolute;top:0;bottom:35px;width:64px;pointer-events:none;opacity:0;transition:opacity .18s;z-index:2}
.fin-fade.l{left:0;background:linear-gradient(90deg,var(--page) 30%,rgba(244,244,245,0))}
.fin-fade.r{right:0;background:linear-gradient(270deg,var(--page) 30%,rgba(244,244,245,0))}
.fin-railwrap.at-start .fin-fade.r,
.fin-railwrap.is-mid .fin-fade.r,
.fin-railwrap.at-end .fin-fade.l,
.fin-railwrap.is-mid .fin-fade.l{opacity:1}
.fin-nav{
  position:absolute;top:calc(50% - 18px);transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;background:var(--card);border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(20,20,25,.10);cursor:pointer;display:none;place-items:center;
  color:var(--ink);z-index:3;padding:0;
}
.fin-railwrap.is-scrollable .fin-nav{display:grid}
.fin-railwrap.at-start .fin-nav.prev,.fin-railwrap.at-end .fin-nav.next{display:none}
.fin-nav.prev{left:-6px}
.fin-nav.next{right:-6px}
.fin-nav:hover{border-color:#C9B4F7;color:var(--acc)}

/* ---- cards ----
   Rows sit far apart, columns stay close. Widening both just makes the page
   sparse again; this is what keeps the eye reading across before dropping. */
.fin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:72px 32px;padding:54px 0 0}
.fin-b-card{
  position:relative;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 1px 2px rgba(20,20,25,.04);
  transition:transform .19s,box-shadow .19s,border-color .19s;
}
.fin-b-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(20,20,25,.10);border-color:#DCCCFA}
/* Whole card is the link — people click cards, not words. */
.fin-b-link{position:absolute;inset:0;z-index:2}
.fin-b-img{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--hair)}
.fin-b-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s}
.fin-b-card:hover .fin-b-img img{transform:scale(1.04)}
.fin-b-body{padding:18px 20px 19px;display:flex;flex-direction:column;flex:1}
.fin-b-cat{
  align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--acc);background:var(--acc-tint);padding:4px 9px;border-radius:5px;margin-bottom:11px;
}
.fin-list .fin-b-body h2{
  margin:0 0 8px;font-size:17px;line-height:1.35;font-weight:600;letter-spacing:-.014em;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.fin-b-card:hover .fin-b-body h2{color:var(--acc)}
.fin-b-body p{
  margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--meta);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.fin-b-meta{
  margin-top:auto;padding-top:11px;border-top:1px solid var(--hair);
  font-size:12.5px;color:#71748A;display:flex;align-items:center;gap:8px;
}
.fin-b-dot{width:3px;height:3px;border-radius:50%;background:#BFC1CB;flex:0 0 auto;display:inline-block}
.fin-list-empty{display:none;padding:52px 0;text-align:center;color:var(--meta);font-size:16px}

/* ---- pagination (only rendered once there is a second page) ---- */
.fin-list-pager{display:flex;justify-content:center;align-items:center;gap:8px;margin:64px 0 0;flex-wrap:wrap}
.fin-list-pager .page-numbers{
  min-width:42px;height:42px;display:grid;place-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:10px;font-size:15px;font-weight:600;color:var(--body);padding:0 13px;
}
.fin-list-pager .page-numbers.current{background:var(--acc);border-color:var(--acc);color:#fff}
.fin-list-pager a.page-numbers:hover{border-color:#D2BEFB;background:#FCFAFF;color:var(--acc)}
.fin-list-end{height:110px}

@media (max-width:1180px){
  .fin-grid{grid-template-columns:repeat(2,1fr);gap:60px 28px}
}
@media (max-width:640px){
  .fin-list-wrap{padding:0 18px}
  .fin-list-head{padding:44px 0 26px}
  .fin-rail{justify-content:flex-start}
  .fin-nav{display:none !important}
  .fin-grid{grid-template-columns:1fr;gap:44px;padding:40px 0 0}
}

@media (prefers-reduced-motion:reduce){
  .fin-list *,.fin-list *::before,.fin-list *::after{
    animation-duration:.01ms !important;transition-duration:.01ms !important;
  }
  .fin-b-card:hover{transform:none}
  .fin-b-card:hover .fin-b-img img{transform:none}
  .fin-rail{scroll-behavior:auto}
}