:root{
  --cream:#F7F1E7;
  --navy:#002E6E;
  --purple:#6C4FCE;
  --purple-light:#EFE8FF;
  --maroon-overlay: linear-gradient(180deg, rgba(20,10,20,0) 35%, rgba(35,15,25,.85) 100%);
  --radius:18px;
  --gap:24px;
}

body{
  font-family: "Poetsen One", sans-serif !important;
}

/* ---------- CARD GRID PAGE DOTS ---------- */
.showcase-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  max-width:1400px;
  /* FIX: "margin:0 auto" restores horizontal centering — padding-top
     alone left the container pinned to the left edge on wide screens */
  margin:0 auto;
  padding-top:42px;
}
.showcase-dots:empty{display:none; padding-top:0;}

.page-dot{
  appearance:none;
  padding:0;
  border:none;
  cursor:pointer;
  width:15px;
  height:15px;
  border-radius:999px;
  background:#DCD7CE;
  transition:width .25s ease, background .25s ease;
}
.page-dot:hover{background:#B9B2A6;}
.page-dot.active{
  width:26px;
  background:var(--navy);
}
.page-dot:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:2px;
}

/* ---------- CAMPUS TABS ---------- */
.campus-tabs{
  display:flex;
  gap:14px;
  max-width:1400px;
  margin:0 auto 32px;
}

.campus-tab{
  appearance:none;
  cursor:pointer;
  padding: 8px 30px;
  border-radius: 999px;
  font-size: 1.4rem;
  font-weight:700;
  font-family:inherit;
  border:1px solid #B253E7;
  background:#fff;
  color:var(--purple);
  transition:background .18s ease, color .18s ease, transform .12s ease;
  font-family: "Rubik", sans-serif;
}
.campus-tab:hover{transform:translateY(-1px);}
.campus-tab:focus-visible{
  outline:3px solid var(--purple);
  outline-offset:2px;
}
.campus-tab.active{
  background: #B253E7;
  color:#fff;
  transform:scale(1.04);
}

@media (max-width:640px){
  .campus-tabs{gap:10px; margin-bottom:22px;}
  .campus-tab{padding:10px 20px; font-size:.9rem;}
}

/* ---------- CARD GRID ---------- */
.showcase-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap);
  max-width:1400px;
  margin:0 auto;
  transition:opacity .2s ease;
}
.showcase-grid.grid-fading{opacity:0;}

.showcase-card{
  position:relative;
  height:520px;
  border-radius:var(--radius);
  overflow:hidden;
  background:#111 center/cover no-repeat;
  box-shadow:0 6px 18px rgba(20,10,20,.12);
  display:flex;
  align-items:flex-end;
  opacity:0;
  transform:translateY(22px) scale(.98);
  transition:opacity .5s cubic-bezier(.22,.68,0,1), transform .5s cubic-bezier(.22,.68,0,1), box-shadow .25s ease;
}
.showcase-card.card-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.showcase-card:hover{
  box-shadow:0 14px 30px rgba(20,10,20,.18);
}

.showcase-card video,
.showcase-card img.card-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.showcase-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--maroon-overlay);
  pointer-events:none;
}

.card-body{
  position:relative;
  z-index:2;
  padding:28px 26px;
  color:#fff;
  width:100%;
}

.card-body h3{
  margin:0 0 16px;
  font-size:1.7rem;
  font-weight:700;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}

.card-btn{
  appearance:none;
  border:1.5px solid var(--purple-light);
  background:rgba(255,255,255,.08);
  color:#fff;
  padding:10px 22px;
  border-radius:999px;
  font-size:.95rem;
  font-weight:600;
  cursor:pointer;
  backdrop-filter:blur(2px);
  transition:background .2s ease, transform .15s ease, color .2s ease;
}
.card-btn:hover{
  background:var(--purple-light);
  color:var(--purple);
  transform:translateY(-1px);
}
.card-btn:focus-visible{
  outline:3px solid var(--purple);
  outline-offset:2px;
}

/* ---------- RESPONSIVE GRID ---------- */
@media (max-width:1024px){
  .showcase-grid{grid-template-columns:1fr 1fr;}
  .showcase-card{height:440px;}
}
@media (max-width:640px){
  body{padding:32px 5vw;}
  .showcase-grid{grid-template-columns:1fr; gap:18px;}
  .showcase-card{height:360px;}
  .card-body h3{font-size:1.4rem;}
}

/* ---------- MODAL ---------- */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,10,25,.55);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:5vh 5vw;
  z-index:1000;
  overflow-y:auto;
}
.modal-overlay.open{display:flex;}

.modal-panel{
  background:#fff;
  width:100%;
  max-width:900px;
  border-radius:24px;
  padding:44px 40px 40px;
  position:relative;
  animation:modalIn .25s ease;
}

@keyframes modalIn{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}

