/* ════════════════════════════════════════════════════════════
   pages/home.css — Homepage-specific tweaks
   Most homepage sections use shared components.css styles.
   ════════════════════════════════════════════════════════════ */

/* Section header with action link aligned right */
.section-header.split{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:40px}
.section-header.split .section-title{margin-bottom:0}

/* ─── FEATURED PROJECTS (data-driven, image-free) ────────── */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat-card{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--card);border:1.5px solid var(--card-border);border-radius:12px;padding:24px 24px 22px;overflow:hidden;transition:all .2s}
.feat-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--feat-accent,var(--accent));opacity:.9}
.feat-card:hover{border-color:var(--feat-accent,var(--accent));box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.feat-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.feat-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:4px 10px;border-radius:20px}
.feat-year{font-size:13px;font-weight:800;color:var(--text-light)}
.feat-card h3{font-size:15.5px;font-weight:700;line-height:1.4;color:var(--text)}
.feat-loc{display:flex;align-items:flex-start;gap:7px;font-size:13px;color:var(--text-muted);line-height:1.5;flex:1}
.feat-loc svg{width:14px;height:14px;stroke:var(--feat-accent,var(--accent));fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:2px}
.feat-link{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--feat-accent,var(--accent));margin-top:2px}
.feat-link svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.feat-card:hover .feat-link svg{transform:translateX(4px)}

@media(max-width:960px){ .feat-grid{grid-template-columns:1fr 1fr} }
@media(max-width:640px){
  .section-header.split{flex-direction:column;align-items:flex-start;gap:16px}
  .feat-grid{grid-template-columns:1fr}
}