/* Asset card layout variables:
   --asset-card-size: fixed card width (e.g., 320px)
   --asset-card-aspect: aspect ratio (e.g., 16 / 9)
   --asset-card-gap: grid gap (e.g., 0.5rem)
*/
.asset-grid {
    display: grid;
    gap: var(--asset-card-gap, 0.5rem);
    grid-template-columns: repeat(auto-fill, var(--asset-card-size, 150px));
    justify-content: start;
}

.asset-grid .asset-card {
    width: var(--asset-card-size, 150px);
}

/* On phones, give each card the full row so we don't waste a chunk
   of viewport to whitespace next to a single 320px card. */
@media (max-width: 575.98px) {
    .asset-grid {
        grid-template-columns: 1fr;
    }

    .asset-grid .asset-card {
        width: 100%;
    }
}

.asset-grid .asset-tile {
    width: 100%;
    aspect-ratio: var(--asset-card-aspect, 1 / 1);
}

.asset-grid .asset-link {
    height: 100%;
}

.asset-grid .asset-thumb {
    height: 100%;
    width: 100%;
    object-fit: contain;
    background: var(--bg-surface);
}

.asset-overlay {
    position: absolute;
    z-index: 2;
    color: var(--text-on-dark);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    font-size: 0.75rem;
    pointer-events: none;
}

.asset-top-left {
    top: 0.35rem;
    left: 0.35rem;
}

.asset-top-center {
    top: 0.35rem;
    left: 50%;
    transform: translateX(-50%);
}

.asset-trash-icon {
    color: var(--status-error);
}

.asset-top-right {
    top: 0.35rem;
    right: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-end;
    pointer-events: auto;
}

.asset-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
}

.asset-bottom-center {
    bottom: 0.35rem;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
}

.asset-bottom-center-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.asset-center .asset-name-text {
    font-weight: 600;
}

.asset-center .asset-keywords-text {
    opacity: 0.9;
}

.asset-center .asset-name-text,
.asset-center .asset-keywords-text,
.asset-bottom-left .asset-category-text,
.asset-bottom-left .asset-subcategory-text,
.asset-bottom-right .asset-dimensions-text {
    display: inline-block;
    background: var(--overlay-bg);
    color: var(--text-on-dark);
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    line-height: 1.2;
}

.asset-center .asset-name-text,
.asset-center .asset-keywords-text {
    display: block;
    width: max-content;
    margin: 0.1rem auto 0;
}

.asset-bottom-left .asset-category-text,
.asset-bottom-left .asset-subcategory-text {
    display: block;
    width: max-content;
    margin: 0.1rem 0 0;
}

.asset-bottom-left {
    left: 0.35rem;
    bottom: 0.35rem;
    text-align: left;
}

.asset-bottom-right {
    right: 0.35rem;
    bottom: 0.35rem;
    text-align: right;
}

.asset-type-badge,
.asset-view-count,
.asset-id-text {
    font-size: 0.7rem;
}

.asset-favorite-toggle {
    line-height: 1;
    pointer-events: auto;
}

.asset-tile.selected img {
    outline: 3px solid var(--selection-outline);
}

.asset-tile.selected {
    background-color: var(--selection-bg);
}