.modal-close{
  position:absolute;
  top:18px;
  right:18px;
  width:38px;
  height:38px;
  border-radius:50%;
  border:none;
  background:var(--purple-light);
  color:var(--purple);
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal-close:hover{background:var(--purple); color:#fff;}

.modal-title{
  margin:0 0 6px;
  color:var(--navy);
  font-size:2.1rem;
}

.modal-tagline{
  margin:10px 0 10px;
  color:#333;
  /* FIX: added a sans-serif fallback in case Rubik fails to load */
  font-family:'Rubik', sans-serif;
  font-size:1.05rem;
  font-style:italic;
  font-weight:500;
}

.modal-description{
  margin:0 0 28px;
  color:#3a3a3a;
  line-height:1.6;
  font-size:1rem;
  max-width:75ch;
  /* FIX: added a sans-serif fallback in case Rubik fails to load */
  font-family:'Rubik', sans-serif;
}

.modal-gallery{
  display:grid;
  /* FIX: restored to 4 columns to match the JS pagination
     (8 images per page = a clean 4×2 grid). 3 columns left an
     uneven 3/3/2 layout and made the 900px rule below dead code. */
  grid-template-columns:repeat(4,1fr);   /* was: repeat(3,1fr) */
  gap:16px;
  margin-top:28px;
  transition:opacity .18s ease;
}
.modal-gallery:empty{margin-top:0;}
.modal-gallery.gallery-fading{opacity:0;}

.modal-gallery figure{
  margin:0;
  border-radius:12px;
  overflow:hidden;
  background:#eee;
  aspect-ratio:4/3;
}
.modal-gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Single-image case: one large full-width banner instead of a small grid cell */
.modal-gallery.single-image{
  display:block;
}
.modal-gallery.single-image figure{
  border-radius:16px;
  aspect-ratio:auto;
}
.modal-gallery.single-image img{
  width:100%;
  height:auto;
  object-fit:cover;
  max-height:520px;
}

@media (max-width:900px){
  .modal-gallery{
    grid-template-columns:repeat(1,1fr);
    display: flex;
  }
}
@media (max-width:640px){
  .modal-panel{padding:34px 20px 28px; border-radius:16px;}
  .modal-title{font-size:1.5rem;}
  .modal-gallery{grid-template-columns:repeat(2,1fr); gap:10px;}
  .modal-gallery.single-image img{max-height:280px;}
}

/* ---------- GALLERY DOT PAGINATION ---------- */
.modal-gallery-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:22px;
}
.modal-gallery-dots:empty{display:none; margin-top:0;}

.gallery-dot{
  appearance:none;
  padding:0;
  border:none;
  cursor:pointer;
  width:15px;
  height:15px;
  border-radius:999px;
  background:#DCD7CE;
  transition:width .25s ease, background .25s ease;
}
.gallery-dot:hover{background:#B9B2A6;}
.gallery-dot.active{
  width:26px;
  background:var(--navy);
}
.gallery-dot:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:2px;
}

/* ---------- HERO VIDEO PLAYER ---------- */
.modal-video-wrap{
  position:relative;
  width:100%;
  border-radius:16px;
  overflow:hidden;
  background:#000;
  aspect-ratio:16/9;
  cursor:pointer;
  display:none; /* toggled on via JS when a card has modal.video */
}
.modal-video-wrap.has-video{display:block;}

.modal-video-wrap video,
.modal-video-wrap .video-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.video-poster{
  transition:opacity .45s ease;
  z-index:2;
}
.modal-video-wrap.is-playing .video-poster{
  opacity:0;
  pointer-events:none;
}

.play-btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(1);
  width:72px;
  height:72px;
  border-radius:50%;
  border:2px solid var(--purple);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
  box-shadow:0 8px 24px rgba(20,10,20,.28);
  transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.play-btn svg{
  width:26px;
  height:26px;
  fill:var(--purple);
  margin-left:4px; /* optical centering for the triangle */
  transition:fill .2s ease;
}
.play-btn:hover{
  transform:translate(-50%,-50%) scale(1.08);
  background:var(--purple);
}
.play-btn:hover svg{fill:#fff;}

.modal-video-wrap.is-playing .play-btn{
  opacity:0;
  transform:translate(-50%,-50%) scale(.7);
  pointer-events:none;
}
/* brief center pulse of the pause icon when the user taps to pause */
.modal-video-wrap.show-pause-flash .play-btn{
  opacity:1;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(1);
  transition:opacity .5s ease .05s, transform .3s cubic-bezier(.34,1.56,.64,1);
}

.mute-btn{
  position:absolute;
  right:16px;
  bottom:16px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  background:rgba(15,10,25,.55);
  backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease .1s, transform .3s ease .1s, background .2s ease;
}
.mute-btn svg{width:18px; height:18px; fill:#fff;}
.modal-video-wrap.is-playing .mute-btn{
  opacity:1;
  transform:translateY(0);
}
.mute-btn:hover{background:var(--purple);}

.modal-video-wrap:focus-visible,
.play-btn:focus-visible,
.mute-btn:focus-visible{
  outline:3px solid var(--purple);
  outline-offset:2px;
}

body.modal-locked{overflow:hidden;}