@media (max-width : 768px) { 
   #contentSection > div:nth-child(1) {
    flex-direction: column!important;
 
   }
}
    
    
    .time-entry span {
    font-size : 2em!important;
}

.msl-time-countdown .time-countdown {
    margin: 0px 0px 0px 0px;
}

.box {
    border: 3px solid #2b0e48;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    background: #2b0e48;
    color: white;
    width : fit-content;
    height : 500px!important;
}

.col-50 {
    width : 50%;
    padding: 50px;
}

@media (max-width: 768px) {
  .mob {
    padding: 20px;
}
}

div#eventsArea {
    width: 100%;
}

#eventCarousel .cardWrapper {
    width: 100%;
    max-width: 100%;
}



#mainSection {
    padding-top: 0px !important;
}

.su-card {
    margin-top: 0px;
    position:relative;
    max-width:90%;
    border-radius:26px;
    overflow:hidden;
    padding:4px;
}

.su-card::before {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:
    repeating-linear-gradient(
        90deg,

        #27103e 0 70px,
        #471f6f 70px 140px,
        #02a282 140px 210px,
        #e25e11 210px 280px,
        #cd1463 280px 350px,
        #f2a61f 350px 420px,
        #59a92a 420px 490px
    );

    background-size:490px 100%;
    animation:moveBorder 4s linear infinite;
}

/* Cut out the middle */

.su-card::after{
    content:"";
    position:absolute;
    inset:20px;
    background:white;
    border-radius:22px;
    z-index:2;
}

/*====================================================*/

.content{
    position:relative;
    z-index:3;
    padding:40px;

}

/*====================================================*/

@keyframes moveBorder{

    from{

        background-position:0 0;

    }

    to{

        background-position:490px 0;

    }

}

#contentSection > div.section > p {
    max-width: 485px;
}

:is( .btn, .btn-primary, .award-cert-download, .collapsible, .emp-role h3 a.include-item + a, .emp-role h3 a[title*=Edit], .msl-add-calendar-button, .msl-cand-manifesto, .msl-idea-list-filter-panel input.button, .msl-toolbar ul li a, .navTile, .online-meeting-link, .opportunity-apply a, .pager-next, .public .msl-post-details a.msl-post-eligibility, .role-tools a, .toolbar-links a, .vol-hrs a, .votenow, .vp_form input.button, [id=checkout_progress] li a, div#msl_toolbar ul li a, input.button, input[type=button], input[type=reset], input[type=submit], td input.button, ul[id=add-roles] a, a.award-progress-toggle.button, .award-progress-info .button, .course-cert-download, #ctl00_nonstudentlogin_lnkRegister, #ctl00_nonstudentlogin_lnkForgottenPassword, #ctl00_nonstudentlogin_lnkHelp, #ctl00_idealist_hlAddIdea, ):is(:hover, :focus) {
    background: var(--btn-bg-hover);
    color: var(--btn-fg)!important;
}


.icon-tile-label::after {
    content: "\2192";
    display: block;
    margin-top: 0px;
    font-weight: 600;
    color: #2b0e48;
}

#societyList span.icon-tile-icon {
    background: #2b0e48!important;
    color: #ffffff;
}

#askList span.icon-tile-icon {
    background: #d62078!important;
    color: #ffffff;
}

.accordion-item .accordion-title h2 {
    margin: 0;
    background: none !important;
    color: #ffffff;
    border-bottom: none;
}

div#societyList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.accordion-item .accordion-title {
    cursor: pointer;
    padding: 20px;
    transition: 0.4s;
    border-radius: 5px 5px 0 0;
    background-color: var(--primary-color);
}

.accordion-item .accordion-title.active-title h2, .accordion-item .accordion-title:hover h2, .accordion-item .accordion-title.active-title h2 i, .accordion-item .accordion-title:hover h2 i {
    color: #ffffff !important;
}

.accordion-item .accordion-title.active-title, .accordion-item .accordion-title:hover {
    background-color: #65b22e;
}

@media (max-width : 768px) {
    #officers ul {
    display: grid;
    grid-template-columns: 1fr!important;
    gap: 0px;
    grid-auto-flow: row;
    justify-content: center;
    align-items: center;
    justify-items: center;
    align-content: center;
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr)!important;
}

.venues {
    width: 100% !important;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    margin: none;
}

.col-6 {
    max-width: 100%;
}

}

#eventCarousel > .slider-prev, #eventCarousel > .slider-next {
    border-radius: 12px;
}

a.icon-tile {
    border: 3px solid white;
}

a.icon-tile:hover {
    border: 3px solid black;
}


#eventCarousel .event_item {
    flex-basis: 25%;
    max-width: 25%;
    background: white;
}

div#eventsArea {
    width: stretch;
    overflow : hidden!important;
}

.msl_event_types, .msl_event_tickets {
    display: none;
}

.events-scroll {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

/* =========================================================
   HOMEPAGE — Event Slider, Officers Grid & Tiles
   Notes:
   - Rewritten so the event slider's core layout (horizontal,
     scroll-snap, one-card-at-a-time on mobile) is plain CSS
     targeting MSL's actual markup - NOT something JS has to
     build at runtime. If JS is slow, blocked, or fails, this
     still renders as a working horizontal slider (swipeable
     via native touch scrolling) instead of collapsing into an
     unstyled vertical list. JS (event-widget.js) only adds
     enhancements on top: arrow buttons, dot pagination, and
     autoplay.
   - No third-party slider library (e.g. Swiper) used - Swiper's
     bundle (~70KB JS + ~13KB CSS minified) is heavier than this
     entire hand-written scroller, which works against the goal
     of cutting page weight.
   - Officers: CSS Grid (4 across on desktop) with rounded images (no stretch)
   - CSS-only accessibility (focus-visible), no ARIA-in-HTML changes
   ========================================================= */

/* ------------------------------
   Event Slider: base layout (works with JS OFF)
   MSL renders: #eventCarousel > .msl_eventlist > [inner div] > .event_item...
   Target the inner div directly - no dependence on JS adding a class.
   ------------------------------ */
   

#eventsAreaTitle {
  font-size: 2vw; font-family: 'League Spartan', sans-serif;
  padding: 15px 10% 10px;
}
.event_item { background-color: var(--highlight-color); }
#eventCarousel { padding-bottom: 20px; padding-left: 10vw; padding-right: 10vw; }
.msl_event_description { display: none; overflow: hidden; }

