/* tuki.html: tukikanavat (puhelin, sähköposti) ja yhteydenottolomake
   brändi-ilmeen (css/brandi.css) päälle. */

.tuki-kanavat { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 0 0 1.6rem; }
.tuki-kanava {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-decoration: none;
    color: var(--ruskea);
    background: #fff;
    border: var(--reuna) solid var(--ruskea);
    border-radius: 14px;
    box-shadow: 4px 4px 0 var(--ruskea-tumma);
    padding: 1rem 1.1rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.tuki-kanava:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ruskea-tumma); }
.tuki-kanava-ikoni { font-size: 1.6rem; line-height: 1; }
.tuki-kanava-otsikko { font-family: var(--otsikko); font-size: 1.2rem; }
.tuki-kanava-arvo { font-weight: 800; color: var(--turkoosi-tumma); font-size: 1.1rem; }
.tuki-kanava-lisa { color: var(--himmea); font-size: 0.88rem; }

.luonti-rivi { display: flex; gap: 1rem; }
.luonti-rivi > .kentta { flex: 1 1 0; min-width: 0; }
@media (max-width: 560px) { .luonti-rivi { flex-direction: column; gap: 0; } }

/* Hunajapurkki pois näkyvistä ja lukijoilta; ei display:none, jotta botit täyttävät sen. */
.tuki-piilo { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }