/* ---------- Let's Network page — page-specific additions ---------- */

.cta-grid--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
}

/* ---------- Networking modal ---------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.modal.is-open {
  display: flex;
}
.modal-overlay {
  position: absolute;
  inset: 0;
  background: oklch(0.15 0.03 240 / 0.55);
  backdrop-filter: blur(3px);
}
.modal-panel {
  position: relative;
  width: min(480px, 100%);
  max-height: min(88vh, 720px);
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 64px oklch(0.1 0.02 240 / 0.35);
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  animation: modal-pop var(--transition-interactive, 180ms) ease-out;
}
@keyframes modal-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
}
.modal-close:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}
.modal-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
  max-width: 26ch;
}
.modal-lede {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  max-width: 42ch;
}
.modal-panel .contact-form {
  gap: var(--space-4);
}

/* The shared .contact-form styles assume light text on a dark CTA photo
   background. The modal sits on a light surface, so override to dark
   text / bordered light inputs for readability. */
.modal-panel .contact-form label {
  color: var(--color-text-muted);
}
.modal-panel .contact-form input:not([type="hidden"]),
.modal-panel .contact-form select,
.modal-panel .contact-form textarea {
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}
.modal-panel .contact-form select {
  background-color: var(--color-surface-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23182a35' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 16px 16px;
}
.modal-panel .contact-form input::placeholder,
.modal-panel .contact-form textarea::placeholder {
  color: var(--color-text-faint);
}
.modal-panel .contact-form input:focus-visible,
.modal-panel .contact-form textarea:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-surface);
}
.modal-panel .contact-form select:focus-visible {
  border-color: var(--color-primary);
  background-color: var(--color-surface);
}
.modal-panel .form-status--success {
  color: var(--color-success, #437a22);
}
.modal-panel .form-status--error {
  color: var(--color-error, #a12c7b);
}
.modal-panel .contact-form input.field-invalid,
.modal-panel .contact-form select.field-invalid {
  border-color: var(--color-error, #a12c2c);
  background: var(--color-surface-2);
}
.modal-panel .field-error {
  color: var(--color-error, #a12c2c);
}

@media (max-width: 560px) {
  .modal-panel {
    padding: var(--space-5);
  }
}