.cardWrapper {
  border: none;
  height : 600px!important;
}
.msl_event_organisation { padding-left: 2%; }
.cardDetails { padding: 2% 5% 0; }
.msl_event_location { display: none; }
#eventCarousel .event_item .msl_event_organisation { line-height: 1.2; }
#eventCarousel .event_item .msl_event_name {
  padding: 20px 10px 0px 10px; font-size: 1.3rem; display: block; overflow: hidden;font-weight: 800; color : #2b0e48;
}
.msl_ticket{float:right;    border-radius: 3px;
    background: var(--primary-color)!important;
    border: 3px;
    color: var(--highlight-color)!important;
    cursor: pointer;
    min-height: 40px;
    padding: 10px;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
    resize: vertical;
    text-transform: capitalize;
    font-family: var(--font-secondary);
    margin:5px;
    font-size:100%;
}


/* Responsive tweaks */
@media (max-width: 600px) {
  #studentsFirst { font-size: 4.2vw; }
  .leader { font-size: 0.6em; display: none; }
  .news-detail { width: 100%; }
}
@media (max-width: 760px) {
  #meetTheTeam { font-size: 5vw; text-align: center; }
  #eventsAreaTitle { font-size: 5vw; }
  .bSection > h3 { margin-top: 50px; }
}
@media (min-width: 992px) {
  .navTile { height: 6rem; }
}

/* Lower third & sabbs */
#studentsFirst, #su-stats {
  display: flex; align-items: center; justify-content: center;
  padding-top: 50px;
}

@media (max-width : 768px) {
#eventCarousel > .slider-prev { left: 0px!important;}
#eventCarousel > .slider-next { right: 0px!important;}
}


#eventCarousel {
  position: relative; /* anchor point for the arrow buttons below */
}

#eventCarousel .msl_eventlist > div {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; /* native momentum + swipe, no JS needed */
}

/* CHANGED: scrollbar hidden entirely (was a visible grey track/thumb before).
   scrollbar-width/-ms-overflow-style hide it in Firefox/older Edge; the
   ::-webkit-scrollbar rule hides it in Chrome/Safari/new Edge. Touch swipe
   and the arrow buttons remain the way to navigate. */
#eventCarousel .msl_eventlist > div,
#eventCarousel .events-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#eventCarousel .msl_eventlist > div::-webkit-scrollbar,
#eventCarousel .events-scroll::-webkit-scrollbar {
  display: none;
}

#eventCarousel .msl_eventlist > div:focus-visible {
  outline: 2px solid var(--secondary-color);
  outline-offset: 2px;
}

/* Once JS runs it adds this class too - harmless duplicate, kept so any
   existing references to .events-scroll elsewhere keep working. */
#eventCarousel .events-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}

#eventCarousel .event_item {
  scroll-snap-align: start;
  flex: 0 0 100%;
  max-width: 100%;
}

/* CHANGED: previously flex-basis: 25% (etc) PLUS gap: 1rem between cards
   added up to MORE than 100% of the container's width - percentages don't
   automatically subtract the gap - which is exactly what was pushing the
   4th card past the right edge and clipping it. These calc() values
   subtract each card's share of the total gap so N cards + (N-1) gaps
   always add up to exactly 100%. */
@media (min-width: 600px) {
  #eventCarousel .event_item { flex-basis: calc(50% - 0.5rem); max-width: calc(50% - 0.5rem); }
}

@media (min-width: 900px) {
  #eventCarousel .event_item { flex-basis: calc(33.333% - 0.67rem); max-width: calc(33.333% - 0.67rem);
  }
}

@media (min-width: 1100px) {
  #eventCarousel .event_item { flex-basis: calc(25% - 0.75rem); max-width: calc(25% - 0.75rem); }
}

/* cardWrapper/.card only exist once JS wraps the <dl> - the raw <dl> is
   already usable/legible on its own if JS hasn't run yet, so no separate
   "unstyled dl" fallback rules are needed here. */
#eventCarousel .cardWrapper { width: 99%; max-width: 520px; }
#eventCarousel .cardWrapper .card { height: 100%; display: flex; flex-direction: column; }

/* CHANGED: images previously left gaps/whitespace on some cards because
   width:100%; height:auto lets each image's own aspect ratio decide its
   height, so a squarer image and a widescreen photo end up different
   heights/shapes next to each other, and any inline whitespace around the
   <img> shows as a sliver of card background. Fixed height + object-fit:
   cover makes every image fill the same frame edge-to-edge and crop
   evenly, regardless of the source photo's shape - and display:block on
   both the wrapping <span> and the <img> removes the inline-whitespace gap. */
#eventCarousel .msl_event_image {
  display: block;
  width: 100%;
  height: 400px;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
}

#eventCarousel .cardWrapper img,
#eventCarousel .msl_event_image img {
  display: block;
  width: 100%;
  height: 400px!important;
  object-fit: cover;
  object-position: center;
  border-radius: 6px 6px 0 0;
}

#eventCarousel .cardWrapper {
  transition: transform 0.3s ease;
}

