/* Responsive fixes to prevent overlapping elements on small screens.
   These are conservative overrides applied after the main styles.
   Tweak selectors as needed for specific pages. */

/* Ensure media elements never overflow their containers */
img, picture, video, svg, iframe {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Make containers respect viewport on small screens */
@media (max-width: 900px) {
    /* Hide floating guide panels that are fixed on desktop */
    body:not(.guide-page) .guide-panel {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media (max-width: 760px) {
    /* Main shell sizing adjustments */
    .page-shell,
    .page-shell-admin,
    .event-shell {
        width: calc(100vw - 24px) !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Reduce tall fixed panels so content stacks naturally */
    .welcome-stage-panel,
    .welcome-popup-card,
    .welcome-stage-grid {
        min-height: auto !important;
        padding: 14px !important;
        grid-template-columns: 1fr !important;
    }

    /* Ensure media canvas becomes static and fits width */
    .stage-canvas,
    .capture-stage,
    .popup-media,
    .popup-media img,
    .stage-canvas img,
    .popup-media img {
        width: 100% !important;
        height: auto !important;
        position: static !important;
        inset: auto !important;
        aspect-ratio: auto !important;
        max-width: 100% !important;
    }

    /* Cards/thumbs should not use fixed square sizes on very small screens */
    .thumb-card,
    .thumbnail-card,
    .member-thumb-item,
    .preview-item img {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* Modal/dialog sizing */
    .modal .modal-dialog,
    .modal-card {
        max-width: calc(100vw - 24px) !important;
        margin: 0 auto !important;
    }

    /* Make absolutely positioned placeholders stack inside their containers */
    .stage-placeholder,
    .popup-media-placeholder,
    .capture-focus-frame,
    .capture-focus-ellipse {
        position: relative !important;
    }

    /* Admin left sidebar becomes bottom bar already handled in admin.css,
       but ensure page content has no leftover left padding */
    .admin-shell {
        padding-left: 0 !important;
        padding-bottom: 80px !important;
    }
}

@media (max-width: 480px) {
    /* extra-small phones: tighten padding and gaps */
    .page-shell,
    .event-shell {
        width: calc(100vw - 16px) !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .toolbar,
    .toolbar-actions {
        gap: 8px !important;
    }
}

/* Utility: force long words to wrap to avoid overflow */
.content, .page-shell, .event-shell, .panel, .glass-panel {
    overflow-wrap: anywhere !important;
}