/* ============================================================
   Display Grid Block
   ============================================================ */

.SDblock.display-grid {
    width: 100%;
    padding-top: clamp(40px, 6vw, 100px);
    padding-bottom: clamp(40px, 6vw, 100px);
    overflow: hidden;
}

/* Full Width — displayGrid.js measures the element's actual left offset and
   sets margin-left / width inline. No CSS negative-margin needed here; JS
   also re-runs on resize and after load so images can't shift the result.    */
.SDblock.display-grid:not(.is-boxed) {
    width: 100%;
}

/* The default page template applies max-width + margin-left to non-wp-block
   children of .entry-content. Both interfere with the JS full-bleed breakout:
   max-width caps the JS-set width; margin-left skews the getBoundingClientRect
   measurement. Reset both here so the JS calculation is clean. */
.page-template-default .entry-content > .SDblock.dg-block {
    max-width: none;
    margin-left: 0;
    padding-right: 0;
}

.SDblock.display-grid.has-bg-image {
    padding-top: 0;
    padding-bottom: 0;
}

/* ── Boxed width variant ─────────────────────────────────── */

.SDblock.display-grid.is-boxed .dg-gallery {
    max-width: var(--maxWidth);
    margin-left: auto;
    margin-right: auto;
}

/* ── Column width (side-by-side layout) ──────────────────── */
/* Float left on desktop so two blocks sit side by side.
   Add a Spacer block after the pair to clear the float.     */

.SDblock.display-grid.dg-col-half       { float: left; width: 50%;     margin-left: 0; }
.SDblock.display-grid.dg-col-one-third  { float: left; width: 33.333%; margin-left: 0; }
.SDblock.display-grid.dg-col-two-thirds { float: left; width: 66.666%; margin-left: 0; }

/* When Boxed Width is also on, percentages are of --maxWidth
   rather than the viewport (e.g. two Half+Boxed = one max-width pair). */
.SDblock.display-grid.is-boxed.dg-col-half       { width: calc(var(--maxWidth) * 0.5); }
.SDblock.display-grid.is-boxed.dg-col-one-third  { width: calc(var(--maxWidth) / 3); }
.SDblock.display-grid.is-boxed.dg-col-two-thirds { width: calc(var(--maxWidth) * 2 / 3); }

@media only screen and (max-width: 900px) {
    .SDblock.display-grid.dg-col-half,
    .SDblock.display-grid.dg-col-one-third,
    .SDblock.display-grid.dg-col-two-thirds,
    .SDblock.display-grid.is-boxed.dg-col-half,
    .SDblock.display-grid.is-boxed.dg-col-one-third,
    .SDblock.display-grid.is-boxed.dg-col-two-thirds {
        float: none;
        width: 100%;
    }
}

/* ── Grid container ──────────────────────────────────────── */

.SDblock.dg-block .dg-gallery {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(var(--grid-cols-d, 5), 1fr);
    /* repeat(0, ...) is invalid CSS — silently ignored when --grid-rows-d is
       unset. When a row count is set, each row is sized to match the cell
       aspect ratio so empty rows don't collapse. --gallery-w is set in px by
       JS (fixGalleryWidth) so row heights are always relative to actual gallery
       width. 100vw is a safe fallback before JS runs (full-width blocks only). */
    grid-template-rows: repeat(var(--grid-rows-d, 0), calc(var(--gallery-w, 100vw) / var(--grid-cols-d, 5) * var(--cell-ratio, 1)));
    container-type: inline-size;
    position: relative; /* containing block for absolutely-positioned shapes */
    width: 100%;
    /* Explicit compositing group so all mix-blend-mode operations inside the
       gallery (item-blend, text-bg-blend, text-content-blend) share the same
       GPU compositing context and can blend against sibling items. Without this,
       transform+mix-blend-mode on children (e.g. textfit-scaled text) gets
       promoted to a separate GPU layer that can't see sibling shapes. */
    isolation: isolate;
}

/* ── Shared item base ────────────────────────────────────── */