/* ------------------------------
   Slider arrows - built by JS as direct children of #eventCarousel (which
   is position:relative above), so they sit vertically centered over the
   LEFT/RIGHT EDGES of the card row itself, not in a separate row underneath.
   ------------------------------ */

#eventCarousel > .slider-prev,
#eventCarousel > .slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 12px!important;
  background: var(--primary-color, #2b0e48);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}


#eventCarousel > .slider-prev:disabled,
#eventCarousel > .slider-next:disabled {
  opacity: 0.35;
  cursor: default;
}

#eventCarousel > .slider-prev { left: 50px; }
#eventCarousel > .slider-next { right: 50px; }

/* Reduced motion: no smooth-scroll animation, no autoplay transitions */
@media (prefers-reduced-motion: reduce) {
  #eventCarousel .msl_eventlist > div,
  #eventCarousel .events-scroll {
    scroll-behavior: auto;
  }
}


/* ------------------------------
   Homepage general styling
   ------------------------------ */

.navTile { margin: 0; }
.news_item { background-color: var(--primary-color); }

body {
  background: var(--highlight-color);
  font-family: Lato, sans-serif;
  margin: 0;
  padding: 0;
}

.main .row { margin: 2% 0; }
.News { padding-left: 0; padding-right: 0; margin-bottom: 0; }
.fa-icon { font-size: 2rem; }


/* Banner / News */
.banner .news_image { width: 50%; float: right; }
.banner .news-detail {
  bottom: 0; left: 0; text-align: left;
  color: var(--highlight-color);
  z-index: 2; background-color: var(--primary-color);
  width: 50%; padding: 10px;
}
.banner .news-detail a {
  color: var(--highlight-color);
  text-decoration: none;
  transition: color 0.5s;
}
.banner .news-detail a:hover { color: #eee; }
.banner .news-detail .news-detail-cell {
  width: 100%; text-align: center; height: 100%;
  font-family: 'League Spartan', sans-serif;
  background: var(--primary-color); padding: 7%;
}
.banner .news-detail-cell a { font-size: 2.8vw; }

#scroller .leader a { font-size: 1em; }
#scroller .leader a:hover { color: var(--highlight-color); }

.bx-pager { bottom: 1vw; padding-right: 0; }
#newsButtonText { width: 100%; text-align: center; margin: 0; border-width: 0; }


/* Nav Tiles */
#navTiles { padding: 0; margin: 0; width: 100%; }
.tileRow { margin: 0; }
.tileRow a { width: 100%; display: contents; }

.navTile {
  border: solid 5px var(--highlight-color);
  background: var(--primary-color);
  height: 6rem;
}
.navTile a {
  color: var(--highlight-color);
  display: block;
  height: 100%; width: 100%;
  text-decoration: none;
}
.tileContent { padding: 2%; color: var(--highlight-color); }
.tileTitle { font-size: 1.25vw; }

@media all and (max-width: 992px) {
  .tileTitle { font-size: 2vw; }
  #eventsAreaTitle { font-size: 7vw; }
}
@media all and (max-width: 760px) {
  .navTile { max-height: 5rem; }
  .tileTitle { font-size: 3vw; }
}



#eventsAreaTitle {
  font-size: 2vw; font-family: 'League Spartan', sans-serif;
  padding: 15px 10% 10px;
}
.event_item { background-color: var(--highlight-color); }
#eventCarousel { padding-bottom: 20px; padding-left: 10vw; padding-right: 10vw; }
.msl_event_description { display: none; overflow: hidden; }

.cardWrapper {
  border: none;
  height : 600px!important;
}
.msl_event_organisation { padding-left: 2%; }
.cardDetails { padding: 2% 5% 0; }
.msl_event_location { display: none; }
#eventCarousel .event_item .msl_event_organisation { line-height: 1.2; }
#eventCarousel .event_item .msl_event_name {
  padding: 20px 10px 0px 10px; font-size: 1.3rem; display: block; overflow: hidden;font-weight: 800; color : #2b0e48;
}
.msl_ticket{float:right;    border-radius: 3px;
    background: var(--primary-color)!important;
    border: 3px;
    color: var(--highlight-color)!important;
    cursor: pointer;
    min-height: 40px;
    padding: 10px;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
    resize: vertical;
    text-transform: capitalize;
    font-family: var(--font-secondary);
    margin:5px;
    font-size:100%;
}


/* Responsive tweaks */
@media (max-width: 600px) {
  #studentsFirst { font-size: 4.2vw; }
  .leader { font-size: 0.6em; display: none; }
  .news-detail { width: 100%; }
}
@media (max-width: 760px) {
  #meetTheTeam { font-size: 5vw; text-align: center; }
  #eventsAreaTitle { font-size: 5vw; }
  .bSection > h3 { margin-top: 50px; }
}
@media (min-width: 992px) {
  .navTile { height: 6rem; }
}

/* Lower third & sabbs */
#studentsFirst, #su-stats {
  display: flex; align-items: center; justify-content: center;
  padding-top: 50px;
}

@media all and (min-width: 568px) { #officers { margin-top: 0; } }
.scroller-c { margin-bottom: 20px; }
@media (min-width: 1160px) {
  #lowerThird { margin: auto; width: 80vw; }
  #studentsFirst:after, #studentsFirst:before {
    content: ''; width: 150px; height: 2px;
    background: var(--primary-color); margin: 0 10px;
  }
    #su-stats:after, #su-stats:before {
    content: ''; width: 150px; height: 2px;
    background: var(--primary-color); margin: 0 10px;
  }
  
}

.social-media{text-transform:lowercase!important;}

