/* Placeholder card standing in for an embed until someone asks for it.
   Sized to sit in the same slot the iframe will take, so pressing the button
   does not throw the page around. */

.embed-gate {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 22rem;
  padding: 2.5rem 2rem;
  border: 1px solid var(--hairline, rgba(0, 0, 0, 0.08));
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 18px 44px -28px rgba(0, 0, 0, 0.28);
}

.embed-gate-title {
  margin: 0 0 0.55rem;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink, #1d1d1f);
}

.embed-gate-text {
  max-width: 46ch;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-2, #6e6e73);
}

.embed-gate-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin: 1.6rem 0 0;
}

.embed-gate-btn {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 0.7rem 1.4rem;
  background: var(--accent, #0356f0);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.embed-gate-btn:hover {
  background: #0246c9;
}

.embed-gate-btn:active {
  transform: scale(0.98);
}

.embed-gate-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-2, #6e6e73);
  text-decoration: underline;
  text-decoration-color: var(--hairline, rgba(0, 0, 0, 0.25));
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.embed-gate-link:hover {
  color: var(--accent, #0356f0);
  text-decoration-color: currentColor;
}

.embed-gate-frame {
  display: block;
  width: 100%;
  border: 1px solid #777;
  border-radius: 4px;
}

@media (max-width: 34rem) {
  .embed-gate {
    min-height: 0;
    padding: 1.85rem 1.35rem;
    border-radius: 14px;
  }

  .embed-gate-title {
    font-size: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .embed-gate-btn {
    transition: none;
  }

  .embed-gate-btn:active {
    transform: none;
  }
}