.SDblock.dg-block .dg-item {
    display: var(--d-display, block);
    grid-column: var(--d-col, auto) / span var(--d-cspan, 1);
    grid-row:    var(--d-row, auto) / span var(--d-rspan, 1);
    margin: -1px;
    /* aspect-ratio uses the item's actual rendered width from the grid — no
       vw/cqi units needed. colSpan / (rowSpan × cellRatio) means a 1×1 item
       at 1:1 is square, at 3:2 (cellRatio 0.6667) is landscape, etc. Multi-
       span items get the correct proportional ratio automatically. */
    aspect-ratio: var(--d-cspan, 1) / calc(var(--d-rspan, 1) * var(--cell-ratio, 1));
    position: relative;
    overflow: hidden;
    mix-blend-mode: var(--item-blend-mode, normal);
    opacity: var(--item-opacity, 1);
    z-index: var(--d-zindex, auto);
}

/* ── Image items ─────────────────────────────────────────── */

.SDblock.dg-block .dg-item--image {
    background-size: var(--img-fit, cover);
    background-repeat: var(--img-repeat, no-repeat);
    background-position: var(--img-pos-x, center) var(--img-pos-y, center);
}

/* ── Video items ─────────────────────────────────────────── */

.SDblock.dg-block .dg-item--video {
    position: relative;
}

.SDblock.dg-block .dg-item--video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.SDblock.dg-block .dg-item--video video.is-loaded {
    opacity: 1;
}

/* ── Text box items ──────────────────────────────────────── */

.SDblock.dg-block .dg-item--text {
    display: var(--d-display, flex);
    align-items: var(--text-valign, start);
    justify-content: center;
    background: transparent;
    color: var(--text-color, inherit);
    font-family: var(--text-font-family, inherit);
    /* overflow:clip instead of the inherited overflow:hidden — same visual
       clipping but does not create a GPU compositing layer, which would
       otherwise isolate text-bg-blend and text-content-blend from external
       sibling items (shapes, background). */
    overflow: clip;
}

/* Background layer — independent blend mode and opacity from the text */
.SDblock.dg-block .dg-item--text::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--text-bg, transparent);
    mix-blend-mode: var(--text-bg-blend, normal);
    opacity: var(--text-bg-opacity, 1);
    pointer-events: none;
}

.SDblock.dg-block .dg-item--text .dg-text-header {
    font-family:    var(--subhead-font);
    font-weight:    var(--subhead-weight);
    text-transform: var(--subhead-transform);
    letter-spacing: var(--subhead-tracking);
    font-size:      var(--subhead-size);
    color:          var(--subhead-color);
    display: block;
    margin-bottom: 0.5em;
}

.SDblock.dg-block .dg-item--text .dg-text-inner {
    position: relative;
    width: 100%;
    padding: var(--text-padding, 0);
    opacity: var(--text-content-opacity, 1);
    mix-blend-mode: var(--text-content-blend, normal);
}

.SDblock.dg-block .dg-item--text .dg-text-inner,
.SDblock.dg-block .dg-item--text .dg-text-inner * {
    font-family: var(--text-font-family, inherit);
}

/* Restore subhead font — the wildcard rule above has equal specificity and comes later */
.SDblock.dg-block .dg-item--text .dg-text-inner .dg-text-header {
    font-family: var(--subhead-font);
}

.SDblock.dg-block .dg-item--text .dg-text-inner > *:first-child {
    margin-top: 0;
}

.SDblock.dg-block .dg-item--text .dg-text-inner > *:last-child {
    margin-bottom: 0;
}


/* ── Shape items ─────────────────────────────────────────── */
/*
 * Shapes are absolutely positioned within .dg-gallery rather than placed as
 * grid items.  This lets col/row spans extend past the explicit track count
 * (e.g. a circle centered on the right edge) without creating 0px implicit
 * tracks that collapse the element.  Position and size are computed as
 * percentages of the gallery's own width (left/width) or via --gallery-w (top/height),
 * both of which reference the gallery's actual pixel width.
 */

.SDblock.dg-block .dg-item--shape {
    background: transparent;
    position: absolute;
    margin: 0;           /* reset the -1px grid-gap fix from .dg-item */
    grid-column: unset;  /* prevent grid-area from becoming the containing block */
    grid-row: unset;
    aspect-ratio: unset; /* size comes from width/height below, not cspan/rspan ratio */
    overflow: hidden;
    pointer-events: none;
    left:   calc((var(--d-col,   1) - 1) / var(--grid-cols-d, 5) * 100%);
    top:    calc((var(--d-row,   1) - 1) * (var(--gallery-w, 100vw) / var(--grid-cols-d, 5)) * var(--cell-ratio, 1));
    width:  calc( var(--d-cspan, 1)      / var(--grid-cols-d, 5) * 100%);
    height: calc( var(--d-rspan, 1)      * (var(--gallery-w, 100vw) / var(--grid-cols-d, 5)) * var(--cell-ratio, 1));
    transform: var(--shape-anchor-d, translate(0%,0%));
}