/* Popup styles */
#popupbox {
  position: fixed; background: rgba(255,255,255,.9);
  width: 100%; height: 100%; top: 0; left: 0;
  z-index: 10000; display: none;
}
#popupbox [id*='lbHide'], #popupbox .closer {
  position: absolute; right: 0; top: 0;
  width: 50px; height: 50px; text-align: center;
  color: var(--accent-color); font-size: 30px;
  padding: 4px 12px; cursor: pointer;
}
.popupbox {
  position: fixed; width: 700px; max-width: 80%;
  height: auto; margin: auto; top: 50%; left: 50%;
  background: #FFF; padding: 40px;
  transform: translate(-50%, -50%);
  border-radius: 20px;
}
.textHere { text-align: center; }
.textHere h3, .textHere span { margin-bottom: 20px; }
.textHere span {
  margin-bottom: 20px; color: #D4136E;
  font-size: 1.4rem; text-align: center;
  display: block; text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
}
.buttonHere {
  display: table; background: #0191b4;
  text-align: center; color: #FFF;
  margin-top: 20px; padding: 10px 30px;
  border-radius: 4px;
}

.news_all {
    display: none!important;
}

    /* aspect-ratio: 1; */
#sliderControl:not(.sliderControls-mini) .slider-dots button {
    width: 14px!important;
    height: 14px!important;
    background: rgb(191 191 191 / 40%);
}

#sliderControl:not(.sliderControls-mini) .slider-dots button[aria-current="true"] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid black;
}

dd.msl_event_time {
    padding : 0px 20px 0px 20px;
}

.btn.btn-group-sm>.btn, .btn.btn-sm {
    padding: 10px !important;
    font-size: 1rem !important;
    width: auto; 
}

a.msl_ticket { display: none; }

.card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    text-align: center;
    padding: 0rem;
    background: #fff;
    border: 6px solid;
    border-radius: 12px;
    transition: transform .25s ease, box-shadow .25s ease;
}


#eventCarousel .cardWrapper:hover {
    transform: translateY(0px);
}

/* ------------------------------
   Officers Section — CSS Grid (4 across on desktop)
   ------------------------------ */

#officers ul {
  display: grid;
  grid-template-columns: 1fr; /* mobile: 1 column */
  gap: 1rem;
  padding: 0;
  margin: 0;
}

/* Neutralize legacy float/clear/width */
#officers ul li {
  float: none !important;
  width: auto !important;
  clear: none !important;
  list-style: none;
  text-align: center;
  min-height: 185px;
  padding: 1%;
  box-sizing: border-box;
}

/* Tablet: 2 columns */
@media (min-width: 600px) {
  #officers ul { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: 4 columns */
@media (min-width: 992px) {
  #officers ul { grid-template-columns: repeat(3, 1fr); }
}

/* Officer images — keep original rounded corners, prevent vertical stretch */
/* Background-based pattern */
#officers .sabbImage {
  width: 100%;
  max-width: 260px;             /* ensures 4-up looks balanced */
  margin: 0 auto;
  aspect-ratio: 1 / 1;          /* square container */
  border-radius: 50% 50% 50% 0; /* your original shape */
  background-size: cover !important;      /* fill without distortion */
  background-position: center !important; /* center subject */
  background-repeat: no-repeat !important;

  /* Remove old ratio hacks if present */
  padding-bottom: 0 !important;
  height: auto !important;
}

/* Img-based pattern (if sabbImage contains an <img>) */
#officers .sabbImage { overflow: hidden; } /* clip img to rounded corners */
#officers .sabbImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* no vertical stretch */
  object-position: center;
  display: block;
}

/* Scale a bit smaller below desktop */
@media (max-width: 992px) { #officers .sabbImage { max-width: 220px; } }
@media (max-width: 768px) { #officers .sabbImage { max-width: 180px; } }

/* Officer titles/labels — remove any dark/purple background chips locally */
#officers .msl-imagenav-title,
#officers .msl-imagenav-description,
#officers .sabbs_description,
#officers .msl_event_name {
  background: transparent !important;
  color: var(--accent-color);
}

/* Title spacing/weight */
#officers .msl-imagenav-title {
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
}

/* ------------------------------
   Homepage general styling
   ------------------------------ */

.navTile { margin: 0; }
.news_item { background-color: var(--primary-color); }

body {
  background: var(--highlight-color);
  font-family: Lato, sans-serif;
  margin: 0;
  padding: 0;
}

.main .row { margin: 2% 0; }
.News { padding-left: 0; padding-right: 0; margin-bottom: 0; }
.fa-icon { font-size: 2rem; }


/* Banner / News */
.banner .news_image { width: 50%; float: right; }
.banner .news-detail {
  bottom: 0; left: 0; text-align: left;
  color: var(--highlight-color);
  z-index: 2; background-color: var(--primary-color);
  width: 50%; padding: 10px;
}
.banner .news-detail a {
  color: var(--highlight-color);
  text-decoration: none;
  transition: color 0.5s;
}
.banner .news-detail a:hover { color: #eee; }
.banner .news-detail .news-detail-cell {
  width: 100%; text-align: center; height: 100%;
  font-family: 'League Spartan', sans-serif;
  background: var(--primary-color); padding: 7%;
}
.banner .news-detail-cell a { font-size: 2.8vw; }

#scroller .leader a { font-size: 1em; }
#scroller .leader a:hover { color: var(--highlight-color); }

.bx-pager { bottom: 1vw; padding-right: 0; }
#newsButtonText { width: 100%; text-align: center; margin: 0; border-width: 0; }


/* Nav Tiles */
#navTiles { padding: 0; margin: 0; width: 100%; }
.tileRow { margin: 0; }
.tileRow a { width: 100%; display: contents; }

.navTile {
  border: solid 5px var(--highlight-color);
  background: var(--primary-color);
  height: 6rem;
}
.navTile a {
  color: var(--highlight-color);
  display: block;
  height: 100%; width: 100%;
  text-decoration: none;
}
.tileContent { padding: 2%; color: var(--highlight-color); }
.tileTitle { font-size: 1.25vw; }

@media all and (max-width: 992px) {
  .tileTitle { font-size: 2vw; }
  #eventsAreaTitle { font-size: 7vw; }
}
@media all and (max-width: 760px) {
  .navTile { max-height: 5rem; }
  .tileTitle { font-size: 3vw; }
}

/* Lower third & sabbs */
#studentsFirst, #su-stats {
  display: flex; align-items: center; justify-content: center;
  /*text-transform: uppercase;*/ padding-top: 50px;
}
#meetTheTeam { font-size: 1.7rem; }
#officers { margin-top: 4px; }
@media all and (min-width: 568px) { #officers { margin-top: 0; } }
.scroller-c { margin-bottom: 20px; }
@media (min-width: 1160px) {
  #lowerThird { margin: auto; width: 80vw; }
  #studentsFirst:after, #studentsFirst:before {
    content: ''; width: 150px; height: 2px;
    background: var(--primary-color); margin: 0 10px;
  }
    #su-stats:after, #su-stats:before {
    content: ''; width: 150px; height: 2px;
    background: var(--primary-color); margin: 0 10px;
  }
  
}
@media (min-width: 780px) {
  #officers ul li:nth-child(3n+1),
  #officers ul li:nth-child(2n+1) { clear: none; }
}

