/* ==========================================================================
   JW Gallery Block - Gallery Container
   ========================================================================== */

.jw-gallery {
    display: grid;
    grid-template-columns: repeat(var(--jw-gallery-columns, 3), 1fr);
    gap: var(--jw-gallery-gap, 16px);
    width: 100%;
    margin-bottom: var(--jw-gallery-gap, 16px);
}

.jw-gallery:last-child {
    margin-bottom: 0;
}

/* Responsive columns */
@media (max-width: 1024px) {
    .jw-gallery {
        grid-template-columns: repeat(min(var(--jw-gallery-columns, 3), 2), 1fr);
    }
}

@media (max-width: 600px) {
    .jw-gallery {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   JW Gallery Block - Alternating 3-2 Layout
   ========================================================================== */

.jw-gallery--alternating {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--jw-gallery-gap, 16px);
    width: 100%;
}

/* All items in alternating layout */
.jw-gallery--alternating .jw-gallery-item {
    aspect-ratio: var(--jw-gallery-aspect-ratio, 16/9);
    height: auto;
    box-sizing: border-box;
}

/* Row of 3 items: width = (100% - 2 gaps) / 3 */
.jw-gallery--alternating .jw-gallery-item.jw-gallery-item--row3 {
    width: calc((100% - 2 * var(--jw-gallery-gap, 16px)) / 3) !important;
    flex: 0 0 calc((100% - 2 * var(--jw-gallery-gap, 16px)) / 3) !important;
}

/* Row of 2 items: width = (100% - 1 gap) / 2 */
.jw-gallery--alternating .jw-gallery-item.jw-gallery-item--row2 {
    width: calc((100% - var(--jw-gallery-gap, 16px)) / 2) !important;
    flex: 0 0 calc((100% - var(--jw-gallery-gap, 16px)) / 2) !important;
}

/* Row of 4 items: width = (100% - 3 gaps) / 4 */
.jw-gallery--alternating .jw-gallery-item.jw-gallery-item--row4 {
    width: calc((100% - 3 * var(--jw-gallery-gap, 16px)) / 4) !important;
    flex: 0 0 calc((100% - 3 * var(--jw-gallery-gap, 16px)) / 4) !important;
}

/* Responsive: Tablet - 2 columns */
@media (max-width: 1024px) {
    .jw-gallery--alternating .jw-gallery-item.jw-gallery-item--row3,
    .jw-gallery--alternating .jw-gallery-item.jw-gallery-item--row2,
    .jw-gallery--alternating .jw-gallery-item.jw-gallery-item--row4 {
        width: calc((100% - var(--jw-gallery-gap, 16px)) / 2) !important;
        flex: 0 0 calc((100% - var(--jw-gallery-gap, 16px)) / 2) !important;
    }
}

/* Responsive: Mobile - single column */
@media (max-width: 600px) {
    .jw-gallery--alternating .jw-gallery-item.jw-gallery-item--row3,
    .jw-gallery--alternating .jw-gallery-item.jw-gallery-item--row2,
    .jw-gallery--alternating .jw-gallery-item.jw-gallery-item--row4 {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* ==========================================================================
   JW Gallery Block - Gallery Items (Frontend)
   ========================================================================== */

.jw-gallery-item {
    position: relative;
    width: 100%;
    aspect-ratio: var(--jw-gallery-aspect-ratio, 16/9);
    overflow: hidden;
    background: #111;
    border-radius: 4px;
}

.jw-gallery-item img,
.jw-gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   JW Gallery Block - Mixed Ratio Mode
   ========================================================================== */

.jw-gallery--mixed .jw-gallery-item {
    aspect-ratio: auto;
    height: auto;
}

.jw-gallery--mixed .jw-gallery-item img,
.jw-gallery--mixed .jw-gallery-item video {
    height: auto;
    object-fit: contain;
}

/* Autoplay video */
.jw-gallery-item--autoplay video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover-to-play video */
.jw-gallery-hover-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.jw-gallery-hover-wrap .jw-gallery-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.jw-gallery-hover-wrap .jw-gallery-hover-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Play icon overlay - subtle bottom-right corner */
.jw-gallery-play-icon {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 3;
    transition: opacity 0.3s ease;
    pointer-events: none;
    opacity: 0.7;
}

.jw-gallery-play-icon svg {
    width: 24px;
    height: 24px;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.jw-gallery-hover-wrap:hover .jw-gallery-play-icon {
    opacity: 1;
}

.jw-gallery-hover-wrap.is-playing .jw-gallery-play-icon {
    opacity: 0;
}

/* ==========================================================================
   JW Gallery Block - Editor Styles
   ========================================================================== */

/* Layout selector - always visible */
.jw-gallery-layout-selector {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #1e1e1e;
    border-radius: 4px;
    margin-bottom: 8px;
}

.jw-gallery-layout-label {
    color: #fff;
    font-weight: 500;
    font-size: 13px;
}

.jw-gallery-layout-select {
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid #757575;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    min-width: 160px;
}

.jw-gallery-layout-select:hover {
    border-color: #007cba;
}

.jw-gallery-layout-select:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 0 1px #007cba;
}

/* Gallery toolbar */
.jw-gallery-toolbar {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: #e8e8e8;
    border-radius: 4px;
    margin-bottom: 8px;
}

/* Layout dropdown in toolbar */
.jw-gallery-toolbar-layout {
    display: flex;
    align-items: center;
}

.jw-gallery-toolbar-layout .components-base-control {
    margin-bottom: 0;
}

.jw-gallery-toolbar-layout .components-base-control__field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.jw-gallery-toolbar-layout .components-base-control__label {
    margin-bottom: 0;
    font-weight: 500;
}

.jw-gallery-toolbar-layout .components-select-control__input {
    min-width: 140px;
}

/* Gallery container in editor */
.jw-gallery-editor {
    display: grid;
    grid-template-columns: repeat(var(--jw-gallery-columns, 3), 1fr);
    gap: var(--jw-gallery-gap, 16px);
    width: 100%;
    padding: 8px;
    background: #f0f0f0;
    border-radius: 4px;
}

/* Hide toolbar when gallery is empty (placeholder showing) */
.jw-gallery-editor:has(.components-placeholder) .jw-gallery-toolbar {
    display: none;
}

.jw-gallery-editor .block-editor-inner-blocks {
    display: contents;
}

.jw-gallery-editor .block-editor-block-list__layout {
    display: contents;
}

.jw-gallery-editor > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: grid;
    grid-template-columns: repeat(var(--jw-gallery-columns, 3), 1fr);
    gap: var(--jw-gallery-gap, 16px);
    width: 100%;
}

/* Editor: Alternating 3-2 Layout */
.jw-gallery-editor.jw-gallery--alternating {
    display: block !important;
}

.jw-gallery-editor.jw-gallery--alternating .block-editor-block-list__layout {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--jw-gallery-gap, 16px);
}

.jw-gallery-editor.jw-gallery--alternating .jw-gallery-item-editor {
    aspect-ratio: var(--jw-gallery-aspect-ratio, 16/9);
}

/* Editor: Alternating 3-2 Layout - Row of 3 items: positions 1, 2, 3, 6, 7, 8... */
.jw-gallery-editor.jw-gallery--3-2 .block-editor-block-list__layout > [data-block]:nth-child(5n + 1),
.jw-gallery-editor.jw-gallery--3-2 .block-editor-block-list__layout > [data-block]:nth-child(5n + 2),
.jw-gallery-editor.jw-gallery--3-2 .block-editor-block-list__layout > [data-block]:nth-child(5n + 3) {
    width: calc((100% - 2 * var(--jw-gallery-gap, 16px)) / 3) !important;
    flex: 0 0 calc((100% - 2 * var(--jw-gallery-gap, 16px)) / 3) !important;
}

/* Editor: Alternating 3-2 Layout - Row of 2 items: positions 4, 5, 9, 10... */
.jw-gallery-editor.jw-gallery--3-2 .block-editor-block-list__layout > [data-block]:nth-child(5n + 4),
.jw-gallery-editor.jw-gallery--3-2 .block-editor-block-list__layout > [data-block]:nth-child(5n + 5) {
    width: calc((100% - var(--jw-gallery-gap, 16px)) / 2) !important;
    flex: 0 0 calc((100% - var(--jw-gallery-gap, 16px)) / 2) !important;
}

/* Editor: Alternating 2-3 Layout - Row of 2 items: positions 1, 2, 6, 7... */
.jw-gallery-editor.jw-gallery--2-3 .block-editor-block-list__layout > [data-block]:nth-child(5n + 1),
.jw-gallery-editor.jw-gallery--2-3 .block-editor-block-list__layout > [data-block]:nth-child(5n + 2) {
    width: calc((100% - var(--jw-gallery-gap, 16px)) / 2) !important;
    flex: 0 0 calc((100% - var(--jw-gallery-gap, 16px)) / 2) !important;
}

/* Editor: Alternating 2-3 Layout - Row of 3 items: positions 3, 4, 5, 8, 9, 10... */
.jw-gallery-editor.jw-gallery--2-3 .block-editor-block-list__layout > [data-block]:nth-child(5n + 3),
.jw-gallery-editor.jw-gallery--2-3 .block-editor-block-list__layout > [data-block]:nth-child(5n + 4),
.jw-gallery-editor.jw-gallery--2-3 .block-editor-block-list__layout > [data-block]:nth-child(5n + 5) {
    width: calc((100% - 2 * var(--jw-gallery-gap, 16px)) / 3) !important;
    flex: 0 0 calc((100% - 2 * var(--jw-gallery-gap, 16px)) / 3) !important;
}

/* Editor: Alternating 3-4 Layout - Row of 3 items: positions 1, 2, 3, 8, 9, 10... (cycle of 7) */
.jw-gallery-editor.jw-gallery--3-4 .block-editor-block-list__layout > [data-block]:nth-child(7n + 1),
.jw-gallery-editor.jw-gallery--3-4 .block-editor-block-list__layout > [data-block]:nth-child(7n + 2),
.jw-gallery-editor.jw-gallery--3-4 .block-editor-block-list__layout > [data-block]:nth-child(7n + 3) {
    width: calc((100% - 2 * var(--jw-gallery-gap, 16px)) / 3) !important;
    flex: 0 0 calc((100% - 2 * var(--jw-gallery-gap, 16px)) / 3) !important;
}

/* Editor: Alternating 3-4 Layout - Row of 4 items: positions 4, 5, 6, 7, 11, 12, 13, 14... */
.jw-gallery-editor.jw-gallery--3-4 .block-editor-block-list__layout > [data-block]:nth-child(7n + 4),
.jw-gallery-editor.jw-gallery--3-4 .block-editor-block-list__layout > [data-block]:nth-child(7n + 5),
.jw-gallery-editor.jw-gallery--3-4 .block-editor-block-list__layout > [data-block]:nth-child(7n + 6),
.jw-gallery-editor.jw-gallery--3-4 .block-editor-block-list__layout > [data-block]:nth-child(7n + 7) {
    width: calc((100% - 3 * var(--jw-gallery-gap, 16px)) / 4) !important;
    flex: 0 0 calc((100% - 3 * var(--jw-gallery-gap, 16px)) / 4) !important;
}

/* Block appender in alternating layout */
.jw-gallery-editor.jw-gallery--alternating .block-list-appender {
    width: calc((100% - 2 * var(--jw-gallery-gap, 16px)) / 3) !important;
    flex: 0 0 calc((100% - 2 * var(--jw-gallery-gap, 16px)) / 3) !important;
}

/* Individual item in editor */
.jw-gallery-item-editor {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background: #e0e0e0;
    min-height: 120px;
}

.jw-gallery-item-editor .components-placeholder {
    min-height: 150px;
    aspect-ratio: var(--jw-gallery-aspect-ratio, 16/9);
}

.jw-gallery-item-editor .components-placeholder__fieldset {
    flex-direction: column;
}

.jw-gallery-item-preview {
    position: relative;
}

.jw-gallery-item-preview img,
.jw-gallery-item-preview video {
    width: 100%;
    height: auto;
    aspect-ratio: var(--jw-gallery-aspect-ratio, 16/9);
    object-fit: cover;
    display: block;
}


/* Toolbar in editor */
.jw-gallery-item-toolbar {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 6px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.jw-gallery-item-preview:hover .jw-gallery-item-toolbar {
    opacity: 1;
}

.jw-gallery-item-toolbar .components-button {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Video preview in editor */
.jw-gallery-video-preview {
    position: relative;
}

.jw-gallery-video-preview video {
    width: 100%;
    aspect-ratio: var(--jw-gallery-aspect-ratio, 16/9);
    object-fit: cover;
}

.jw-gallery-poster-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

.jw-gallery-play-icon-editor {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 5;
    pointer-events: none;
    opacity: 0.7;
}

.jw-gallery-play-icon-editor svg {
    width: 20px;
    height: 20px;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Type selector buttons overlay */
.jw-gallery-type-selector {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    z-index: 15;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Show type selector on hover or when item is selected */
.jw-gallery-item-preview:hover .jw-gallery-type-selector,
.jw-gallery-item-editor.is-selected .jw-gallery-type-selector,
.block-editor-block-list__block.is-selected .jw-gallery-type-selector {
    opacity: 1;
}

.jw-gallery-type-selector .jw-type-btn {
    background: rgba(30, 30, 30, 0.85) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 5px 12px !important;
    min-height: 28px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    transition: all 0.15s ease !important;
}

.jw-gallery-type-selector .jw-type-btn:hover {
    background: rgba(50, 50, 50, 0.95) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.jw-gallery-type-selector .jw-type-btn.is-active {
    background: #007cba !important;
    color: #fff !important;
    border-color: #007cba !important;
    box-shadow: 0 2px 8px rgba(0, 124, 186, 0.4);
}

.jw-gallery-type-selector .jw-type-btn.is-active:hover {
    background: #0073aa !important;
}

/* Thumbnail button styling */
.jw-gallery-type-selector .jw-thumbnail-btn {
    background: rgba(80, 60, 20, 0.9) !important;
    border-color: rgba(255, 200, 100, 0.3) !important;
    margin-left: 4px;
}

.jw-gallery-type-selector .jw-thumbnail-btn:hover {
    background: rgba(100, 80, 30, 0.95) !important;
}

.jw-gallery-type-selector .jw-thumbnail-btn.has-thumbnail {
    background: rgba(40, 100, 60, 0.9) !important;
    border-color: rgba(100, 200, 130, 0.3) !important;
}

.jw-gallery-type-selector .jw-thumbnail-btn.has-thumbnail:hover {
    background: rgba(50, 120, 70, 0.95) !important;
}

/* Block appender button styling */
.jw-gallery-editor .block-list-appender {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    aspect-ratio: var(--jw-gallery-aspect-ratio, 16/9);
    background: #e8e8e8;
    border: 2px dashed #ccc;
    border-radius: 4px;
}

/* Alignment support */
.wp-block-jw-gallery.alignwide,
.wp-block-jw-gallery.alignfull {
    width: 100%;
}

.wp-block-jw-gallery.alignfull {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: 100vw;
}

/* ==========================================================================
   JW Gallery Block - Black & White Mode
   ========================================================================== */

.jw-gallery--bw .jw-gallery-item img,
.jw-gallery--bw .jw-gallery-item video {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

/* Color on hover - only when enabled */
.jw-gallery--bw.jw-gallery--color-hover .jw-gallery-item:hover img,
.jw-gallery--bw.jw-gallery--color-hover .jw-gallery-item:hover video {
    filter: grayscale(0%);
}

/* Editor preview */
.jw-gallery-editor.jw-gallery--bw .jw-gallery-item-preview img,
.jw-gallery-editor.jw-gallery--bw .jw-gallery-item-preview video {
    filter: grayscale(100%);
}

.jw-gallery-editor.jw-gallery--bw.jw-gallery--color-hover .jw-gallery-item-preview:hover img,
.jw-gallery-editor.jw-gallery--bw.jw-gallery--color-hover .jw-gallery-item-preview:hover video {
    filter: grayscale(0%);
}

/* ==========================================================================
   JW Gallery Block - Mixed Ratio Mode (Editor)
   ========================================================================== */

.jw-gallery-editor.jw-gallery--mixed .jw-gallery-item-editor {
    min-height: auto;
}

.jw-gallery-editor.jw-gallery--mixed .jw-gallery-item-preview img,
.jw-gallery-editor.jw-gallery--mixed .jw-gallery-item-preview video {
    aspect-ratio: auto;
    height: auto;
}

.jw-gallery-editor.jw-gallery--mixed .block-list-appender {
    aspect-ratio: auto;
    min-height: 80px;
}