/*
 * Dynamic Draggable Post Hero - frontend styles
 *
 * Layout model
 * ------------
 * The hero is driven by a single fluid scale factor (--ddph-scale) that the
 * frontend script recalculates from the hero's own width. Every dimension that
 * belongs to the composition (hero height, polaroid width, font sizes,
 * background text) is expressed as design-value x scale, so the whole collage
 * grows and shrinks proportionally at every viewport width instead of jumping
 * between three fixed breakpoints. The background then keeps a predictable crop
 * because the hero's aspect ratio stays stable as it scales.
 */

.ddph-hero,
.ddph-hero * { box-sizing: border-box; }

.ddph-hero {
    --ddph-scale: 1;
    --ddph-device-factor: 1;
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--ddph-bg, #f3efe8);
    background-image: var(--ddph-bg-image-d, none);
    background-size: var(--ddph-bg-size-d, cover);
    background-position: var(--ddph-bg-pos-d, 50% 50%);
    background-repeat: var(--ddph-bg-repeat, no-repeat);
    color: var(--ddph-text, #191919);
}

/* Parallax-style attachment only where it is reliable. */
@media (min-width: 1025px) and (hover: hover) {
    .ddph-hero.ddph-bg-fixed { background-attachment: fixed; }
}

/* -------------------------------------------------------------------------
   Height modes
   ------------------------------------------------------------------------- */

.ddph-hero.ddph-h-fixed {
    min-height: var(--ddph-height-desktop, 720px);
}

.ddph-hero.ddph-h-scale {
    min-height: clamp(
        var(--ddph-min-height, 320px),
        calc(var(--ddph-height-desktop, 720px) * var(--ddph-scale, 1)),
        var(--ddph-max-height, 1100px)
    );
}

.ddph-hero.ddph-h-aspect {
    aspect-ratio: var(--ddph-aspect-desktop, 16 / 9);
    min-height: var(--ddph-min-height, 320px);
    max-height: var(--ddph-max-height, 1100px);
}

.ddph-hero.ddph-h-vh {
    min-height: calc(var(--ddph-vh-desktop, 85) * 1vh);
}

@supports (height: 1svh) {
    .ddph-hero.ddph-h-vh { min-height: calc(var(--ddph-vh-desktop, 85) * 1svh); }
}

/* -------------------------------------------------------------------------
   Width modes
   ------------------------------------------------------------------------- */

.ddph-hero.ddph-drag-outside,
.ddph-hero.ddph-drag-outside .ddph-photo-area {
    overflow: visible;
}

.ddph-hero.ddph-width-parent {
    width: 100%;
    max-width: 100%;
}

/* --ddph-viewport-w is written by the script from documentElement.clientWidth so
   the edge-to-edge mode never counts the scrollbar and cannot create sideways
   scrolling the way a raw 100vw does. */
.ddph-hero.ddph-width-full {
    width: var(--ddph-viewport-w, 100vw);
    max-width: var(--ddph-viewport-w, 100vw);
    margin-left: calc(50% - (var(--ddph-viewport-w, 100vw) / 2));
    margin-right: calc(50% - (var(--ddph-viewport-w, 100vw) / 2));
}

.ddph-hero.ddph-width-boxed {
    width: 100%;
    max-width: var(--ddph-max-width, 1200px);
    margin-left: auto;
    margin-right: auto;
}

.ddph-hero.ddph-width-custom {
    width: var(--ddph-custom-width, 90%);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* -------------------------------------------------------------------------
   Background text layers
   ------------------------------------------------------------------------- */

.ddph-bg-text-layer {
    /* No z-index here on purpose: leaving it auto keeps this element out of the
       stacking order so each layer's own --ddph-bt-z can sit either below the
       photo area (10) or above it. */
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ddph-bg-text {
    position: absolute;
    left: var(--ddph-bt-x, 50%);
    top: var(--ddph-bt-y, 50%);
    width: var(--ddph-bt-width, 60%);
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%) rotate(var(--ddph-bt-r, 0deg));
    transform-origin: center center;
    z-index: var(--ddph-bt-z, 5);
    color: var(--ddph-bt-color, #111111);
    font-family: var(--ddph-bt-font, inherit);
    font-size: calc(var(--ddph-bt-size, 80px) * var(--ddph-scale, 1));
    font-weight: var(--ddph-bt-weight, 700);
    line-height: var(--ddph-bt-line-height, 1.1);
    letter-spacing: calc(var(--ddph-bt-letter-spacing, 0px) * var(--ddph-scale, 1));
    text-align: var(--ddph-bt-align, center);
    text-transform: var(--ddph-bt-transform, none);
    opacity: var(--ddph-bt-opacity, 1);
    mix-blend-mode: var(--ddph-bt-blend, normal);
    white-space: pre-line;
    overflow-wrap: break-word;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.ddph-bg-text.is-outline {
    color: transparent;
    -webkit-text-stroke: calc(var(--ddph-bt-stroke, 2px) * var(--ddph-scale, 1)) var(--ddph-bt-stroke-color, #111111);
}

.ddph-bg-text:not(.is-outline) {
    -webkit-text-stroke: calc(var(--ddph-bt-stroke, 0px) * var(--ddph-scale, 1)) var(--ddph-bt-stroke-color, #111111);
}

/* Layers marked "in front" sit above the polaroids but never eat clicks. */
.ddph-bg-text--front { z-index: 95; }

/* -------------------------------------------------------------------------
   Hero copy
   ------------------------------------------------------------------------- */

.ddph-hero-content {
    position: absolute;
    z-index: 80;
    top: 50%;
    left: 7%;
    width: min(38%, calc(580px * var(--ddph-scale, 1)));
    transform: translateY(-50%);
    pointer-events: none;
}

.ddph-hero-title {
    margin: 0 0 calc(20px * var(--ddph-scale, 1));
    color: inherit;
    font: inherit;
    font-size: calc(var(--ddph-hero-title-size-desktop, 56px) * var(--ddph-scale, 1));
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.035em;
}

.ddph-hero-description {
    max-width: calc(440px * var(--ddph-scale, 1));
    font-size: calc(var(--ddph-hero-desc-size-desktop, 18px) * var(--ddph-scale, 1));
    line-height: 1.6;
}

.ddph-hero-description p { margin: 0 0 calc(24px * var(--ddph-scale, 1)); }

.ddph-hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 25px;
    border-radius: 999px;
    background: var(--ddph-text, #191919);
    color: var(--ddph-bg, #f3efe8) !important;
    font-weight: 600;
    text-decoration: none !important;
    pointer-events: auto;
    transition: transform .2s ease, opacity .2s ease;
}

.ddph-hero-button:hover { transform: translateY(-2px); opacity: .9; }

/* -------------------------------------------------------------------------
   Polaroid cards
   ------------------------------------------------------------------------- */

.ddph-photo-area { position: absolute; inset: 0; z-index: 10; }

.ddph-card {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: calc(var(--ddph-item-width-raw, var(--ddph-card-width-desktop, 240px)) * var(--ddph-device-factor, 1) * var(--ddph-scale, 1));
    max-width: 92%;
    margin: 0;
    padding: calc(10px * var(--ddph-scale, 1)) calc(10px * var(--ddph-scale, 1)) calc(15px * var(--ddph-scale, 1));
    background: #fff;
    color: #111 !important;
    text-decoration: none !important;
    box-shadow: 0 15px 42px rgba(0,0,0,.16);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
    will-change: transform;
    opacity: 1;
    transition: box-shadow .18s ease;
    transform-origin: center center;
}

.ddph-card.ddph-ready { opacity: 1; }
.ddph-card.ddph-dragging { cursor: grabbing; box-shadow: 0 28px 70px rgba(0,0,0,.30); z-index: 99999 !important; }
.ddph-card:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

.ddph-touch-handle {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 12;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(17,17,17,.8);
    color: #ffffff;
    align-items: center;
    justify-content: center;
    cursor: grab;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    touch-action: none;
}

.ddph-card-image,
.ddph-card-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 1 / var(--ddph-item-image-ratio, 1.06);
    height: auto;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}

.ddph-card-placeholder { background: #e6e6e6; }

.ddph-card-title {
    display: block;
    min-height: calc(38px * var(--ddph-scale, 1));
    padding: calc(var(--ddph-title-padding-top, 10px) * var(--ddph-scale, 1)) 4px 0;
    color: var(--ddph-title-color, #111111);
    text-align: var(--ddph-title-align, center);
    font-family: var(--ddph-title-font, inherit);
    font-size: calc(var(--ddph-title-size-desktop, var(--ddph-title-size, 15px)) * var(--ddph-scale, 1));
    line-height: var(--ddph-title-line-height, 1.2);
    font-weight: var(--ddph-title-weight, 600);
    letter-spacing: var(--ddph-title-letter-spacing, 0px);
    text-transform: var(--ddph-title-transform, none);
    overflow-wrap: anywhere;
    pointer-events: none;
}

.ddph-empty-notice { padding: 14px 18px; border: 1px dashed #999; }

/* -------------------------------------------------------------------------
   Tablet viewport (<= 1024px)
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .ddph-hero {
        --ddph-device-factor: var(--ddph-device-factor-tablet, .78);
        background-image: var(--ddph-bg-image-t, var(--ddph-bg-image-d, none));
        background-size: var(--ddph-bg-size-t, var(--ddph-bg-size-d, cover));
        background-position: var(--ddph-bg-pos-t, var(--ddph-bg-pos-d, 50% 50%));
    }

    .ddph-hero.ddph-h-fixed { min-height: var(--ddph-height-tablet, 580px); }

    .ddph-hero.ddph-h-scale {
        min-height: clamp(
            var(--ddph-min-height, 320px),
            calc(var(--ddph-height-tablet, 580px) * var(--ddph-scale, 1)),
            var(--ddph-max-height, 1100px)
        );
    }

    .ddph-hero.ddph-h-aspect { aspect-ratio: var(--ddph-aspect-tablet, 4 / 3); }

    .ddph-hero.ddph-h-vh { min-height: calc(var(--ddph-vh-tablet, 75) * 1vh); }

    @supports (height: 1svh) {
        .ddph-hero.ddph-h-vh { min-height: calc(var(--ddph-vh-tablet, 75) * 1svh); }
    }

    .ddph-hero-content {
        left: 5%;
        width: 44%;
    }

    .ddph-hero-title { font-size: calc(var(--ddph-hero-title-size-tablet, 40px) * var(--ddph-scale, 1)); }
    .ddph-hero-description { font-size: calc(var(--ddph-hero-desc-size-tablet, 16px) * var(--ddph-scale, 1)); }
    .ddph-card-title { font-size: calc(var(--ddph-title-size-tablet, 13px) * var(--ddph-scale, 1)); }

    .ddph-bg-text {
        left: var(--ddph-bt-x-t, var(--ddph-bt-x, 50%));
        top: var(--ddph-bt-y-t, var(--ddph-bt-y, 50%));
        transform: translate(-50%, -50%) rotate(var(--ddph-bt-r-t, var(--ddph-bt-r, 0deg)));
        font-size: calc(var(--ddph-bt-size-t, var(--ddph-bt-size, 80px)) * var(--ddph-scale, 1));
    }

    .ddph-bt-hide-tablet { display: none !important; }
}

/* -------------------------------------------------------------------------
   Mobile viewport (<= 767px)
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .ddph-hero {
        --ddph-device-factor: var(--ddph-device-factor-mobile, .6);
        background-image: var(--ddph-bg-image-m, var(--ddph-bg-image-d, none));
        background-size: var(--ddph-bg-size-m, var(--ddph-bg-size-d, cover));
        background-position: var(--ddph-bg-pos-m, var(--ddph-bg-pos-d, 50% 50%));
        background-attachment: scroll;
    }

    .ddph-hero.ddph-h-fixed { min-height: var(--ddph-height-mobile, 480px); }

    .ddph-hero.ddph-h-scale {
        min-height: clamp(
            var(--ddph-min-height, 320px),
            calc(var(--ddph-height-mobile, 480px) * var(--ddph-scale, 1)),
            var(--ddph-max-height, 1100px)
        );
    }

    .ddph-hero.ddph-h-aspect { aspect-ratio: var(--ddph-aspect-mobile, 3 / 4); }

    .ddph-hero.ddph-h-vh { min-height: calc(var(--ddph-vh-mobile, 70) * 1vh); }

    @supports (height: 1svh) {
        .ddph-hero.ddph-h-vh { min-height: calc(var(--ddph-vh-mobile, 70) * 1svh); }
    }

    .ddph-hero-title {
        font-size: calc(var(--ddph-hero-title-size-mobile, 28px) * var(--ddph-scale, 1));
        line-height: 1.1;
        margin-bottom: 14px;
    }

    .ddph-hero-description {
        font-size: calc(var(--ddph-hero-desc-size-mobile, 14px) * var(--ddph-scale, 1));
        max-width: 100%;
        margin: 0 auto 16px;
    }

    .ddph-hero-button {
        min-height: 42px;
        padding: 10px 20px;
        font-size: 14px;
    }

    .ddph-card {
        min-width: 78px;
        box-shadow: 0 10px 28px rgba(0,0,0,.15);
    }

    .ddph-card-title {
        font-size: calc(var(--ddph-title-size-mobile, 11px) * var(--ddph-scale, 1));
        min-height: calc(26px * var(--ddph-scale, 1));
        line-height: 1.15;
    }

    .ddph-bg-text {
        left: var(--ddph-bt-x-m, var(--ddph-bt-x, 50%));
        top: var(--ddph-bt-y-m, var(--ddph-bt-y, 50%));
        transform: translate(-50%, -50%) rotate(var(--ddph-bt-r-m, var(--ddph-bt-r, 0deg)));
        font-size: calc(var(--ddph-bt-size-m, var(--ddph-bt-size, 80px)) * var(--ddph-scale, 1));
    }

    .ddph-bt-hide-mobile { display: none !important; }

    .ddph-hide-mobile { display: none !important; }
    .ddph-card-hide-mobile { display: none !important; }

    /* Mobile interaction modes */
    .ddph-hero[data-mobile-drag="scroll_friendly"] .ddph-card {
        touch-action: pan-y !important;
        cursor: pointer !important;
    }

    .ddph-hero[data-mobile-drag="drag_handle"] .ddph-card { touch-action: pan-y !important; }
    .ddph-hero[data-mobile-drag="drag_handle"] .ddph-touch-handle { display: flex; }

    /* Mobile content layouts.
       In the stacked modes the hero becomes a flex column, so the photo area
       needs its own proportional minimum rather than inheriting the full hero
       height (which used to stack on top of the copy and double the section). */
    .ddph-hero.ddph-mobile-layout-above,
    .ddph-hero.ddph-mobile-layout-below {
        display: flex;
        height: auto;
        aspect-ratio: auto;
    }

    .ddph-hero.ddph-mobile-layout-above { flex-direction: column; }
    .ddph-hero.ddph-mobile-layout-below { flex-direction: column-reverse; }

    .ddph-hero.ddph-mobile-layout-above .ddph-hero-content,
    .ddph-hero.ddph-mobile-layout-below .ddph-hero-content {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .ddph-hero.ddph-mobile-layout-above .ddph-hero-content { padding: 36px 20px 14px; }
    .ddph-hero.ddph-mobile-layout-below .ddph-hero-content { padding: 14px 20px 36px; }

    .ddph-hero.ddph-mobile-layout-above .ddph-photo-area,
    .ddph-hero.ddph-mobile-layout-below .ddph-photo-area {
        position: relative;
        flex: 1 1 auto;
        inset: auto;
        min-height: calc(var(--ddph-height-mobile, 480px) * .62 * var(--ddph-scale, 1));
    }

    .ddph-hero.ddph-mobile-layout-overlay .ddph-hero-content {
        position: absolute;
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
        width: 90%;
        max-width: 480px;
        text-align: center;
        background: rgba(255,255,255,.88);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        padding: 22px 18px;
        border-radius: 14px;
        box-shadow: 0 10px 32px rgba(0,0,0,.15);
    }

    .ddph-hero.ddph-mobile-layout-hide .ddph-hero-content { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ddph-card,
    .ddph-hero-button { transition: none; }
}


/* Optional Salient theme neutralizer. Scoped to the hero only. */
.ddph-hero.ddph-salient-neutralizer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    clear: both !important;
    z-index: 1 !important;
}
.ddph-hero.ddph-salient-neutralizer,
.ddph-hero.ddph-salient-neutralizer .row,
.ddph-hero.ddph-salient-neutralizer .container,
.ddph-hero.ddph-salient-neutralizer .vc_column-inner {
    overflow: visible;
}
.ddph-hero.ddph-salient-neutralizer .ddph-photo-area {
    isolation: isolate;
    transform: translateZ(0);
}

/* 2.2: viewport dimensions, theme isolation and device-specific saved sizes. */
.ddph-hero.ddph-width-full {
    width: var(--ddph-viewport-w, 100vw) !important;
    max-width: none !important;
    margin-left: var(--ddph-offset, calc(50% - 50vw)) !important;
    margin-right: 0 !important;
    flex-shrink: 0;
}
.ddph-overflow-host { overflow: visible !important; contain: none !important; transform: none !important; perspective: none !important; clip-path: none !important; }
.ddph-hero-row, .ddph-hero-cell { padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.ddph-hero.ddph-salient-neutralizer { overflow: hidden; }
.ddph-hero.ddph-salient-neutralizer.ddph-drag-outside { overflow: visible; }
.ddph-hero.ddph-h-screen, .ddph-hero.ddph-h-available {
    height: calc(100vh - var(--ddph-screen-offset, 0px)) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
}
@supports (height: 100svh) {
    .ddph-hero.ddph-h-screen, .ddph-hero.ddph-h-available {
        height: calc(100svh - var(--ddph-screen-offset, 0px)) !important;
    }
}
.ddph-hero .ddph-card {
    --ddph-active-w: var(--ddph-w-d, 240px);
    --ddph-active-ir: var(--ddph-ir-d, 1.06);
    width: calc(var(--ddph-active-w) * var(--ddph-scale, 1) * var(--ddph-card-fit, 1));
    min-width: 0;
    border: 0;
    border-radius: 0;
    transition: rotate .18s ease, opacity .2s ease, box-shadow .18s ease;
}
.ddph-hero .ddph-card-image, .ddph-hero .ddph-card-placeholder {
    aspect-ratio: 1 / var(--ddph-active-ir);
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: block;
}
.ddph-hero .ddph-card-title { font-size: max(11px, calc(var(--ddph-title-size-desktop, 15px) * var(--ddph-scale, 1))); }
.ddph-hero .ddph-touch-handle { width: 44px; height: 44px; }
@media(max-width:1024px) {
    .ddph-hero .ddph-card { --ddph-active-w: var(--ddph-w-t, 190px); --ddph-active-ir: var(--ddph-ir-t, var(--ddph-ir-d, 1.06)); }
    .ddph-hero .ddph-card-title { font-size: max(11px, calc(var(--ddph-title-size-tablet, 13px) * var(--ddph-scale, 1))); }
}
@media(max-width:767px) {
    .ddph-hero .ddph-card { --ddph-active-w: var(--ddph-w-m, 144px); --ddph-active-ir: var(--ddph-ir-m, var(--ddph-ir-d, 1.06)); }
    .ddph-hero .ddph-card-title { font-size: max(11px, calc(var(--ddph-title-size-mobile, 11px) * var(--ddph-scale, 1))); }
    .ddph-hero[data-has-text="0"] .ddph-photo-area { position: absolute; inset: 0; min-height: 0; }
    .ddph-hero.ddph-h-screen .ddph-photo-area,
    .ddph-hero.ddph-h-available .ddph-photo-area { min-height: 0; }
    .ddph-hero.ddph-h-screen .ddph-hero-content,
    .ddph-hero.ddph-h-available .ddph-hero-content { max-height: 45%; overflow: auto; flex-shrink: 0; }
}
@media(pointer:coarse) {
    .ddph-hero[data-mobile-drag="drag_handle"] .ddph-card,
    .ddph-hero[data-mobile-drag="scroll_friendly"] .ddph-card { touch-action: pan-y !important; }
    .ddph-hero[data-mobile-drag="drag_handle"] .ddph-touch-handle { display: flex; }
}
@media(prefers-reduced-motion:reduce) { .ddph-hero .ddph-card { transition: none !important; } }

/* 2.3: complete photos, editable captions and immediate first paint. */
.ddph-hero .ddph-card {
    --ddph-card-scale: calc(var(--ddph-scale,1) * var(--ddph-card-fit,1));
    --ddph-active-fs: var(--ddph-fs-d,var(--ddph-title-size-desktop,15px));
    width:calc(var(--ddph-active-w) * var(--ddph-card-scale));
    padding:calc(10px * var(--ddph-card-scale)) calc(10px * var(--ddph-card-scale)) calc(15px * var(--ddph-card-scale));
    opacity:1;
    max-width:none;
    transition:rotate .18s ease,box-shadow .18s ease;
}
.ddph-hero .ddph-card-image {
    object-fit:var(--ddph-photo-fit,contain) !important;
    object-position:center center;
}
.ddph-hero .ddph-card-title {
    min-height:calc(38px * var(--ddph-card-scale));
    padding:calc(var(--ddph-title-padding-top,10px) * var(--ddph-card-scale)) calc(4px * var(--ddph-card-scale)) 0;
    font-size:max(8px,calc(var(--ddph-active-fs) * var(--ddph-card-scale)));
    letter-spacing:calc(var(--ddph-title-letter-spacing,0px) * var(--ddph-card-scale));
    white-space:pre-line;
}
.ddph-hero .ddph-card:not(.ddph-ready) {
    left:clamp(0%,var(--ddph-initial-x-d,50%),100%);
    top:clamp(0%,var(--ddph-initial-y-d,50%),100%);
    transform:translate(-50%,-50%) rotate(var(--ddph-initial-r-d,0deg));
}
@media(max-width:1024px){
    .ddph-hero .ddph-card {--ddph-active-fs:var(--ddph-fs-t,var(--ddph-title-size-tablet,13px));}
    .ddph-hero .ddph-card:not(.ddph-ready){left:var(--ddph-initial-x-t,50%);top:var(--ddph-initial-y-t,50%);transform:translate(-50%,-50%) rotate(var(--ddph-initial-r-t,0deg));}
}
@media(max-width:767px){
    .ddph-hero .ddph-card {--ddph-active-fs:var(--ddph-fs-m,var(--ddph-title-size-mobile,11px));}
    .ddph-hero .ddph-card:not(.ddph-ready){left:var(--ddph-initial-x-m,50%);top:var(--ddph-initial-y-m,50%);transform:translate(-50%,-50%) rotate(var(--ddph-initial-r-m,0deg));}
}
@media(prefers-reduced-motion:reduce){.ddph-hero .ddph-card{transition:none;}}

.ddph-hero .ddph-card-title { display:var(--ddph-caption-display-d,block); }
@media(max-width:1024px){.ddph-hero .ddph-card-title { display:var(--ddph-caption-display-t,block); }}
@media(max-width:767px){.ddph-hero .ddph-card-title { display:var(--ddph-caption-display-m,block); }}

/* HoSQ preset contains no stacked copy panel; the title and photos share one canvas. */
.ddph-hero.ddph-headline-hosq { display:block; }