/* ─────────────────────────────────────────
   CAMPUS SELECTOR (template-campus-selector.php)
   Standalone full-screen page. Geometry (sector clip-paths, divider
   lines, badge position) is driven by springs in campus-selector.js;
   everything here is the look plus the CSS-timed content choreography.
───────────────────────────────────────── */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url(../fonts/montserrat-latin-700-900.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #0d1b2a;
  --white: #f5f2ee;
  --font-block: 'Montserrat', 'Arial Black', sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* Spring fallback for browsers without linear() */
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --logo: min(46vw, 190px);

  /* ── HEADING SIZE KNOBS ──
     Titles scale with the screen: the smaller of a width share (vw) and a
     height share (svh) wins. Sub text is a ratio of its title, so it
     scales the same way; raise/lower the ratio to resize it. */
  /* Collapsed: big white block names */
  --cs-title-calgary: min(16vw, 13svh);
  --cs-title-sides:   min(15vw, 10svh);   /* Cochrane + Cabo */
  /* Collapsed: accent sub text, as a fraction of its title */
  --cs-tag-calgary: .23;
  --cs-tag-sides:   .23;                   /* Cochrane + Cabo */
  /* Expanded: big title fits its word to 82% of the width, capped by
     these, and the accent eyebrow is a fraction of that cap */
  --cs-d-title-max: min(30vw, 19svh);
  --cs-d-eyebrow: .107;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* k=170 c=17 damped spring, ~6% overshoot */
    --spring: linear(0, 0.047, 0.16, 0.306, 0.461, 0.608, 0.738, 0.846, 0.929, 0.989, 1.03, 1.054, 1.065, 1.066, 1.061, 1.053, 1.043, 1.033, 1.023, 1.015, 1.008, 1.003, 1, 0.997, 0.996, 0.996, 0.996, 0.996, 0.997, 0.997, 0.998, 0.999, 0.999, 1, 1, 1, 1, 1, 1, 1, 1);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  overscroll-behavior: none;
}

.cs {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
  color: var(--white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  /* Read by JS to learn the notch height; children are absolutely placed. */
  padding-top: env(safe-area-inset-top);
}

.cs-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ─── SECTORS ─── */
.cs-sector {
  position: absolute;
  inset: 0;
  /* Collapsed to a point until JS takes over (no flash of full photos). */
  clip-path: polygon(50% 44%, 50% 44%, 50% 44%);
  z-index: 1;
}
.cs-sector.is-active { z-index: 2; }

.cs-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(.8) brightness(.78);
  transform: scale(1.08);
  transition: filter .9s ease, transform 1.8s var(--ease-out);
}
.cs.is-ready .cs-bg { transform: scale(1); }
.cs-sector.is-pressed .cs-bg { filter: saturate(.9) brightness(.85); transform: scale(1.03); transition-duration: .25s, .5s; }
.cs-sector.is-active .cs-bg { filter: saturate(1.05) brightness(.95); transform: scale(1.06); transition-duration: .9s, 2.4s; }

/* Site hero gradient (navy), plus an accent glow behind the campus name. */
.cs-shade,
.cs-shade::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cs-shade {
  background:
    radial-gradient(90% 55% at var(--glow, 50% 20%), color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, rgba(13,27,42,0.58) 0%, rgba(13,27,42,0.3) 45%, rgba(13,27,42,0.72) 100%);
  transition: opacity .8s ease;
}
/* Detail state: clear sky behind the title, deep navy under the cards. */
.cs-shade::after {
  content: '';
  background: linear-gradient(180deg, rgba(13,27,42,0.72) 0%, rgba(13,27,42,0.15) 24%, rgba(13,27,42,0.6) 40%, rgba(13,27,42,0.88) 58%, rgba(13,27,42,1) 100%);
  opacity: 0;
  transition: opacity .8s ease;
}
.cs-sector.is-active .cs-shade { background: none; }
.cs-sector.is-active .cs-shade::after { opacity: 1; }

