/* =============================================================
   ClckIndex — styles for the standalone pages built from the
   wireframes: projects, case-study, reviews, areas, faq, blog,
   blog-post, contact. Loads AFTER style.css + pages.css.
   ============================================================= */

/* ---------- FILTER PILLS (projects index) ---------- */
.filter-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 48px;}
.filter-pill{
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--primary);
  background:#fff;border:1px solid var(--border);border-radius:50px;padding:9px 18px;cursor:pointer;
  transition:transform .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease);
}
.filter-pill:hover{border-color:var(--primary);transform:translateY(-2px);}
.filter-pill.active{background:var(--accent);border-color:var(--accent);color:#fff;}

/* project cards used as links */
a.project-card{display:block;color:inherit;}

/* ---------- CASE STUDY ---------- */
.cs-shot{max-width:980px;margin:0 auto;border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 60px rgba(16,19,26,.18);}
.cs-shot img{width:100%;display:block;}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.cs-quote{max-width:680px;margin:0 auto;border-left:3px solid var(--accent);}

/* ---------- BLOG INDEX: featured post ---------- */
.featured-card{
  display:grid;grid-template-columns:1.15fr .85fr;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;margin-bottom:56px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.featured-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(16,19,26,.12);border-color:var(--primary);}
.featured-media{min-height:320px;position:relative;}
.featured-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.featured-body{padding:44px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}
.featured-body h2{font-size:30px;margin:8px 0 14px;}

/* ---------- BLOG POST (article) ---------- */
.post-meta{font-size:13px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.08em;margin:0 0 16px;}
.post-cover{max-width:980px;margin:44px auto 0;border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 60px rgba(16,19,26,.14);}
.post-cover img{width:100%;display:block;}
.post-body{max-width:740px;margin:0 auto;}
.post-body p{font-size:16.5px;line-height:1.8;color:var(--muted);margin:0 0 22px;}
.post-body h2{font-size:26px;margin:44px 0 14px;}
.post-body ul{color:var(--muted);font-size:16.5px;line-height:1.8;padding-left:22px;margin:0 0 22px;}
.post-body blockquote{border-left:3px solid var(--accent);margin:32px 0;padding:6px 0 6px 22px;font-size:18px;line-height:1.65;color:var(--ink);font-weight:500;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .steps-grid{grid-template-columns:1fr;}
  .featured-card{grid-template-columns:1fr;}
  .featured-media{min-height:240px;}
}
@media (max-width:767px){
  .featured-body{padding:28px;}
  .featured-body h2{font-size:24px;}
}