/*

Large icon view for .listview (load after listview.css)

<ul class="listview largeicon">
    <li class="list-item">
        <img class="list-icon" src="..." alt="">
        <div class="list-body">
            <span class="list-title">Title</span>
            <span class="list-desc">Lorem ipsum dolor smet</span>
        </div>
        <span class="list-meta">18 Oct 2026</span>
        <span class="list-actions">
            <button class="blue_sw">Manage</button>
        </span>
    </li>
</ul>

Same markup as listview, only the "largeicon" class is added.

*/


.listview.largeicon {
    --list-icon: 96px;
    --list-tile: 180px;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--list-tile), 1fr));
    gap: 1px;

    /* clip the grid lines on the outer edges */
    overflow: hidden;
}

.listview.largeicon > li {
    border-bottom: none;

    /* grid lines: fill the 1px gap on the right and below each tile */
    box-shadow:
        1px 0 0 var(--list-line),
        0 1px 0 var(--list-line);
}

/* Tile */

.listview.largeicon .list-item {
    height: 100%;
    box-sizing: border-box;

    flex-direction: column;
    justify-content: flex-start;

    /* tiles always center; dock-top / dock-middle only apply to the list */
    align-items: center;
    gap: 10px;

    padding: 20px 14px;
    text-align: center;
}

/* Active tile: green bar on the bottom */

.listview.largeicon .list-item.active::after {
    top: auto;
    right: 0;
    width: auto;
    height: 3px;
    background: var(--list-active);
}

/* Tile content */

.listview.largeicon .list-icon,
.listview.largeicon .list-thumb {
    transition: transform 0.3s ease;
}

.listview.largeicon .list-thumb {
    width: 100%;
}

.listview.largeicon .list-item:hover .list-icon,
.listview.largeicon .list-item:hover .list-thumb {
    transform: translateY(-4px);
}

.listview.largeicon .list-body {
    flex: none;
    width: 100%;
    align-items: center;
}

.listview.largeicon .list-title {
    align-self: center;
}

.listview.largeicon .list-desc {
    /* 2 lines max */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.listview.largeicon .list-actions {
    margin: auto 0 0 0;
    padding-top: 6px;
}

@media (max-width: 600px) {
    .listview.largeicon {
        --list-icon: 64px;
        --list-tile: 130px;
    }

    .listview.largeicon .list-meta {
        display: block;
    }

    .listview.largeicon .list-actions {
        width: auto;
        justify-content: center;
    }
}