/* ═══════════════════════════════════════════════════════════════════════════
   Vendou — Adensamento inteligente
   Faz a UI aproveitar telas grandes (4K/ultra-wide) ao invés de desperdiçar
   espaço em "ilhas centrais estreitas". Mantém legibilidade em mobile.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Containers principais do marketplace/vendou/admin ──────────────── */
@media (min-width: 1280px) {
    .container,
    .auth-wrap,
    .nav-inner,
    .mkt-footer-grid,
    .banners-scroll,
    section .container,
    .vu-container {
        max-width: min(1500px, 92vw);
    }
}

/* Ultra-wide (4K, ultra-monitor) — usa até 1700px (não mais que isso, pra
   manter linha de texto legível ~80 chars) */
@media (min-width: 1920px) {
    .container,
    .nav-inner,
    .mkt-footer-grid,
    section .container,
    .vu-container {
        max-width: 1700px;
    }
    /* Body padding pra dar respiro nas bordas */
    body { font-size: 1.02rem; }
}

/* ─── Grids de cards do marketplace adensam ──────────────────────────── */
@media (min-width: 1280px) {
    .todas-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    }
}
@media (min-width: 1600px) {
    .todas-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }
}
@media (min-width: 2000px) {
    .todas-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    }
}

/* ─── Features grids do vendou.php adensam ───────────────────────────── */
@media (min-width: 1280px) {
    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
    }
}

/* ─── Footer do marketplace em ultra-wide ────────────────────────────── */
@media (min-width: 1500px) {
    .mkt-footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr !important;
    }
}

/* ─── Admin: tabelas/cards adensam ───────────────────────────────────── */
@media (min-width: 1400px) {
    .admin-main {
        padding-inline: clamp(20px, 2.5vw, 48px);
    }
}

/* ─── Mobile-first: garantir que NUNCA quebre ────────────────────────── */
@media (max-width: 380px) {
    .container, .vu-container { padding-inline: 12px; }
    h1, .h1, .display-1, .display-2 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; line-height: 1.15 !important; }
    h2, .h2 { font-size: clamp(1.35rem, 6vw, 1.7rem) !important; line-height: 1.2 !important; }
    /* r204.11: garante WCAG AAA touch target 44x44 mesmo em <380px */
    button, .btn, input[type="button"], input[type="submit"] {
        padding: 11px 14px;
        font-size: 14px;
        min-height: 44px;
    }
    /* Inputs com 16px de font (anti zoom iOS) + altura mínima 44px */
    input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
    input[type="password"], input[type="search"], textarea, select {
        font-size: 16px;
        min-height: 44px;
        padding: 10px 12px;
    }
    /* Links que viram tap targets (botões de ação) */
    .tap-target, a.btn-link, .bnav__item, .acao-rapida {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Cards de loja não estouram em telas pequenas */
    .loja-card { width: 240px !important; }
    /* Banners empilham */
    .banner-card { flex: 0 0 88vw !important; }
}

/* ─── Garantir que <img> e <video> nunca quebrem layout ──────────────── */
img:not([width]):not([height]) { max-width: 100%; height: auto; }

/* ─── Tabelas: scroll horizontal automático onde for grande ──────────── */
table { max-width: 100%; }
@media (max-width: 900px) {
    .table-responsive-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-responsive-auto > table { min-width: 600px; }
}

/* ─── Modais responsivos universais ──────────────────────────────────── */
@media (max-width: 640px) {
    .modal-dialog { max-width: 100% !important; margin: 0 !important; min-height: 100dvh; }
    .modal-content { border-radius: 0 !important; min-height: 100dvh; }
}

/* ─── Forms: inputs com font-size 16px no mobile (anti zoom iOS) ─────── */
@media (max-width: 768px) {
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="search"], input[type="url"],
    input[type="number"], input[type="date"], input[type="datetime-local"],
    input[type="time"], select, textarea {
        font-size: 16px !important;
    }
}

/* ─── Sticky elements respeitam safe-area ────────────────────────────── */
.sticky-top, [data-sticky="top"] {
    top: env(safe-area-inset-top, 0);
}

/* ─── Hover só em quem TEM hover (pra não ficar grudado em touch) ────── */
@media (hover: hover) {
    a:hover, button:hover, .card:hover { /* hover effects ativam */ }
}
@media (hover: none) {
    /* Em touch, remove transform residual */
    a:hover, button:hover { transform: none !important; }
}

/* ─── Carrosséis com snap real em mobile ─────────────────────────────── */
.cards-scroll, .banners-scroll, .cats-scroll {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: var(--vu-sp-3, 16px);
}
.cards-scroll > *, .banners-scroll > *, .cats-scroll > * {
    scroll-snap-align: start;
}

/* ─── Tap targets mínimos pra acessibilidade ─────────────────────────── */
a, button, [role="button"], input[type="button"], input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
}
/* Exceto chips/badges inline */
.badge, .chip, .tag, .pill, .badge-qtd {
    min-height: auto !important;
    min-width: auto !important;
}

/* ─── Texto: line-height responsivo ──────────────────────────────────── */
body { line-height: 1.55; }
h1, h2, h3, h4, h5 { line-height: 1.25; }
p { max-width: 75ch; }
.lead { max-width: 65ch; }