/* ============================================================
   BG Remover — Responsive Rules (site-wide)
   Mobile-first. Extends the base responsive.css with editor,
   dock, sheet and touch-target rules.
   ============================================================ */

@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
  .footer-bottom {
    padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  }
}

/* ---------- Extra-large desktop ---------- */
@media (min-width: 1440px) {
  :root {
    --container-pad: 48px;
  }
}

/* ---------- Tablet and below ---------- */
@media (max-width: 900px) {
  :root {
    --header-height: 60px;
  }

  .header-inner {
    min-height: var(--header-height);
  }

  .hero-inner,
  .privacy-inner,
  .ai-inner {
    grid-template-columns: 1fr;
  }

  .hero-media {
    order: 2;
  }

  .hero-preview {
    max-width: 560px;
    margin: 0 auto;
  }

  .section-head {
    margin-bottom: var(--space-8);
  }

  .feature-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* ---------- Small tablet / large phone ---------- */
@media (max-width: 768px) {
  .hero-title {
    font-size: clamp(1.75rem, 6vw, 2.4rem);
  }

  .hero-lead {
    font-size: var(--fs-base);
  }

  .upload-panel {
    padding: 20px;
  }

  .upload-dropzone {
    padding: 32px 20px;
  }

  .upload-preview {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .upload-preview-media {
    width: 100%;
    height: 240px;
    margin: 0 auto;
  }

  .upload-preview-actions {
    justify-content: center;
  }

  .formats-grid {
    grid-template-columns: 1fr;
  }

  .how-steps {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Small phone ---------- */
@media (max-width: 560px) {
  :root {
    --container-pad: 16px;
    --space-12: 40px;
    --space-16: 48px;
  }

  section {
    padding-block: clamp(40px, 8vw, 64px);
  }

  .hero,
  .upload-section,
  .features-section,
  .how-section,
  .formats-section,
  .privacy-section,
  .ai-section,
  .faq-section,
  .cta-section {
    padding-block: clamp(40px, 10vw, 64px);
  }

  .hero-actions,
  .cta-actions,
  .how-cta,
  .upload-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn,
  .cta-actions .btn,
  .how-cta .btn,
  .upload-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-features {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .upload-panel {
    padding: 16px;
    border-radius: var(--radius-lg);
  }

  .upload-dropzone {
    padding: 28px 16px;
  }

  .upload-icon {
    width: 72px;
    height: 72px;
  }

  .upload-title {
    font-size: var(--fs-base);
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }

  .section-title {
    font-size: clamp(1.5rem, 6vw, 1.9rem);
  }

  .notfound-code {
    font-size: 72px;
  }

  .notfound-card,
  .offline-card {
    padding: var(--space-6);
  }

  .editor-shell {
    min-height: calc(100dvh - var(--header-height));
  }

  .editor-dock-btn {
    min-width: 48px;
    min-height: 50px;
  }
}

/* ---------- Ultra small ---------- */
@media (max-width: 360px) {
  .header-inner {
    gap: 4px;
  }

  .brand-name {
    font-size: 13px;
  }

  .brand-mark svg {
    width: 24px;
    height: 24px;
  }

  .header-actions .btn {
    padding: 8px;
    width: 36px;
    height: 36px;
  }

  .theme-toggle {
    width: 36px;
    height: 36px;
  }

  .editor-dock-btn {
    min-width: 42px;
    min-height: 46px;
    font-size: 9px;
  }

  .editor-dock-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* ---------- Touch devices: larger targets, no hover transforms ---------- */
@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .feature-card:hover,
  .blog-card:hover,
  .nav-link:hover {
    transform: none;
    box-shadow: none;
  }

  .btn {
    min-height: 44px;
  }

  .editor-dock-btn {
    min-height: 52px;
  }

  a,
  button {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ---------- Foldables and very tall phones ---------- */
@media (max-aspect-ratio: 1/2) {
  .hero-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
  }
}

/* ---------- Print styles ---------- */
@media print {
  .site-header,
  .site-footer,
  .hero-actions,
  .upload-actions,
  .editor-dock,
  .editor-sheet,
  .editor-sheet-backdrop,
  .toast-region,
  .cta-section,
  .nav-toggle {
    display: none !important;
  }

  body {
    background: #FFFFFF;
    color: #111111;
  }

  a {
    text-decoration: underline;
    color: #111111;
  }
}