/* ==========================================================================
   Inner pages — courses catalogue & detail, universities, destinations.
   Loaded per page via @push('styles'); builds on tokens/base/sections.css.
   Every rule respects the small-screen rules: no horizontal overflow,
   full-width stacked buttons on phones, no empty grid cells.
   ========================================================================== */

/* The banner's own rules live in base.css — one partial draws it on every
   inner page, so they cannot depend on this file being loaded. */

/* ---- Key-facts strip ------------------------------------------------------ */
.ve-facts { background: #fff; border-bottom: 1px solid var(--ve-border-subtle); box-shadow: var(--ve-shadow-xs); }
/* Dividers are the 1px grid gaps with the border colour showing through, and
   the two outer lines are a border on the LIST — not a `border-right` on each
   item, which drew a line after the last fact and none before the first, so
   the row read as pushed out of alignment. Gaps only ever fall between two
   items, so the strip is closed on both sides whatever the number of facts
   and however they wrap. */
.ve-facts__list {
  display: grid;
  grid-template-columns: repeat(var(--fact-cols, 5), minmax(0, 1fr));
  gap: 1px;
  background: var(--ve-border-subtle);
  border-inline: 1px solid var(--ve-border-subtle);
  margin: 0; padding: 0; list-style: none;
}
.ve-facts__item { display: flex; align-items: center; gap: .75rem; padding: 1rem .9rem; background: #fff; min-width: 0; }
.ve-facts__icon { width: 2.25rem; height: 2.25rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ve-purple-050); color: var(--ve-primary); }
.ve-facts__icon svg { width: 1.05rem; height: 1.05rem; }
.ve-facts__text { display: grid; gap: .1rem; min-width: 0; }
.ve-facts__label { font-size: var(--ve-text-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ve-text-muted); font-weight: 700; }
.ve-facts__value { font-size: var(--ve-text-sm); font-weight: 600; color: var(--ve-text-strong); overflow-wrap: anywhere; }
.ve-facts__value a { color: var(--ve-primary); text-decoration: underline; text-underline-offset: 3px; }
/* On a phone the lines go entirely — at that width they chop a narrow column
   into boxes instead of organising it — and the facts line up with the
   container's own edge, so they sit directly under the heading and the text
   above them rather than indented by a cell's padding. */
@media (max-width: 40rem) {
  .ve-facts__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem 1rem;
    background: transparent;
    border-inline: 0;
  }
  .ve-facts__item { padding: .55rem 0; }
  /* An odd last fact spans the row rather than leaving half of it empty. */
  .ve-facts__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---- Catalogue: sidebar + results ---------------------------------------- */
.ve-catalog__layout { display: grid; grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
.ve-catalog__side { position: sticky; top: calc(var(--ve-header-height, 4.5rem) + 1rem); min-width: 0; }
.ve-catalog__toggle { display: none; width: 100%; }
.ve-filters { display: grid; gap: .9rem; padding: 1.15rem; border: 1px solid var(--ve-border-subtle); border-radius: var(--ve-radius-xl); background: #fff; box-shadow: var(--ve-shadow-xs); }
.ve-filters__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.ve-filters__title { font-size: var(--ve-text-md); font-weight: 800; }
.ve-filters__reset { font-size: var(--ve-text-xs); font-weight: 600; color: var(--ve-primary); text-decoration: underline; text-underline-offset: 3px; }
.ve-filters__locked { display: grid; gap: .15rem; padding: .75rem .9rem; border-radius: var(--ve-radius-md); background: var(--ve-purple-050); font-size: var(--ve-text-sm); }
.ve-filters__locked-label { font-size: var(--ve-text-2xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ve-text-muted); }
.ve-filters__locked strong { color: var(--ve-primary-dark); }
.ve-filters__locked a { font-size: var(--ve-text-xs); color: var(--ve-primary); text-decoration: underline; text-underline-offset: 3px; }
.ve-filters__search { position: relative; }
.ve-filters__search .ve-input { padding-right: 2.75rem; }
.ve-filters__search-btn { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: var(--ve-radius-md); background: var(--ve-primary); color: #fff; border: 0; cursor: pointer; }
.ve-filters__search-btn svg { width: 1rem; height: 1rem; }
.ve-filter { border-top: 1px solid var(--ve-border-subtle); padding-top: .6rem; }
.ve-filter__summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; font-size: var(--ve-text-sm); font-weight: 700; color: var(--ve-text-strong); padding: .35rem 0; }
.ve-filter__summary::-webkit-details-marker { display: none; }
.ve-filter__summary svg { width: .95rem; height: .95rem; margin-left: auto; transition: transform var(--ve-dur-fast) var(--ve-ease); color: var(--ve-text-muted); }
.ve-filter[open] > .ve-filter__summary svg { transform: rotate(180deg); }
.ve-filter__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ve-accent); }
.ve-filter__body { display: grid; gap: .15rem; padding: .25rem 0 .5rem; max-height: 15rem; overflow: auto; scrollbar-width: thin; }
.ve-filter__option { display: flex; align-items: center; gap: .55rem; padding: .3rem .35rem; border-radius: var(--ve-radius-sm); font-size: var(--ve-text-sm); color: var(--ve-text); cursor: pointer; }
.ve-filter__option:hover { background: var(--ve-surface-alt); }
.ve-filter__option input { width: 1rem; height: 1rem; accent-color: var(--ve-primary); flex: none; margin: 0; }
.ve-filter__option:has(input:checked) { color: var(--ve-primary-dark); font-weight: 600; }
.ve-filters__actions { padding-top: .25rem; }
.ve-js .ve-filters__actions { display: none; }
.ve-catalog__main { min-width: 0; }
.ve-catalog__main[aria-busy="true"] { opacity: .55; pointer-events: none; transition: opacity var(--ve-dur-fast); }

.ve-results { display: grid; gap: 1.1rem; }
.ve-results__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.ve-results__count { font-size: var(--ve-text-sm); color: var(--ve-text-muted); }
.ve-results__count strong { color: var(--ve-text-strong); font-size: var(--ve-text-lg); }
.ve-results__sort { display: flex; align-items: center; gap: .5rem; font-size: var(--ve-text-xs); font-weight: 600; color: var(--ve-text-muted); }
.ve-results__sort .ve-select { width: auto; min-height: 2.4rem; padding-block: .35rem; font-size: var(--ve-text-xs); }
.ve-results__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ve-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: var(--ve-radius-pill); background: var(--ve-purple-050); color: var(--ve-primary-dark); font-size: var(--ve-text-xs); font-weight: 600; border: 1px solid var(--ve-purple-100); }
.ve-chip svg { width: .8rem; height: .8rem; }
.ve-chip:hover { background: var(--ve-purple-100); }