.SDblock.dg-block .dg-item--shape.dg-shape--circle {
    border-radius: 50%;
}

.SDblock.dg-block .dg-item--shape.dg-shape--square {
    border-radius: 0;
}

/* Color A layer — sits beneath the texture */
.SDblock.dg-block .dg-item--shape::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--shape-color, transparent);
    opacity: var(--shape-color-opacity, 1);
}

/* Color B layer — masked by texture, sits above Color A */
.SDblock.dg-block .dg-item--shape.dg-shape--textured::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--shape-secondary-color, #ffffff);
    mask-image: var(--shape-texture-url);
    mask-mode: luminance;
    mask-repeat: repeat;
    mask-size: auto;
    opacity: var(--shape-secondary-opacity, 1);
}

/* ── Background image per-breakpoint visibility ──────────── */

@media only screen and (min-width: 901px) {
    .SDblock.display-grid.bg-hide-desktop {
        padding-top: clamp(40px, 6vw, 100px);
        padding-bottom: clamp(40px, 6vw, 100px);
    }
    .SDblock.display-grid.bg-hide-desktop .dg-gallery {
        background-image: none !important;
    }
}

/* ── Tablet (≤900px) ─────────────────────────────────────── */

@media only screen and (max-width: 900px) {
    .SDblock.dg-block .dg-gallery {
        grid-template-columns: repeat(var(--grid-cols-t, 3), 1fr);
        grid-template-rows: repeat(var(--grid-rows-t, 0), calc(var(--gallery-w, 100vw) / var(--grid-cols-t, 3) * var(--cell-ratio, 1)));
    }

    .SDblock.dg-block .dg-item {
        display: var(--t-display, block);
        grid-column: var(--t-col, var(--d-col, auto)) / span var(--t-cspan, var(--d-cspan, 1));
        grid-row:    var(--t-row, var(--d-row, auto)) / span var(--t-rspan, var(--d-rspan, 1));
        aspect-ratio: var(--t-cspan, var(--d-cspan, 1)) / calc(var(--t-rspan, var(--d-rspan, 1)) * var(--cell-ratio, 1));
        z-index: var(--t-zindex, var(--d-zindex, auto));
    }

    .SDblock.dg-block .dg-item--text,
    .SDblock.dg-block .dg-item--button {
        display: var(--t-display, flex);
    }

    .SDblock.dg-block .dg-item--button {
        z-index: var(--t-zindex, var(--d-zindex, 200));
    }

    .SDblock.dg-block .dg-item--shape {
        grid-column: unset;
        grid-row: unset;
        left:   calc((var(--t-col,   var(--d-col,   1)) - 1) / var(--grid-cols-t, 3) * 100%);
        top:    calc((var(--t-row,   var(--d-row,   1)) - 1) * (var(--gallery-w, 100vw) / var(--grid-cols-t, 3)) * var(--cell-ratio, 1));
        width:  calc( var(--t-cspan, var(--d-cspan, 1))      / var(--grid-cols-t, 3) * 100%);
        height: calc( var(--t-rspan, var(--d-rspan, 1))      * (var(--gallery-w, 100vw) / var(--grid-cols-t, 3)) * var(--cell-ratio, 1));
        transform: var(--shape-anchor-t, var(--shape-anchor-d, translate(0%,0%)));
    }

    .SDblock.display-grid.bg-hide-tablet {
        padding-top: clamp(40px, 6vw, 100px);
        padding-bottom: clamp(40px, 6vw, 100px);
    }
    .SDblock.display-grid.bg-hide-tablet .dg-gallery {
        background-image: none !important;
    }
}

/* ── Mobile (≤600px) ─────────────────────────────────────── */

