/* ==========================================================================
   NU Blog Comments — 2-column form layout
   First Name | Last Name
   Email      | Website
   Comment (full width)
   [Submit] (full width)
   ========================================================================== */

.nu-blog-comments {
  box-sizing: border-box;
  width: 100%;
}

.nu-blog-comments form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}

/* Each form field gets some breathing room */
.nu-blog-comments form .field {
  margin: 0;
}

/* Comment (textarea) field spans both columns */
.nu-blog-comments form .field:has(textarea) {
  grid-column: 1 / -1;
}

/* Submit button row spans both columns and aligns left */
.nu-blog-comments form .hs-submit,
.nu-blog-comments form .actions,
.nu-blog-comments form > input[type="submit"],
.nu-blog-comments form > button[type="submit"] {
  grid-column: 1 / -1;
  justify-self: start;
}

/* Fallback for older browsers without :has() — assume default field order:
   1) First Name, 2) Last Name, 3) Email, 4) Website, 5) Comment, 6) Submit */
@supports not (selector(:has(*))) {
  .nu-blog-comments form > .field:nth-child(5),
  .nu-blog-comments form > .field:nth-child(n+5) {
    grid-column: 1 / -1;
  }
}

/* Make all inputs and textareas fill their cell */
.nu-blog-comments form .field input[type="text"],
.nu-blog-comments form .field input[type="email"],
.nu-blog-comments form .field input[type="url"],
.nu-blog-comments form .field textarea {
  width: 100%;
  box-sizing: border-box;
}

/* On narrow screens, stack everything single-column */
@media (max-width: 640px) {
  .nu-blog-comments form {
    grid-template-columns: 1fr;
  }
}