/* ==========================================================================
   Visionary Education — content & form pages
   (apply, enquiry, contact, blog, events, success stories, FAQs, resources)
   Builds on tokens/base/layout/sections. Loaded via @push('styles').
   ========================================================================== */

/* ---- Shared page pieces -------------------------------------------------- */
/* The banner's own rules live in base.css (see partials/page-banner). */
.ve-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; align-items: start; }
.ve-page-grid--wide-side { grid-template-columns: minmax(0, 1fr) 23rem; }
.ve-page-grid--form { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
/* The aside follows the reader down the form, clear of the sticky header. */
.ve-sidebar { display: grid; gap: 1.5rem; position: sticky; top: calc(var(--ve-header-height) + 1rem); align-self: start; }
.ve-side-card { border: 1px solid var(--ve-border-subtle); border-radius: var(--ve-radius-xl); background: #fff; padding: 1.35rem; display: grid; gap: .9rem; box-shadow: var(--ve-shadow-xs); }
.ve-side-card--brand { background: var(--ve-surface-brand); border-color: var(--ve-purple-100); }
.ve-side-card__title { font-size: var(--ve-text-md); font-weight: 700; color: var(--ve-text-strong); }
.ve-side-card p { color: var(--ve-text-muted); font-size: var(--ve-text-sm); line-height: var(--ve-leading-relaxed); }
.ve-side-card ul { display: grid; gap: .5rem; }
.ve-side-card li a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: var(--ve-text-sm); font-weight: 600; color: var(--ve-text); padding: .45rem .1rem; border-bottom: 1px solid var(--ve-border-subtle); }
.ve-side-card li:last-child a { border-bottom: 0; }
.ve-side-card li a:hover { color: var(--ve-primary); }
.ve-side-card li a .ve-count { color: var(--ve-text-muted); font-weight: 500; font-size: var(--ve-text-xs); }
/* Numbered discs with a title and one line under it. The disc, the title and
   the line are three separate children of the <li>, so the columns are named:
   without the areas the text would fall into the 2.25rem disc column and break
   one word per line. */
.ve-steps { display: grid; gap: 1.1rem; counter-reset: step; }
.ve-steps li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  grid-template-areas: "num title" "num text";
  column-gap: .85rem;
  row-gap: .2rem;
  align-items: start;
  counter-increment: step;
}
.ve-steps li::before {
  grid-area: num;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ve-primary-dark, #17113f), var(--ve-primary, #4c1d95));
  color: #fff;
  font-weight: 800;
  font-size: var(--ve-text-sm);
  box-shadow: 0 6px 14px rgb(76 29 149 / .22);
}
.ve-steps strong { grid-area: title; display: block; color: var(--ve-text-strong); font-size: var(--ve-text-sm); font-weight: 700; line-height: 1.35; }
.ve-steps span { grid-area: text; display: block; color: var(--ve-text-muted); font-size: var(--ve-text-xs); line-height: 1.6; text-wrap: pretty; }
.ve-contact-lines { display: grid; gap: .65rem; }
.ve-contact-lines a, .ve-contact-lines div { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--ve-text-sm); color: var(--ve-text); line-height: 1.5; }
.ve-contact-lines svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--ve-primary); margin-top: .1rem; }
.ve-contact-lines a:hover { color: var(--ve-primary); }
@media (max-width: 64rem) { .ve-page-grid, .ve-page-grid--wide-side, .ve-page-grid--form { grid-template-columns: 1fr; } .ve-sidebar { position: static; } }

