/* Shared phones & hardware category tiles and cards (see hardware-categories.php). */

.hwcat-tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--count, 8), minmax(0, 1fr));
    gap: 14px;
}

.hwcat-tiles a {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    padding: 16px 8px 14px;
    background: #ffffff;
    border: 1px solid #e3edf8;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(15,45,92,0.08);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hwcat-tiles--dark a { border-color: transparent; box-shadow: 0 12px 26px rgba(4,20,45,0.22); }

.hwcat-tiles a:hover,
.hwcat-tiles a:focus {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(15,45,92,0.16);
    text-decoration: none;
}

.hwcat-tiles--dark a:hover,
.hwcat-tiles--dark a:focus { box-shadow: 0 18px 34px rgba(4,20,45,0.3); }

.hwcat-tiles svg { display: block; width: 100%; max-width: 110px; height: auto; margin-bottom: 10px; }

.hwcat-tiles span {
    display: flex;
    align-items: center;
    min-height: 36px;
    color: #0f2d5c;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.hwcat-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.hwcat-cards a {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e3edf8;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(15,45,92,0.07);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.hwcat-cards a:hover,
.hwcat-cards a:focus {
    transform: translateY(-4px);
    border-color: #cfe0f5;
    box-shadow: 0 16px 34px rgba(15,45,92,0.13);
    text-decoration: none;
}

.hwcat-card-icon {
    flex: 0 0 76px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef5fc;
    border-radius: 14px;
}

.hwcat-card-icon svg { width: 60px; height: auto; display: block; }

.hwcat-card-body { display: flex; flex-direction: column; min-width: 0; }
.hwcat-card-body strong { color: #0f2d5c; font-size: 17px; font-weight: 700; line-height: 1.35; margin-bottom: 4px; }
.hwcat-card-body span { color: #5f6f82; font-size: 14.5px; line-height: 1.65; }
.hwcat-card-body em { margin-top: 8px; color: #1f5ea8; font-size: 14px; font-weight: 700; font-style: normal; }

@media (max-width: 991px) {
    .hwcat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hwcat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .hwcat-tiles {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 118px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-right: -15px;
        padding: 4px 15px 14px 0;
        -webkit-overflow-scrolling: touch;
    }
    .hwcat-tiles li { scroll-snap-align: start; }
    .hwcat-cards { grid-template-columns: 1fr; }
}