/* ==========================================================================
   Visionary Education — CMS pages, page blocks, homepage extras and popup.
   Loaded via @push('styles') by pages that need it. Everything here builds on
   the shared tokens/base/sections classes; nothing shared is redefined.
   ========================================================================== */

/* ---- Page body (rich text) ---------------------------------------------- */
.ve-page-body__prose { max-width: 46rem; margin-inline: auto; }
.ve-page-body--full .ve-page-body__prose { max-width: none; }
.ve-page-body .ve-prose h2:first-child { margin-top: 0; }

/* ---- Generic block actions ---------------------------------------------- */
.ve-block__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.ve-block__actions--center { justify-content: center; }
@media (max-width: 40rem) {
  .ve-block__actions { flex-direction: column; align-items: stretch; }
  .ve-block__actions .ve-btn { width: 100%; white-space: normal; text-align: center; }
}

/* ---- Intro band ---------------------------------------------------------- */
.ve-block-intro__body { max-width: 46rem; margin: 1.5rem auto 0; text-align: center; }

/* ---- Text block ----------------------------------------------------------
   Editorial two-column: the heading holds the left edge of the container —
   the same edge every other band on the page starts from — and the words run
   beside it. It used to be one 46rem column centred in a 1200px container,
   which floated in from nowhere, sat on neither edge and left the right-hand
   third of the row empty.
   ------------------------------------------------------------------------- */
.ve-block-text__inner {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3.5rem);
  align-items: start;
}
.ve-block-text__inner > .ve-heading { margin: 0; }
.ve-block-text__inner > .ve-heading .ve-heading__title { margin-top: .35rem; }

/* A rule down the gap, so the two columns read as one designed band rather
   than a heading that happens to sit left of some text. */
.ve-block-text__inner > .ve-prose {
  padding-inline-start: clamp(1.25rem, 3vw, 2.75rem);
  border-inline-start: 1px solid var(--ve-border);
}

/* The words run in two columns on a wide screen.
   In one column a two-paragraph story is seven lines tall beside a two-line
   heading, which left a tall empty block under the heading — the client's
   "no empty space" rule. Split in two it is four lines, so the two sides of
   the band finish at nearly the same height and the band itself is shorter. */
/* 64.01rem — the first width above the stacking breakpoint below, so the
   two columns and the balancing arrive with the side-by-side layout and there
   is no band of widths left showing the old tall gap. */
@media (min-width: 64.01rem) {
  .ve-block-text__inner > .ve-prose {
    columns: 2;
    column-gap: clamp(1.75rem, 3vw, 3rem);
    column-fill: balance;
  }
  /* A paragraph must not be split across the two columns mid-sentence. */
  .ve-block-text__inner > .ve-prose > * { break-inside: avoid; }
  .ve-block-text__inner > .ve-prose > :first-child { margin-top: 0; }

  /* The heading sits against the middle of the words. Held to the top it left
     a tall gap beneath itself that read as a hole; centred, the space is
     even above and below and reads as alignment. */
  .ve-block-text__inner { align-items: center; }
}

/* No heading beside it — the words take the whole row rather than indenting
   themselves past an empty column, and there is no rule to draw. */
.ve-block-text__inner > .ve-prose:only-child {
  grid-column: 1 / -1;
  padding-inline-start: 0;
  border-inline-start: 0;
}

@media (max-width: 64rem) {
  .ve-block-text__inner { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .ve-block-text__inner > .ve-prose { padding-inline-start: 0; border-inline-start: 0; }
}

/* ---- Text beside a picture ---------------------------------------------- */
.ve-block-split__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ve-block-split--image-left .ve-block-split__content { order: 2; }
.ve-block-split--image-left .ve-block-split__media { order: 1; }
.ve-block-split__content { display: grid; gap: .9rem; }
.ve-block-split__content .ve-heading__title { margin-top: 0; }
.ve-block-split__media { margin: 0; border-radius: var(--ve-radius-xl); overflow: hidden; box-shadow: var(--ve-shadow-md); aspect-ratio: 4 / 3; }
.ve-block-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 56rem) {
  .ve-block-split__inner { grid-template-columns: 1fr; }
  .ve-block-split--image-left .ve-block-split__content { order: 1; }
  .ve-block-split--image-left .ve-block-split__media { order: 2; }
}

