/* ==========================================================================
   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 1 item: full width (used in alternating-2-1) */
.jw-gallery--alternating .jw-gallery-item.jw-gallery-item--row1 {
    width: 100% !important;
    flex: 0 0 100% !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;
}

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

/* Row of 6 items: width = (100% - 5 gaps) / 6 */
.jw-gallery--alternating .jw-gallery-item.jw-gallery-item--row6 {
    width: calc((100% - 5 * var(--jw-gallery-gap, 16px)) / 6) !important;
    flex: 0 0 calc((100% - 5 * var(--jw-gallery-gap, 16px)) / 6) !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,
    .jw-gallery--alternating .jw-gallery-item.jw-gallery-item--row5,
    .jw-gallery--alternating .jw-gallery-item.jw-gallery-item--row6 {
        width: calc((100% - var(--jw-gallery-gap, 16px)) / 2) !important;
        flex: 0 0 calc((100% - var(--jw-gallery-gap, 16px)) / 2) !important;
    }
    /* row1 stays full-width at all sizes */
    .jw-gallery--alternating .jw-gallery-item.jw-gallery-item--row1 {
        width: 100% !important;
        flex: 0 0 100% !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,
    .jw-gallery--alternating .jw-gallery-item.jw-gallery-item--row5,
    .jw-gallery--alternating .jw-gallery-item.jw-gallery-item--row6 {
        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;
}

/* Excludes --custom-ratio items: those set their own definite aspect-ratio
   deliberately (jw_gallery_item_render()'s inline style) and need their
   own height:100%/object-fit:cover img rule below to actually crop to it -
   this selector's specificity (2 classes + element) would otherwise beat
   that rule's (1 class + element) and silently defeat any per-item custom
   ratio set inside a Mixed-ratio gallery. */
.jw-gallery--mixed .jw-gallery-item:not(.jw-gallery-item--custom-ratio) img,
.jw-gallery--mixed .jw-gallery-item:not(.jw-gallery-item--custom-ratio) video {
    width: 100%;
    height: auto;
    display: block;
}

/* Mixed mode + a row-based layout (Alternating/Custom): flex's default
   align-items:stretch forces every item in a row to match the row's
   tallest sibling's height, so a naturally-wider/shorter (e.g. 16:9)
   image sitting next to naturally-taller (e.g. 9:16) ones got stretched
   to match and then cropped by object-fit:cover to fill that forced
   height - the opposite of "Mixed" mode's whole point (each image keeps
   its own natural proportions). flex-start lets each item size to its
   own natural height at its own column width instead. */
.jw-gallery--mixed.jw-gallery--alternating {
    align-items: flex-start;
}

/* ==========================================================================
   JW Gallery Block - Justified Rows (Mixed ratio + Alternating/Custom)
   ========================================================================== */

/* jw_gallery_render() builds one real <div class="jw-gallery-row"> per
   configured row (instead of relying on --rowN width classes + flex-wrap)
   whenever ratio is "Mixed" and the layout is row-based - so this
   container just needs to stack those row divs, not arrange items
   directly. Overrides the plain .jw-gallery--alternating flex-wrap
   behavior (same class is still applied for the older CSS that targets
   it elsewhere, e.g. responsive breakpoints - none of which apply once
   .jw-gallery--justified is also present, since rows are already
   full-width blocks that don't need column-width math). */
.jw-gallery--justified.jw-gallery--alternating {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--jw-gallery-gap, 16px);
}

/* Each row's own aspect-ratio (set inline by jw_gallery_build_row() as the
   SUM of its items' individual ratios) is what makes this work: with every
   item set to flex-grow:<its own ratio> below, flex distributes the row's
   full width proportionally to each item's ratio, and because the row's
   own height is derived from that combined ratio, the height that results
   is exactly the one that makes every item's true (uncropped) aspect
   ratio add up to the row's full width - a "justified gallery" achieved
   with zero JS measurement. */
.jw-gallery-row {
    display: flex;
    width: 100%;
    gap: var(--jw-gallery-gap, 16px);
}

.jw-gallery--justified .jw-gallery-row .jw-gallery-item {
    width: auto;
    flex-basis: 0;
    min-width: 0;
    height: 100%;
    aspect-ratio: auto;
}

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

/* Mixed mode: hover items size naturally from poster image */
.jw-gallery--mixed .jw-gallery-item--hover,
.jw-gallery--mixed.jw-gallery--alternating .jw-gallery-item.jw-gallery-item--hover {
    aspect-ratio: auto !important;
    height: auto !important;
    background: transparent !important;
}

.jw-gallery--mixed .jw-gallery-hover-wrap {
    position: relative;
    width: 100%;
    height: auto;
}

/* Justified ("Mixed" ratio) rows had no mobile handling at all - unlike
   every other layout in this file (Columns at 24, Alternating/Custom at
   102), a .jw-gallery-row's items stayed side-by-side sharing one row
   height at any screen width, since the flex-grow justified-gallery math
   (see jw_gallery_build_row() above) has no natural single-column
   fallback. On mobile each row now stacks into single full-width items,
   each falling back to its OWN true aspect-ratio via the --jw-item-ratio
   custom property jw_gallery_render() now also writes alongside
   flex-grow (added for this fix) - not a fixed 16:9 guess, so a genuinely
   9:16 image in a mixed row still shows tall on a phone, not cropped to
   land ratio. `!important` is required on every property here even
   though the competing inline style has none: a plain (non-!important)
   inline style still outranks ANY external selector's plain declaration
   regardless of specificity or source order - confirmed live, the first
   version of this rule (no !important) was silently losing to the
   inline `flex-grow:<ratio>` on jw_gallery_item_render()'s own item div. */
@media (max-width: 600px) {
    .jw-gallery-row {
        flex-direction: column !important;
    }
    .jw-gallery--justified .jw-gallery-row .jw-gallery-item {
        width: 100% !important;
        flex: none !important;
        height: auto !important;
        aspect-ratio: var(--jw-item-ratio, 16 / 9) !important;
    }
}

.jw-gallery--mixed .jw-gallery-hover-wrap .jw-gallery-poster {
    position: relative !important;
    z-index: 2;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}

.jw-gallery--mixed .jw-gallery-hover-wrap .jw-gallery-hover-video {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ==========================================================================
   JW Gallery Block - Masonry Layout
   ========================================================================== */

.jw-gallery--masonry {
    display: block !important;
    column-count: var(--jw-gallery-columns, 3);
    column-gap: var(--jw-gallery-gap, 16px);
}

.jw-gallery--masonry .jw-gallery-item {
    aspect-ratio: auto;
    height: auto;
    break-inside: avoid;
    margin-bottom: var(--jw-gallery-gap, 16px);
    display: inline-block;
    width: 100%;
}

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

@media (max-width: 1024px) {
    .jw-gallery--masonry {
        column-count: 2 !important;
    }
}

@media (max-width: 600px) {
    .jw-gallery--masonry {
        column-count: 1 !important;
    }
}

/* ==========================================================================
   JW Gallery Block - Role & Caption Overlay
   ========================================================================== */

.jw-gallery-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 12px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 4;
    pointer-events: none;
}

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

/* Touch devices: :hover sticks after a tap (there's no real "hover" state to
   leave), so the rule above would leave an item's overlay text stuck on
   after the finger moves elsewhere. Neutralise it and drive the overlay
   from .jw-touch-active instead (set by frontend.js's initGalleryTouch()) -
   same pattern already used for the homepage grid, DOP cards, and the
   Archive page. */
@media (hover: none) {
    .jw-gallery-item:not(.jw-touch-active):hover .jw-gallery-item-overlay {
        opacity: 0;
    }
    .jw-gallery-item.jw-touch-active .jw-gallery-item-overlay {
        opacity: 1;
    }
}

.jw-gallery-item-caption {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.jw-gallery-item-role {
    color: rgba(255,255,255,0.7);
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

/* Per-item custom aspect ratio override - this class is only ever added
   (jw-gallery-block.php) alongside a genuine inline `style="aspect-ratio:
   X"` on the same element, so it must NOT force a value here: an
   `!important` on this class would always beat that non-!important inline
   style regardless of specificity, silently discarding the exact ratio the
   user picked in the "Item Aspect Ratio" control and falling back to the
   image's own natural crop instead - this previously made per-item ratios
   (e.g. mixing 16:9 and 9:16 in the same row under "Mixed") do nothing. */
.jw-gallery-item--custom-ratio img,
.jw-gallery-item--custom-ratio video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 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;
}

/* Bulk role control - shown in the (light) .jw-gallery-toolbar only when 2+
   of the gallery's own items are multi-selected, so .jw-gallery-layout-label
   isn't reused here (that class is white text, meant for the dark
   .jw-gallery-layout-selector bar - invisible against this light one). */
.jw-gallery-bulk-role {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jw-gallery-bulk-role label {
    color: #1e1e1e;
    font-weight: 500;
    font-size: 13px;
}

/* Discoverability hint - the media library's own multi-select (Ctrl/Cmd or
   Shift while clicking) has no on-screen indicator anywhere in WordPress
   core, so this makes the convention visible right where it's needed
   instead of relying on the user already knowing it. */
.jw-gallery-multiselect-hint {
    color: #757575;
    font-size: 12px;
    font-style: italic;
}

.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%;
}

.jw-gallery-editor > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-block] {
    width: 100%;
    min-width: 0;
}

/* 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 bar - below the preview */
.jw-gallery-type-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 4px;
    background: #1e1e1e;
    border-radius: 0 0 4px 4px;
    justify-content: center;
}