/* ---- Forms ---------------------------------------------------------------- */
.ve-form-card { border: 1px solid var(--ve-border-subtle); border-radius: var(--ve-radius-xl); background: #fff; padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: var(--ve-shadow-sm); }
.ve-form-card__head { display: grid; gap: .4rem; margin-bottom: 1.5rem; }
.ve-form-card__title { font-size: var(--ve-text-2xl); }
.ve-form-card__lede { color: var(--ve-text-muted); font-size: var(--ve-text-sm); line-height: var(--ve-leading-relaxed); }
.ve-form { display: grid; gap: 1.25rem; width: 100%; }
.ve-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 1rem; }
.ve-form legend { font-size: var(--ve-text-md); font-weight: 700; color: var(--ve-text-strong); padding: 0; margin-bottom: .75rem; display: flex; align-items: center; gap: .6rem; }
.ve-form legend::after { content: ""; flex: 1; height: 1px; background: var(--ve-border-subtle); }
.ve-form-grid > .ve-field, .ve-form-grid > .ve-checkbox { min-width: 0; }
.ve-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 48rem) { .ve-form-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ve-form-grid--3 { grid-template-columns: 1fr; } }
.ve-input, .ve-select, .ve-textarea { width: 100%; }
.ve-input[aria-invalid="true"], .ve-select[aria-invalid="true"], .ve-textarea[aria-invalid="true"] { border-color: var(--ve-error); }
.ve-field__optional { color: var(--ve-text-muted); font-weight: 500; font-size: var(--ve-text-xs); margin-left: .3rem; }
.ve-form__trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ve-form__summary { border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; border-radius: var(--ve-radius-md); padding: .9rem 1.1rem; display: grid; gap: .5rem; }
.ve-form__summary-title { font-weight: 700; font-size: var(--ve-text-sm); }
.ve-form__summary ul { padding-left: 1.2rem; font-size: var(--ve-text-sm); display: grid; gap: .25rem; list-style: disc; }
.ve-form__actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: .5rem; }
.ve-form__actions-note { color: var(--ve-text-muted); font-size: var(--ve-text-xs); max-width: 28rem; }
.ve-form__consent { padding: .9rem 1rem; border-radius: var(--ve-radius-md); background: var(--ve-surface-alt); }
.ve-radios { display: flex; flex-wrap: wrap; gap: .6rem; }
.ve-radio { position: relative; }
.ve-radio input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ve-radio span { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: 999px; border: 1.5px solid var(--ve-border); font-size: var(--ve-text-sm); font-weight: 600; color: var(--ve-text); background: #fff; transition: border-color var(--ve-dur-fast), background var(--ve-dur-fast), color var(--ve-dur-fast); }
.ve-radio span svg { width: 1rem; height: 1rem; }
.ve-radio input:checked + span { border-color: var(--ve-primary); background: var(--ve-purple-050); color: var(--ve-primary); }
.ve-radio input:focus-visible + span { box-shadow: 0 0 0 4px var(--ve-purple-100); }
.ve-btn[disabled], .ve-btn.is-loading { opacity: .7; cursor: progress; transform: none !important; box-shadow: none !important; }
.ve-btn.is-loading::before { content: ""; width: .95rem; height: .95rem; border-radius: 50%; border: 2px solid rgb(255 255 255 / .45); border-top-color: #fff; animation: ve-spin .7s linear infinite; }
.ve-btn--outline.is-loading::before { border-color: var(--ve-purple-100); border-top-color: var(--ve-primary); }
@keyframes ve-spin { to { transform: rotate(360deg); } }

/* File field: real input stays; the box is the label */
.ve-file { display: grid; gap: .5rem; }
.ve-file__drop { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem; padding: .9rem 1rem; border: 1.5px dashed var(--ve-border); border-radius: var(--ve-radius-md); background: var(--ve-surface-alt); cursor: pointer; transition: border-color var(--ve-dur-fast), background var(--ve-dur-fast); }
.ve-file__drop:hover, .ve-file__drop.is-dragover { border-color: var(--ve-primary); background: var(--ve-purple-050); }
.ve-file__drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ve-file__icon { width: 2.4rem; height: 2.4rem; border-radius: var(--ve-radius-md); background: #fff; display: grid; place-items: center; color: var(--ve-primary); border: 1px solid var(--ve-border-subtle); }
.ve-file__icon svg { width: 1.2rem; height: 1.2rem; }
.ve-file__text { display: grid; gap: .1rem; min-width: 0; }
.ve-file__text strong { font-size: var(--ve-text-sm); color: var(--ve-text-strong); }
.ve-file__text span { font-size: var(--ve-text-xs); color: var(--ve-text-muted); }
.ve-file__summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .85rem; border-radius: var(--ve-radius-md); background: #ecfdf3; border: 1px solid #bbf7d0; color: #166534; font-size: var(--ve-text-sm); }
.ve-file__summary.is-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.ve-file__summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-file__clear { flex: none; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Success panel (in-place, replaces a form) */
.ve-done { display: grid; gap: .9rem; justify-items: start; padding: 1.5rem; border-radius: var(--ve-radius-lg); background: #ecfdf3; border: 1px solid #bbf7d0; color: #14532d; }
.ve-done__mark { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; }
.ve-done__mark svg { width: 1.3rem; height: 1.3rem; }
.ve-done__title { font-size: var(--ve-text-lg); font-weight: 700; }
.ve-done p { font-size: var(--ve-text-sm); line-height: var(--ve-leading-relaxed); }
.ve-done .ve-btn { margin-top: .25rem; }

/* Success page */
.ve-success { max-width: 46rem; margin-inline: auto; text-align: center; display: grid; gap: 1.25rem; justify-items: center; }
.ve-success__mark { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--ve-pastel-mint); color: var(--ve-teal-500); display: grid; place-items: center; }
.ve-success__mark svg { width: 2.1rem; height: 2.1rem; }
.ve-success__ref { display: inline-flex; flex-direction: column; gap: .2rem; padding: .9rem 1.5rem; border-radius: var(--ve-radius-lg); background: var(--ve-surface-brand); border: 1px solid var(--ve-purple-100); }
.ve-success__ref small { color: var(--ve-text-muted); font-size: var(--ve-text-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.ve-success__ref strong { font-size: var(--ve-text-2xl); color: var(--ve-primary-dark); letter-spacing: .04em; }
.ve-success__text { color: var(--ve-text-muted); line-height: var(--ve-leading-relaxed); max-width: 36rem; }
.ve-success__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.ve-success__next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; width: 100%; text-align: left; margin-top: 1rem; }
.ve-success__next .ve-card__body { padding: 1rem 1.1rem; }
@media (max-width: 40rem) { .ve-success__next { grid-template-columns: 1fr; } .ve-success__actions { flex-direction: column; align-items: stretch; width: 100%; } .ve-success__actions .ve-btn { width: 100%; } }

/* Enquiry block (course pages / contact) */
.ve-enquiry { display: grid; gap: 1.25rem; }
.ve-enquiry__subject { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: baseline; font-size: var(--ve-text-sm); color: var(--ve-text-muted); }
.ve-enquiry__subject strong { color: var(--ve-text-strong); }
.ve-enquiry__alt { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: var(--ve-text-sm); color: #15803d; }
.ve-enquiry__alt svg { width: 1.1rem; height: 1.1rem; }

/* ---- Contact page --------------------------------------------------------- */
.ve-contact-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ve-contact-card { display: grid; gap: .5rem; padding: 1.25rem; border-radius: var(--ve-radius-xl); border: 1px solid var(--ve-border-subtle); background: #fff; box-shadow: var(--ve-shadow-xs); transition: transform var(--ve-dur-base) var(--ve-ease), box-shadow var(--ve-dur-base); min-width: 0; }
.ve-contact-card:hover { transform: translateY(-3px); box-shadow: var(--ve-shadow-md); }
.ve-contact-card__icon { width: 2.6rem; height: 2.6rem; border-radius: var(--ve-radius-md); display: grid; place-items: center; background: var(--ve-purple-050); color: var(--ve-primary); }
.ve-contact-card__icon svg { width: 1.25rem; height: 1.25rem; }
.ve-contact-card__label { font-size: var(--ve-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ve-text-muted); }
.ve-contact-card__value { font-weight: 700; color: var(--ve-text-strong); overflow-wrap: anywhere; }
.ve-contact-card__value:hover { color: var(--ve-primary); }
.ve-contact-card__note { font-size: var(--ve-text-xs); color: var(--ve-text-muted); }
@media (max-width: 64rem) { .ve-contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ve-contact-cards { grid-template-columns: 1fr; } }
.ve-offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.ve-office { padding: 1.15rem 1.25rem; border-radius: var(--ve-radius-lg); background: var(--ve-surface-alt); display: grid; gap: .35rem; }
.ve-office__name { font-weight: 700; color: var(--ve-text-strong); }
.ve-office address { font-style: normal; color: var(--ve-text-muted); font-size: var(--ve-text-sm); line-height: 1.6; }
.ve-map { border-radius: var(--ve-radius-xl); overflow: hidden; border: 1px solid var(--ve-border-subtle); box-shadow: var(--ve-shadow-sm); aspect-ratio: 16 / 7; background: var(--ve-ink-100); }
.ve-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 40rem) { .ve-map { aspect-ratio: 4 / 3; } }
.ve-socials { display: flex; flex-wrap: wrap; gap: .6rem; }
.ve-socials a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--ve-border); font-size: var(--ve-text-sm); font-weight: 600; }
.ve-socials a svg { width: 1rem; height: 1rem; }
.ve-socials a:hover { border-color: var(--ve-primary); color: var(--ve-primary); }

/* ---- Blog ----------------------------------------------------------------- */
.ve-chipbar { display: flex; flex-wrap: wrap; gap: .5rem; }
.ve-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--ve-border); font-size: var(--ve-text-xs); font-weight: 700; color: var(--ve-text); background: #fff; transition: border-color var(--ve-dur-fast), background var(--ve-dur-fast), color var(--ve-dur-fast); }
.ve-chip:hover { border-color: var(--ve-primary); color: var(--ve-primary); }
.ve-chip.is-active { background: var(--ve-primary); border-color: var(--ve-primary); color: #fff; }
.ve-chip__count { font-weight: 500; opacity: .75; }
.ve-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.ve-search { display: flex; gap: .5rem; width: min(100%, 26rem); }
.ve-search .ve-input { flex: 1; min-width: 0; }
.ve-featured { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border-radius: var(--ve-radius-xl); overflow: hidden; border: 1px solid var(--ve-border-subtle); background: #fff; box-shadow: var(--ve-shadow-sm); margin-bottom: 2rem; }
.ve-featured__media { min-height: 18rem; background: var(--ve-surface-brand); }
.ve-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ve-featured__body { padding: clamp(1.25rem, 3vw, 2.25rem); display: grid; gap: .8rem; align-content: center; }
.ve-featured__title { font-size: var(--ve-text-2xl); line-height: 1.25; }
.ve-featured__title a:hover { color: var(--ve-primary); }
.ve-featured__text { color: var(--ve-text-muted); line-height: var(--ve-leading-relaxed); }
@media (max-width: 48rem) { .ve-featured { grid-template-columns: 1fr; } .ve-featured__media { min-height: 12rem; aspect-ratio: 16 / 9; } }
.ve-post-card { display: flex; flex-direction: column; height: 100%; }
.ve-post-card .ve-card__media { position: relative; aspect-ratio: 16 / 9; }
.ve-post-card .ve-card__body { flex: 1; }
.ve-post-card .ve-card__title { font-size: var(--ve-text-md); line-height: 1.35; }
.ve-post-card .ve-card__title a:hover { color: var(--ve-primary); }
.ve-post-card__cat { position: absolute; left: .75rem; top: .75rem; }
.ve-media-fallback { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--ve-indigo-900), var(--ve-purple-600)); color: rgb(255 255 255 / .8); }
.ve-media-fallback svg { width: 2.5rem; height: 2.5rem; }
.ve-article { max-width: 46rem; }
.ve-article__meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; color: var(--ve-text-inverse-muted); font-size: var(--ve-text-sm); margin-top: 1rem; }
.ve-article__hero { border-radius: var(--ve-radius-xl); overflow: hidden; margin: -3.5rem 0 2rem; box-shadow: var(--ve-shadow-lg); aspect-ratio: 16 / 8; }
.ve-article__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ve-article__lede { font-size: var(--ve-text-lg); color: var(--ve-text-muted); line-height: var(--ve-leading-relaxed); margin-bottom: 1.5rem; }
.ve-article__foot { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ve-border-subtle); display: grid; gap: 1.5rem; }
.ve-author { display: flex; gap: 1rem; align-items: center; }
.ve-author__photo { width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; flex: none; background: var(--ve-purple-050); display: grid; place-items: center; color: var(--ve-primary); font-weight: 800; }
.ve-author__name { font-weight: 700; color: var(--ve-text-strong); }
.ve-author__role, .ve-author__bio { color: var(--ve-text-muted); font-size: var(--ve-text-sm); }
/* The share row is always a separator between the page and "pass this on",
   so it carries its own rule and breathing room wherever it is used. Without
   this it sat flush against the last card and looked stuck to it. */
.ve-share {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--ve-border-subtle, #e8e5f2);
}
.ve-share__label { font-size: var(--ve-text-sm); font-weight: 700; color: var(--ve-text-strong); margin-right: .25rem; }
.ve-share a, .ve-share button { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: 999px; border: 1px solid var(--ve-border); font-size: var(--ve-text-xs); font-weight: 700; background: #fff; color: var(--ve-text); }
.ve-share a svg, .ve-share button svg { width: .95rem; height: .95rem; }
.ve-share a:hover, .ve-share button:hover { border-color: var(--ve-primary); color: var(--ve-primary); }
.ve-inline-cta { border-radius: var(--ve-radius-xl); background: linear-gradient(120deg, var(--ve-indigo-900), var(--ve-purple-600)); color: #fff; padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.ve-inline-cta h3 { color: #fff; font-size: var(--ve-text-xl); }
.ve-inline-cta p { color: var(--ve-text-inverse-muted); font-size: var(--ve-text-sm); margin-top: .35rem; }
.ve-inline-cta__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 40rem) { .ve-inline-cta { grid-template-columns: 1fr; } .ve-inline-cta__actions { flex-direction: column; } .ve-inline-cta__actions .ve-btn { width: 100%; } .ve-article__hero { margin-top: -2rem; } }

/* ---- Events --------------------------------------------------------------- */
.ve-event-list { display: grid; gap: 1rem; }
.ve-event-card { display: grid; grid-template-columns: 5.5rem 9.5rem minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; padding: 1.1rem 1.25rem; border: 1px solid var(--ve-border-subtle); border-radius: var(--ve-radius-xl); background: #fff; box-shadow: var(--ve-shadow-xs); transition: transform var(--ve-dur-base) var(--ve-ease), box-shadow var(--ve-dur-base), border-color var(--ve-dur-base); }
.ve-event-card:hover { transform: translateY(-3px); box-shadow: var(--ve-shadow-md); border-color: var(--ve-purple-100); }
.ve-event-card__date { display: grid; place-items: center; text-align: center; padding: .7rem .4rem; border-radius: var(--ve-radius-lg); background: var(--ve-surface-brand); color: var(--ve-primary-dark); line-height: 1; }
.ve-event-card__date strong { font-size: var(--ve-text-2xl); font-weight: 800; }
.ve-event-card__date small { font-size: var(--ve-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-top: .3rem; }
.ve-event-card__date em { font-style: normal; font-size: .65rem; color: var(--ve-text-muted); margin-top: .15rem; }
.ve-event-card__body { display: grid; gap: .35rem; min-width: 0; }
.ve-event-card__media { display: block; width: 9.5rem; aspect-ratio: 16 / 11; border-radius: var(--ve-radius-lg); overflow: hidden; background: var(--ve-ink-100); }
.ve-event-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ve-dur-slow) var(--ve-ease); }
.ve-event-card:hover .ve-event-card__media img { transform: scale(1.05); }
/* No picture on a record? The row simply closes the column up. */
.ve-event-card:not(:has(.ve-event-card__media)) { grid-template-columns: 5.5rem minmax(0, 1fr) auto; }
@media (max-width: 64rem) { .ve-event-card { grid-template-columns: 5.5rem 8rem minmax(0, 1fr); } .ve-event-card__media { width: 8rem; } .ve-event-card__actions { grid-column: 1 / -1; } }
.ve-event-card__title { font-size: var(--ve-text-lg); font-weight: 700; }
.ve-event-card__title a:hover { color: var(--ve-primary); }
.ve-event-card__meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; color: var(--ve-text-muted); font-size: var(--ve-text-xs); }
.ve-event-card__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.ve-event-card__meta svg { width: .95rem; height: .95rem; color: var(--ve-primary); }
.ve-event-card__text { color: var(--ve-text-muted); font-size: var(--ve-text-sm); line-height: var(--ve-leading-relaxed); }
.ve-event-card__actions { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }
.ve-event-card--past { opacity: .8; }
@media (max-width: 40rem) { .ve-event-card { grid-template-columns: 4.25rem minmax(0, 1fr); } .ve-event-card__media { display: none; } .ve-event-card__actions { grid-column: 1 / -1; flex-direction: column; } .ve-event-card__actions .ve-btn { width: 100%; } }
.ve-event-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.ve-fact { display: grid; gap: .3rem; padding: 1rem 1.1rem; border-radius: var(--ve-radius-lg); background: var(--ve-surface-alt); }
.ve-fact small { font-size: var(--ve-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ve-text-muted); }
.ve-fact strong { color: var(--ve-text-strong); }

/* ---- Success stories ------------------------------------------------------ */
.ve-stories-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.ve-story-card { display: grid; gap: .9rem; padding: 1.5rem; border-radius: var(--ve-radius-xl); border: 1px solid var(--ve-border-subtle); background: #fff; box-shadow: var(--ve-shadow-xs); position: relative; }
.ve-story-card--featured { grid-column: span 2; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); align-items: start; gap: 1.5rem; }
.ve-story-card__head { display: flex; align-items: center; gap: .9rem; }
.ve-story-card__photo { width: 3.75rem; height: 3.75rem; border-radius: 50%; object-fit: cover; flex: none; background: var(--ve-purple-050); display: grid; place-items: center; color: var(--ve-primary); font-weight: 800; font-size: var(--ve-text-lg); }
.ve-story-card__name { font-weight: 700; color: var(--ve-text-strong); }

/* The whole card opens the story. The anchor is on the name (so it is
   announced with a sensible label) and its ::after covers the card, which
   makes the picture and the quote clickable without nesting anchors — the
   "watch the story" and "view this course" links inside still work because
   they sit above it. */
.ve-story-card--linked { cursor: pointer; transition: transform var(--ve-dur-fast) var(--ve-ease), box-shadow var(--ve-dur-fast) var(--ve-ease), border-color var(--ve-dur-fast); }
.ve-story-card--linked:hover { transform: translateY(-3px); box-shadow: var(--ve-shadow-md); border-color: var(--ve-border); }
.ve-story-card__link { color: inherit; text-decoration: none; }
.ve-story-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--ve-radius-xl); }
.ve-story-card--linked:hover .ve-story-card__link { color: var(--ve-primary); }
.ve-story-card--linked:focus-within { outline: 2px solid var(--ve-primary); outline-offset: 3px; }
.ve-story-card__link:focus-visible { outline: none; }
.ve-story-card .ve-btn, .ve-story-card__video, .ve-story-card iframe { position: relative; z-index: 1; }

