/* ============================================================
   AIWB — RESPONSIVE CSS
   ============================================================ */

/* ── Tablet: 1024px ───────────────────────────────────────── */
@media (max-width: 1200px) {
  :root { --aiwb-conf-width: 320px; }

  .aiwb-headline { font-size: clamp(30px, 4vw, 52px); }
  .aiwb-interface { gap: 16px; }
  .pw-cards { grid-template-columns: 1fr 1fr; }
  .pw-testi-grid { grid-template-columns: 1fr 1fr; }
  .pw-footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  .aiwb-interface {
    grid-template-columns: 1fr;
  }

  .aiwb-configurator {
    position: static;
    max-height: none;
  }

  .aiwb-preview-panel {
    min-height: 560px;
  }
}

/* ── Mobile: 768px ────────────────────────────────────────── */
@media (max-width: 768px) {
  .aiwb-root { padding: 48px 0 40px; }
  .aiwb-header { padding: 0 16px 40px; }
  .aiwb-interface { padding: 0 12px; gap: 12px; }
  .aiwb-subheadline { font-size: 15px; }

  .aiwb-business-grid { grid-template-columns: repeat(2, 1fr); }
  .aiwb-features-grid { grid-template-columns: 1fr 1fr; }

  .aiwb-pricing-card {
    flex-direction: column;
    align-items:    stretch;
  }

  .aiwb-pricing-right {
    align-items: stretch;
  }

  .aiwb-contact-btn {
    justify-content: center;
  }

  /* Preview website responsive */
  .pw-nav { padding: 0 16px; }
  .pw-nav-links { display: none; }
  .pw-hero-content { padding: 40px 16px; }
  .pw-services { padding: 40px 16px; }
  .pw-cards { grid-template-columns: 1fr; }
  .pw-about { grid-template-columns: 1fr; }
  .pw-about-img { height: 220px; }
  .pw-about-content { padding: 32px 16px; }
  .pw-testimonials { padding: 40px 16px; }
  .pw-testi-grid { grid-template-columns: 1fr; }
  .pw-contact { grid-template-columns: 1fr; padding: 40px 16px; gap: 32px; }
  .pw-form-row { grid-template-columns: 1fr; }
  .pw-footer { padding: 32px 16px; }
  .pw-footer-top { grid-template-columns: 1fr; gap: 28px; }
  .pw-footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
  .pw-gallery { padding: 40px 16px; }
  .pw-gallery-grid { grid-template-columns: 1fr 1fr; }
  .pw-stats { flex-wrap: wrap; }
  .pw-stat { flex: 1 0 50%; }
  .pw-faq { padding: 40px 16px; }
}

/* ── Mobile: 480px ────────────────────────────────────────── */
@media (max-width: 480px) {
  .aiwb-business-grid { grid-template-columns: repeat(2, 1fr); }
  .aiwb-style-grid    { grid-template-columns: repeat(2, 1fr); }
  .aiwb-layout-grid   { grid-template-columns: repeat(2, 1fr); }

  .aiwb-preview-toolbar { flex-wrap: wrap; gap: 8px; }
  .aiwb-url-bar { order: 3; width: 100%; }

  .aiwb-price-num { font-size: 30px; }

  .pw-hero h1 { font-size: 26px; }
  .pw-gallery-grid { grid-template-columns: 1fr; }
  .pw-stat { flex: 1 0 100%; }
  .pw-cards { grid-template-columns: 1fr; }
}

/* ── Device preview widths (JS-controlled) ────────────────── */
.aiwb-preview-viewport[data-device="tablet"] {
  max-width: 768px;
  margin: 0 auto;
}

.aiwb-preview-viewport[data-device="mobile"] {
  max-width: 390px;
  margin: 0 auto;
}

/* Mobile preview adjustments */
.aiwb-preview-viewport[data-device="mobile"] .pw-nav-links { display: none; }
.aiwb-preview-viewport[data-device="mobile"] .pw-cards     { grid-template-columns: 1fr; }
.aiwb-preview-viewport[data-device="mobile"] .pw-about     { grid-template-columns: 1fr; }
.aiwb-preview-viewport[data-device="mobile"] .pw-about-img { height: 200px; }
.aiwb-preview-viewport[data-device="mobile"] .pw-about-content { padding: 24px 16px; }
.aiwb-preview-viewport[data-device="mobile"] .pw-hero-content  { padding: 32px 16px; }
.aiwb-preview-viewport[data-device="mobile"] .pw-hero h1        { font-size: 22px; }
.aiwb-preview-viewport[data-device="mobile"] .pw-services,
.aiwb-preview-viewport[data-device="mobile"] .pw-testimonials,
.aiwb-preview-viewport[data-device="mobile"] .pw-contact,
.aiwb-preview-viewport[data-device="mobile"] .pw-gallery,
.aiwb-preview-viewport[data-device="mobile"] .pw-faq,
.aiwb-preview-viewport[data-device="mobile"] .pw-footer { padding: 32px 16px; }
.aiwb-preview-viewport[data-device="mobile"] .pw-testi-grid { grid-template-columns: 1fr; }
.aiwb-preview-viewport[data-device="mobile"] .pw-contact     { grid-template-columns: 1fr; gap: 24px; }
.aiwb-preview-viewport[data-device="mobile"] .pw-footer-top  { grid-template-columns: 1fr; gap: 24px; }
.aiwb-preview-viewport[data-device="mobile"] .pw-gallery-grid { grid-template-columns: 1fr; }
.aiwb-preview-viewport[data-device="mobile"] .pw-stats        { flex-wrap: wrap; }
.aiwb-preview-viewport[data-device="mobile"] .pw-stat          { flex: 1 0 50%; }
.aiwb-preview-viewport[data-device="mobile"] .pw-form-row     { grid-template-columns: 1fr; }
.aiwb-preview-viewport[data-device="mobile"] .pw-footer-bottom { flex-direction: column; gap: 10px; }
.aiwb-preview-viewport[data-device="mobile"] .pw-nav { padding: 0 12px; }

/* Tablet preview adjustments */
.aiwb-preview-viewport[data-device="tablet"] .pw-nav-links { display: none; }
.aiwb-preview-viewport[data-device="tablet"] .pw-cards     { grid-template-columns: 1fr 1fr; }
.aiwb-preview-viewport[data-device="tablet"] .pw-testi-grid { grid-template-columns: 1fr; }
.aiwb-preview-viewport[data-device="tablet"] .pw-footer-top { grid-template-columns: 1fr 1fr; }