/*
 * blocks/_base.css | what every block shares: the small label, the buttons,
 * the gradient bar. Moved from base.css so it loads under every theme (a theme
 * whose stylesheet is the whole design still has Anna's blocks it declines).
 */

/* ── Eyebrow ───────────────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: calc(0.1em * var(--label-tracking));
  text-transform: var(--label-case);
  color: var(--color-primary-700);
  font-weight: 400;
}

/* ── Block layout base ─────────────────────────────────────────────────────── */
.block { width: 100%; }

/* Helper used by the admin */
.block__inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
}

@media (max-width: 768px) {
  .block__inner { padding: var(--space-lg) var(--space-md); }
}

/* ── CTA buttons ───────────────────────────────────────────────────────────── */
.cta {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 1rem;
  letter-spacing: 0.025em;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  border: 1px solid transparent;
}

.cta--primary {
  background: var(--color-primary-700);
  color: var(--color-on-primary);
  padding: 1rem 2.5rem;
  border-color: var(--color-primary-700);
}

.cta--primary:hover {
  background: var(--color-primary-800);
  border-color: var(--color-primary-800);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.cta--medium {
  padding: 0.75rem 2rem;
}

.cta--ghost {
  background: transparent;
  color: var(--color-neutral-700);
  border-color: var(--color-neutral-400);
  padding: 0.75rem 2rem;
}

.cta--ghost:hover {
  border-color: var(--color-primary-700);
  color: var(--color-primary-700);
}

/* ── Gradient bar ──────────────────────────────────────────────────────────── */
.gradient-bar {
  height: 0.25rem;
  width: 100%;
  background: linear-gradient(
    to right,
    var(--color-primary-600) 0%,
    var(--color-primary-500) 50%,
    var(--color-accent-500) 100%
  );
}

/* ── Alpine cloak (prevent FOUC) ───────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* An icon in a button: the size of its words. */
.cta svg { width: 1.1em; height: 1.1em; vertical-align: -0.15em; margin-right: 0.5em; }