/* Two-column layout mirroring the adopt/surrender pages: form left, sticky
   "need ideas?" card right. The card is first in the markup (so it stacks
   above the form on mobile) and placed into column 2 here. */
.form-grid { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.form-grid > .form-main { grid-column: 1; grid-row: 1; }
.form-grid > .ideas-strip { grid-column: 2; grid-row: 1; }
.ideas-strip {
  background: var(--soft-blue); border: 3px solid var(--ink); border-radius: 22px;
  padding: 24px;
  box-shadow: 6px 6px 0 var(--ink);
  position: sticky; top: 104px; /* clears the sticky nav (~81px) */
}
.ideas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.idea {
  background: var(--paper); border: 2px solid var(--ink); border-radius: 14px;
  padding: 14px; font-size: 13px; font-weight: 700; text-align: center;
}
.idea .em { display: block; font-family: 'Caprasimo', serif; font-size: 24px; margin-bottom: 4px; }
.idea:nth-child(1) .em { color: var(--red); }
.idea:nth-child(2) .em { color: var(--orange); }
.idea:nth-child(3) .em { color: var(--green-dark); }
.idea:nth-child(4) .em { color: var(--purple); }
.idea:nth-child(5) .em { color: var(--blue-dark); }
.idea:nth-child(6) .em { color: var(--red); }
.idea:nth-child(7) .em { color: var(--orange); }
.idea:nth-child(8) .em { color: var(--green-dark); }
@media (max-width: 980px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid > .form-main, .form-grid > .ideas-strip { grid-column: auto; grid-row: auto; }
  .ideas-strip { position: static; }
  /* Full-width again below the form-grid breakpoint: back to four across */
  .ideas-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) { .ideas-grid { grid-template-columns: 1fr 1fr; } }