.social-media{text-transform:lowercase!important;}

/* Popup styles */
#popupbox {
  position: fixed; background: rgba(255,255,255,.9);
  width: 100%; height: 100%; top: 0; left: 0;
  z-index: 10000; display: none;
}
#popupbox [id*='lbHide'], #popupbox .closer {
  position: absolute; right: 0; top: 0;
  width: 50px; height: 50px; text-align: center;
  color: var(--accent-color); font-size: 30px;
  padding: 4px 12px; cursor: pointer;
}
.popupbox {
  position: fixed; width: 700px; max-width: 80%;
  height: auto; margin: auto; top: 50%; left: 50%;
  background: #FFF; padding: 40px;
  transform: translate(-50%, -50%);
  border-radius: 20px;
}
.textHere { text-align: center; }
.textHere h3, .textHere span { margin-bottom: 20px; }
.textHere span {
  margin-bottom: 20px; color: #D4136E;
  font-size: 1.4rem; text-align: center;
  display: block; text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
}
.buttonHere {
  display: table; background: #0191b4;
  text-align: center; color: #FFF;
  margin-top: 20px; padding: 10px 30px;
  border-radius: 4px;
}

/* ------------------------------
   HOME-ONLY: Image hover control
   ------------------------------ */
  
  :root{
    --card-bg:#2b0e48;
    --card-hover:#65b22e;
    --text:#ffffff;
    --focus:#ffcc00;
}

.tile-navigation{
    margin:0 auto;
    padding:0px;
}

.tile-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:10px;
    list-style:none;
    margin:0;
    padding:0;
}

@media (max-width:1024px){
    .tile-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media (max-width:768px){
    .tile-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:480px){
    .tile-grid{
        grid-template-columns:repeat(1,1fr);
    }
    
    a.tile-link {
    aspect-ratio: 3 / 1;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 1rem;
    align-content: flex-start;
}

.tile-title {
    font-size: 1.6rem!important;
}
    
}

.tile-link {
    aspect-ratio:2/1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:var(--card-bg);
    color:var(--text);
    text-decoration:none;
    text-align:center;
    border-radius:8px;
    padding:1.5rem;
    transition:
        background-color .25s ease,
}

.tile-link:hover{
    background:var(--card-hover);
    transform:translateY(-4px);
    text-decoration : none!important;
}

.tile-link:focus,
.tile-link:focus-visible{
    outline:4px solid var(--focus);
    outline-offset:4px;
    background:var(--card-hover);
}

.tile-icon {
    font-size:3rem;
    margin-bottom:1rem;
    color:#ffffff;
}

.tile-title {
    font-size: 1.2rem;
    font-weight: normal;
    line-height: 1.4;
}

.news_all {
    display: none!important;
}

ul.social-links {
    list-style: none;
    margin: 0px;
    padding: 0px;
    font-size: 1.5em;
    gap : 20px;
    font-weight: 900;
}

#announcements > div > div > ul > li > a {
    color: #2b0e48!important;
        display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

.social-links i {
    font-size: 32px!important;
    font-weight : 900;
    width : 50px!important;
}
    /* aspect-ratio: 1; */
#sliderControl:not(.sliderControls-mini) .slider-dots button {
    width: 14px!important;
    height: 14px!important;
    background: rgb(191 191 191 / 40%);
}

#sliderControl:not(.sliderControls-mini) .slider-dots button[aria-current="true"] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid black;
}

dd.msl_event_time {
    padding : 0px 20px 0px 20px;
}

.btn.btn-group-sm>.btn, .btn.btn-sm {
    padding: 10px !important;
    font-size: 1rem !important;
    width: auto; 
}

a.msl_ticket { display: none; }

 
.parent {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    grid-template-rows:repeat(4);
    gap:16px;
    width: 80vw;
}

.stats-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0rem;
    background: #fff;
    border: 6px solid;
    border-radius: 12px;
    transition: transform .25s ease, box-shadow .25s ease;
    flex-wrap: nowrap;
    height : 170px;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    text-align: center;
    padding: 0rem;
    background: #fff;
    border: 6px solid;
    border-radius: 12px;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Typography */

.card h2 {
    margin:0 0 12px;
    font-size:clamp(2rem,4vw,4rem);
    line-height:1;
}

.card p {
    margin:0;
    font-size:clamp(1rem,2vw,2rem);
    line-height:1.4;
}


/* Plus */

