/*
 * entity_grid_widget — visual layer.
 *
 * The renderer (EntityGridWidgetRenderer.kt) emits this structure:
 *
 *   .entity-grid-widget                ← root
 *     .entity-grid-title               ← optional heading (raw HTML)
 *     .entity-grid-body                ← region wrapper
 *       div.entity-grid                ← auto-fill CSS grid container
 *         div.entity-grid-item         ← one tile, holds the listitem widget
 *         div.entity-grid-empty        ← shown when boundRows is empty
 *         div.entity-grid-skeleton     ← design-mode skeleton fillers
 *
 * Tile sizing: the grid defaults to 240px minimum tracks. `auto-fill`
 * intentionally preserves empty tracks, so a lone item on the last row keeps
 * the same column width instead of stretching across the row. Authors can
 * override --entity-grid-min-track / --entity-grid-gap or design-panel CSS on
 * the .entity-grid / .entity-grid-item regions.
 */

.entity-grid-widget {


}

/* Heading line above the grid. */
.entity-grid-title {





}

/* Transparent region wrapper — hook for design-panel overrides. */
.entity-grid-body {

}

/* ── Optional facet bar ───────────────────────────────────────────────── */

.entity-facet-bar {





}

.entity-facet-label {




}

.entity-facet-options {




}

.entity-facet-option {

}

.entity-facet-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 7px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.15;
    text-decoration: none;
}

.entity-facet-link:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.entity-facet-option-all .entity-facet-link {
    border-color: #2563eb;
    color: #1d4ed8;
}

.entity-facet-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
}

/* ── Grid container ────────────────────────────────────────────────────── */

div.entity-grid {
    --entity-grid-min-track: 240px;
    --entity-grid-gap: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--entity-grid-min-track)), 1fr));
    gap: var(--entity-grid-gap);
    align-items: stretch;
    margin: 0;
    padding: 0;
}

/* ── Tile shell ───────────────────────────────────────────────────────── */
/* Transparent — the listitem widget inside owns the look. */

div.entity-grid-item {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

div.entity-grid-item.entity-listitem-clickable {
    cursor: pointer;
}

div.entity-grid-item.entity-listitem-clickable:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 4px;
    border-radius: 8px;
}

div.entity-grid-item [data-mc-action-url] {
    cursor: pointer;
}

div.entity-grid-item [data-mc-action-url]:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 4px;
    border-radius: 8px;
}

div.entity-grid-item [data-listitem-template] > [data-semantic-media][class=""] {
    width: 100%;
    aspect-ratio: 100 / 60;
    overflow: hidden;
    flex: 0 0 auto;
}

div.entity-grid-item [data-listitem-template] > [data-semantic-media][class=""] > img[data-semantic-image][class=""] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

div.entity-grid-item [data-listitem-template] > div:first-child > img:only-child:not([data-aqc-image-element]) {
    display: block;
    max-width: 100%;
    height: auto;
}

div.entity-grid-item [data-listitem-template] > div:first-child:has(> img:only-child:not([data-aqc-image-element])) {
    width: 100%;
    aspect-ratio: var(--entity-grid-raw-media-aspect-ratio, 4 / 3);
    overflow: hidden;
    flex: 0 0 auto;
}

div.entity-grid-item [data-listitem-template] > div:first-child:has(> img:only-child:not([data-aqc-image-element])) > img:only-child:not([data-aqc-image-element]) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* ── Empty-state ──────────────────────────────────────────────────────── */

div.entity-grid-empty {
    grid-column: 1 / -1;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    font-size: 13px;
    text-align: center;
}

/* ── Skeleton placeholders (design mode only) ─────────────────────────── */

div.entity-grid-skeleton {
    min-height: 80px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    background: #f1f5f9;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

div.entity-grid-skeleton .entity-grid-skeleton-line {
    height: 12px;
    width: 60%;
    background: linear-gradient(
        90deg,
        rgba(203, 213, 225, 0.5) 0%,
        rgba(226, 232, 240, 0.9) 50%,
        rgba(203, 213, 225, 0.5) 100%
    );
    background-size: 200% 100%;
    border-radius: 4px;
    animation: entity-grid-skeleton-shimmer 1.4s infinite ease-in-out;
}

@keyframes entity-grid-skeleton-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}