/* ---- Row of cards (never an empty grid cell) ----------------------------- */
.ve-block-cards__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 2rem; }
.ve-block-cards__grid > .ve-block-card { flex: 1 1 16rem; max-width: 100%; }
.ve-block-cards__grid--2 > .ve-block-card { flex-basis: calc(50% - .75rem); }
.ve-block-cards__grid--3 > .ve-block-card { flex-basis: calc(33.333% - 1rem); }
.ve-block-cards__grid--4 > .ve-block-card { flex-basis: calc(25% - 1.125rem); }
@media (max-width: 64rem) { .ve-block-cards__grid--4 > .ve-block-card { flex-basis: calc(50% - .75rem); } .ve-block-cards__grid--3 > .ve-block-card { flex-basis: calc(50% - .75rem); } }
@media (max-width: 40rem) { .ve-block-cards__grid > .ve-block-card { flex-basis: 100% !important; } }
.ve-block-card { display: flex; flex-direction: column; padding-top: 1.25rem; }
.ve-block-card .ve-card__media { padding-top: 0; }
.ve-block-card__icon { margin: 0 1.15rem; }
.ve-block-card__title { font-size: var(--ve-text-lg); color: var(--ve-text-strong); }
.ve-block-card__text { color: var(--ve-text-muted); font-size: var(--ve-text-sm); line-height: var(--ve-leading-relaxed); }
.ve-block-card .ve-link { margin-top: auto; padding-top: .5rem; }

/* ---- Q&A block ----------------------------------------------------------- */
.ve-block-faq__inner { max-width: 46rem; }
.ve-block-faq .ve-faq { margin-top: 2rem; }

/* ---- Homepage: show on desktop / mobile only ----------------------------- */
@media (max-width: 48rem) { .ve-vis--desktop { display: none !important; } }
@media (min-width: 48.01rem) { .ve-vis--mobile { display: none !important; } }