.plus {
    font-size:1em;
    font-weight:900;
    margin-left:5px;
}


/* Colours */

.card-1{
    border-color:#27103e;
    color:#27103e;
}

.card-2{
    border-color:#e25e11;
    color:#27103e;
}

.card-3{
    border-color:#02a282;
    color:#27103e;
}

.card-4{
    border-color:#cd1463;
    color:#27103e;
}

.card-5{
    border-color:#f2a61f;
    color:#27103e;
}

.card-6{
    border-color:#471f6f;
    color:#27103e;
}

.card-7{
    border-color:#59a92a;
    color:#27103e;
}

/* Hover */
.card:hover{
    transform:translateY(0px);
    border: 6px solid #59a92a!important;
}

/* Entrance animation */
@keyframes scale-up-bl{

    0%{
        transform:scale(.85);
        opacity:0;
    }

    100%{
        transform:scale(1);
        opacity:1;
    }

}

.animate-card{
    animation:scale-up-bl .45s cubic-bezier(.390,.575,.565,1) both;
}

/* Stagger */

.div1{animation-delay:.05s;}
.div5{animation-delay:.1s;}
.div3{animation-delay:.15s;}
.div4{animation-delay:.2s;}
.div2{animation-delay:.25s;}
.div6{animation-delay:.3s;}
.div7{animation-delay:.35s;}

/* Grid */

.div1 {
    grid-column: 1;
    grid-row: 2 / span 2;
}

.div2 {
    grid-column: 4;
    grid-row: 1 / span 2;
}

.div3 {
    grid-column: 2;
    grid-row: 3 / span 2;
}

.div4 {
    grid-column: 3;
    grid-row: 2 / span 2;
}

.div5 {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.div6 {
    grid-column: 4;
    grid-row: 3 / span 2;
}

.div7 {
    grid-column: 5;
    grid-row: 2 / span 2;
}


@media (hover: hover) and (pointer: fine) {
    a img:hover {
        transform: scale(1.0);
    }
}

#eventCarousel .cardWrapper:hover {
    transform: translateY(0px);
}

section.su-stats {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

h2#su-stats {
    padding-bottom: 50px;
    padding-top: 50px;
}


section.su-stats .h2 {
    font-size: 2.2rem;
}

h2.stat-no {
    font-size: 2.2em;
}

@media (max-width: 900px) {
    
    h2#su-stats {
    padding-bottom: 0px;
    padding-top: 50px;
}
    
    .parent {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 12px;
        scroll-snap-type: x mandatory;
        scroll-padding: 16px;
        -webkit-overflow-scrolling: touch;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        width: 100vw;
        padding-left: 50px;
        padding-right: 50px;
        align-content: stretch;
    }
    
    .stats-card {
        width: -webkit-fill-available;
        height: 140px;
        padding: 20px;
    }
}

#eventsAreaTitle {
  font-size: 2vw; font-family: 'League Spartan', sans-serif;
  padding: 15px 10% 10px;
}
.event_item { background-color: var(--highlight-color); }
#eventCarousel { padding-bottom: 20px; padding-left: 10vw; padding-right: 10vw; }
.msl_event_description { display: none; overflow: hidden; }

.cardWrapper {
  border: none;
  height : 600px!important;
}

.msl_event_organisation { padding-left: 2%; }
.cardDetails { padding: 2% 5% 0; }
.msl_event_location { display: none; }
#eventCarousel .event_item .msl_event_organisation { line-height: 1.2; }
#eventCarousel .event_item .msl_event_name {
  padding: 20px 10px 0px 10px; font-size: 1.3rem; display: block; overflow: hidden;font-weight: 800; color : #2b0e48;
}
.msl_ticket{float:right;    border-radius: 3px;
    background: var(--primary-color)!important;
    border: 3px;
    color: var(--highlight-color)!important;
    cursor: pointer;
    min-height: 40px;
    padding: 10px;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
    resize: vertical;
    text-transform: capitalize;
    font-family: var(--font-secondary);
    margin:5px;
    font-size:100%;
}


/* Responsive tweaks */
@media (max-width: 600px) {
  #studentsFirst { font-size: 4.2vw; }
  .leader { font-size: 0.6em; display: none; }
  .news-detail { width: 100%; }
}
@media (max-width: 760px) {
  #meetTheTeam { font-size: 5vw; text-align: center; }
  #eventsAreaTitle { font-size: 5vw; }
  .bSection > h3 { margin-top: 50px; }
}
@media (min-width: 992px) {
  .navTile { height: 6rem; }
}

/* ------------------------------
   Event Slider: base layout (works with JS OFF)
   MSL renders: #eventCarousel > .msl_eventlist > [inner div] > .event_item...
   Target the inner div directly - no dependence on JS adding a class.
   ------------------------------ */
@media (max-width : 768px) {
#eventCarousel > .slider-prev { left: 0px!important;}
#eventCarousel > .slider-next { right: 0px!important;}
}


#eventCarousel {
  position: relative; /* anchor point for the arrow buttons below */
}

#eventCarousel .msl_eventlist > div {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; /* native momentum + swipe, no JS needed */
}

/* CHANGED: scrollbar hidden entirely (was a visible grey track/thumb before).
   scrollbar-width/-ms-overflow-style hide it in Firefox/older Edge; the
   ::-webkit-scrollbar rule hides it in Chrome/Safari/new Edge. Touch swipe
   and the arrow buttons remain the way to navigate. */
#eventCarousel .msl_eventlist > div,
#eventCarousel .events-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#eventCarousel .msl_eventlist > div::-webkit-scrollbar,
#eventCarousel .events-scroll::-webkit-scrollbar {
  display: none;
}

#eventCarousel .msl_eventlist > div:focus-visible {
  outline: 2px solid var(--secondary-color);
  outline-offset: 2px;
}

