/* «Διαδραστικά» (diadrastika.hbs): tool cards under the site's standard page head. Cards follow the hub's tools band (ekloges-design.md). */
/* Sits inside the site's gh-inner under the standard page head, so no page background or padding of its own. */
#ekl.diad{background:none;padding:0 0 96px}
#ekl.diad .dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:8px}
#ekl.diad .dcard{display:flex;flex-direction:column;gap:10px;padding:24px;background:var(--paper);border:1px solid var(--rule);border-radius:4px;text-decoration:none;color:var(--ink);transition:border-color .15s}
#ekl.diad .dcard svg.lu{width:28px;height:28px;color:var(--gr)}
#ekl.diad .dcard h2{font-size:clamp(21px,2.2vw,25px);margin-top:4px}
#ekl.diad .dcard p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.55}
#ekl.diad .dgo{margin-top:auto;align-self:flex-start;padding:7px 14px;border:1px solid var(--gr);border-radius:4px;color:var(--gr);font-weight:600;font-size:14px;transition:background .15s,color .15s}
#ekl.diad .dcard:hover{border-color:var(--gr)}
#ekl.diad .dcard:hover h2{color:var(--gr)}
#ekl.diad .dcard:hover .dgo{background:var(--gr);color:#fff}
@media (max-width:720px){#ekl.diad .dgrid{grid-template-columns:minmax(0,1fr);gap:16px}#ekl.diad .dcard{padding:20px}}
@media (prefers-reduced-motion:reduce){#ekl.diad .dcard,#ekl.diad .dgo{transition:none}}