/* ---- Homepage: latest from the blog -------------------------------------- */
.ve-blog-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: 2rem; }
.ve-blog-grid > .ve-blog-card { flex: 1 1 18rem; max-width: 100%; }
.ve-blog-grid--3 > .ve-blog-card { flex-basis: calc(33.333% - 1rem); }
.ve-blog-grid--2 > .ve-blog-card { flex-basis: calc(50% - .75rem); }
@media (max-width: 64rem) { .ve-blog-grid--3 > .ve-blog-card { flex-basis: calc(50% - .75rem); } }
@media (max-width: 40rem) { .ve-blog-grid > .ve-blog-card { flex-basis: 100% !important; } }
.ve-blog-card { display: flex; flex-direction: column; }
.ve-blog-card__meta { display: flex; flex-wrap: wrap; gap: .5rem .75rem; font-size: var(--ve-text-xs); color: var(--ve-text-muted); }
.ve-blog-card__title { font-size: var(--ve-text-lg); line-height: var(--ve-leading-snug); }
.ve-blog-card__title a { color: var(--ve-text-strong); }
.ve-blog-card__title a:hover { color: var(--ve-primary); }
.ve-blog-card__excerpt { color: var(--ve-text-muted); font-size: var(--ve-text-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ve-blog-card .ve-link { margin-top: auto; padding-top: .5rem; }

/* ---- Popup ---------------------------------------------------------------- */
.ve-popup { position: fixed; inset: 0; z-index: calc(var(--ve-z-drawer) + 5); display: grid; place-items: center; padding: 1rem; background: rgb(23 17 63 / .55); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity var(--ve-dur-base) var(--ve-ease), visibility 0s linear var(--ve-dur-base); }
.ve-popup.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.ve-popup__dialog { position: relative; width: min(100%, 34rem); max-height: calc(100vh - 2rem); overflow: auto; background: var(--ve-surface); border-radius: var(--ve-radius-xl); box-shadow: var(--ve-shadow-lg); transform: translateY(14px) scale(.98); transition: transform var(--ve-dur-base) var(--ve-ease-spring); }
.ve-popup.is-open .ve-popup__dialog { transform: none; }
.ve-popup__close { position: absolute; top: .65rem; right: .65rem; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / .9); color: var(--ve-text-strong); box-shadow: var(--ve-shadow-sm); border: 0; cursor: pointer; z-index: 1; }
.ve-popup__close svg { width: 1.1rem; height: 1.1rem; }
.ve-popup__close:hover { background: #fff; color: var(--ve-primary); }
.ve-popup__image { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--ve-radius-xl) var(--ve-radius-xl) 0 0; }
.ve-popup__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ve-popup__body { padding: 1.5rem clamp(1.25rem, 4vw, 2rem) 1.75rem; display: grid; gap: .8rem; }
.ve-popup__title { font-size: var(--ve-text-2xl); color: var(--ve-text-strong); line-height: var(--ve-leading-tight); }
.ve-popup__text { color: var(--ve-text-muted); font-size: var(--ve-text-sm); }
.ve-popup__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .4rem; }
@media (max-width: 40rem) {
  .ve-popup__actions { flex-direction: column; }
  .ve-popup__actions .ve-btn { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ve-popup, .ve-popup__dialog { transition: none; }
}

/* ==========================================================================
   Split block (Vision, Mission, "what we do" pairs).
   Editorial rather than "text column beside a photo": the eyebrow carries a
   gold rule, the picture sits on an offset brand panel with a quiet index,
   and alternating blocks mirror themselves automatically.
   ========================================================================== */
.ve-split-block { overflow: hidden; }

/* One card, two halves of the same height. The picture used to sit at a fixed
   4:3 beside a three-line paragraph, which left the text half of the row
   visibly empty below the words — the client's "no empty space" rule. Binding
   the two halves into a single panel and letting the picture stretch to the
   panel's height means whichever side is shorter is padding inside a designed
   surface, never a hole in the page. */
.ve-split-block__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: stretch; overflow: hidden;
  border-radius: var(--ve-radius-xl);
  background: linear-gradient(150deg, #fff, var(--ve-purple-050));
  border: 1px solid var(--ve-border);
  box-shadow: var(--ve-shadow-lg);
}
.ve-split-block--text-only .ve-split-block__inner { grid-template-columns: minmax(0, 1fr); }
.ve-split-block--image-left .ve-split-block__content { order: 2; }
.ve-split-block--image-left .ve-split-block__visual { order: 1; }

.ve-split-block__content {
  display: grid; gap: 1rem; align-content: center;
  padding: clamp(1.75rem, 3.4vw, 3.25rem);
}
.ve-split-block__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; width: max-content; max-width: 100%;
  font-size: var(--ve-text-xs); font-weight: 700; letter-spacing: var(--ve-tracking-caps);
  text-transform: uppercase; color: var(--ve-primary);
}
.ve-split-block__eyebrow::before { content: ""; width: 1.75rem; height: 2px; border-radius: 2px; background: var(--ve-accent); }
.ve-split-block__title { font-size: var(--ve-text-3xl); letter-spacing: -.02em; max-width: 22ch; }
.ve-split-block__lede { font-size: var(--ve-text-lg); color: var(--ve-text-muted); line-height: var(--ve-leading-relaxed); }
.ve-split-block__prose { color: var(--ve-text-muted); }
.ve-split-block__prose > * + * { margin-top: .9rem; }
.ve-split-block__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }

/* The picture fills its half of the card edge to edge and takes the card's
   height from whichever side is taller, so the two halves always end level. */
.ve-split-block__visual { position: relative; isolation: isolate; min-height: clamp(17rem, 26vw, 24rem); }
.ve-split-block__media {
  margin: 0; overflow: hidden; height: 100%;
  background: var(--ve-ink-100);
}
.ve-split-block__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--ve-dur-slow) var(--ve-ease); }
.ve-split-block__visual:hover .ve-split-block__media img { transform: scale(1.04); }
/* One column below the tablet break: the picture on top, the words under it,
   both still inside the one card so nothing floats loose. */
@media (max-width: 64rem) {
  .ve-split-block__inner { grid-template-columns: minmax(0, 1fr); }
  .ve-split-block__visual,
  .ve-split-block--image-left .ve-split-block__visual { order: 1; min-height: 0; aspect-ratio: 16 / 9; }
  .ve-split-block__content,
  .ve-split-block--image-left .ve-split-block__content { order: 2; }
  .ve-split-block__title { max-width: none; }
}
@media (max-width: 40rem) {
  .ve-split-block__visual { aspect-ratio: 3 / 2; }
  .ve-split-block__actions .ve-btn { width: 100%; }
}