@media only screen and (max-width: 600px) {
    .SDblock.dg-block .dg-gallery {
        grid-template-columns: repeat(var(--grid-cols-m, 2), 1fr);
        grid-template-rows: repeat(var(--grid-rows-m, 0), calc(var(--gallery-w, 100vw) / var(--grid-cols-m, 2) * var(--cell-ratio, 1)));
    }

    .SDblock.dg-block .dg-item {
        display: var(--m-display, block);
        grid-column: var(--m-col, var(--t-col, var(--d-col, auto))) / span var(--m-cspan, var(--t-cspan, var(--d-cspan, 1)));
        grid-row:    var(--m-row, var(--t-row, var(--d-row, auto))) / span var(--m-rspan, var(--t-rspan, var(--d-rspan, 1)));
        aspect-ratio: var(--m-cspan, var(--t-cspan, var(--d-cspan, 1))) / calc(var(--m-rspan, var(--t-rspan, var(--d-rspan, 1))) * var(--cell-ratio, 1));
        z-index: var(--m-zindex, var(--t-zindex, var(--d-zindex, auto)));
    }

    .SDblock.dg-block .dg-item--text,
    .SDblock.dg-block .dg-item--button {
        display: var(--m-display, flex);
    }

    .SDblock.dg-block .dg-item--button {
        z-index: var(--m-zindex, var(--t-zindex, var(--d-zindex, 200)));
    }

    .SDblock.dg-block .dg-item--shape {
        grid-column: unset;
        grid-row: unset;
        left:   calc((var(--m-col,   var(--t-col,   var(--d-col,   1))) - 1) / var(--grid-cols-m, 2) * 100%);
        top:    calc((var(--m-row,   var(--t-row,   var(--d-row,   1))) - 1) * (var(--gallery-w, 100vw) / var(--grid-cols-m, 2)) * var(--cell-ratio, 1));
        width:  calc( var(--m-cspan, var(--t-cspan, var(--d-cspan, 1)))      / var(--grid-cols-m, 2) * 100%);
        height: calc( var(--m-rspan, var(--t-rspan, var(--d-rspan, 1)))      * (var(--gallery-w, 100vw) / var(--grid-cols-m, 2)) * var(--cell-ratio, 1));
        transform: var(--shape-anchor-m, var(--shape-anchor-t, var(--shape-anchor-d, translate(0%,0%))));
    }

    .SDblock.display-grid.bg-hide-mobile {
        padding-top: clamp(40px, 6vw, 100px);
        padding-bottom: clamp(40px, 6vw, 100px);
    }
    .SDblock.display-grid.bg-hide-mobile .dg-gallery {
        background-image: none !important;
    }
}

/* Pin-down cells sit 3px below their grid area to close the sub-pixel gap
   between the cell bottom and the next row. Pin-up cells sit 3px above for
   the same reason at the top edge. top/bottom offset (not transform) avoids
   creating a stacking context that would break mix-blend-mode. */
.SDblock.dg-block .dg-item--text[data-textfit-pin="down"] {
    top: 3px;
}
.SDblock.dg-block .dg-item--text[data-textfit-pin="up"] {
    top: -3px;
}

/* ── Auto-fit text: hide until fitted to prevent flash ───── */

.SDblock.dg-block .dg-item--text[data-textfit] {
    opacity: 0;
    overflow: visible;
    min-width: 0;  /* prevent textFit-scaled content from inflating 1fr column tracks */
    min-height: 0; /* prevent flex-container min-height:auto from inflating past the grid track */
}

.SDblock.dg-block .dg-item--text[data-textfit].dg-tf-ready {
    opacity: 1;
    transition: opacity 0.15s ease;
}

/* Prevent long words from overflowing the cell width in multi-line mode */
.SDblock.dg-block .dg-item--text[data-textfit="multi"] .dg-text-inner {
    overflow-wrap: break-word;
}


/* ── Dev: show grid lines (internal use only) ────────────────
   Toggle via the "Show Grid Lines" field in the block editor.
   Uses container query units (cqw) to compute row height from
   column width: row-h = (var(--gallery-w, 100vw) / cols) * cell-ratio.          */

/* ── SVG items ───────────────────────────────────────────── */

.SDblock.dg-block .dg-item--svg {
    overflow: hidden;
}