/* The story dialog's own styles live in modals.css — the only stylesheet the
   homepage may safely load alongside its own. */
.ve-story-card__meta { color: var(--ve-text-muted); font-size: var(--ve-text-xs); }
.ve-story-card__quote { color: var(--ve-text); line-height: var(--ve-leading-relaxed); font-size: var(--ve-text-sm); }
.ve-story-card__quote::before { content: "“"; color: var(--ve-accent); font-size: 2rem; line-height: 0; margin-right: .1rem; vertical-align: -.35em; font-family: Georgia, serif; }
.ve-story-card__video { aspect-ratio: 16 / 9; border-radius: var(--ve-radius-lg); overflow: hidden; background: var(--ve-ink-900); }
.ve-story-card__video iframe { width: 100%; height: 100%; border: 0; display: block; }
.ve-stars { display: inline-flex; gap: .15rem; color: var(--ve-accent); }
.ve-stars svg { width: .95rem; height: .95rem; fill: currentColor; stroke: currentColor; }
.ve-stars svg.is-empty { fill: none; color: var(--ve-ink-200); }
@media (max-width: 64rem) { .ve-stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ve-story-card--featured { grid-column: span 2; } }
@media (max-width: 40rem) { .ve-stories-grid { grid-template-columns: 1fr; } .ve-story-card--featured { grid-column: auto; grid-template-columns: 1fr; } }
/* An odd last card in a multi-column grid spans the remainder — never an empty cell. */
@media (min-width: 64.0625rem) { .ve-stories-grid > .ve-story-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; } .ve-stories-grid > .ve-story-card:last-child:nth-child(3n + 2) { grid-column: span 2; } }
@media (min-width: 40.0625rem) and (max-width: 64rem) { .ve-stories-grid > .ve-story-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ---- FAQs ----------------------------------------------------------------- */
.ve-faq-group + .ve-faq-group { margin-top: 2.5rem; }
.ve-faq-group__title { font-size: var(--ve-text-xl); margin-bottom: 1rem; display: flex; align-items: center; gap: .75rem; }
.ve-faq-group__title::after { content: ""; flex: 1; height: 1px; background: var(--ve-border-subtle); }
.ve-faq__a .ve-prose { font-size: var(--ve-text-sm); }
.ve-faq-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }

/* ---- Resources ------------------------------------------------------------ */
.ve-resources-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.ve-resource { display: flex; flex-direction: column; border-radius: var(--ve-radius-xl); border: 1px solid var(--ve-border-subtle); background: #fff; overflow: hidden; box-shadow: var(--ve-shadow-xs); transition: transform var(--ve-dur-base) var(--ve-ease), box-shadow var(--ve-dur-base); }
.ve-resource:hover { transform: translateY(-3px); box-shadow: var(--ve-shadow-md); }
.ve-resource__media { aspect-ratio: 16 / 9; background: var(--ve-surface-brand); display: grid; place-items: center; color: var(--ve-primary); }
.ve-resource__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ve-resource__media svg { width: 2.5rem; height: 2.5rem; }
.ve-resource__body { padding: 1.15rem 1.25rem 1.25rem; display: grid; gap: .55rem; flex: 1; align-content: start; }
.ve-resource__kind { display: inline-flex; gap: .4rem; align-items: center; font-size: var(--ve-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ve-text-muted); }
.ve-resource__title { font-size: var(--ve-text-md); font-weight: 700; }
.ve-resource__text { color: var(--ve-text-muted); font-size: var(--ve-text-sm); line-height: var(--ve-leading-relaxed); }
.ve-resource__foot { margin-top: auto; padding-top: .5rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.ve-resource__foot small { color: var(--ve-text-muted); font-size: var(--ve-text-xs); }
@media (max-width: 64rem) { .ve-resources-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ve-resources-grid { grid-template-columns: 1fr; } .ve-resource__foot { flex-direction: column; align-items: stretch; } .ve-resource__foot .ve-btn { width: 100%; } }
@media (min-width: 64.0625rem) { .ve-resources-grid > .ve-resource:last-child:nth-child(3n + 1) { grid-column: 1 / -1; } .ve-resources-grid > .ve-resource:last-child:nth-child(3n + 2) { grid-column: span 2; } }
@media (min-width: 40.0625rem) and (max-width: 64rem) { .ve-resources-grid > .ve-resource:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Same rule for blog card grids */
@media (min-width: 64.0625rem) { .ve-grid--3 > .ve-post-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; } .ve-grid--3 > .ve-post-card:last-child:nth-child(3n + 2) { grid-column: span 2; } }
@media (min-width: 40.0625rem) and (max-width: 64rem) { .ve-grid--3 > .ve-post-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ---- Small screens: buttons stacked full width in form actions ------------ */
@media (max-width: 40rem) {
  .ve-form__actions { flex-direction: column; align-items: stretch; }
  .ve-form__actions .ve-btn { width: 100%; }
  .ve-toolbar { flex-direction: column; align-items: stretch; }
  .ve-search { width: 100%; }
  .ve-radios { flex-direction: column; }
  .ve-radio span { width: 100%; justify-content: center; }
}

/* Utility */
.ve-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ve-pagination svg { width: 1rem; height: 1rem; }

/* ---- Event registration -------------------------------------------------
   The form's sidebar card (what you are registering for) and the thank-you
   page. Both reuse `.ve-side-card`, `.ve-done` and `.ve-detail__*`; only the
   pieces that did not exist yet are defined here.
   ------------------------------------------------------------------------- */
.ve-eventcard__thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ve-radius-lg); margin-block-end: .25rem; }

.ve-side-facts { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ve-side-facts li { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--ve-text-sm); color: var(--ve-text); }
.ve-side-facts svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .15rem; color: var(--ve-primary); }
.ve-side-facts--center { justify-items: center; }
.ve-side-facts--center li { justify-content: center; }

/* The thank-you as a page rather than a panel inside a form. */
.ve-done--page { justify-items: center; text-align: center; max-width: 44rem; margin-inline: auto; padding: clamp(1.75rem, 4vw, 2.75rem); }
.ve-done--page .ve-modal__reference { color: #14532d; letter-spacing: .08em; }
.ve-done__meta { font-size: var(--ve-text-sm); }
.ve-done__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: .5rem; }
@media (max-width: 40rem) {
  .ve-done__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .ve-done__actions .ve-btn { width: 100%; }
}

/* The share row on a set of results sits under the list, separated from it,
   rather than looking like part of the last card. */
/* Nothing extra: the base rule above already spaces and rules it off. */

/* On a phone the buttons wrap into an even grid instead of a ragged line. */
@media (max-width: 30rem) {
  .ve-share { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .ve-share__label { grid-column: 1 / -1; margin-right: 0; }
  .ve-share a, .ve-share button { justify-content: center; }
}