/* Social calendar preview: never force a portrait artwork into a square crop.
   This applies on desktop and mobile so review text stays legible. */
.admin img[alt="Material"] {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 72vh !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  background: #07120e;
}

@media (max-width: 760px) {
  html, body, #root { max-width: 100%; overflow-x: hidden; }

  /* Social calendar editor overlay. The component uses inline styles, so
     these mobile-only !important rules intentionally override them. */
  .admin div[style*="position: fixed"][style*="z-index: 1000"] {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
  }

  .admin div[style*="position: fixed"][style*="z-index: 1000"] > div {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
  }

  /* Header stays reachable, including the close button. */
  .admin div[style*="position: fixed"][style*="z-index: 1000"] > div > div:first-child {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: #0d1d17 !important;
    padding: 12px 14px !important;
  }

  .admin div[style*="position: fixed"][style*="z-index: 1000"] > div > div:first-child button {
    position: sticky !important;
    top: 8px !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    font-size: 30px !important;
    z-index: 25 !important;
  }

  /* Main editor: one column on phones. */
  .admin div[style*="position: fixed"][style*="z-index: 1000"] > div > div:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    gap: 14px !important;
  }

  .admin div[style*="position: fixed"][style*="z-index: 1000"] aside {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    order: -1;
  }

  .admin div[style*="position: fixed"][style*="z-index: 1000"] aside img[alt="Material"] {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    background: #07120e;
  }

  /* Inline grids become a vertical form. */
  .admin div[style*="position: fixed"][style*="z-index: 1000"] div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .admin div[style*="position: fixed"][style*="z-index: 1000"] textarea {
    min-height: 180px !important;
  }

  .admin div[style*="position: fixed"][style*="z-index: 1000"] input,
  .admin div[style*="position: fixed"][style*="z-index: 1000"] select,
  .admin div[style*="position: fixed"][style*="z-index: 1000"] textarea {
    font-size: 16px !important; /* Prevent iOS Safari zoom-on-focus. */
  }

  /* Footer no longer traps the viewport. */
  .admin div[style*="position: fixed"][style*="z-index: 1000"] > div > div:last-child {
    position: static !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
  }
}