/* Course grid: flex-wrap + centred so an odd last row never leaves a hole. */
.ve-course-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.ve-course-grid__item { flex: 0 1 calc((100% - 2.5rem) / 3); min-width: 0; display: flex; }
.ve-course-grid__item > * { width: 100%; }
.ve-catalog__main .ve-course-grid__item { flex-basis: calc((100% - 1.25rem) / 2); }
@media (min-width: 80rem) { .ve-catalog__main .ve-course-grid__item { flex-basis: calc((100% - 2.5rem) / 3); } }
@media (max-width: 64rem) {
  .ve-course-grid__item, .ve-catalog__main .ve-course-grid__item { flex-basis: calc((100% - 1.25rem) / 2); }
}
@media (max-width: 40rem) {
  .ve-course-grid__item, .ve-catalog__main .ve-course-grid__item { flex-basis: 100%; }
}
.ve-programme__logo { position: absolute; right: .6rem; bottom: .6rem; display: grid; place-items: center; padding: .25rem .4rem; border-radius: var(--ve-radius-sm); background: rgb(255 255 255 / .94); box-shadow: var(--ve-shadow-xs); }
.ve-programme__logo img { width: auto; height: 1.6rem; max-width: 5rem; object-fit: contain; }
.ve-programme__subject { font-size: var(--ve-text-2xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ve-primary); }
.ve-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: .5rem; }
@media (max-width: 40rem) { .ve-empty__actions { flex-direction: column; align-items: stretch; width: 100%; } .ve-empty__actions .ve-btn { width: 100%; } }

@media (max-width: 64rem) {
  .ve-catalog__layout { grid-template-columns: 1fr; gap: 1.25rem; }
  .ve-catalog__side { position: static; }
  .ve-catalog__toggle { display: inline-flex; }
  .ve-js .ve-filters { display: none; }
  .ve-js .ve-filters.is-open { display: grid; }
  .ve-js .ve-filters.is-open .ve-filters__actions { display: block; }
}

