/* =============================================================
   Dynamic Gallery Block — Styles
   File: gallery-block-style.css
   Covers: Frontend display + Gutenberg editor preview
   ============================================================= */

/* ── CSS Variables (set per-block via PHP inline style) ──── */
.dgb-gallery-wrapper {
    --dgb-columns:        3;
    --dgb-columns-tablet: 2;
    --dgb-columns-mobile: 1;
    --dgb-gap:            10px;
    --dgb-img-height:     250px;
    --dgb-radius:         8px;
    --dgb-object-fit:     cover;
    --dgb-overlay:        rgba(0, 0, 0, 0.4);
    --dgb-caption-bg:     rgba(0, 0, 0, 0.65);
    --dgb-caption-color:  #fff;
    --dgb-transition:     0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Grid Layout ────────────────────────────────────────── */
.dgb-gallery-wrapper .dgb-gallery-grid {
    display:               grid;
    grid-template-columns: repeat(var(--dgb-columns), 1fr);
    gap:                   var(--dgb-gap);
}

/* ── Masonry Layout ─────────────────────────────────────── */
.dgb-layout-masonry .dgb-gallery-grid {
    display:     block;
    columns:     var(--dgb-columns);
    gap:         0;
    column-gap:  var(--dgb-gap);
}

.dgb-layout-masonry .dgb-gallery-item {
    break-inside: avoid;
    margin-bottom: var(--dgb-gap);
}

.dgb-layout-masonry .dgb-img-wrap {
    height: auto !important;
}

.dgb-layout-masonry .dgb-img-wrap img {
    height: auto !important;
    width:  100%;
}

/* ── Gallery Item ───────────────────────────────────────── */
.dgb-gallery-item {
    position: relative;
    overflow: hidden;
}

/* ── Image Wrapper ──────────────────────────────────────── */
.dgb-img-wrap {
    position:      relative;
    width:         100%;
    height:        var(--dgb-img-height);
    overflow:      hidden;
    border-radius: var(--dgb-radius);
}

.dgb-img-wrap img {
    width:      100%;
    height:     100%;
    object-fit: var(--dgb-object-fit);
    display:    block;
    transition: transform var(--dgb-transition), filter var(--dgb-transition);
}

/* ── Overlay ────────────────────────────────────────────── */
.dgb-overlay {
    position:   absolute;
    inset:      0;
    background: var(--dgb-overlay);
    opacity:    0;
    transition: opacity var(--dgb-transition);
    border-radius: var(--dgb-radius);
}

/* ── Hover Effects ──────────────────────────────────────── */

/* Zoom */
.dgb-hover-zoom .dgb-img-wrap:hover img {
    transform: scale(1.08);
}
.dgb-hover-zoom .dgb-img-wrap:hover .dgb-overlay {
    opacity: 1;
}

/* Fade */
.dgb-hover-fade .dgb-img-wrap:hover .dgb-overlay {
    opacity: 1;
}

/* Slide Up */
.dgb-hover-slide-up .dgb-overlay {
    transform: translateY(100%);
    opacity:   1;
}
.dgb-hover-slide-up .dgb-img-wrap:hover .dgb-overlay {
    transform: translateY(0);
    opacity:   1;
}

/* Grayscale → Color */
.dgb-hover-grayscale .dgb-img-wrap img {
    filter: grayscale(1);
}
.dgb-hover-grayscale .dgb-img-wrap:hover img {
    filter: grayscale(0);
}

/* None */
.dgb-hover-none .dgb-img-wrap:hover img,
.dgb-hover-none .dgb-img-wrap:hover .dgb-overlay {
    transform: none;
    opacity:   0;
}

/* ── Caption — Overlay Style ────────────────────────────── */
.dgb-caption-overlay {
    position:      absolute;
    bottom:        0;
    left:          0;
    right:         0;
    padding:       10px 14px;
    background:    var(--dgb-caption-bg);
    color:         var(--dgb-caption-color);
    font-size:     13px;
    line-height:   1.4;
    transform:     translateY(100%);
    transition:    transform var(--dgb-transition);
    border-radius: 0 0 var(--dgb-radius) var(--dgb-radius);
    z-index:       2;
}

.dgb-img-wrap:hover .dgb-caption-overlay {
    transform: translateY(0);
}

/* ── Caption — Below Style ──────────────────────────────── */
.dgb-caption-below {
    margin:    6px 0 0;
    font-size: 13px;
    color:     #555;
    text-align: center;
}

/* ── Lightbox Trigger Cursor ────────────────────────────── */
.dgb-lightbox-enabled .dgb-lightbox-trigger {
    display: block;
    cursor:  zoom-in;
}

/* ── Lightbox Modal ─────────────────────────────────────── */
.dgb-lightbox-modal {
    position:   fixed;
    inset:      0;
    z-index:    99999;
    display:    flex;
    align-items: center;
    justify-content: center;
}

.dgb-lightbox-backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, 0.92);
    cursor:     pointer;
}

