/* Tossing Spanners — form-specific additions */

.form-field select {
  width: 100%;
  padding: 16px;
  border: 1px solid rgba(0,0,0,.18);
  background: transparent;
  color: inherit;
  font: inherit;
}

.radio-group {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

/*
 * Fixed 25/75 layout keeps every radio control on the same vertical axis
 * while reserving the larger portion of the option for title + description.
 */
.radio-option {
  display: grid;
  grid-template-columns: minmax(72px, 25%) minmax(0, 75%);
  align-items: stretch;
  min-height: 92px;
  padding: 0;
  border: 1px solid rgba(0,0,0,.15);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.radio-option:hover {
  border-color: currentColor;
  transform: translateY(-1px);
}

/* Left 1/4: centre the control both horizontally and vertically. */
.radio-option > input[type="radio"] {
  align-self: center;
  justify-self: center;
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
}

/* Right 3/4: consistent content alignment inside every option. */
.radio-option > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 18px 22px;
  border-left: 1px solid rgba(0,0,0,.10);
}

.radio-option strong {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  line-height: 1.25;
}

.radio-option small {
  display: block;
  opacity: .65;
  line-height: 1.5;
}

/* Give the selected option a subtle visual state without changing brand style. */
.radio-option:has(input[type="radio"]:checked) {
  border-color: currentColor;
}

.radio-option:has(input[type="radio"]:checked) > span {
  background: rgba(0,0,0,.025);
}

.form-field textarea {
  min-height: 160px;
  resize: vertical;
}

/* On narrow screens preserve alignment but give the copy more room. */
@media (max-width: 640px) {
  .radio-option {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .radio-option > span {
    padding: 16px 18px;
  }
}
