/**
 * Gutenberg Block Editor Styles for Luxe Gallery
 * Using modern CSS features and best practices
 */

/* CSS Custom Properties for Block Editor */
:root {
    --luxe-block-margin: clamp(1rem, 3vw, 1.5rem);
    --luxe-block-min-height: 200px;
    --luxe-block-bg: #f0f0f0;
    --luxe-block-border: #ccc;
    --luxe-block-border-style: 2px dashed;
    --luxe-block-text-muted: #757575;
    --luxe-block-opacity-preview: 0.9;
    --luxe-block-max-width-wide: min(1200px, 90vw);
    --luxe-block-transition: opacity 0.2s ease;
}

/* Main Block Container */
.wp-block-luxe-gallery-gallery {
    margin-block: var(--luxe-block-margin);
}

/* Placeholder Styles with Modern Layout */
.wp-block-luxe-gallery-gallery .luxe-gallery-placeholder,
.wp-block-luxe-gallery-gallery .components-placeholder {
    min-height: var(--luxe-block-min-height);
    background: var(--luxe-block-bg);
    border: var(--luxe-block-border-style) var(--luxe-block-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2rem);
    border-radius: 4px;
}

.wp-block-luxe-gallery-gallery .components-placeholder__label {
    font-size: clamp(1rem, 2vw, 1.125rem);
    margin-block-end: 1em;
    font-weight: 600;
}

.wp-block-luxe-gallery-gallery .components-placeholder__instructions {
    margin-block-end: 1em;
    color: var(--luxe-block-text-muted);
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    text-align: center;
}

/* Preview Styles in Editor */
.wp-block-luxe-gallery-gallery .luxe-gallery-container {
    pointer-events: none;
    position: relative;
}

.wp-block-luxe-gallery-gallery .luxe-gallery-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 48%,
        oklch(0% 0 0 / 0.03) 50%,
        transparent 52%
    );
    pointer-events: none;
}

/* Hero Grid Styles for Editor Preview */
.wp-block-luxe-gallery-gallery .luxe-gallery-hero-grid {
    opacity: var(--luxe-block-opacity-preview);
    transition: var(--luxe-block-transition);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    aspect-ratio: 4/2;
}

.wp-block-luxe-gallery-gallery .luxe-gallery-hero-grid .hero-image-item {
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
}

.wp-block-luxe-gallery-gallery .luxe-gallery-hero-grid .hero-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Default grid areas for 5-image layout */
.wp-block-luxe-gallery-gallery .luxe-gallery-hero-grid .hero-image-item.area-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.wp-block-luxe-gallery-gallery .luxe-gallery-hero-grid .hero-image-item.area-2 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.wp-block-luxe-gallery-gallery .luxe-gallery-hero-grid .hero-image-item.area-3 {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
}

.wp-block-luxe-gallery-gallery .luxe-gallery-hero-grid .hero-image-item.area-4 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

.wp-block-luxe-gallery-gallery .luxe-gallery-hero-grid .hero-image-item.area-5 {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
}

.wp-block-luxe-gallery-gallery:hover .luxe-gallery-hero-grid {
    opacity: 1;
}

/* Alignment Support with Logical Properties */
.wp-block-luxe-gallery-gallery.alignwide {
    max-width: var(--luxe-block-max-width-wide);
    margin-inline: auto;
}

.wp-block-luxe-gallery-gallery.alignfull {
    max-width: 100%;
    margin-inline: 0;
}

.wp-block-luxe-gallery-gallery.alignleft {
    margin-inline-end: 2em;
    float: inline-start;
    max-width: 50%;
}

.wp-block-luxe-gallery-gallery.alignright {
    margin-inline-start: 2em;
    float: inline-end;
    max-width: 50%;
}

.wp-block-luxe-gallery-gallery.aligncenter {
    margin-inline: auto;
    display: table;
}

/* Focus States for Accessibility */
.wp-block-luxe-gallery-gallery:focus-within {
    outline: 2px solid var(--wp-admin-theme-color, #007cba);
    outline-offset: 2px;
}

/* Selected State */
.wp-block-luxe-gallery-gallery.is-selected .luxe-gallery-container {
    box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #007cba);
    border-radius: 2px;
}

/* Loading State */
.wp-block-luxe-gallery-gallery.is-loading .luxe-gallery-container {
    opacity: 0.5;
    filter: blur(1px);
}

/* Container Queries for Responsive Placeholder */
@container (max-width: 400px) {
    .wp-block-luxe-gallery-gallery .components-placeholder {
        padding: 1rem;
    }
    
    .wp-block-luxe-gallery-gallery .components-placeholder__label {
        font-size: 0.875rem;
    }
}

/* Media Queries for Non-Container Support */
@media (max-width: 600px) {
    .wp-block-luxe-gallery-gallery.alignleft,
    .wp-block-luxe-gallery-gallery.alignright {
        float: none;
        max-width: 100%;
        margin-inline: 0;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .editor-styles-wrapper .wp-block-luxe-gallery-gallery .components-placeholder {
        background: oklch(20% 0 0);
        border-color: oklch(40% 0 0);
    }
    
    .editor-styles-wrapper .wp-block-luxe-gallery-gallery .components-placeholder__instructions {
        color: oklch(70% 0 0);
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .wp-block-luxe-gallery-gallery .components-placeholder {
        border-width: 3px;
        border-color: currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .wp-block-luxe-gallery-gallery * {
        transition-duration: 0.01ms !important;
    }
}

/* Print Styles */
@media print {
    .wp-block-luxe-gallery-gallery .components-placeholder {
        display: none;
    }
}