/* Collections (media, events, testimonial videos) rendered by assets/js/collections.js.
   Overrides the earlier grid rules in sections.css. The grid is a centred flex-wrap so a
   short last row sits in the middle; collections.js sets --cols-d to the desktop column
   count that leaves the fullest last row for the number of items it rendered. */
.collection-grid{--gap:28px;--cols:var(--cols-d,3);display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:var(--gap);margin-top:40px}
.collection-grid>*{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));min-width:0}
.collection-grid>.collection-tabs,.collection-grid>.collection-empty{flex-basis:100%}
.collection-tabs{flex-wrap:wrap}

/* Media / event cards: equal-height cards, footer link pinned to the bottom. */
.collection-card{display:flex;flex-direction:column}
.collection-card>img{flex:none;display:block}
.collection-card>div{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:22px 24px 20px}
.collection-card h3{font-size:clamp(21px,1.75vw,26px);line-height:1.15;margin:0}
.collection-card .lbl+h3{margin-top:10px}
.collection-card h3+p{margin-top:10px;line-height:1.55;color:var(--ink-soft)}
.collection-card .link{margin-top:auto;padding-top:14px}
.collection-card--text>div{padding-block:28px}

/* Testimonial videos: portrait click-to-play cards. */
.collection-grid--video{--gap:24px;--cols:var(--cols-d,5)}
.video-card{display:flex;flex-direction:column;gap:14px}
.video-frame{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:var(--ink);isolation:isolate}
.video-card .video-frame>img,.video-card .video-frame>video,.video-card .video-frame>iframe{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border:0;border-radius:0;display:block;background:var(--ink)}
.video-card .video-frame>img{transition:transform 1.2s var(--ease-out)}
.video-card.is-playing .video-frame>video{object-fit:contain;background:#000}
.video-play{position:absolute;inset:0;z-index:1;display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;cursor:pointer;color:var(--ink);background:transparent}
.video-play-ic{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:rgba(255,253,251,.94);box-shadow:0 12px 30px -10px rgba(0,0,0,.55);transition:transform .5s var(--ease-out),background-color .3s,color .3s}
.video-play-ic svg{width:24px;height:24px;margin-left:3px;fill:currentColor}
.video-play:hover .video-play-ic{transform:scale(1.08);background:var(--green);color:#fff}
.video-card:hover .video-frame>img{transform:scale(1.035)}
.video-play:focus-visible{outline:none}
.video-play:focus-visible .video-play-ic{outline:3px solid var(--green);outline-offset:4px}
.video-meta{padding-inline:2px}
.video-cap{display:flex;align-items:baseline;gap:10px;margin:0}
.video-card .lbl{padding:0}
.video-no{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--green)}
.video-card h3{font-size:18px;line-height:1.3;margin-top:6px;color:var(--ink)}
.video-body{font-size:15px;line-height:1.5;color:var(--ink-soft);margin-top:6px}

@media(max-width:1000px){
  .collection-grid{--cols:2;--gap:22px}
  .collection-grid--video{--cols:3;--gap:20px}
  /* An odd count at two columns: feature the first card across the row instead of orphaning the last. */
  .collection-grid>.collection-card:has(>img):nth-child(1 of .collection-card):nth-last-child(odd of .collection-card){flex-basis:100%;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .collection-grid>.collection-card:has(>img):nth-child(1 of .collection-card):nth-last-child(odd of .collection-card)>img{height:100%;min-height:280px;aspect-ratio:auto}
  .collection-grid>.collection-card:has(>img):nth-child(1 of .collection-card):nth-last-child(odd of .collection-card)>div{justify-content:center;padding:32px}
  .collection-grid>.collection-card:has(>img):nth-child(1 of .collection-card):nth-last-child(odd of .collection-card) .link{margin-top:14px}
  .collection-grid>.collection-card:has(>img):nth-child(1 of .collection-card):nth-last-child(odd of .collection-card) h3{font-size:clamp(28px,3.6vw,38px)}
}
@media(max-width:560px){
  .collection-grid{--cols:1;--gap:18px;margin-top:28px}
  .collection-grid>.collection-card:has(>img):nth-child(1 of .collection-card):nth-last-child(odd of .collection-card){display:flex}
  .collection-grid>.collection-card:has(>img):nth-child(1 of .collection-card):nth-last-child(odd of .collection-card)>img{height:auto;min-height:0;aspect-ratio:4/3}
  .collection-grid>.collection-card:has(>img):nth-child(1 of .collection-card):nth-last-child(odd of .collection-card)>div{padding:22px 24px 20px}
  .collection-grid>.collection-card:has(>img):nth-child(1 of .collection-card):nth-last-child(odd of .collection-card) h3{font-size:21px}
  /* Videos become a swipeable row that bleeds to the screen edges, the next card peeking in. */
  .collection-grid--video{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);margin-inline:calc(-1 * var(--gut));padding:0 var(--gut) 8px;scrollbar-width:none;--gap:14px}
  .collection-grid--video::-webkit-scrollbar{display:none}
  .collection-grid--video>.video-card{flex:0 0 62%;scroll-snap-align:start}
  .collection-grid--video>.collection-empty{flex:1 0 100%}
  .video-play-ic{width:54px;height:54px}
}
@media(prefers-reduced-motion:reduce){.video-card .video-frame>img,.video-play-ic{transition:none}.video-card:hover .video-frame>img{transform:none}}

/* ---- Guidance and Counselling: career-paths explorer (counselling.html, .cx) ----
   Big serif stream tabs (built by collections.js) over a fixed-height, scrolling grid of pill chips.
   Without JS: no tabs, every chip visible in the scroll box. */
.cx{--cx-sci:var(--green);--cx-com:var(--blue);--cx-hum:#D9A43A;--cx-emg:#D0664B;--cx-h:404px;--cx-fade:56px;margin-top:clamp(48px,6vw,88px)}
.cx-lbl{margin-bottom:clamp(14px,1.6vw,22px)}
.cx-tabs{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px clamp(22px,3.2vw,52px);margin-bottom:clamp(20px,2.4vw,32px);border-bottom:1px solid var(--line)}
.cx-tab{position:relative;display:inline-flex;align-items:flex-start;gap:5px;min-height:44px;margin:0 0 -1px;padding:4px 0 14px;border:0;background:none;color:rgba(20,26,46,.34);font:400 clamp(32px,3.5vw,52px)/1 var(--f-serif);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:color 300ms var(--ease-out)}
.cx-tab:hover{color:rgba(20,26,46,.62)}
.cx-tab[aria-selected="true"]{color:var(--ink)}
.cx-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform 420ms var(--ease-out)}
.cx-tab[aria-selected="true"]::after{transform:none}
.cx-tab:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
.cx-tab-n{font:500 12px/1 var(--f-mono);letter-spacing:.04em;color:var(--ink-soft);margin-top:.28em;font-variant-numeric:tabular-nums}
.cx-tab[aria-selected="true"] .cx-tab-n{color:var(--green-dark)}
.cx-tab-d{align-self:center;width:8px;height:8px;border-radius:50%;margin-right:4px;background:var(--c,var(--ink));opacity:.85}
.cx-scroll{position:relative;height:var(--cx-h);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(20,26,46,.18) transparent;padding:4px 2px;
  -webkit-mask:linear-gradient(#000 calc(100% - var(--cx-fade)),transparent);mask:linear-gradient(#000 calc(100% - var(--cx-fade)),transparent)}
.cx-scroll:focus-visible{outline:2px solid var(--blue);outline-offset:6px;border-radius:12px}
/* with JS the fades follow the scroll position: only the edge that has more chips beyond it fades */
.cx.is-live .cx-scroll{-webkit-mask:none;mask:none}
.cx.is-live .cx-scroll.more-b{-webkit-mask:linear-gradient(#000 calc(100% - var(--cx-fade)),transparent);mask:linear-gradient(#000 calc(100% - var(--cx-fade)),transparent)}
.cx.is-live .cx-scroll.more-t{-webkit-mask:linear-gradient(transparent,#000 var(--cx-fade));mask:linear-gradient(transparent,#000 var(--cx-fade))}
.cx.is-live .cx-scroll.more-t.more-b{-webkit-mask:linear-gradient(transparent,#000 var(--cx-fade),#000 calc(100% - var(--cx-fade)),transparent);mask:linear-gradient(transparent,#000 var(--cx-fade),#000 calc(100% - var(--cx-fade)),transparent)}
.cx-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;align-content:start;list-style:none;margin:0;padding:0 0 calc(var(--cx-fade) * .6)}
.cx-list>li{display:flex;align-items:center;gap:12px;min-height:50px;padding:10px 20px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font:500 16px/1.25 var(--f-text);color:var(--ink);min-width:0}
.cx-list>li::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--c,var(--ink-soft))}
.cx-list>li[hidden]{display:none}
.cx [data-s="science"]{--c:var(--cx-sci)}.cx [data-s="commerce"]{--c:var(--cx-com)}.cx [data-s="humanities"]{--c:var(--cx-hum)}.cx [data-s="emerging"]{--c:var(--cx-emg)}
.cx-cap{margin-top:clamp(14px,1.6vw,22px);max-width:62ch;font:italic 400 clamp(19px,1.6vw,23px)/1.35 var(--f-serif);color:var(--ink-soft)}
@media(max-width:1000px){
  .cx{--cx-h:388px}
  /* one row of tabs on tablets: smaller type, and a sideways swipe if a long stream name still doesn't fit */
  .cx-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:0 clamp(20px,2.6vw,28px)}
  .cx-tabs::-webkit-scrollbar{display:none}
  .cx-tabs.more-r{-webkit-mask:linear-gradient(90deg,#000 82%,transparent);mask:linear-gradient(90deg,#000 82%,transparent)}
  .cx-tabs.more-l{-webkit-mask:linear-gradient(90deg,transparent,#000 18%);mask:linear-gradient(90deg,transparent,#000 18%)}
  .cx-tabs.more-l.more-r{-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
  .cx-tab{font-size:clamp(30px,3.9vw,40px)}
  .cx-tab:focus-visible{outline-offset:-2px} /* the swipe row clips anything drawn outside a tab */
  .cx-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:699px){
  .cx{--cx-h:372px;--cx-fade:44px}
  /* phones: tabs bleed to the screen edges and swipe; fades show only where more tabs are hidden */
  .cx-tabs{gap:0 24px;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut)}
  .cx-tab{font-size:32px;padding-bottom:12px}
  .cx-list{grid-template-columns:minmax(0,1fr);gap:7px}
  .cx-list>li{min-height:42px;padding:8px 18px;gap:11px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){.cx-tab,.cx-tab::after{transition:none}}