.dgb-lightbox-content {
    position:   relative;
    z-index:    1;
    max-width:  90vw;
    max-height: 90vh;
    display:    flex;
    flex-direction: column;
    align-items: center;
}

.dgb-lightbox-img-wrap img {
    max-width:  90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    display:    block;
}

.dgb-lightbox-caption {
    color:     rgba(255,255,255,0.8);
    font-size: 14px;
    margin-top: 12px;
    text-align: center;
}

.dgb-lightbox-close,
.dgb-lightbox-prev,
.dgb-lightbox-next {
    position:        absolute;
    background:      rgba(255,255,255,0.15);
    border:          none;
    color:           #fff;
    cursor:          pointer;
    border-radius:   50%;
    width:           44px;
    height:          44px;
    font-size:       20px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.2s;
    z-index:         2;
}

.dgb-lightbox-close:hover,
.dgb-lightbox-prev:hover,
.dgb-lightbox-next:hover {
    background: rgba(255,255,255,0.3);
}

.dgb-lightbox-close {
    top:   -50px;
    right: 0;
}

.dgb-lightbox-prev {
    top:        50%;
    left:       -60px;
    transform:  translateY(-50%);
}

.dgb-lightbox-next {
    top:        50%;
    right:      -60px;
    transform:  translateY(-50%);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .dgb-gallery-wrapper .dgb-gallery-grid {
        grid-template-columns: repeat(var(--dgb-columns-tablet), 1fr);
    }
    .dgb-layout-masonry .dgb-gallery-grid {
        columns: var(--dgb-columns-tablet);
    }
}

@media (max-width: 767px) {
    .dgb-gallery-wrapper .dgb-gallery-grid {
        grid-template-columns: repeat(var(--dgb-columns-mobile), 1fr);
    }
    .dgb-layout-masonry .dgb-gallery-grid {
        columns: var(--dgb-columns-mobile);
    }
    .dgb-lightbox-prev { left:  -45px; }
    .dgb-lightbox-next { right: -45px; }
}

/* ── No Images Placeholder ──────────────────────────────── */
.dgb-no-images {
    padding:    20px;
    text-align: center;
    color:      #999;
    font-style: italic;
}


/* =============================================================
   EDITOR-ONLY STYLES (Gutenberg Preview)
   ============================================================= */

.dgb-block-editor-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Empty state */
.dgb-editor-empty {
    border:      2px dashed #c3c4c7;
    border-radius: 6px;
    padding:     40px 20px;
    text-align:  center;
    background:  #f9f9f9;
}

.dgb-editor-empty-inner .dgb-empty-icon {
    font-size:   40px;
    display:     block;
    margin-bottom: 10px;
}

.dgb-editor-empty-inner p {
    color:         #555;
    margin-bottom: 16px;
}

/* Editor preview */
.dgb-editor-preview {
    border:        1px solid #e0e0e0;
    border-radius: 6px;
    overflow:      hidden;
}

.dgb-editor-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         8px 14px;
    background:      #1e1e1e;
    gap:             10px;
}

.dgb-editor-label {
    color:     #ccc;
    font-size: 12px;
    font-family: monospace;
}

/* Editor grid */
.dgb-editor-grid {
    padding: 12px;
    background: #fff;
}

/* Editor item */
.dgb-editor-item {
    position:      relative;
    border-radius: 6px;
    overflow:      hidden;
    cursor:        pointer;
}

.dgb-editor-item:hover .dgb-editor-item-controls {
    opacity: 1;
}

.dgb-editor-item-controls {
    position:        absolute;
    top:             6px;
    right:           6px;
    display:         flex;
    gap:             4px;
    opacity:         0;
    transition:      opacity 0.2s;
    z-index:         10;
}

.dgb-editor-item-controls button {
    background:    rgba(0,0,0,0.7);
    color:         #fff;
    border:        none;
    border-radius: 4px;
    padding:       4px 7px;
    font-size:     11px;
    cursor:        pointer;
    transition:    background 0.15s;
}

.dgb-editor-item-controls button:hover {
    background: rgba(0,0,0,0.9);
}

.dgb-editor-caption {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    padding:    8px 10px;
    background: rgba(0,0,0,0.6);
    color:      #fff;
    font-size:  12px;
}