/* ===================== Project-type switch ===================== */
.type-switch {
  display: grid;
  /* three modes now: portfolios, wedding invitations, systems */
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1020px;
  margin: 0 auto 32px;
}
.type-switch__btn {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: start;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: border-color .38s ease, background-color .38s ease, color .38s ease,
              transform .18s ease, box-shadow .38s ease;
}
.type-switch__btn:hover { transform: translateY(-3px); border-color: var(--ramp-5); }
.type-switch__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity .38s ease;
}
.type-switch__btn.is-active::before { opacity: 1; }
.type-switch__btn.is-active {
  border-color: var(--ramp-2);
  color: var(--on-dark);
  box-shadow: 0 14px 30px -14px var(--shadow-ink-strong);
}
.type-switch__icon { font-size: 1.7rem; line-height: 1; flex: none; }
.type-switch__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.type-switch__text strong { font-size: 1rem; font-weight: 800; }
.type-switch__text small { font-size: .78rem; color: var(--ink-soft); font-weight: 600; transition: color .38s ease; }
.type-switch__btn.is-active .type-switch__text small { color: var(--ramp-7); }
.type-switch--compact { margin-bottom: 28px; max-width: 780px; }
.type-switch--compact .type-switch__btn { padding: 13px 16px; justify-content: center; }
.type-switch--compact .type-switch__icon { font-size: 1.25rem; }
.type-switch--compact .type-switch__text strong { font-size: .92rem; }