/* dd/icon-grid – v3: ikona v štvorci s rohom, pri hover zdvih a žltá linka; 1 stĺpec, od 768 px 2, od 1024 px 3 */
.dd-ig{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.dd-ig-i{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);margin:0;overflow:hidden;transition:box-shadow var(--duration-base) var(--ease-out),translate var(--duration-base) var(--ease-out),border-color var(--duration-base)}
.dd-ig-i::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--yellow);transform:scaleX(0);transform-origin:0 50%;transition:transform 450ms var(--ease-io)}
.dd-ig-i:hover{translate:0 -4px;box-shadow:var(--shadow-card-hover)}
.dd-ig-i.dd-card:hover{border-color:transparent}
.dd-ig-i:hover::before{transform:scaleX(1)}
.dd-ig-i .dd-icon-circle{position:relative;width:52px;height:52px;border-radius:var(--radius-sm);transition:background var(--duration-base),color var(--duration-base)}
.dd-ig-i .dd-icon-circle::after{content:"";position:absolute;left:-4px;top:-4px;width:14px;height:14px;border:3px solid var(--yellow);border-right:0;border-bottom:0}
.dd-ig-i:hover .dd-icon-circle{background:var(--blue);color:var(--surface-0)}
.dd-ig-i h3{margin:var(--space-1) 0 0}
.dd-ig-i p{max-width:none}
/* po odhalení (data-stagger) základ prepisuje prechody; vrátime tie pre hover (zdvih cez translate) */
html.dd-js .dd-pre.dd-in .dd-ig>[data-st]{transition:opacity .6s var(--ease-out) calc(var(--i,0)*90ms),transform .7s var(--ease-out) calc(var(--i,0)*90ms),box-shadow .2s var(--ease-out),translate .2s var(--ease-out),border-color .2s}
@media (min-width:768px){.dd-ig{grid-template-columns:repeat(2,1fr);gap:var(--space-5)}}
@media (min-width:1024px){.dd-ig{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.dd-ig-i:hover{translate:none}}
/* Kompaktné dlaždice (napr. „Čo nám poslať“): ikona, krátky nadpis, 1 riadok textu; mobil 2 stĺpce, od 1024 px 4 */
.dd-ig--k{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.dd-ig--k .dd-ig-i{gap:var(--space-2);padding:var(--space-4)}
.dd-ig--k .dd-ig-i .dd-icon-circle{width:44px;height:44px;font-size:22px}
.dd-ig--k .dd-ig-i h3{font-size:18px;line-height:22px}
.dd-ig--k .dd-ig-i p{font-size:14px;line-height:20px}
@media (min-width:768px){.dd-ig--k{grid-template-columns:repeat(2,1fr);gap:var(--space-4)}}
@media (min-width:1024px){.dd-ig--k{grid-template-columns:repeat(4,1fr)}}
/* UX audit F11: na mobile ikona vľavo od textu (kratšie karty) */
@media (max-width:767px){.dd-ig:not(.dd-ig--k) .dd-ig-i{display:grid;grid-template-columns:52px 1fr;column-gap:var(--space-4);row-gap:var(--space-1);align-items:start}.dd-ig:not(.dd-ig--k) .dd-ig-i .dd-icon-circle{grid-row:span 2}.dd-ig:not(.dd-ig--k) .dd-ig-i h3{margin:0}}
/* F14: pri 2 stĺpcoch posledná nepárna karta cez celú šírku */
@media (min-width:768px) and (max-width:1023px){.dd-ig:not(.dd-ig--k)>:last-child:nth-child(odd){grid-column:1/-1}}
/* F15: karty nie sú odkaz – bez nadvihnutia a tieňa, len jemná žltá linka */
.dd-ig-i:hover{translate:none;box-shadow:none}
.dd-ig-i:hover .dd-icon-circle{background:var(--blue-100);color:var(--blue)}