/* 
 * Drag and Drop Layout Grid Styles
 * Based on HubSpot's 12-column responsive grid system
 */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #f7f7f7;
}

.body-wrapper {
  margin-top: 100px;
}

/* Container for drag and drop areas */
.dnd_area {
  width: 100%;
}

/* Sections (top-level rows) */
.dnd_section {
  width: 100%;
  clear: both;
}

/* Rows */
.dnd_row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Columns */
.dnd_column {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  flex: 0 0 auto;
}

/* Column widths based on 12-column grid */
.dnd_column[width="1"] { width: 8.33333333%; }
.dnd_column[width="2"] { width: 16.66666667%; }
.dnd_column[width="3"] { width: 25%; }
.dnd_column[width="4"] { width: 33.33333333%; }
.dnd_column[width="5"] { width: 41.66666667%; }
.dnd_column[width="6"] { width: 50%; }
.dnd_column[width="7"] { width: 58.33333333%; }
.dnd_column[width="8"] { width: 66.66666667%; }
.dnd_column[width="9"] { width: 75%; }
.dnd_column[width="10"] { width: 83.33333333%; }
.dnd_column[width="11"] { width: 91.66666667%; }
.dnd_column[width="12"] { width: 100%; }

/* Responsive behavior - stack columns on smaller screens */
@media (max-width: 768px) {
  .dnd_row {
    flex-direction: column;
  }
  
  .dnd_column {
    width: 100% !important;
    margin-bottom: 20px;
  }
}

/* Module spacing */
.dnd_module {
  margin-bottom: 20px;
}