.cs-sector--cochrane { --glow: 20% 80%; }
.cs-sector--cabo     { --glow: 80% 80%; }

/* ─── TAP TARGET + BLOCK NAMES ─── */
.cs-hit {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.cs-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -10px; }
.cs-sector.is-active .cs-hit { pointer-events: none; }

.cs-name {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: .06em .04em;
  pointer-events: none;
}
.cs-name > span {
  display: block;
  opacity: 0;
  transform: translateY(110%);
  transition: transform .5s var(--ease-out), opacity .3s ease;
}
.cs.is-ready:not(.has-active) .cs-name > span {
  opacity: 1;
  transform: none;
  transition: transform 1s var(--spring), opacity .6s ease;
  transition-delay: calc(.55s + var(--si) * .1s);
}
.cs.is-ready:not(.has-active) .cs-name > .cs-name-tag { transition-delay: calc(.7s + var(--si) * .1s); }

/* .cs-name carries the size (per campus, below); the word is 1em of it and
   the tag scales off it too, so both grow together on tablets/desktops. */
.cs-name-word {
  font-size: 1em;
  font-family: var(--font-block);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,.35);
}
.cs-name-tag {
  margin-top: .7em;
  font-size: calc(var(--cs-tag) * 1em);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}

/* Calgary: centred across the top. */
.cs-sector--calgary .cs-name {
  top: calc(env(safe-area-inset-top) + 9svh);
  left: 0;
  right: 0;
  align-items: center;
  /* Width-bound on phones, height-bound on landscape screens. */
  font-size: var(--cs-title-calgary);
  --cs-tag: var(--cs-tag-calgary);
}

/* Cochrane + Cabo: set vertically along the outer edges, letter tops
   facing out, like book spines on either side of a shelf. Sized off the
   viewport height too, so the longest name (COCHRANE) always fits below
   the divider instead of running off the top on wide screens. */
.cs-sector--cochrane .cs-name,
.cs-sector--cabo .cs-name {
  bottom: calc(env(safe-area-inset-bottom) + 6svh);
  font-size: var(--cs-title-sides);
  --cs-tag: var(--cs-tag-sides);
}

.cs-sector--cochrane .cs-name {
  left: 4vw;
  align-items: flex-start;
  transform-origin: 0 100%;
  transform: rotate(-90deg) translateY(100%);
}
.cs-sector--cabo .cs-name {
  right: 4vw;
  align-items: flex-end;
  transform-origin: 100% 100%;
  transform: rotate(90deg) translateY(100%);
}

/* ─── DIVIDERS ─── */
.cs-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
.cs-lines line { vector-effect: non-scaling-stroke; stroke-linecap: round; }
.cs-gutter { stroke: #000; stroke-width: 7; }
.cs-hair { stroke: rgba(255,255,255,0.32); stroke-width: 1; }

/* ─── BADGE ───
   .cs-logo is pinned by JS to the home junction point (it never follows
   the moving dividers); .cs-logo-core does the scaling. */
.cs-logo {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--logo);
  height: var(--logo);
  z-index: 5;
  pointer-events: none;
}
.cs-logo-core,
.cs-mini {
  border-radius: 50%;
  background: #000;
}
.cs-logo-core {
  position: absolute;
  inset: 0;
  box-shadow: 0 0 0 7px #000, 0 18px 50px rgba(0,0,0,.55);
  transform: scale(0);
}
.cs-badge {
  position: absolute;
  inset: 3%;
  width: 94%;
  height: 94%;
  object-fit: contain;
}

/* Grow in past full size, then settle in shrinking swings. Always uniform
   scale, so the badge never changes proportion. Each swing is its own
   smooth ease-in-out curve. */
