/**
 * Perfil | Painel Mágico — Responsive Utilities (Mobile-First)
 * Breakpoints canônicos: --pm-breakpoint-sm (640px), md (768px), lg (1024px)
 */

/* Media elements never overflow container */
img,
video,
svg,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

/* Prevent flex/grid children from forcing horizontal overflow */
.pm-min-w-0 {
    min-width: 0;
}

/* Scrollable table wrapper for mobile */
.pm-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.pm-table-scroll table {
    min-width: 0;
    width: 100%;
}

/* Safe responsive grid */
.pm-grid-auto {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Stack flex children on small screens */
.pm-stack-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 640px) {
    .pm-stack-mobile {
        flex-direction: column;
        align-items: stretch;
    }

    .pm-stack-mobile > * {
        width: 100%;
        max-width: 100%;
    }

    /* Touch-friendly interactive targets */
    .pm-touch-target,
    button.pm-touch-target,
    a.pm-touch-target {
        min-height: 44px;
        min-width: 44px;
    }

    .pm-text-wrap-mobile {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
}

/* Page content guardrail */
.pm-page-content {
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
}