/**
 * DG Brand Logos — Plugin-specific styles
 *
 * Ticker layout styles (.dg-brand-logos-dg, .dg-logo-ticker, .dg-track,
 * .dg-logos-grid, .dg-logo) come from the theme's global CSS.
 * This file only adds heading, editor preview, and text fallback styles.
 */

/* Heading (above ticker) */
.dg-brand-logos__heading {
    width: 100%;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Text fallback for brands without logo */
.dg-brand-logos__name {
    font-weight: 600;
    color: #6b7280;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Editor preview: static single-row strip (mimics frontend ticker stopped) */
.dg-brand-logos-dg--editor-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}

.dg-brand-logos-dg--editor-grid .dg-logo {
    width: 120px;
    height: 48px;
    flex-shrink: 0;
}

.dg-brand-logos-dg--editor-grid .dg-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
}

/* Editor empty state */
.dg-brand-logos--editor-preview {
    text-align: center;
    color: #6b7280;
    padding: 2rem 1rem;
}