/* Quintal do Mundo — camada responsiva global
   Mantém a identidade visual existente e corrige quebras em telas de smartphone. */

:root {
  --qm-mobile-gutter: clamp(14px, 4vw, 22px);
  --qm-mobile-bottom-safe: max(14px, env(safe-area-inset-bottom));
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

.page-wrapper {
  min-width: 0;
  opacity: 1 !important;
}

@media (max-width: 900px) {
  .auth-split {
    display: block !important;
    min-height: 100dvh !important;
    padding-top: 72px !important;
  }

  .auth-form-pane {
    min-height: calc(100dvh - 72px) !important;
    padding: 24px var(--qm-mobile-gutter) 42px !important;
  }

  .auth-side-pane {
    display: none !important;
  }

  .desktop-nav {
    display: none !important;
  }

  .mobile-menu-btn {
    display: flex !important;
  }

  .nav-notif-panel > div[style*="width: min"] {
    position: fixed !important;
    top: 64px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }

  .nav-user-menu > div[style*="min-width"] {
    right: -8px !important;
    min-width: min(260px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
  }
}

@media (max-width: 760px) {
  .page-wrapper {
    overflow-x: clip;
    padding-bottom: calc(74px + var(--qm-mobile-bottom-safe));
  }

  .page-wrapper section,
  .page-wrapper main,
  .page-wrapper article {
    max-width: 100% !important;
  }

  .page-wrapper [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .page-wrapper [style*="grid-auto-flow: column"],
  .page-wrapper [style*="grid-auto-flow:column"] {
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
  }

  .page-wrapper [style*="min-width"] {
    min-width: 0 !important;
  }

  .page-wrapper [style*="max-width"] {
    max-width: 100% !important;
  }

  .page-wrapper [style*="position: sticky"] {
    position: static !important;
    top: auto !important;
  }

  .page-wrapper h1[style] {
    font-size: clamp(34px, 11vw, 48px) !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere;
  }

  .page-wrapper h2[style] {
    font-size: clamp(26px, 8vw, 36px) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere;
  }

  .page-wrapper h3[style],
  .page-wrapper p[style],
  .page-wrapper span[style],
  .page-wrapper strong[style] {
    overflow-wrap: anywhere;
  }

  .home-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .home-actions button {
    width: 100% !important;
  }

  .home-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .home-footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .feed-grid {
    padding-top: 16px !important;
    padding-bottom: calc(88px + var(--qm-mobile-bottom-safe)) !important;
  }

  .feed-compose-card {
    display: none !important;
  }

  .feed-filter-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .feed-filter-group {
    width: 100% !important;
  }

  .feed-post-media {
    max-height: 56vh;
  }

  .map-globe-stage {
    min-height: 330px !important;
    overflow: hidden;
  }

  .map-floating-card {
    display: none !important;
  }

  .messages-shell {
    padding: 12px !important;
  }

  .messages-layout {
    height: calc(100dvh - 96px) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .messages-conversations {
    border-right: 0 !important;
    border-bottom: 1px solid oklch(93% 0.01 80) !important;
    max-height: 34dvh;
    overflow: auto;
  }

  .messages-chat {
    min-height: 0;
    flex: 1 1 auto;
  }

  .messages-bubble {
    max-width: 88% !important;
  }

  .create-post-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .create-post-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .create-post-publish {
    width: 100% !important;
    justify-content: center !important;
  }

  .bottom-nav-mobile {
    padding-bottom: var(--qm-mobile-bottom-safe) !important;
  }
}

@media (max-width: 520px) {
  .page-wrapper {
    padding-bottom: calc(78px + var(--qm-mobile-bottom-safe));
  }

  .home-stats,
  .home-footer-grid {
    grid-template-columns: 1fr !important;
  }

  .home-hero-grid {
    padding-left: var(--qm-mobile-gutter) !important;
    padding-right: var(--qm-mobile-gutter) !important;
  }

  .qm-nav-actions {
    gap: 6px !important;
  }

  .qm-nav-actions > button:not(.mobile-menu-btn) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .feed-chat-dock {
    display: none !important;
  }

  .messages-layout {
    height: calc(100dvh - 88px) !important;
  }
}

@media (max-width: 390px) {
  .qm-nav-actions > button:not(.mobile-menu-btn) {
    font-size: 12px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .create-post-type-grid {
    grid-template-columns: 1fr !important;
  }
}