/* =========================================================
   HOMEPAGE — Event Scroller, Officers Grid & Tiles
   Notes:
   - Performance + UX enhancements for event scroller
   - Officers: CSS Grid (4 across on desktop) with rounded images (no stretch)
   - CSS-only accessibility (focus-visible), no ARIA-in-HTML changes

/* ------------------------------
   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; }

/* Hover lift effect */
#eventCarousel .cardWrapper {
  transition: transform 0.3s ease;
}
#eventCarousel .cardWrapper:hover {
  transform: translateY(-4px);
}

/* 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;
}

/* ------------------------------
   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; }
}


/* Events Area */
.eventBanner {
  background-image: url(https://keelesu.com/assets/site_resources/KeeleSUBannerPattern.png);
  height: 40px; 
  width : -webkit-fill-available;
  display: block;
  background-size: cover; background-repeat: no-repeat;
  margin-top: 25px;
  margin-left: -15px;
  margin-right: -15px;
}

#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; }

.carousel-item {
  width: 95%; vertical-align: top;
  padding: 5px; border-radius: 7px; background: 0 0;
}
.carousel-item img { width: 100%; }

.cardWrapper {
  border: none;
  height : 580px!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;
    /* line-height: 1.3; */
    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: 600px) {
  #eventCarousel .event_item { width: calc(50% - 24px); }
}
@media (min-width: 992px) {
  #eventCarousel .event_item { width: calc(25% - 24px); vertical-align: top; }
  .navTile { height: 6rem; }
}


/* Carousel controls */
.carousel-control-next,
.carousel-control-prev {
  width: 5%; margin: -5%;
}
@media (min-width: 760px) {
  .carousel-inner .active,
  .carousel-inner .active + .carousel-item,
  .carousel-inner .active + .carousel-item + .carousel-item,
  .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
    display: block;
  }
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
    transition: none;
  }
  .cardStyling .event_item { width: calc(33% - 24px); }
}


/* Lower third & sabbs */
#studentsFirst {
  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;
  }
}
@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;
}

#eventCarousel > div.events-scroll-controls.d-flex.justify-content-between.mt-2 > button:nth-child(2) {
    right: 0px;
    top: 200px;
}

#eventCarousel > div.events-scroll-controls.d-flex.justify-content-between.mt-2 > button:nth-child(1) {
    left: 0px;
    top: 200px;
}

#eventCarousel > div.events-scroll-controls.d-flex.justify-content-between.mt-2 > button {
    position: absolute;
    border-radius: 8px;
}

@media (max-width:480px) {

#eventCarousel > div.events-scroll-controls.d-flex.justify-content-between.mt-2 > button {
    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(6,120px);
    gap:16px;
}

.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;
}

.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(-5px);
}

/* 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 3;
}

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

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

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

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

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

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

/* Mobile - CSS Carousel */

@media (max-width:900px){

    .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;
    }

    .parent::-webkit-scrollbar{
        height:8px;
    }

    .parent::-webkit-scrollbar-thumb{
        background:#bdbdbd;
        border-radius:999px;
    }

    .card{
        flex:0 0 85%;
        min-height:240px;
        scroll-snap-align:center;
        scroll-snap-stop:always;

    }

}

/* Reduced motion */

@media(prefers-reduced-motion:reduce){

    .card,
    .animate-card{
        animation:none;
        transition:none;
    }

    .card:hover{
        transform:none;
    }

}

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

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

#eventCarousel .cardWrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px 6px 0px 0px;
}

.parent {
    width: 80vw;
}

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;
        /* align-items: stretch; */
        width: 100vw;
        padding-left: 50px;
        padding-right: 50px;
        align-content: stretch;
    }
    
    .stats-card {
        width: -webkit-fill-available;
        height: 140px;
        padding: 20px;
    }
}