/* ============================================================
   VOTONOMICS — SOLUTION PAGE STYLES
   Loaded in addition to css/votonomics.css
   ============================================================ */

/* ---------- RELEVANT DOMAINS GRID ---------- */

.rel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.rel-card{ background:var(--warm-white); border:1px solid var(--border-strong); border-radius:10px; padding:1.9rem 1.7rem; text-decoration:none; display:block; transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.rel-card:hover{ border-color:var(--accent-b); box-shadow:0 14px 34px rgba(21,42,74,.08); transform:translateY(-2px); }
.rel-icon{ width:38px; height:38px; border-radius:8px; background:var(--accent-pale); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; }
.rel-title{ font-family:"Cormorant Garamond", serif; font-size:1.18rem; font-weight:600; color:var(--slate); margin-bottom:.5rem; }
.rel-desc{ font-size:.83rem; color:var(--slate-mid); line-height:1.6; margin-bottom:1rem; font-weight:300; }
.rel-link{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:500; }
@media (max-width:1100px){ .rel-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .rel-grid{ grid-template-columns:1fr; } }

/* ---------- SOLUTIONS NAV STRIP (5 items) ---------- */

.dn-grid.cols-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:1100px){ .dn-grid.cols-5{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .dn-grid.cols-5{ grid-template-columns:repeat(2,1fr); } }