@keyframes cs-badge-in {
  0%   { transform: scale(0);    animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  42%  { transform: scale(1.12); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  66%  { transform: scale(.95);  animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  85%  { transform: scale(1.02); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  100% { transform: scale(1); }
}
/* Opening a campus: a plain vanishing shrink, timed to finish as the
   dividers clear the screen edge (~0.24s into the open spring). */
@keyframes cs-badge-out {
  from { transform: scale(1); }
  to   { transform: scale(0); }
}
/* Page load and coming back from a campus play the same entrance. */
.cs.is-ready .cs-logo-core {
  animation: cs-badge-in 1.1s .1s both;
}
.cs.is-ready.has-active .cs-logo-core {
  animation: cs-badge-out .24s cubic-bezier(.33, 0, .2, 1) both;
}

/* Small badge, top-left on an open campus. Same move and timing as the
   eyebrow (e.g. "Baja, Mexico") so the two slide in as one. */
.cs-mini {
  position: absolute;
  left: 16px;
  top: calc(var(--bar-y, 60px) - 29px);
  width: 58px;
  height: 58px;
  z-index: 6;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .25s ease, transform .3s ease;
}
.cs.is-open .cs-mini {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease .12s, transform .9s var(--spring) .12s;
}

/* ─── BACK ─── lettering only, in the site's button type */
.cs-close {
  position: absolute;
  top: calc(var(--bar-y, 60px) - 22px);
  right: 8px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: rgba(245,242,238,0.92);
  font: 600 0.82rem/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .2s ease, transform .3s ease, visibility 0s linear .3s;
}
.cs-close svg {
  width: 20px;
  height: 20px;
  transform: translateX(10px);
  transition: transform .3s ease;
}
.cs.has-active .cs-close {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .5s ease .45s, transform .9s var(--spring) .45s, visibility 0s;
}
.cs.has-active .cs-close svg { transform: none; transition: transform 1s var(--spring) .55s; }
.cs-close:active svg { transform: translateX(-4px); transition-delay: 0s; }
.cs-close:focus-visible { outline: 2px solid rgba(245,242,238,0.7); outline-offset: 2px; border-radius: 6px; }

/* ─── BUTTONS: the site's .btn-primary, recoloured per campus via --accent. ─── */
.cs-btn-primary {
  display: block;
  width: 100%;
  background: var(--accent);
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 16px 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
/* Hover only with a real pointer (no sticky hover on phones); :active
   gives the same feedback under a finger. */
@media (hover: hover) {
  .cs-btn-primary:hover { background: color-mix(in srgb, var(--accent) 82%, #000); color: var(--white); transform: translateY(-1px); }
}
.cs-btn-primary:active { background: color-mix(in srgb, var(--accent) 82%, #000); color: var(--white); }
.cs-btn-primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ─── DETAIL ─── */
.cs-detail {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding:
    calc(var(--bar-y, 60px) + 44px)
    max(24px, env(safe-area-inset-right))
    calc(env(safe-area-inset-bottom) + 26px)
    max(24px, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .45s;
}
.cs-sector.is-open .cs-detail {
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

.cs-d-head { margin: 0; }
.cs-d-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--font-block);
  font-size: calc(var(--cs-d-eyebrow) * var(--cs-d-title-max));
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .25s ease, transform .3s ease;
}
.cs-d-eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.cs-d-title {
  display: flex;
  margin: 0;
  overflow: hidden;
  padding-bottom: .04em;
  font-family: var(--font-block);
  font-weight: 900;
  font-size: min(calc(82vw / (var(--chars) * .76)), var(--cs-d-title-max));
  line-height: .86;
  letter-spacing: -0.03em;
  color: #fff;
}
.cs-d-title > span {
  display: inline-block;
  transform: translateY(105%) rotate(8deg);
  transform-origin: 0 100%;
  transition: transform .3s ease;
}

/* Info cards sit centred in the space between the title and the button. */
.cs-d-list {
  list-style: none;
  margin: auto 0;
  padding: 28px 0;
  display: grid;
  gap: 16px;
}

/* Animatable ring size, so the photo and the text beside it move together
   on one spring. Scales up gently on tablets/desktops. */
@property --ring {
  syntax: '<length>';
  inherits: true;
  initial-value: 66px;
}
.cs-d-item {
  --ring: clamp(66px, 9vmin + 31px, 96px);
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity .2s ease, transform .3s ease, --ring .8s var(--spring);
}
.cs-d-item.is-focus { --ring: min(clamp(124px, 17vmin + 58px, 180px), 30vw); }

/* The others step back while one photo is enlarged. */
.cs-d-item > * { transition: opacity .45s ease; }
.cs-d-list.has-focus .cs-d-item:not(.is-focus) > * { opacity: .35; }

.cs-d-ring {
  flex: none;
  width: var(--ring);
  height: var(--ring);
  margin: 0;
  padding: 3px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  cursor: pointer;
  transform: scale(.4) rotate(-25deg);
  transition: transform .3s ease, box-shadow .6s ease, opacity .45s ease;
}
.cs-d-ring:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cs-d-item.is-focus .cs-d-ring {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent), 0 18px 44px rgba(0,0,0,.55);
}
.cs-d-ring img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--navy);
}
.cs-d-text { display: grid; gap: 3px; min-width: 0; }
.cs-d-h {
  font-family: var(--font-block);
  font-weight: 800;
  font-size: clamp(19px, 2.6vmin + 9px, 26px);
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
}
.cs-d-s {
  font-size: clamp(14.5px, 1.4vmin + 9px, 18px);
  font-weight: 500;
  line-height: 1.35;
  color: rgba(245,242,238,0.82);
}

/* Directions: the site's .campus-save text link, in the campus colour. */
.cs-d-dir {
  justify-self: start;
  margin-top: 6px;
  padding-bottom: 2px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: border-color 0.2s;
}
@media (hover: hover) { .cs-d-dir:hover { border-color: var(--accent); } }
.cs-d-dir:active { border-color: var(--accent); }
.cs-d-dir:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.cs-d-cta {
  opacity: 0;
  transform: translateY(24px) scale(.96);
  transition: opacity .2s ease, transform .3s ease, background 0.2s, color 0.2s;
}

/* Open: everything cascades in on the spring. */
.cs-sector.is-open .cs-d-eyebrow {
  opacity: 1; transform: none;
  transition: opacity .6s ease .12s, transform .9s var(--spring) .12s;
}
.cs-sector.is-open .cs-d-title > span {
  transform: none;
  transition: transform 1s var(--spring) calc(.05s + var(--li) * .045s);
}
.cs-sector.is-open .cs-d-item {
  opacity: 1; transform: none;
  transition: opacity .6s ease calc(.3s + var(--ii) * .09s), transform 1s var(--spring) calc(.3s + var(--ii) * .09s), --ring .8s var(--spring);
}
.cs-sector.is-open .cs-d-ring {
  transform: none;
  transition: transform 1.1s var(--spring) calc(.32s + var(--ii) * .09s), box-shadow .6s ease, opacity .45s ease;
}
.cs-sector.is-open .cs-d-cta {
  opacity: 1; transform: none;
  transition: opacity .6s ease .6s, transform 1s var(--spring) .6s, background 0.2s, color 0.2s;
}
.cs-sector.is-open .cs-d-cta:active { transform: scale(.98); transition-delay: 0s; }

/* Short phones: tighten the stack so it all fits without scrolling. */
@media (max-height: 700px) {
  .cs-d-item { --ring: 56px; }
  .cs-d-item.is-focus { --ring: 104px; }
  .cs-d-list { gap: 12px; padding: 18px 0; }
  .cs-d-h { font-size: 17px; }
}

/* Landscape / desktop preview: keep the info column phone-width. */
@media (min-width: 720px) {
  .cs-detail { padding-left: max(48px, 8vw); padding-right: max(48px, 8vw); }
  .cs-d-list, .cs-d-cta { max-width: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs *, .cs *::before, .cs *::after {
    transition-duration: .01s !important;
    transition-delay: 0s !important;
    animation-duration: .01s !important;
    animation-delay: 0s !important;
  }
  .cs-bg { transform: none !important; }
}