/* Phase 35 — Dynamic Content & Visual Query Builder (editor-only) */

/* Dynamic grid editor placeholder */
.pk-dynamic-grid-editor-placeholder {
    border: 2px dashed var(--wp--preset--color--border);
    border-radius: var(--wp--preset--color--radius-md, 10px);
    padding: var(--wp--preset--spacing--50);
    background: var(--wp--preset--color--bg-alt, #f8f9fc);
}

.pk-dynamic-grid-preview-label {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--20);
    margin-bottom: var(--wp--preset--spacing--40);
}

.pk-dynamic-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--wp--preset--color--radius-full, 9999px);
    line-height: 1;
}

.pk-dynamic-badge.is-dynamic {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--text-inverse);
}

.pk-dynamic-grid__layout-grid { grid-template-columns: repeat(3, 1fr); }
.pk-dynamic-grid__layout-list { flex-direction: column; }
.pk-dynamic-grid__layout-featured + .pk-dynamic-grid__items { grid-template-columns: 1fr 1fr; }

.pk-dynamic-grid-placeholder-content {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);
}

.pk-dynamic-grid-placeholder-text {
    font-weight: 600;
    margin: 0;
}

.pk-dynamic-grid-placeholder-hint {
    color: var(--wp--preset--color--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

/* Dynamic card editor placeholder */
.pk-dynamic-card-editor-placeholder {
    border: 1px dashed var(--wp--preset--color--border);
    border-radius: var(--wp--preset--color--radius-md, 10px);
    padding: var(--wp--preset--spacing--40);
    background: var(--wp--preset--color--bg-alt, #f8f9fc);
    position: relative;
}

.pk-dynamic-card-editor-placeholder::before {
    content: 'Dynamic';
    position: absolute;
    top: var(--wp--preset--spacing--20);
    right: var(--wp--preset--spacing--20);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--primary);
}

.pk-dynamic-card__image-placeholder {
    background: var(--wp--preset--color--border);
    border-radius: var(--wp--preset--color--radius-sm, 6px);
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wp--preset--color--text-muted);
    font-size: 0.75rem;
    margin-bottom: var(--wp--preset--spacing--30);
}

.pk-dynamic-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
}

.pk-dynamic-card__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.pk-card-region-toggles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--20);
}

/* Dynamic content badge (inline on blocks) */
.pk-dynamic-content-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--text-inverse);
    font-size: 0.625rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
    opacity: 0.75;
}

body:not(.block-editor-page) .pk-dynamic-content-badge { display: none; }

/* Empty state editor preview */
.pk-dynamic-grid--empty-preview {
    border: 1px dashed var(--wp--preset--color--border);
    border-radius: var(--wp--preset--color--radius-md, 10px);
    padding: var(--wp--preset--spacing--60);
    text-align: center;
    background: var(--wp--preset--color--bg-alt, #f8f9fc);
}

.pk-dynamic-grid--empty-preview .components-icon {
    font-size: 2rem;
    color: var(--wp--preset--color--text-muted);
    margin-bottom: var(--wp--preset--spacing--20);
}

/* Dynamic filter toolbar */
.pk-dynamic-grid__filter {
    display: flex;
    gap: var(--wp--preset--spacing--20);
    margin-bottom: var(--wp--preset--spacing--40);
    flex-wrap: wrap;
}

.pk-filter-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--wp--preset--color--radius-md, 10px);
    background: var(--wp--preset--color--bg, #ffffff);
    color: var(--wp--preset--color--text, #1d1d1d);
    cursor: pointer;
    transition: background var(--pk-transition-base), border-color var(--pk-transition-base);
}

.pk-filter-btn:hover {
    background: var(--wp--preset--color--bg-alt, #f8f9fc);
}

.pk-filter-btn.is-active {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--text-inverse);
    border-color: var(--wp--preset--color--primary);
}

/* Search input in dynamic grid */
.pk-dynamic-grid__search {
    margin-bottom: var(--wp--preset--spacing--40);
}

.pk-dynamic-grid__search-input {
    width: 100%;
    max-width: 20rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--wp--preset--color--radius-md, 10px);
    font-size: 0.875rem;
}

/* Layout preset visual indicators */
.pk-layout-indicator {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.25rem;
    border-radius: 2px;
    background: var(--wp--preset--color--text-secondary);
}

/* Source-type indicator in block list */
.block-editor-block-list__layout .pk-is-dynamic-block {
    position: relative;
}

.block-editor-block-list__layout .pk-is-dynamic-block::after {
    content: 'Dynamic';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--wp--preset--color--primary);
    opacity: 0.75;
    pointer-events: none;
}

/* Responsive editor adjustments */
@media (max-width: 780px) {
    .pk-dynamic-grid-editor-placeholder {
        padding: var(--wp--preset--spacing--30);
    }

    .pk-dynamic-card-editor-placeholder {
        padding: var(--wp--preset--spacing--30);
    }

    .pk-card-region-toggles {
        grid-template-columns: 1fr;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .pk-dynamic-badge,
    .pk-dynamic-content-badge,
    .pk-filter-btn {
        transition: none;
    }
}