/* ==============================
   FBK | MoST | Digital Society
   Custom CSS for modern Jekyll theme
   ============================== */

/*NEWS*/

#news .most-section__block {
  margin-bottom: 2rem;
  padding: 1rem;
  border-bottom: 1px solid #ccc;
}

#news .most-section__block h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

#news .most-section__block p {
  margin-bottom: 0.5rem;
}

#events .most-section__block {
  margin-bottom: 2rem;
  padding: 1rem;
  border-bottom: 1px solid #ccc;
}

#events .most-section__block h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

#events .most-section__block p {
  margin-bottom: 0.5rem;
}

.past-news-toggle {
  background-color: var(--fbk-blue);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 500;
  border-radius: 4px;
  max-width: 1400px;
  width: 100%;
  margin-top: 1em;
}

.past-news-toggle:hover {
  background-color: var(--fbk-dark-blue);
}

.past-news-list .most-section__block {
  border-bottom: 1px solid #ccc;
  padding: 0.5rem 0;
}

.most-section:nth-of-type(odd) .past-news-toggle {
  background-color: white;
  color: var(--fbk-dark-blue);
}

/* Optional: hover effect */
.most-section:nth-of-type(odd) .past-news-toggle:hover {
  background-color: var(--fbk-dark-blue);
  color: white;
}

.news-p {
  max-width: 1400px;
  text-align: left;
}

.calendar-container iframe {
  width: 800px;
  height: 600px;
  border: none;
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .calendar-container iframe {
    width: 100%;  }
}

/* SLIDESHOW */
.slideshow-container {
  position: relative;
  width: 1000px;
  /* This enforces the container size/ratio. 
     You can change 10/4 to 16/9 if you prefer a standard video look */
  aspect-ratio: 10 / 4; 
  overflow: hidden; /* Ensures the blurred background doesn't spill out */
  background-color: #000; /* Fallback color */
}

.mySlides {
  display: none;
  width: 100%;
  height: 100%; /* Force slide to fill container */
  position: relative;
  justify-content: center;
  align-items: center;
}

/* 1. The Blurred Background */
.slide-blur-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover; /* Stretches to fill */
  filter: blur(20px); /* Adjust blur intensity here */
  transform: scale(1.1); /* Slight zoom to hide white edges caused by blur */
  z-index: 1;
  opacity: 0.6; /* Darkens the background slightly for contrast */
}

/* 2. The Foreground Image */
.slide-main-img {
  position: relative;
  z-index: 2; /* Sits on top of blur */
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* CRITICAL: Ensures image is never cropped */
}

/* Caption (Updated z-index) */
.slide-caption {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: rgba(0,0,0,0.6); /* Slightly darker for better readability */
  color: white;
  padding: 1rem;
  border-radius: 4px;
  max-width: 90%;
  font-size: 1rem;
  line-height: 1.3;
  z-index: 3; /* Must be higher than image */
}

/* Keep your existing Responsive rules for height */
@media (max-width: 768px) {
  .slideshow-container {
    width: 100;
    aspect-ratio: 10 / 4; /* Optional: reset aspect ratio on mobile if desired */
  }
}

@media (max-width: 576px) {
  .slideshow-container {
    width: 100%;
    aspect-ratio: 10 /4;
  }
}

/* Arrows */
.prev-slide, .next-slide {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 2rem;
  cursor: pointer;
  border-radius: 4px;
  z-index: 10;
}

/* Use pseudo-elements for arrows */
.prev-slide::after, .next-slide::after {
  content: '';
  display: inline-block;
  border: solid white;
  border-width: 0 3px 3px 0;
  padding: 6px;
}

.prev-slide::after {
  transform: rotate(135deg);
}

.next-slide::after {
  transform: rotate(-45deg);
}

/* Optional hover effect */
.prev-slide:hover, .next-slide:hover {
  background-color: rgba(0,0,0,0.8);
}

.prev-slide { left: 1rem; }
.next-slide { right: 1rem; }


/* Dots */
.dots-container {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  margin-bottom: 2rem;
  width: 100%;
  flex-wrap: wrap;
}

.dots-container .dot {
  height: 15px;
  width: 15px;
  margin: 4px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dots-container .dot.active {
  background-color: #717171;
}

/* ---------- Responsive adjustments ---------- */
@media (max-width: 991px) {
  .slide-caption {
    font-size: 0.9rem;
    padding: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    max-width: 95%;
  }

  .prev, .next {
    font-size: 1.5rem;
    padding: 0.4rem 0.8rem;
  }

  .dots-container .dot {
    height: 12px;
    width: 12px;
    margin: 3px;
  }
}

@media (max-width: 576px) {
  .slide-caption {
    font-size: 0.8rem;
    padding: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
  }

  .prev, .next {
    font-size: 1.2rem;
    padding: 0.3rem 0.6rem;
  }

  .dots-container .dot {
    height: 10px;
    width: 10px;
    margin: 2px;
  }
}

/* Table */

table {
  max-width: 1400px;
  border-collapse: collapse;
  font-family: sans-serif;
  margin-top: 2rem;
}

/* Cell padding: vertical + horizontal */
th, td {
  padding: 12px 16px; /* 12px top/bottom, 16px left/right */
  text-align: left;
}

/* Header background with 30% opacity */
thead th {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Even rows background with 15% opacity */
tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Optional: add subtle borders for readability */
th, td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== override for odd sections ===== */
.most-section:nth-of-type(even) table th,
.most-section:nth-of-type(even) table td {
  border-bottom: 1px solid rgba(0, 85, 184, 0.3); /* white with opacity */
}

.most-section:nth-of-type(even) table thead th {
  background-color: rgba(0, 85, 184, 0.15); /* softer white for header */
}

.most-section:nth-of-type(even) table tbody tr:nth-child(even) {
  background-color: rgba(0, 85, 184, 0.1); /* subtle even-row highlight */
}