/* Once JS runs it adds this class too - harmless duplicate, kept so any
   existing references to .events-scroll elsewhere keep working. */
#eventCarousel .events-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}

#eventCarousel .event_item {
  scroll-snap-align: start;
  flex: 0 0 100%;
  max-width: 100%;
}

/* CHANGED: previously flex-basis: 25% (etc) PLUS gap: 1rem between cards
   added up to MORE than 100% of the container's width - percentages don't
   automatically subtract the gap - which is exactly what was pushing the
   4th card past the right edge and clipping it. These calc() values
   subtract each card's share of the total gap so N cards + (N-1) gaps
   always add up to exactly 100%. */
@media (min-width: 600px) {
  #eventCarousel .event_item { flex-basis: calc(50% - 0.5rem); max-width: calc(50% - 0.5rem); }
}

@media (min-width: 900px) {
  #eventCarousel .event_item { flex-basis: calc(33.333% - 0.67rem); max-width: calc(33.333% - 0.67rem);
  }
}

@media (min-width: 1100px) {
  #eventCarousel .event_item { flex-basis: calc(25% - 0.75rem); max-width: calc(25% - 0.75rem); }
}

/* cardWrapper/.card only exist once JS wraps the <dl> - the raw <dl> is
   already usable/legible on its own if JS hasn't run yet, so no separate
   "unstyled dl" fallback rules are needed here. */
#eventCarousel .cardWrapper { width: 99%; max-width: 520px; }
#eventCarousel .cardWrapper .card { height: 100%; display: flex; flex-direction: column; }

/* CHANGED: images previously left gaps/whitespace on some cards because
   width:100%; height:auto lets each image's own aspect ratio decide its
   height, so a squarer image and a widescreen photo end up different
   heights/shapes next to each other, and any inline whitespace around the
   <img> shows as a sliver of card background. Fixed height + object-fit:
   cover makes every image fill the same frame edge-to-edge and crop
   evenly, regardless of the source photo's shape - and display:block on
   both the wrapping <span> and the <img> removes the inline-whitespace gap. */
#eventCarousel .msl_event_image {
  display: block;
  width: 100%;
  height: 400px;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
}

#eventCarousel .cardWrapper img,
#eventCarousel .msl_event_image img {
  display: block;
  width: 100%;
  height: 400px!important;
  object-fit: cover;
  object-position: center;
  border-radius: 6px 6px 0 0;
}

#eventCarousel .cardWrapper {
  transition: transform 0.3s ease;
}

/* ------------------------------
   Slider arrows - built by JS as direct children of #eventCarousel (which
   is position:relative above), so they sit vertically centered over the
   LEFT/RIGHT EDGES of the card row itself, not in a separate row underneath.
   ------------------------------ */

#eventCarousel > .slider-prev,
#eventCarousel > .slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--primary-color, #2b0e48);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}


#eventCarousel > .slider-prev:disabled,
#eventCarousel > .slider-next:disabled {
  opacity: 0.35;
  cursor: default;
}

#eventCarousel > .slider-prev { left: 50px; }
#eventCarousel > .slider-next { right: 50px; }

/* Reduced motion: no smooth-scroll animation, no autoplay transitions */
@media (prefers-reduced-motion: reduce) {
  #eventCarousel .msl_eventlist > div,
  #eventCarousel .events-scroll {
    scroll-behavior: auto;
  }
}


#contentSection > div.section > p:nth-child(5) > a {
    margin-bottom: 50px;
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin: 0rem 0;
    padding: 0;
    list-style: none;
    width: 80% !important;
    padding-bottom: 50px;
}

.icon-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #2b0e48;
    color: #ffffff;
    font-size: 1.75rem;
    padding: 30px;
}

.icon-tile-label::after {
    font-size: xx-large;
    padding: 0px;
}

.fa-brands, fab {
    color: #2b0e48;
}

/* === General Link Styles === */
a, a:hover {
  color: #2661bf;
}
a:hover {
  color: #2661bf!important;
}

.button2 {
    background: var(--secondary-color) !important;
    color: white;
    border: none;
}

/* === Navigation Buttons === */
.nav button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid #aaa;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* === Material Icons === */
.material-icons {
  padding: 10px;
  background: #fff;
  font-size: 50px;
  cursor: pointer;
}

/* === Text and Event Styles === */
.textPrison {
  width: 90%;
}

.eventText {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
  background-color: #ffffffc2;
  font-family: 'Lato';
  color: #000;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* === Body and Section Layout === */
body {
  background-color: #ffffff;
}

.section {
    padding: 50px 0 30px;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    width: 100%;
}

/* === Welcome and Congrats Section === */
#welcomePic {
  width: 250px;
}

#congrats {
  width: 50%;
  display: flex;
  justify-content: center;
}

#congrats h1 {
  font-size: 2.5vw;
  color: #2b0e48;
}

/* === Headings === */
h2, h3 {
  color: #2b0e48;
}
h2 {
  padding: 5px;
  font-size: 40px;
  margin: 10px 0;
}
h3 {
  line-height: 1.4;
  max-width: 60vw;
}

/* === Content Sections === */
.subHead {
  width: 70%;
}
#mainSection {
  color: #2b0e48;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5px;
}
#contentSection {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#contentSection p {
  width: 80%;
}
#askList {
  width: 70%;
}

.sectionHead,
#mainSection p {
  width: 80%;
}

.intro {
  font-size: 1.6rem;
}