/* ---- Detail pages: content + sticky aside --------------------------------
   The aside stretches to the row height so its sticky child has room to
   travel; a content-height grid item cannot stick at all.

   What it must NOT have is a scrollbar of its own. Capping the panel at the
   viewport height and letting it scroll internally put a second scrollbar on
   the page a few centimetres from the first, and pushed the university card
   and the rest of the panel behind a scroll nobody expects to find there.
   The panel is now its natural height: it sticks while it fits and, once it
   is taller than the screen, simply travels with the page like the article
   beside it — which is what a reader expects and needs no scrollbar. */
.ve-detail__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: 2.5rem; align-items: stretch; }
.ve-detail__main { min-width: 0; display: grid; gap: 2rem; }
.ve-detail__side { min-width: 0; align-self: stretch; }
.ve-detail__sticky { position: sticky; top: calc(var(--ve-header-height, 4.5rem) + 1rem); display: grid; gap: 1.25rem; }
.ve-detail__jump { display: flex; flex-wrap: wrap; gap: .5rem; }
.ve-detail__jump a { padding: .4rem .8rem; border-radius: var(--ve-radius-pill); border: 1px solid var(--ve-border); font-size: var(--ve-text-xs); font-weight: 600; color: var(--ve-text-muted); }
.ve-detail__jump a:hover { border-color: var(--ve-primary); color: var(--ve-primary); }
.ve-detail__block { scroll-margin-top: calc(var(--ve-header-height, 4.5rem) + 1rem); display: grid; gap: .9rem; }
.ve-detail__heading { font-size: var(--ve-text-2xl); }
.ve-detail__subheading { font-size: var(--ve-text-lg); margin-top: .5rem; }
@media (max-width: 64rem) {
  .ve-detail__layout { grid-template-columns: 1fr; gap: 2rem; }
  .ve-detail__sticky { position: static; }
}

