/*
 * entity_gallery_widget — visual layer.
 *
 * The renderer (EntityGalleryWidgetRenderer.kt) emits this structure
 * (mirrors the legacy `mcfw_modelcollection_gallery_view.jsp`):
 *
 *   .entity-gallery-widget                    ← root
 *     .entity-gallery-title                   ← optional heading (raw HTML)
 *     .entity-gallery-body                    ← region wrapper (=aqc-main-gallery-section)
 *       div.aqc-gallery.fullwidth
 *           .<nodeId>_gallery
 *           .entity-gallery-content           ← inner-content region
 *
 *         .aqc-gallery-label                  ← title region (legacy split-lines)
 *         .aqc-gallery-label-strip            ← strip-mode label nav
 *         .aqc-g-img-wrapper                  ← page-container region
 *
 *           .aqc-page.aqc-g-img               ← one page
 *             .aqc-gallery-page-overlay
 *               .history-content-tpl1
 *                 .hist-content
 *                   .hist-background-rect    ← optional decoration
 *                   .model-slick-item        ← one tile, holds the listitem
 *
 *         .aqc-rightarrow-area / .aqc-rightside-arrow / .aqc-leftside-arrow
 *         nav.aqc-counter                     ← page-counter region
 *         .aqc-dots                           ← dots region
 *
 *     .entity-gallery-empty                   ← shown when boundRows is empty
 *     .entity-gallery-skeleton                ← design-mode skeleton fillers
 *
 * Runtime: bound by `AQCGallery` (legacy JS) — wired in the renderer
 * via an inline `<script>` block at the bottom of the widget.
 */

.entity-gallery-widget {
    display: block;
    box-sizing: border-box;
}

/* Heading line above the gallery. */
.entity-gallery-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #0f172a;
    margin: 0 0 12px;
}

/* Transparent region wrapper — hook for design-panel overrides. */
.entity-gallery-body {
    display: block;
}

/* The inner gallery — sits inside .entity-gallery-body. The .aqc-* classes
   are owned by the legacy AQCGallery CSS shipped at /public/css/...; we
   only add the `.entity-gallery-content` hook for our own region styling
   without fighting the legacy rules. */
.entity-gallery-content {
    position: relative;
    min-height: 120px;
}

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

div.entity-gallery-empty {
    width: 100%;
    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-gallery-skeleton-row {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

div.entity-gallery-skeleton {
    flex: 1 1 240px;
    min-height: 120px;
    padding: 12px;
    background: #f1f5f9;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

div.entity-gallery-skeleton .entity-gallery-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-gallery-skeleton-shimmer 1.4s infinite ease-in-out;
}

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