/* === Banner === */
.bannerWrap {
  width: 100%;
  height: 20vw;
}
.banner {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* === White Section === */
body {
  background-color: #fff;
  background-image: url(/pageassets/freshers-2026/KeeleSUBannerPattern.png), (url/pageassets/freshers-2026/KeeleSUBannerPattern.png);
  background-repeat: no-repeat;
  background-position: top left, bottom right;
  background-size: 130px;
  width: 100%;
}
.whiteSection h2 {
  color: #22004d;
}
.whiteSection p {
  color: #292b2c;
}

.teamLeaf h3 {
  margin-bottom: 0px;
  margin-top: 20px;
}

.xpTile {
  background: #e6dfe6;
  border-radius: 4px;
  padding-bottom: 60%;
  display: flex;
  justify-content: center;
  background-size: cover !important;
}
.tileText {
  top: 40%;
  text-align: center;
  position: absolute;
  color: #fff;
  font-family: 'LeagueSpartan';
  background: #00000045;
  padding: 10px;
}
.xpWrap {
  margin-top: 20px;
}
.xpTile:hover {
  filter: brightness(70%);
  transition: all 0.5s ease;
}

/* === FAQ Section === */
#faqSection {
  width: 85%;
}

.accContent p {
  width: 100% !important;
}

/* === Officers Section === */

#officers {
  margin-top: 0;
  width: 80%;
}

#officers ul {
    display: grid;
    overflow: hidden;
    padding: 0;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px;
}

#officers ul li {
    float: left;
    width: 80% !important;
    list-style-type: none;
    text-align: center;
    display: block;
    padding: 20px;
}

#officers ul li:nth-child(odd) {
  clear: both;
}
#officers .msl-imagenav-title {
  float: left;
  display: block;
  width: 100%;
  background-color : #fff;
}

/* === Sabbatical Images === */
.sabbImage {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  margin: 1.66%;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  border-radius: 50% 50% 50% 0;
}

.sabbs_description {
  text-align: left;
}

/* === Misc === */
.venues {
  width: 100% !important;
}
.eventlist_day h4 {
  display: none;
}
.socials ul li a:first-child {
  width: 50px !important;
  font-size: 40px !important;
}

/* === Responsive Media Queries === */
@media all and (max-width: 720px) {
  #contentSection {
    max-width: 100%;
  }
  #congrats {
    width: 100%;
  }
  #contentSection p {
    max-width: 85%;
  }
  #contentSection p:not(.intro) {
    width: 100%;
  }
  .bannerWrap {
    height: 30vw !important;
  }
  h2 {
    font-size: 6vw;
  }
  #congrats h1 {
    font-size: 7vw;
    max-width: 85%;
    color: #2b0e48
  }

  .subHead {
    width: 85%;
  }
  .section {
    background-image: none;
  }
}

@media all and (min-width: 400px) {
  #officers ul li {
    width: 50%;
  }
  /*#officers ul li:nth-child(odd) {
    clear: none;
  }*/
}

@media all and (min-width: 568px) {
  #officers {
    margin-top: 0;
  }
}

@media all and (min-width: 780px) {
  #officers ul li {
    width: 25%;
  }
  #officers ul li:nth-child(3n+1),
  #officers ul li:nth-child(odd) {
    clear: none;
  }
  #welcomePic {
    margin-top: 7rem;
  }
}

@media all and (min-width: 1200px) {
  .scroller-c {
    margin-bottom: 0;
  }
}
@media (min-width: 998px) {
  #ents .event_item {
    width: 25%;
  }
}


#sociallinks ul {
    display: flex;
    list-style: none;
    justify-content: center;
    flex-wrap: wrap;
    gap : 10px;
}

#mainSection > i.fa-brands.fa-x-twitter, 
#mainSection > i.fa-brands.fa-facebook, 
#mainSection > i.fa-brands.fa-instagram, 
#mainSection > i.fa-brands.fa-youtube, 
#mainSection > i.fa-brands.fa-linkedin, 
#mainSection > i.fa-brands.fa-tiktok,
#mainSection > i.fa-brands.fa-linktree {
    color: #2b0e48 !important;
}
 
#mainSection > .fa-brands, fab {
    color: #2b0e48;
    font-size : 32px;
}

@media (min-width: 768px) {
    .col-md-2 {
        flex: 0 0 33.33%;
        max-width: 100%;
    }
}

.venues {
    width: 80% !important;
}

.teamLeaf img {
    border-radius: 50% 50% 50% 0;
    width: 260px!important;
    height: 260px!important;
    aspect-ratio: 1!important;
}

#ents .event_item {
    border: none;
    gap: 20px;
    margin: 10px;
    width: 31%;
}

/* ------------------------------
   Event Carousel: Scroller Track
   ------------------------------ */

#eventCarousel .events-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .5rem;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  will-change: scroll-position;
}

#eventCarousel .event_item {
  scroll-snap-align: start;
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 576px) {
  #eventCarousel .event_item { flex-basis: 50%; max-width: 50%; }
}
@media (min-width: 768px) {
  #eventCarousel .event_item { flex-basis: 33.3333%; max-width: 33.3333%; }
}
@media (min-width: 992px) {
  #eventCarousel .event_item { flex-basis: 25%; max-width: 25%; }
}

#eventCarousel .cardWrapper { width: 99%; max-width: 520px; }
#eventCarousel .cardWrapper .card { height: 100%; display: flex; flex-direction: column; }
#eventCarousel .cardWrapper img { width: 100%; height: auto; display: block; border-radius: 6px 6px 0 0; }

/* Hover lift effect */
#eventCarousel .cardWrapper {
  transition: transform 0.3s ease;
}

/* Scrollbar styling */
#eventCarousel .events-scroll::-webkit-scrollbar { height: .5rem; }
#eventCarousel .events-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.25);
  border-radius: .5rem;
}
#eventCarousel .events-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.25) transparent;
}

/* Focus-visible for keyboard users */
#eventCarousel .events-scroll:focus-visible {
  outline: 2px solid var(--secondary-color);
  outline-offset: 2px;
}