.jw-gallery-type-bar .jw-type-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
    min-height: 22px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    border-radius: 3px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    cursor: pointer !important;
}

.jw-gallery-type-bar .jw-type-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

.jw-gallery-type-bar .jw-type-btn.is-active {
    background: #007cba !important;
    color: #fff !important;
    border-color: #007cba !important;
}

.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%);
}

/* Per-item Black & White override - independent of the gallery-wide toggle
   above. The class lives on the item's own wrapper (both the frontend
   .jw-gallery-item and the editor's blockProps div), so one descendant
   selector covers the image/video wherever it's nested (including inside
   .jw-gallery-item-preview/.jw-gallery-video-preview in the editor, or a
   hover item's poster). !important ensures this always wins over the
   gallery-wide color-on-hover reveal rule above, since a per-item override
   is a stronger, more specific intent than the gallery's own setting. */
.jw-gallery-item--bw img,
.jw-gallery-item--bw video {
    filter: grayscale(100%) !important;
}

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

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

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

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

/* Per-item custom ratio in editor */
.jw-gallery-item-editor.jw-gallery-item--custom-ratio .jw-gallery-item-preview img,
.jw-gallery-item-editor.jw-gallery-item--custom-ratio .jw-gallery-item-preview video {
    aspect-ratio: inherit;
    height: 100%;
    object-fit: cover;
}


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

