/**
 * Form Grid System
 * A simple 12-column grid system for form fields and field groups
 */

/* Container for the form to enable grid layout */
form {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

/* Base grid column styles */
.field,
.field-group {
  box-sizing: border-box;
  padding: 0 10px;
  margin-bottom: 15px;
}

/* Grid column widths */
.grid-col-1 {
  width: 8.33%;
}
.grid-col-2 {
  width: 16.66%;
}
.grid-col-3 {
  width: 25%;
}
.grid-col-4 {
  width: 33.33%;
}
.grid-col-5 {
  width: 41.66%;
}
.grid-col-6 {
  width: 50%;
}
.grid-col-7 {
  width: 58.33%;
}
.grid-col-8 {
  width: 66.66%;
}
.grid-col-9 {
  width: 75%;
}
.grid-col-10 {
  width: 83.33%;
}
.grid-col-11 {
  width: 91.66%;
}
.grid-col-12 {
  width: 100%;
}

/* Field groups with grid layout for child fields */
.field-group {
  display: flex;
  flex-wrap: wrap;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* On smaller screens, make all columns full width */
  .grid-col-1,
  .grid-col-2,
  .grid-col-3,
  .grid-col-4,
  .grid-col-5,
  .grid-col-6,
  .grid-col-7,
  .grid-col-8,
  .grid-col-9,
  .grid-col-10,
  .grid-col-11 {
    width: 100%;
  }
}

/* Ensure inputs expand to fill their container */
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field input[type="date"],
.field input[type="password"],
.field select,
.field textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Adjust field-in-group to work with grid system */
.field-in-group {
  box-sizing: border-box;
  padding: 0 5px;
}