/* Interactive Draggable Windows (No shadow, original stacking) */
.brochure-svg-card,
.brochure-pop-note,
.brochure-venue-card,
#section-where-to-begin .quote-box,
.section-1-question-card,
#section-behind-design .section-image-card {
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
    will-change: transform;
    filter: none !important;
}

.brochure-svg-card,
.brochure-pop-note,
.brochure-venue-card,
.section-1-question-card,
#section-behind-design .section-image-card {
    box-shadow: none !important;
}

.brochure-svg-card:active,
.brochure-svg-card.is-dragging,
.brochure-pop-note:active,
.brochure-pop-note.is-dragging,
.brochure-venue-card:active,
.brochure-venue-card.is-dragging,
#section-where-to-begin .quote-box:active,
#section-where-to-begin .quote-box.is-dragging,
.section-1-question-card:active,
.section-1-question-card.is-dragging,
#section-behind-design .section-image-card.is-dragging {
    cursor: grabbing;
    filter: none !important;
}

.brochure-svg-card img,
.brochure-pop-note *,
.brochure-venue-card *,
#section-where-to-begin .quote-box *,
.section-1-question-card img,
#section-behind-design .section-image-card img {
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Allow clicking inside links or form fields inside venue card if any */
.brochure-venue-card a,
.brochure-venue-card button,
.brochure-venue-card input {
    pointer-events: auto !important;
}


/* Section 1 Interactive Question Mark & Pills Composition */
#section-where-to-begin .section-1-media-col,
#section-where-to-begin .editorial-split__media {
    overflow: visible !important;
}

.section-1-question-composition {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 279 / 322;
    margin: 0 auto;
    user-select: none;
    touch-action: none;
    overflow: visible !important;
}

.s1-interactive-qmark {
    position: absolute;
    left: 13%;
    top: 5%;
    width: 73%;
    height: 95%;
    z-index: 1;
    cursor: grab;
    will-change: transform;
    overflow: visible !important;
}

.s1-interactive-bubble {
    position: absolute;
    z-index: 5;
    cursor: grab;
    will-change: transform;
    overflow: visible !important;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}

.s1-interactive-bubble--cloud {
    left: 11.48%;
    top: 18.77%;
    width: 35.68%;
    height: 25.82%;
}

.s1-interactive-bubble--square {
    left: 58.08%;
    top: 3.73%;
    width: 28.62%;
    height: 18.39%;
}

.s1-interactive-bubble--oval {
    left: 59.75%;
    top: 39.56%;
    width: 35.94%;
    height: 21.92%;
}

.s1-interactive-bubble--burst {
    left: 4.30%;
    top: 60.49%;
    width: 51.88%;
    height: 29.72%;
}

.s1-interactive-qmark:active,
.s1-interactive-qmark.is-dragging,
.s1-interactive-bubble:active,
.s1-interactive-bubble.is-dragging {
    cursor: grabbing;
}

.s1-interactive-qmark img,
.s1-interactive-qmark svg,
.s1-interactive-bubble img,
.s1-interactive-bubble svg {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    overflow: visible !important;
}

/* Ensure Section 1 media col and text col are vertically middle-aligned on mobile/tablet */
@media (max-width: 1023px) {
    #section-where-to-begin .section-1-layout {
        align-items: flex-start !important;
    }

    #section-where-to-begin .section-1-media-col {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }

    #section-where-to-begin .section-1-text-col {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    #section-where-to-begin .quote-box {
        align-self: flex-start !important;
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    #section-where-to-begin .quote-box__text {
        white-space: nowrap !important;
        margin: 0 !important;
        font-size: clamp(14px, 1.25vw, 17px) !important;
        line-height: 1.2 !important;
    }

    #section-where-to-begin .quote-box__icon {
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    #section-where-to-begin .quote-box__icon svg {
        width: 24px !important;
        height: 20px !important;
        transform: rotate(180deg) !important;
    }
}

/* Disable all drag and touch interactions on mobile */
@media (max-width: 1023px), (hover: none) and (pointer: coarse) {
    .brochure-svg-card,
    .brochure-pop-note,
    .brochure-venue-card,
    #section-where-to-begin .quote-box,
    .section-1-question-card,
    .section-1-question-composition,
    .s1-interactive-qmark,
    .s1-interactive-bubble,
    #section-behind-design .section-image-card {
        cursor: default !important;
        touch-action: pan-y !important;
        will-change: auto !important;
        pointer-events: none !important;
    }

    .brochure-venue-card,
    .brochure-venue-card * {
        pointer-events: auto !important;
    }

    .brochure-svg-card:active,
    .brochure-svg-card.is-dragging,
    .brochure-pop-note:active,
    .brochure-pop-note.is-dragging,
    .brochure-venue-card:active,
    .brochure-venue-card.is-dragging,
    #section-where-to-begin .quote-box:active,
    #section-where-to-begin .quote-box.is-dragging,
    .section-1-question-card:active,
    .section-1-question-card.is-dragging,
    .s1-interactive-qmark:active,
    .s1-interactive-qmark.is-dragging,
    .s1-interactive-bubble:active,
    .s1-interactive-bubble.is-dragging,
        #section-behind-design .section-image-card.is-dragging {
        cursor: default !important;
    }
}

/* Static Section 2 Image Card - No Drag Effect */
#section-behind-design .section-image-card,
#section-behind-design .section-image-card img,
#section-behind-design .section-image-card picture {
    cursor: default !important;
    pointer-events: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
    -webkit-user-drag: auto !important;
    touch-action: auto !important;
    transform: none !important;
    will-change: auto !important;
    transition: none !important;
}
#section-behind-design .section-image-card:active,
#section-behind-design .section-image-card.is-dragging {
    cursor: default !important;
    transform: none !important;
}