/* Adminsidans läge Hem (js/admin/home.js): INCA:s produkter som rutor — en
   bild som säger vad modulen gör och namnet under, inget mer. Ljust INCA-tema;
   bilderna bär färgen (Skarpt blå, Övning orange, INCA Sensors mörk). Hela
   rutan är en knapp (Sensors en länk). */

body[data-admin-mode="home"] .content { max-width: 1160px; padding-top: 36px; }

.hm-title { margin: 0 0 26px; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; font-weight: 850; color: #000; letter-spacing: -0.01em; }

.hm-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Rutan ───────────────────────────────────────────────────────────── */
.hm-tile {
    display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; overflow: hidden;
    font: inherit; text-align: left; color: #000; text-decoration: none; cursor: pointer;
    background: #fff; border: 1px solid #e4e7eb; border-radius: 22px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    -webkit-tap-highlight-color: transparent;
}
.hm-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(1, 40, 70, 0.13); }
.hm-tile:active { transform: translateY(-1px); }
.hm-tile:focus-visible { outline: 3px solid #f0833d; outline-offset: 3px; }

.hm-art { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #f0f2f5; }
.hm-art-img, .hm-svg { display: block; width: 100%; height: 100%; }
.hm-svg { transition: transform 0.5s ease; }
.hm-tile:hover .hm-svg { transform: scale(1.03); }

.hm-cap { display: flex; align-items: center; gap: 12px; padding: 16px 18px 18px 22px; }
.hm-name { flex: 1; min-width: 0; font-size: 22px; line-height: 1.15; font-weight: 850; letter-spacing: -0.005em; }
.hm-go {
    width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #f0f2f5; color: #015e9f; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.hm-go svg { width: 17px; height: 17px; }
.hm-tile:hover .hm-go { background: #f0833d; color: #fff; transform: translateX(2px); }

/* Skarpt: en pågående insats syns alltid */
.hm-badge {
    position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 800; color: #015e9f; background: #fff; border-radius: 999px; padding: 6px 13px 6px 11px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.hm-dot { width: 9px; height: 9px; border-radius: 50%; background: #f0833d; flex-shrink: 0; animation: hm-pulse 1.8s ease-out infinite; }
@keyframes hm-pulse { 0% { box-shadow: 0 0 0 0 rgba(240, 131, 61, 0.6); } 100% { box-shadow: 0 0 0 8px rgba(240, 131, 61, 0); } }

/* ── Bildernas rörelser: lugna, bara så att något lever ───────────────── */
.hm-svg * { transform-box: fill-box; transform-origin: center; }
.hm-a-glow { animation: hm-glow 3.2s ease-in-out infinite; }
@keyframes hm-glow { 50% { opacity: 0.55; } }
.hm-a-route { animation: hm-route 1.6s linear infinite; }
@keyframes hm-route { to { stroke-dashoffset: -22; } }
.hm-a-hand { transform-box: view-box; transform-origin: 0 0; animation: hm-spin 6s linear infinite; }
@keyframes hm-spin { to { transform: rotate(360deg); } }
.hm-a-grow { animation: hm-grow 6s ease-in-out infinite; }
@keyframes hm-grow { 50% { transform: scale(1.18); } }
.hm-a-hop { animation: hm-hop 4s ease-in-out infinite; }
@keyframes hm-hop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-9px) rotate(-3deg); } 90% { transform: translateY(0); } }
.hm-a-hover { animation: hm-hover 3.6s ease-in-out infinite; }
@keyframes hm-hover { 50% { transform: translate(-6px, -5px); } }
.hm-a-play { animation: hm-play 7s ease-in-out infinite alternate; }
@keyframes hm-play { from { transform: translateX(-150px); } to { transform: translateX(150px); } }
.hm-a-bar { transform-origin: left center; animation: hm-bar 7s ease-in-out infinite alternate; }
@keyframes hm-bar { from { transform: scaleX(0.12); } to { transform: scaleX(1.95); } }
.hm-a-pulse { animation: hm-ring 2.4s ease-out infinite; }
@keyframes hm-ring { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3); opacity: 0; } }

.hm-foot { margin-top: 28px; text-align: center; }
.hm-pres { font-size: 14px; font-weight: 600; color: #015e9f; text-decoration: none; }
.hm-pres:hover { text-decoration: underline; }

/* ── Surfplatta och telefon: två kolumner ────────────────────────────── */
@media (max-width: 900px) {
    .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 560px) {
    body[data-admin-mode="home"] .content { padding-top: 22px; }
    .hm-title { margin-bottom: 16px; }
    .hm-grid { gap: 12px; }
    .hm-tile { border-radius: 18px; }
    /* Hela rutan är knappen: pilen får ge plats åt namnet ("Efterutvärdering"). */
    .hm-cap { padding: 11px 12px 13px 14px; }
    .hm-name { font-size: 16.5px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
    .hm-go { display: none; }
    .hm-badge { top: 8px; left: 8px; font-size: 12px; padding: 4px 10px 4px 8px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .hm-tile, .hm-go, .hm-svg { transition: none; }
    .hm-tile:hover, .hm-tile:hover .hm-svg { transform: none; }
    .hm-dot, .hm-svg * { animation: none !important; }
}