/* BRIDGES — styling for the campus navigation.
 *
 * House identity: Georgia, #1F3864. No external fonts, no CDN — the campus runs from
 * a thumb drive.
 *
 * The buildings are cards you walk to, not rows in a list. Deliberately: Fred's
 * verdict on the first attempt was "a fucking listing", and a listing is what you get
 * when the only difference between entries is their label. Each card carries what the
 * building is FOR, at reading size, because that is the decision the reader is making.
 */

#vsi-campus {
  font-family: Georgia, 'Times New Roman', serif;
  max-width: 68rem;
  margin: 3.5rem auto 4rem;
  padding: 0 1.25rem;
}

#vsi-campus > h2 {
  font-size: 1.0625rem;
  font-weight: normal;
  line-height: 1.5;
  color: #3a3a3a;
  border-top: 2px solid #1F3864;
  padding-top: 1rem;
  margin: 0 0 1.25rem;
  max-width: 46rem;
}

.vsi-campus-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}

.vsi-building {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-align: left;
  font-family: inherit;
  background: #fff;
  border: 1px solid #c9d0dd;
  border-left: 4px solid #1F3864;
  border-radius: 2px;
  padding: 1.15rem 1.25rem 1rem;
  cursor: pointer;
  transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}
.vsi-building:hover,
.vsi-building:focus-visible {
  box-shadow: 0 3px 14px rgba(31, 56, 100, .18);
  transform: translateY(-1px);
  border-color: #1F3864;
  outline: none;
}
.vsi-building:focus-visible { outline: 3px solid #1F3864; outline-offset: 2px; }

.vsi-b-name { font-size: 1.25rem; color: #1F3864; line-height: 1.2; }
.vsi-b-why  { font-size: .95rem; line-height: 1.45; color: #444; }
.vsi-b-go   { font-size: .85rem; color: #1F3864; letter-spacing: .02em; margin-top: .25rem; }

/* ---- the overlay: depth in place, the campus held underneath -------------- */

#vsi-bridge {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background: rgba(16, 26, 46, .55);
  backdrop-filter: blur(2px);
}
#vsi-bridge[hidden] { display: none; }

/* Clicking the margin returns you. The margin is deliberately generous: the campus
 * is visible behind it, so you can see you never left. */
.vsi-bridge-margin { height: 2.25rem; flex: 0 0 auto; cursor: pointer; }

.vsi-bridge-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  box-shadow: 0 -6px 40px rgba(0, 0, 0, .35);
  max-width: 96rem;
  width: 100%;
  margin: 0 auto;
}

.vsi-bridge-head {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: .9rem 1.25rem;
  background: #1F3864;
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
}
.vsi-bridge-head h2 { margin: 0; font-size: 1.2rem; font-weight: normal; }
.vsi-bridge-head p {
  margin: .3rem 0 0;
  font-size: .9rem;
  line-height: 1.4;
  opacity: .85;
  max-width: 52rem;
}

/* Two controls in the overlay header now: leave, or go somewhere else entirely.
   "Somewhere else" is the quieter of the two — most people closing a building are
   going back to the campus, not across it. */
.vsi-bridge-acts { margin-left: auto; display: flex; gap: .5rem; flex: 0 0 auto; }
#vsi-bridge-elsewhere {
  font-family: inherit; font-size: .95rem; color: #fff;
  background: transparent; border: 1px solid rgba(255,255,255,.28);
  border-radius: 3px; padding: .5rem .9rem; cursor: pointer;
}
#vsi-bridge-elsewhere:hover,
#vsi-bridge-elsewhere:focus-visible { border-color: rgba(255,255,255,.7); outline: none; }
@media (max-width: 700px) { .vsi-bridge-acts { margin-left: 0; width: 100%; } }

#vsi-bridge-close {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: inherit;
  font-size: .95rem;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 3px;
  padding: .5rem .9rem;
  cursor: pointer;
}
#vsi-bridge-close:hover,
#vsi-bridge-close:focus-visible {
  background: #fff; color: #1F3864; outline: none;
}
#vsi-bridge-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

#vsi-bridge-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }

@media (max-width: 700px) {
  .vsi-bridge-head { flex-wrap: wrap; }
  #vsi-bridge-close { margin-left: 0; }
  .vsi-bridge-margin { height: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vsi-building { transition: none; }
  .vsi-building:hover, .vsi-building:focus-visible { transform: none; }
}