.ve-side-card { border: 1px solid var(--ve-border-subtle); border-radius: var(--ve-radius-xl); background: #fff; padding: 1.25rem; display: grid; gap: .8rem; box-shadow: var(--ve-shadow-xs); }
.ve-side-card--cta { background: linear-gradient(140deg, var(--ve-indigo-900), var(--ve-purple-700)); color: #fff; border: 0; }
.ve-side-card--cta .ve-side-card__title { color: #fff; }
.ve-side-card--cta .ve-side-card__text { color: var(--ve-text-inverse-muted); }
.ve-side-card--cta .ve-btn--outline { --btn-fg: #fff; --btn-border: rgb(255 255 255 / .55); }
.ve-side-card--cta .ve-btn--outline:hover { --btn-bg: rgb(255 255 255 / .1); }
.ve-side-card--quiet { background: var(--ve-surface-alt); box-shadow: none; }
.ve-side-card__title { font-size: var(--ve-text-lg); font-weight: 800; }
.ve-side-card__text { font-size: var(--ve-text-sm); color: var(--ve-text-muted); }
.ve-side-card__text a { color: var(--ve-primary); text-decoration: underline; text-underline-offset: 3px; }
.ve-side-card__actions { display: grid; gap: .6rem; }
.ve-uni-card__head { display: flex; gap: .85rem; align-items: center; }
.ve-uni-card__head .ve-partner__logo { width: 3.25rem; height: 3.25rem; }
.ve-uni-card__eyebrow { display: block; font-size: var(--ve-text-2xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ve-text-muted); }
.ve-uni-card__name { font-size: var(--ve-text-md); font-weight: 800; line-height: 1.25; }
.ve-uni-card__country { font-size: var(--ve-text-xs); color: var(--ve-text-muted); }
.ve-uni-card__text { font-size: var(--ve-text-sm); color: var(--ve-text-muted); }
.ve-uni-card__links { display: grid; gap: .35rem; }
.ve-side-list { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.ve-side-list li { display: flex; gap: .7rem; align-items: center; font-size: var(--ve-text-sm); font-weight: 600; }
.ve-side-list li small { display: block; font-size: var(--ve-text-2xs); color: var(--ve-text-muted); font-weight: 500; }
.ve-side-list li a { color: var(--ve-text-strong); }
.ve-side-list li a:hover { color: var(--ve-primary); }

/* Modules list */
.ve-modules { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; counter-reset: module; }
.ve-module { border: 1px solid var(--ve-border-subtle); border-radius: var(--ve-radius-md); background: #fff; }
.ve-module__details > summary { list-style: none; }
.ve-module__details > summary::-webkit-details-marker { display: none; }
.ve-module__summary { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; cursor: pointer; font-size: var(--ve-text-sm); font-weight: 600; color: var(--ve-text-strong); }
.ve-module__summary--static { cursor: default; }
.ve-module__summary::before { counter-increment: module; content: counter(module, decimal-leading-zero); flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--ve-purple-050); color: var(--ve-primary); font-size: var(--ve-text-2xs); font-weight: 800; }
.ve-module__title { flex: 1; min-width: 0; }
.ve-module__credits { font-size: var(--ve-text-2xs); font-weight: 700; color: var(--ve-text-muted); white-space: nowrap; }
.ve-module__summary svg { width: .95rem; height: .95rem; color: var(--ve-text-muted); flex: none; transition: transform var(--ve-dur-fast) var(--ve-ease); }
.ve-module__details[open] .ve-module__summary svg { transform: rotate(180deg); }
.ve-module__body { padding: 0 1rem 1rem 3.75rem; font-size: var(--ve-text-sm); color: var(--ve-text-muted); line-height: var(--ve-leading-relaxed); }
@media (max-width: 40rem) { .ve-module__body { padding-left: 1rem; } }

/* Fees */
.ve-fees { display: grid; gap: .75rem; justify-items: start; padding: 1.1rem 1.25rem; border-radius: var(--ve-radius-lg); background: var(--ve-surface-alt); border: 1px solid var(--ve-border-subtle); }
.ve-fees__line { font-size: var(--ve-text-md); }
.ve-fees__note { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--ve-text-sm); color: var(--ve-text-muted); }
.ve-fees__note svg { width: 1rem; height: 1rem; color: var(--ve-accent); flex: none; margin-top: .15rem; }
@media (max-width: 40rem) { .ve-fees .ve-btn { width: 100%; } }

/* Enquiry section */
.ve-enquire__layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2.5rem; align-items: start; }
.ve-enquire__points { display: grid; gap: .5rem; margin: .5rem 0 0; padding: 0; list-style: none; font-size: var(--ve-text-sm); color: var(--ve-text); }
.ve-enquire__points li { display: flex; gap: .5rem; align-items: center; }
.ve-enquire__points svg { width: 1.05rem; height: 1.05rem; color: var(--ve-teal-500, var(--ve-primary)); flex: none; }
.ve-enquire__form { min-width: 0; }
@media (max-width: 64rem) { .ve-enquire__layout { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ---- Universities ------------------------------------------------------- */
.ve-subnav { position: sticky; top: var(--ve-header-height, 4.5rem); z-index: 5; background: #fff; border-bottom: 1px solid var(--ve-border-subtle); }
.ve-subnav__inner { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.ve-subnav__inner::-webkit-scrollbar { display: none; }
.ve-subnav a { flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .85rem .9rem; font-size: var(--ve-text-sm); font-weight: 600; color: var(--ve-text-muted); border-bottom: 2px solid transparent; }
.ve-subnav a:hover { color: var(--ve-primary); border-color: var(--ve-primary); }
.ve-subnav a span { font-size: var(--ve-text-2xs); padding: .05rem .45rem; border-radius: var(--ve-radius-pill); background: var(--ve-surface-alt); }
.ve-uni-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.ve-uni-grid__item { flex: 0 1 calc((100% - 2.5rem) / 3); min-width: 0; display: flex; }
.ve-uni-grid__item > * { width: 100%; }
.ve-uni { display: flex; flex-direction: column; }
.ve-uni__media { aspect-ratio: 16 / 9; }
.ve-uni .ve-card__body { flex: 1; }
.ve-uni__head { display: flex; gap: .8rem; align-items: center; }
.ve-uni__head .ve-partner__logo { width: 3rem; height: 3rem; }
.ve-uni__name { font-size: var(--ve-text-md); font-weight: 800; line-height: 1.25; }
.ve-uni__name a { color: inherit; }
.ve-uni__name a:hover { color: var(--ve-primary); }
.ve-uni__meta { display: block; font-size: var(--ve-text-2xs); color: var(--ve-text-muted); font-weight: 600; margin-top: .15rem; }
.ve-uni__foot { margin-top: auto; padding-top: .35rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
@media (max-width: 64rem) { .ve-uni-grid__item { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (max-width: 40rem) { .ve-uni-grid__item { flex-basis: 100%; } }
@media (max-width: 40rem) { .ve-section__head > .ve-btn { width: 100%; } }

/* Pathway steps (awarding organisations page) */
.ve-pathway { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.ve-pathway__step { position: relative; display: grid; gap: .5rem; padding: 1.5rem; border-radius: var(--ve-radius-xl); background: #fff; border: 1px solid var(--ve-border-subtle); box-shadow: var(--ve-shadow-xs); }
.ve-pathway__icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; background: var(--ve-purple-050); color: var(--ve-primary); }
.ve-pathway__icon svg { width: 1.3rem; height: 1.3rem; }
.ve-pathway__title { font-size: var(--ve-text-lg); }
.ve-pathway__text { font-size: var(--ve-text-sm); color: var(--ve-text-muted); line-height: var(--ve-leading-relaxed); }
@media (max-width: 64rem) { .ve-pathway { grid-template-columns: 1fr; } }

/* ---- Destinations ------------------------------------------------------- */
.ve-destinations--page { padding-block: 0; }
.ve-dest-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.ve-dest-grid__item { flex: 0 1 calc((100% - 3.75rem) / 4); min-width: 0; display: flex; }
.ve-dest-grid__item > * { width: 100%; }
.ve-dest { display: flex; flex-direction: column; }
.ve-dest__media { position: relative; aspect-ratio: 16 / 10; }
.ve-dest__placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(140deg, var(--ve-indigo-900), var(--ve-purple-700)); color: rgb(255 255 255 / .55); }
.ve-dest__placeholder svg { width: 3rem; height: 3rem; }
.ve-dest__flag { position: absolute; left: .75rem; bottom: .75rem; width: 2.6rem; height: 2.6rem; border-width: 2px; }
.ve-dest__flag span { font-size: .7rem; }
.ve-dest .ve-card__body { flex: 1; }
.ve-dest .ve-card__title { font-size: var(--ve-text-lg); }
.ve-dest .ve-card__title a { color: inherit; }
.ve-dest .ve-card__title a:hover { color: var(--ve-primary); }
.ve-dest .ve-card__meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: var(--ve-text-xs); color: var(--ve-text-muted); }
.ve-dest .ve-card__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.ve-dest .ve-card__meta svg { width: .9rem; height: .9rem; color: var(--ve-primary); }
.ve-dest .ve-link { margin-top: auto; padding-top: .35rem; }
@media (max-width: 64rem) { .ve-dest-grid__item { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (max-width: 40rem) { .ve-dest-grid__item { flex-basis: 100%; } }
.ve-flags--light .ve-flag { color: var(--ve-text-muted); }
.ve-flags--light .ve-flag:hover { color: var(--ve-primary); }
.ve-flags--light .ve-flag__disc { border-color: var(--ve-border); box-shadow: var(--ve-shadow-xs); }

/* ---- Fixes found in browser QA ---------------------------------------- */
.ve-banner__title, .ve-banner h1 { color: var(--ve-text-inverse, #fff); }
ol.ve-crumbs { list-style: none; margin: 0; padding: 0; }
.ve-crumbs li { display: inline-flex; align-items: center; }

/* Key facts: 5 across on desktop, 3 on tablet, 2 on phone — always full rows. */
@media (max-width: 80rem) { .ve-facts__list { grid-template-columns: repeat(min(var(--fact-cols, 5), 3), minmax(0, 1fr)); } }
@media (max-width: 56rem) { .ve-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   Study destination detail — the facts strip, the institutions and the
   "other destinations" row.

   A country record is short by nature: two paragraphs, sometimes one. Laid
   out as prose-beside-a-tall-sidebar the page was mostly white. These three
   pieces carry it instead — the facts open the page, the institutions become
   content rather than a sidebar list, and the row of other destinations is
   made of cards worth clicking rather than bare initials in circles.
   ========================================================================== */

/* ---- Institutions, as content in the main column ------------------------- */
.ve-instgrid {
  display: grid;
  grid-template-columns: repeat(var(--inst-cols, 2), minmax(0, 1fr));
  gap: 1rem; margin: 0; padding: 0; list-style: none;
}
.ve-instcard {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--ve-border-subtle); border-radius: var(--ve-radius-xl);
  background: #fff; box-shadow: var(--ve-shadow-xs);
  transition: border-color var(--ve-dur-fast), box-shadow var(--ve-dur-fast), transform var(--ve-dur-fast);
}
.ve-instcard:hover { border-color: var(--ve-border); box-shadow: var(--ve-shadow-md); transform: translateY(-2px); }
.ve-instcard__logo {
  flex: none; display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: var(--ve-radius-lg);
  background: var(--ve-purple-050); color: var(--ve-primary);
  font-weight: 800; font-size: var(--ve-text-sm); overflow: hidden;
}
.ve-instcard__logo img { width: 100%; height: 100%; object-fit: contain; padding: .35rem; }
.ve-instcard__text { display: grid; gap: .2rem; min-width: 0; }
.ve-instcard__name { font-size: var(--ve-text-md); color: var(--ve-text-strong); }
.ve-instcard__name a { color: inherit; }
.ve-instcard__name a:hover { color: var(--ve-primary); }
.ve-instcard__meta { font-size: var(--ve-text-xs); color: var(--ve-text-muted); }
.ve-instcard__blurb { font-size: var(--ve-text-sm); color: var(--ve-text-muted); line-height: var(--ve-leading-relaxed); }
@media (max-width: 48rem) { .ve-instgrid { grid-template-columns: minmax(0, 1fr) !important; } }

/* ---- Other destinations, as cards ---------------------------------------- */
.ve-destgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none;
}
.ve-destcard {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--ve-border-subtle); border-radius: var(--ve-radius-xl);
  background: #fff; box-shadow: var(--ve-shadow-xs);
  transition: border-color var(--ve-dur-fast), box-shadow var(--ve-dur-fast), transform var(--ve-dur-fast);
}
.ve-destcard:hover { border-color: var(--ve-primary); box-shadow: var(--ve-shadow-md); transform: translateY(-2px); }
.ve-destcard__disc {
  flex: none; display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden;
  background: linear-gradient(150deg, var(--ve-purple-050), var(--ve-indigo-100));
  color: var(--ve-primary); font-weight: 800; font-size: var(--ve-text-sm);
}
.ve-destcard__disc img { width: 100%; height: 100%; object-fit: cover; }
.ve-destcard__text { display: grid; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.ve-destcard__name { font-size: var(--ve-text-md); color: var(--ve-text-strong); }
.ve-destcard__meta { font-size: var(--ve-text-xs); color: var(--ve-text-muted); }
.ve-destcard__go { flex: none; color: var(--ve-primary); opacity: 0; transform: translateX(-4px); transition: opacity var(--ve-dur-fast), transform var(--ve-dur-fast); }
.ve-destcard__go svg { width: 1.1rem; height: 1.1rem; }
.ve-destcard:hover .ve-destcard__go { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .ve-instcard, .ve-destcard, .ve-destcard__go { transition: none; }
  .ve-instcard:hover, .ve-destcard:hover { transform: none; }
  .ve-destcard__go { opacity: 1; transform: none; }
}

/* ---- Site-wide search results --------------------------------------------
   The page reuses the catalogue's shell (.ve-catalog__layout, .ve-filters,
   .ve-filter) and the shared search box, so only the results themselves are
   defined here: the kind-of-result tabs, the grouped "Everything" view, and
   the one result row that every kind of record renders as. */
.ve-sresults { display: grid; gap: 1.1rem; }
.ve-sresults__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.ve-sresults__count { font-size: var(--ve-text-sm); color: var(--ve-text-muted); }
.ve-sresults__count strong { color: var(--ve-text-strong); font-size: var(--ve-text-lg); }
.ve-sresults__count em { font-style: normal; color: var(--ve-primary-dark); font-weight: 600; }
.ve-sresults__note { display: flex; align-items: flex-start; gap: .55rem; padding: .7rem .9rem; border-radius: var(--ve-radius-md); background: var(--ve-purple-050); border: 1px solid var(--ve-purple-100); color: var(--ve-primary-dark); font-size: var(--ve-text-xs); line-height: var(--ve-leading-snug); }
.ve-sresults__note svg { width: .95rem; height: .95rem; flex: none; margin-top: .1rem; }

.ve-sresults__tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ve-stab { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: var(--ve-radius-pill); border: 1px solid var(--ve-border); background: #fff; color: var(--ve-text); font-size: var(--ve-text-xs); font-weight: 600; transition: background var(--ve-dur-fast), border-color var(--ve-dur-fast), color var(--ve-dur-fast); }
.ve-stab:hover { border-color: var(--ve-primary); color: var(--ve-primary-dark); }
.ve-stab.is-active { background: var(--ve-primary); border-color: var(--ve-primary); color: #fff; }
.ve-stab__count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding-inline: .3rem; border-radius: var(--ve-radius-pill); background: var(--ve-surface-alt); color: var(--ve-text-muted); font-size: var(--ve-text-2xs); font-weight: 700; }
.ve-stab.is-active .ve-stab__count { background: rgb(255 255 255 / .22); color: #fff; }

/* The opening state, before anything is searched for. It has to fill the
   column beside the filter panel — a heading over a void is exactly the
   empty space the design must never have. */
.ve-sstart { display: grid; gap: .5rem; padding: 1.75rem; border: 1px solid var(--ve-border-subtle); border-radius: var(--ve-radius-xl); background: #fff; box-shadow: var(--ve-shadow-xs); }
.ve-sstart__title { font-size: var(--ve-text-xl); font-weight: 800; color: var(--ve-text-strong); }
.ve-sstart__body { font-size: var(--ve-text-sm); color: var(--ve-text-muted); max-width: 46rem; }
.ve-sstart__block { margin-top: 1.1rem; display: grid; gap: .6rem; }
.ve-sstart__heading { font-size: var(--ve-text-xs); text-transform: uppercase; letter-spacing: var(--ve-tracking-caps, .08em); font-weight: 700; color: var(--ve-text-muted); }
.ve-sstart__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ve-sstart .ve-empty__actions { justify-content: flex-start; margin-top: 1.5rem; }
.ve-sstart__box { margin-top: 1.1rem; }

/* Full width, with no filter sidebar beside it, the panel is the whole page.
   Left-aligned text across a 1200px card reads as a column that lost its
   layout, so this state is a measured column centred in the page — the search
   box is the widest thing on it and everything lines up under it. */
.ve-sstart--wide { max-width: 52rem; margin-inline: auto; padding: clamp(1.5rem, 4vw, 2.75rem); justify-items: center; text-align: center; }
.ve-sstart--wide .ve-sstart__title { font-size: var(--ve-text-2xl); }
.ve-sstart--wide .ve-sstart__body { margin-inline: auto; }
.ve-sstart--wide .ve-sstart__block { width: 100%; justify-items: center; }
.ve-sstart--wide .ve-sstart__box { width: 100%; }
.ve-sstart--wide .ve-sstart__chips { justify-content: center; }
.ve-sstart--wide .ve-empty__actions { justify-content: center; }

/* On a phone the centred chips fall to one per line and the page reads as a
   long list rather than a designed way in. They become a two-column grid of
   equal tiles instead: same component, same colours, tidy rows, and the
   headings sit on the left edge where a phone reader expects them. */
@media (max-width: 40rem) {
  .ve-sstart { padding: 1.1rem; }
  .ve-sstart--wide { padding: 1.25rem 1.1rem; text-align: left; justify-items: stretch; }
  .ve-sstart--wide .ve-sstart__title { font-size: var(--ve-text-xl); }
  .ve-sstart--wide .ve-sstart__body { margin-inline: 0; }
  .ve-sstart__block { margin-top: 1.4rem; }
  .ve-sstart__heading { text-align: left; }
  .ve-sstart__chips,
  .ve-sstart--wide .ve-sstart__chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    justify-content: stretch;
  }
  .ve-sstart__chips > li { display: flex; }
  .ve-sstart__chips .ve-stab {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: .6rem .6rem;
    line-height: var(--ve-leading-snug);
  }
  /* An odd last tile takes the whole row rather than leaving half of it empty. */
  .ve-sstart__chips > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.ve-sgroup { display: grid; gap: .75rem; padding-top: 1.1rem; border-top: 1px solid var(--ve-border-subtle); }
.ve-sgroup:first-of-type { padding-top: 0; border-top: 0; }
.ve-sgroup__head { display: flex; align-items: center; gap: .6rem; }
.ve-sgroup__title { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--ve-text-md); font-weight: 800; color: var(--ve-text-strong); }
.ve-sgroup__title svg { width: 1.05rem; height: 1.05rem; color: var(--ve-primary); }
.ve-sgroup__count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding-inline: .35rem; border-radius: var(--ve-radius-pill); background: var(--ve-purple-050); color: var(--ve-primary-dark); font-size: var(--ve-text-2xs); font-weight: 700; }
.ve-sgroup__more { display: inline-flex; align-items: center; gap: .4rem; justify-self: start; font-size: var(--ve-text-xs); font-weight: 700; color: var(--ve-primary); }
.ve-sgroup__more svg { width: .85rem; height: .85rem; transition: transform var(--ve-dur-fast); }
.ve-sgroup__more:hover svg { transform: translateX(3px); }

.ve-sresults__list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ve-sresults__back { padding-top: .5rem; }
.ve-sresults__back a { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--ve-text-xs); font-weight: 700; color: var(--ve-primary); }
.ve-sresults__back svg { width: .85rem; height: .85rem; }

/* One result — the same row whichever kind of record it is. */
.ve-sresult { display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--ve-border-subtle); border-radius: var(--ve-radius-lg); background: #fff; transition: border-color var(--ve-dur-fast), box-shadow var(--ve-dur-fast), transform var(--ve-dur-fast); }
.ve-sresult:hover { border-color: var(--ve-purple-100); box-shadow: var(--ve-shadow-sm); transform: translateY(-1px); }
.ve-sresult__media { flex: none; width: 5.5rem; height: 4rem; border-radius: var(--ve-radius-md); overflow: hidden; background: var(--ve-surface-alt); }
.ve-sresult__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ve-sresult__media--icon { display: grid; place-items: center; background: var(--ve-purple-050); color: var(--ve-primary); border: 1px solid var(--ve-purple-100); }
.ve-sresult__media--icon svg { width: 1.5rem; height: 1.5rem; }
.ve-sresult--contain .ve-sresult__media { background: #fff; border: 1px solid var(--ve-border-subtle); }
.ve-sresult--contain .ve-sresult__media img { object-fit: contain; padding: .35rem; }
.ve-sresult__body { flex: 1 1 auto; min-width: 0; display: grid; gap: .2rem; }
.ve-sresult__type { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--ve-text-2xs); text-transform: uppercase; letter-spacing: var(--ve-tracking-caps, .08em); font-weight: 700; color: var(--ve-primary); }
.ve-sresult__type svg { width: .8rem; height: .8rem; }
.ve-sresult__title { display: block; font-size: var(--ve-text-md); font-weight: 700; color: var(--ve-text-strong); line-height: var(--ve-leading-snug); }
.ve-sresult:hover .ve-sresult__title { color: var(--ve-primary-dark); }
.ve-sresult__summary { display: block; font-size: var(--ve-text-sm); color: var(--ve-text-muted); line-height: var(--ve-leading-snug); }
.ve-sresult__meta { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin-top: .15rem; font-size: var(--ve-text-2xs); color: var(--ve-text-muted); }
.ve-sresult__meta > span { display: inline-flex; align-items: center; }
.ve-sresult__meta > span + span::before { content: "·"; margin-inline: .45rem; color: var(--ve-border-strong); }
.ve-sresult__go { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--ve-purple-050); color: var(--ve-primary); transition: background var(--ve-dur-fast), transform var(--ve-dur-fast); }
.ve-sresult__go svg { width: .85rem; height: .85rem; }
.ve-sresult:hover .ve-sresult__go { background: var(--ve-primary); color: #fff; transform: translateX(2px); }
.ve-sresult mark { background: var(--ve-gold-100); color: inherit; border-radius: 3px; padding: 0 .1em; }

@media (max-width: 40rem) {
  .ve-sresult { gap: .75rem; padding: .75rem .8rem; }
  .ve-sresult__media { width: 3.75rem; height: 3rem; }
  /* The arrow is decoration; on a phone the whole row is the tap target. */
  .ve-sresult__go { display: none; }
  .ve-sresult__title { font-size: var(--ve-text-sm); }
}

/* ---- Campus pictures on a university page (requirement §6) --------------- */
/* The column count comes from the record count (--pics), so the band never
   ends in a row with a hole in it. Below the tablet breakpoint it is one
   column, like every other list on the site. */
.ve-picture-band {
  display: grid;
  grid-template-columns: repeat(var(--pics, 2), minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ve-picture-band li { margin: 0; }

.ve-picture-band img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--ve-radius-lg, .85rem);
  background: var(--ve-surface-2, #f4f2fa);
}

/* One picture on its own is a feature, not a thumbnail. */
.ve-picture-band[style*="--pics: 1"] img { aspect-ratio: 16 / 9; }

@media (max-width: 48rem) {
  .ve-picture-band { grid-template-columns: 1fr; }
}