/* Masonry layout in editor */
.jw-gallery-editor.jw-gallery--masonry {
    display: block !important;
    column-count: var(--jw-gallery-columns, 3);
    column-gap: var(--jw-gallery-gap, 16px);
}

.jw-gallery-editor.jw-gallery--masonry .block-editor-inner-blocks,
.jw-gallery-editor.jw-gallery--masonry .block-editor-block-list__layout {
    display: block !important;
    column-count: var(--jw-gallery-columns, 3);
    column-gap: var(--jw-gallery-gap, 16px);
}

.jw-gallery-editor.jw-gallery--masonry .block-editor-block-list__layout > [data-block] {
    break-inside: avoid;
    margin-bottom: var(--jw-gallery-gap, 16px);
    display: inline-block;
    width: 100%;
}

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

.jw-gallery-editor.jw-gallery--masonry .jw-gallery-item-preview img,
.jw-gallery-editor.jw-gallery--masonry .jw-gallery-item-preview video {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: cover;
    display: block;
}

.jw-gallery-editor.jw-gallery--masonry .block-list-appender {
    break-inside: avoid;
    aspect-ratio: auto;
    min-height: 80px;
}

/* ==========================================================================
   JW Gallery Block - Alternating layout: editor wp-block wrapper fix
   Gutenberg adds width:100% to .wp-block; override so flex sizing works
   ========================================================================== */

.jw-gallery.jw-gallery--alternating .wp-block.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;
}

.jw-gallery.jw-gallery--alternating .wp-block.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;
}

.jw-gallery.jw-gallery--alternating .wp-block.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;
}

.jw-gallery.jw-gallery--alternating .wp-block.jw-gallery-item--row5 {
    width: calc((100% - 4 * var(--jw-gallery-gap, 16px)) / 5) !important;
    flex: 0 0 calc((100% - 4 * var(--jw-gallery-gap, 16px)) / 5) !important;
}

.jw-gallery.jw-gallery--alternating .wp-block.jw-gallery-item--row6 {
    width: calc((100% - 5 * var(--jw-gallery-gap, 16px)) / 6) !important;
    flex: 0 0 calc((100% - 5 * var(--jw-gallery-gap, 16px)) / 6) !important;
}

.jw-gallery.jw-gallery--alternating .wp-block.jw-gallery-item--row1 {
    width: 100% !important;
    flex: 0 0 100% !important;
}

/* ==========================================================================
   JW Gallery Block - Custom layout row editor (Inspector panel)
   ========================================================================== */

.jw-gallery-custom-rows {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.jw-gallery-custom-rows-label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
}

.jw-gallery-custom-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.jw-gallery-custom-row > span {
    flex: 0 0 48px;
    font-size: 12px;
    color: #757575;
}

.jw-gallery-custom-row .components-range-control {
    flex: 1;
}

.jw-gallery-custom-rows-hint {
    font-size: 12px;
    color: #757575;
    margin-top: 8px;
}

/* On-canvas column-count control shown on the first item of each row when
   the gallery's Layout is set to Custom - lets you change a row's column
   count right on the row itself instead of going through the sidebar. */
.jw-gallery-row-control {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 4px;
    padding: 4px 6px;
    backdrop-filter: blur(2px);
}

.jw-gallery-row-control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.jw-gallery-row-control-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.3);
}

.jw-gallery-row-control-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.jw-gallery-row-control-label {
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    min-width: 40px;
    text-align: center;
    white-space: nowrap;
}