/* technologie.css — jen to, co je specificke pro technologie.html.
   Spolecny zaklad je v base.css. */
/* Mřížka boxů s tématy */
.temata {
    max-width: 1200px; margin: 50px auto 0 auto; padding: 0 40px;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
}
.tema {
    display: flex; flex-direction: column;
    background: #090d16;
    border: 1px solid #1e293b;
    border-radius: 24px; overflow: hidden;
    text-decoration: none; color: inherit;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.tema:hover { transform: translateY(-6px); }
.tema-obrazek {
    height: 190px; display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
/* Jednotný rám pro náhledy, aby všechny karty měly obrázek stejně velký */
.tema-obrazek img { width: 100%; height: 100%; object-fit: contain; padding: 18px 24px; }
.tema-obrazek svg { width: 76px; height: 76px; opacity: 0.9; }
.tema-telo { padding: 26px 28px 30px 28px; }
.tema-znacka {
    display: inline-block; font-family: monospace; font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px;
}
.tema h2 { font-size: 1.45rem; color: #fff; margin: 0 0 12px 0; }
.tema p { color: #94a3b8; line-height: 1.7; margin: 0 0 18px 0; font-size: 0.97rem; }
.tema-odkaz { font-weight: 700; font-size: 0.95rem; }

.tema-hikvision:hover { border-color: #3b82f6; box-shadow: 0 0 30px rgba(59, 130, 246, 0.22); }
.tema-hikvision .tema-znacka, .tema-hikvision .tema-odkaz { color: #3b82f6; }
.tema-hikvision .tema-obrazek { background: radial-gradient(circle at 50% 60%, rgba(59, 130, 246, 0.18) 0%, transparent 70%); }

.tema-ctronics:hover { border-color: #22d3ee; box-shadow: 0 0 30px rgba(34, 211, 238, 0.2); }
.tema-ctronics .tema-znacka, .tema-ctronics .tema-odkaz { color: #22d3ee; }
.tema-ctronics .tema-obrazek { background: radial-gradient(circle at 50% 60%, rgba(34, 211, 238, 0.16) 0%, transparent 70%); }

.tema-suprema:hover { border-color: #a78bfa; box-shadow: 0 0 30px rgba(167, 139, 250, 0.22); }
.tema-suprema .tema-znacka, .tema-suprema .tema-odkaz { color: #a78bfa; }
.tema-suprema .tema-obrazek { background: radial-gradient(circle at 50% 60%, rgba(167, 139, 250, 0.18) 0%, transparent 70%); color: #a78bfa; }

.tema-rezervace:hover { border-color: #7c3aed; box-shadow: 0 0 30px rgba(124, 58, 237, 0.25); }
.tema-rezervace .tema-znacka, .tema-rezervace .tema-odkaz { color: #c4b5fd; }
.tema-rezervace .tema-obrazek { background: linear-gradient(135deg, rgba(124, 58, 237, 0.22) 0%, rgba(59, 130, 246, 0.12) 100%); color: #c4b5fd; }

@media (max-width: 900px) {
    .temata { grid-template-columns: 1fr; padding: 0 20px; gap: 20px; }
}