/* builder-responsive.css — Kweb mobile grid renderer */
/* 2026-06-10: Week 6 — stack 12-column widgets below 768px */

.responsive-grid { --grid-row-gap: 12px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-row-gap); width: 100%; }
.responsive-grid .grid-widget { min-height: 72px; padding: 16px; border-radius: 10px; background: var(--site-surface, #fff); border: 1px solid var(--site-border, #e2e8f0); box-sizing: border-box; }
.responsive-grid .grid-widget.is-slide-swipe { min-height: 160px; background: var(--site-surface, #f8fafc); border: 1px solid var(--site-border, #e2e8f0); }
.responsive-grid .grid-widget.is-slide-swipe.has-slide-swipe-slider { background: transparent; border: none; }
.responsive-grid .grid-widget.is-slide-swipe.is-slide-swipe-no-radius { border-radius: 0; }
.responsive-grid .grid-widget.is-hero { min-height: 160px; background: linear-gradient(135deg, var(--site-accent, #2563eb), var(--site-header-bg, #1d4ed8)); color: var(--site-accent-contrast, #fff); border: none; }
.responsive-grid .grid-widget.is-hero.has-hero-slider { background: transparent; color: inherit; }
.responsive-grid .grid-widget.is-hero.is-hero-no-radius { border-radius: 0; }
.responsive-grid .grid-widget.is-no-radius { border-radius: 0; }
/* 2026-06-10: optional zero top/bottom spacing between stacked blocks */
.responsive-grid .grid-widget.is-no-border { border: none; box-shadow: none; }
/* 2026-06-12: outer margin (grid gap collapse) — separate from inner padding */
.responsive-grid .grid-widget.is-no-v-outer-margin { margin-top: calc(var(--grid-row-gap) / -2); margin-bottom: calc(var(--grid-row-gap) / -2); }
.responsive-grid .grid-widget.is-hero.is-no-v-outer-margin { margin-top: calc(var(--grid-row-gap) / -2); margin-bottom: calc(var(--grid-row-gap) / -2); }
.responsive-grid .grid-widget.is-no-h-outer-margin { margin-left: calc(var(--grid-row-gap) / -2); margin-right: calc(var(--grid-row-gap) / -2); }
.responsive-grid .grid-widget.is-hero.is-no-h-outer-margin { margin-left: calc(var(--grid-row-gap) / -2); margin-right: calc(var(--grid-row-gap) / -2); }
/* 2026-06-12: inner padding (document area) zero */
.responsive-grid .grid-widget.is-no-v-padding { padding-top: 0; padding-bottom: 0; }
.responsive-grid .grid-widget.is-no-h-padding { padding-left: 0; padding-right: 0; }
/* Legacy aliases — kept for cached CSS references */
.responsive-grid .grid-widget.is-no-v-margin { margin-top: calc(var(--grid-row-gap) / -2); margin-bottom: calc(var(--grid-row-gap) / -2); }
.responsive-grid .grid-widget.is-hero.is-no-v-margin { margin-top: calc(var(--grid-row-gap) / -2); margin-bottom: calc(var(--grid-row-gap) / -2); }
.responsive-grid .grid-widget.is-no-h-margin { margin-left: calc(var(--grid-row-gap) / -2); margin-right: calc(var(--grid-row-gap) / -2); }
.responsive-grid .grid-widget.is-hero.is-no-h-margin { margin-left: calc(var(--grid-row-gap) / -2); margin-right: calc(var(--grid-row-gap) / -2); }
.responsive-grid .grid-widget.has-map { padding: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.responsive-grid .grid-widget.has-video { padding: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.responsive-grid .grid-widget.has-embed { padding: 0; overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; }
.responsive-grid .grid-widget-title { margin: 0 0 6px; font-size: 0.75rem; text-transform: uppercase; opacity: 0.7; font-weight: 700; }
.responsive-grid .grid-widget-body { margin: 0; font-size: 0.95rem; line-height: var(--site-line-height, 1.8); }

.responsive-grid.is-mobile-stack { grid-template-columns: 1fr !important; }
.responsive-grid.is-mobile-stack .grid-widget { grid-column: 1 / -1 !important; width: 100% !important; }
.responsive-grid.is-mobile-stack .grid-widget.is-hero.is-hero-full-width { width: 100vw !important; max-width: 100vw !important; }

.grid-canvas.responsive-canvas.is-mobile-stack { grid-template-columns: 1fr !important; }
.grid-canvas.responsive-canvas.is-mobile-stack .builder-widget { grid-column: 1 / -1 !important; }
.grid-canvas.responsive-canvas.is-mobile-stack + .grid-overlay,
.grid-overlay.is-mobile-hidden { display: none !important; }

@media (max-width: 768px) {
  .responsive-grid { grid-template-columns: 1fr; }
  .responsive-grid .grid-widget { grid-column: 1 / -1 !important; }
  .responsive-grid .grid-widget.is-hero.is-hero-full-width { width: 100vw !important; max-width: 100vw !important; }
  .grid-canvas.responsive-canvas { grid-template-columns: 1fr !important; }
  .grid-canvas.responsive-canvas .builder-widget { grid-column: 1 / -1 !important; }
  .grid-overlay { display: none !important; }
}