/* ==========================================================================
   Visionary Education — record call-to-actions and their modals
   Loaded by `frontend.partials.record-modals` via @push('styles').
   Owns two things and nothing else:
     1. .ve-ctaset / .ve-cta — the one button family a record page uses, in the
        banner (dark) and in the sidebar (light), so the two always agree.
     2. .ve-modal — the native <dialog> the buttons open, pre-bound to the record.
   Builds on tokens.css. Never restyles .ve-banner, .ve-crumbs or shared forms.
   ========================================================================== */

/* ---- The button family --------------------------------------------------- */

.ve-ctaset {
  --cta-height: 3rem;
  --cta-radius: var(--ve-radius-lg, .85rem);
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.5rem;
}

.ve-ctaset--stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  margin-top: 0;
}

/* On a course card: the same buttons, smaller, two to a row and equal width so
   a card never ends in a ragged line. Requirement §2 — Apply Now and Get Quote
   on the card itself, beside View course. */
.ve-ctaset--card {
  --cta-height: 2.4rem;
  --cta-radius: var(--ve-radius-md, .6rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-top: .9rem;
}

.ve-ctaset--card .ve-cta {
  padding: .5rem .6rem;
  gap: .4rem;
  font-size: var(--ve-text-xs);
  min-width: 0;
  /* Never clip the label: a button that reads "Get a fee …" is worse than one
     that takes two lines. The grid stretches both to the taller of the pair. */
  white-space: normal;
  text-wrap: balance;
}

/* No icon on a card: two of them plus their labels do not fit the half-width
   a card gives each button, and a wrapped "Get a fee quote" reads worse than
   the plain words. The label still wraps if a longer one is written in the
   admin — it is simply never clipped. */
.ve-ctaset--card .ve-cta__icon { display: none; }

/* An odd one out fills the row rather than leaving half of it empty. */
.ve-ctaset--card .ve-cta:only-child { grid-column: 1 / -1; }

.ve-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: var(--cta-height, 3rem);
  padding: .7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--cta-radius, .85rem);
  font-family: inherit;
  font-size: var(--ve-text-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ve-cta:hover { transform: translateY(-1px); }
.ve-cta:active { transform: translateY(0); }
.ve-cta:focus-visible { outline: 3px solid var(--ve-accent, #e5b12e); outline-offset: 2px; }

.ve-cta__icon { display: inline-flex; flex: none; }
.ve-cta__icon svg { width: 1.05rem; height: 1.05rem; display: block; }
.ve-cta__label { display: inline-block; }

/* Light surfaces — the sidebar card, a content block. */
.ve-cta--primary {
  background: var(--ve-accent, #e5b12e);
  border-color: var(--ve-accent, #e5b12e);
  color: var(--ve-ink-900, #14112c);
  box-shadow: 0 8px 20px rgb(229 177 46 / .28);
}
.ve-cta--primary:hover { background: var(--ve-gold-400, #f0c04a); border-color: var(--ve-gold-400, #f0c04a); box-shadow: 0 12px 26px rgb(229 177 46 / .36); }

.ve-cta--secondary {
  background: var(--ve-primary, #4c1d95);
  border-color: var(--ve-primary, #4c1d95);
  color: #fff;
  box-shadow: 0 8px 20px rgb(76 29 149 / .22);
}
.ve-cta--secondary:hover { background: var(--ve-purple-600, #3f1880); border-color: var(--ve-purple-600, #3f1880); }

.ve-cta--quiet {
  background: transparent;
  border-color: var(--ve-border, #d9d5e6);
  color: var(--ve-text-strong, #241d4a);
}
.ve-cta--quiet:hover { background: var(--ve-purple-050, #f4f1fb); border-color: var(--ve-primary, #4c1d95); color: var(--ve-primary, #4c1d95); }

/* Dark surfaces — the record banner. Same shape, same height, same weight. */
.ve-ctaset--dark .ve-cta--secondary {
  background: rgb(255 255 255 / .14);
  border-color: rgb(255 255 255 / .5);
  color: #fff;
  box-shadow: none;
}
.ve-ctaset--dark .ve-cta--secondary:hover { background: rgb(255 255 255 / .24); border-color: #fff; }

.ve-ctaset--dark .ve-cta--quiet {
  background: transparent;
  border-color: rgb(255 255 255 / .34);
  color: #fff;
}
.ve-ctaset--dark .ve-cta--quiet:hover { background: rgb(255 255 255 / .12); border-color: #fff; color: #fff; }

/* The "Take the next step" panel is a dark brand card (pages.css). The shared
   form stylesheet loads after it and resets every .ve-side-card to white, which
   left white text on white; this restores the panel wherever it appears. */
.ve-side-card.ve-side-card--cta {
  background: linear-gradient(140deg, var(--ve-indigo-900, #1e1656), var(--ve-purple-700, #4c1d95));
  border: 0;
  color: #fff;
}
.ve-side-card--cta .ve-side-card__title { color: #fff; }
.ve-side-card--cta .ve-side-card__text { color: var(--ve-text-inverse-muted, rgb(255 255 255 / .72)); }
.ve-side-card--cta .ve-side-card__text a { color: var(--ve-gold-400, #f0c04a); }

/* Slotted into a banner or a sidebar card, the wrapper already spaces it. */
.ve-banner__actions .ve-ctaset,
.ve-side-card__actions .ve-ctaset,
.ve-detail__block .ve-ctaset { margin-top: 0; width: 100%; }

/* Phones: full width, stacked, even spacing (binding client rule). */
@media (max-width: 40rem) {
  .ve-ctaset, .ve-ctaset--row {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
  }
  .ve-cta { width: 100%; }
}