/* Fill — SVG stretches to cover the full cell */
.SDblock.dg-block .dg-item--svg.dg-svg--fill svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Fit — SVG letterboxes within the cell */
.SDblock.dg-block .dg-item--svg.dg-svg--fit {
    display: flex;
    align-items: center;
    justify-content: center;
}
.SDblock.dg-block .dg-item--svg.dg-svg--fit svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* Overflow — SVG renders at natural size, can bleed past cell edges */
.SDblock.dg-block .dg-item--svg.dg-svg--overflow {
    overflow: visible;
}
.SDblock.dg-block .dg-item--svg.dg-svg--overflow svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--svg-width, 150%);
    height: auto;
    display: block;
}

/* ── Button items ────────────────────────────────────────── */

.SDblock.dg-block .dg-item--button {
    display: var(--d-display, flex);
    align-items: var(--btn-v-align, center);
    justify-content: var(--btn-h-align, center);
    padding: var(--btn-cell-padding, 0);
    /* Buttons must sit above image/shape items that share the same grid cell */
    z-index: var(--d-zindex, 200);
}

/* Size-to-content: cell wraps button rather than filling the grid aspect-ratio */
.SDblock.dg-block .dg-item--button.dg-btn--autosize {
    aspect-ratio: unset;
    width: auto;
    height: auto;
    align-self: var(--btn-v-align, center);
    justify-self: var(--btn-h-align, center);
}

/* #SD prefix beats the #SD A { color: var(--colA) } rule in SDstandards.css */
.SDblock.dg-block .dg-item--button .dg-btn,
#SD .SDblock.dg-block .dg-item--button .dg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Per-item override (--btn-corner-radius) set by PHP on the wrapper div
       takes priority; falls back to the site-wide token, then a safe default. */
    padding:       var(--btn-padding-y, 0.5em) var(--btn-padding-x, 1em);
    border-radius: var(--btn-corner-radius, var(--btn-radius, 4px));
    font-weight:   var(--btn-font-weight, 600);
    text-transform:  var(--btn-transform, none);
    letter-spacing:  var(--btn-tracking, 0em);
    background: var(--btn-bg, transparent);
    color: var(--btn-fg, currentColor);
    border: 2px solid var(--btn-stroke, transparent);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.SDblock.dg-block .dg-item--button .dg-btn:hover,
#SD .SDblock.dg-block .dg-item--button .dg-btn:hover {
    background: var(--btn-bg-hover, var(--btn-bg, transparent));
    color: var(--btn-fg-hover, var(--btn-fg, currentColor));
    border-color: var(--btn-stroke-hover, var(--btn-stroke, transparent));
}

/* ── Animation items ─────────────────────────────────────── */

.SDblock.dg-block .dg-item--animation canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Grid lines overlay ──────────────────────────────────── */

.SDblock.dg-block.dg-show-lines .dg-gallery {
    position: relative;
}

.SDblock.dg-block.dg-show-lines .dg-gallery::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background-image:
        repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0.55) 0 2px,
            transparent 2px calc(100% / var(--grid-cols-d, 5))
        ),
        repeating-linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.55) 0 2px,
            transparent 2px calc(var(--gallery-w, 100vw) / var(--grid-cols-d, 5) * var(--cell-ratio, 1))
        );
}

.SDblock.dg-block.dg-show-lines .dg-item:not(.dg-item--shape) {
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.55);
}

@media only screen and (max-width: 900px) {
    .SDblock.dg-block.dg-show-lines .dg-gallery::after {
        background-image:
            repeating-linear-gradient(
                to right,
                rgba(0, 0, 0, 0.55) 0 2px,
                transparent 2px calc(100% / var(--grid-cols-t, 3))
            ),
            repeating-linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.55) 0 2px,
                transparent 2px calc(var(--gallery-w, 100vw) / var(--grid-cols-t, 3) * var(--cell-ratio, 1))
            );
    }
}

@media only screen and (max-width: 600px) {
    .SDblock.dg-block.dg-show-lines .dg-gallery::after {
        background-image:
            repeating-linear-gradient(
                to right,
                rgba(0, 0, 0, 0.55) 0 2px,
                transparent 2px calc(100% / var(--grid-cols-m, 2))
            ),
            repeating-linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.55) 0 2px,
                transparent 2px calc(var(--gallery-w, 100vw) / var(--grid-cols-m, 2) * var(--cell-ratio, 1))
            );
    }
}