/* --- Import Font Styles --- */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Barlow:wght@400;600;700&display=swap");

/* --- Root Variables --- */
:root {
  --c-pink: #ff0062;
  --c-purple: #8d17a2;
  --c-purple-500: rgba(44, 5, 51, 0.8);
  --c-beige: #f9f9ef;
  --c-yellow: #f6e353;

  --c-title: #8d17a2;
  --c-overlay: #8cc8ff;

  --ter-fontfam: "Inter", sans-serif;
  --sec-fontfam: "DM Sans", sans-serif;
  --pri-fontfam: "Barlow", sans-serif;

  --fontsize-h2: 10rem;
  --fontsize-h2-sec: 6rem;

  --fontsize-800: 4rem;
  --fontsize-750: 3.5rem;
  --fontsize-700: 3rem;
  --fontsize-650: 2.5rem;
  --fontsize-600: 2rem;
  --fontsize-500: 1.5rem;
  --fontsize-450: 1.2rem;
  --fontsize-410: 1.1rem;
  --fontsize-400: 1rem;
  --fontsize-350: 0.8rem;
  --fontsize-300: 0.6rem;

  /* New Variables for Courses Section */
  --active-bg: #f9f9ef; /* Background color for active content */
  --content-padding: 20px;
}

/* --- Global Styles --- */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body,
html {
  font-family: var(--pri-fontfam);
  font-size: var(--fontsize-400);
  font-optical-sizing: auto;

  color: var(--c-purple);
  line-height: 1.5rem;

  scroll-behavior: smooth;
  scroll-padding-top: 0;

  overflow-x: hidden;
  max-width: 1920px;
  margin: auto;
  background-color: transparent;
}

img {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style-type: none;
}

/* --- Typography --- */
a {
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-purple);
}

a:hover {
  color: var(--c-purple);
}

h2 {
  font-size: var(--fontsize-h2);
  font-family: var(--ter-fontfam);
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1;
}

@media screen and (max-width: 768px) {
  h2 {
    font-size: var(--fontsize-h2-sec);
  }
}

h5 {
  font-size: var(--fontsize-500);
  font-weight: normal;
}

/* --- Section Defaults --- */
section {
  width: 100%;
  min-height: 100vh;
  max-width: 1400px;
  margin: auto;
  padding-top: 10vh;
  padding-bottom: 20vh;
}

@media (min-width: 1600px) {
  section {
    font-size: var(--fontsize-410);
  }
}

/* --- Sections Specific Styles --- */
#about {
  padding-left: 5%;
  position: relative;
  z-index: 10;
}
#main i {
  font-style: normal !important;
}
@media (max-width: 768px) {
  #about p {
    width: auto !important; /* Reset the width to default */
  }
}

/* Showcase Section */
#showcase {
  position: relative;
  min-height: 120vh;
}

/* Project Columns */
.project-columns {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.project-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Mobile layout adjustments */
@media (max-width: 768px) {
  .project-listing {
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the left */
    gap: 1.5rem; /* Add spacing between the stacked elements */
    margin-left: 0; /* Remove unnecessary left margin */
  }

  .project-writeup {
    width: 100% !important; /* Make the writeup take full width */
    margin-bottom: 1rem; /* Add spacing below the writeup */
  }

  .project-columns {
    width: 100%; /* Make the columns take full width */
    flex-direction: column; /* Stack the columns vertically */
    gap: 1rem; /* Add spacing between columns */
  }

  .project-column {
    width: 100%; /* Make each column take full width */
    align-items: stretch; /* Allow columns to expand horizontally */
  }
}

/* Project Items */
.project-item {
  display: block;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding-inline: 0.1rem;
  pointer-events: auto !important;
  z-index: 1050;
}

.project-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--c-overlay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
  z-index: -1;
}
.project-item:hover::before {
  transform: scaleX(1);
}

.popup-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: none;
  justify-content: right;
  align-items: center;

  z-index: 1000;
  pointer-events: none;

  color: var(--c-beige);
}

.popup-content {
  box-sizing: border-box;

  position: relative;
  display: flex;
  width: 100%;
  height: 100vh;
  max-width: 1000px;

  pointer-events: auto;
  overflow-y: auto;

  animation: bgColor infinite 10s;
}

.popup-container button {
  position: fixed;
  bottom: 10px;
  left: 10px;
  padding: 10px 20px;
  cursor: pointer;

  outline: none;
  border: none;
  color: var(--c-beige);

  animation: bgColor infinite 10s;
  transition: color ease-in-out 0.3s;
}
.popup-container button:hover {
  color: #480c53;
}

.popup-title {
  font-size: var(--fontsize-500);
  font-weight: bold;
}
.popup-subheader {
  font-size: var(--fontsize-350);
  font-weight: bold;
}
.popup-text {
  width: 40%;
  padding-top: 3rem;
  padding-inline: 1rem;
}

@media (max-width: 1280px) {
  .popup-content {
    width: 90%; /* A wider popup on smaller screens */
  }
}

#popupImages {
  overflow-y: scroll; /* Enable vertical scrolling */

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;

  -ms-overflow-style: none; /* Hide scrollbar for Internet Explorer and Edge */
  scrollbar-width: none; /* Hide scrollbar for Firefox */

  gap: 0;
  align-items: start;
}

#popupImages iframe {
  margin: 0;
  padding: 0;

  width: 100%;
  height: 420px;
  object-fit: fill;
  display: block;
  grid-column: span 2;

  border: none; /* Remove any borders on the iframe */
}

#popupImages iframe:first-child {
  grid-column: span 2;
  margin-top: 0; /* Ensure alignment */
}

#popupImages::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari, and Edge */
}

#popupImages img {
  width: 100%; /* Make images responsive */
  display: block; /* Prevent inline misalignments */
  object-fit: cover;
}

#popupImages img:not(:first-child):hover {
  transform: scale(1.05); /* Slight zoom */
  transition: transform 0.3s ease-in-out;
}

#popupImages img:first-child {
  width: 100%; /* First image takes the full width */
  height: auto; /* Maintain aspect ratio */
  grid-column: span 2; /* Make the first image span across the full container */
}
#popupImages img:not(:first-child) {
  width: 100%; /* Ensure the images fit their grid cells */
  height: auto; /* Maintain aspect ratio */
}
@media (min-width: 768px) {
  #popupImages {
    grid-template-columns: 1fr 1fr; /* Use two columns for the smaller images */
  }
  #popupImages img:not(:first-child) {
    width: 100%; /* Adjust images to fit grid cells */
  }
}

#popupImages:has(img:nth-of-type(2):last-of-type) {
  flex-direction: column; /* Stack images vertically */
  justify-content: flex-start; /* Align images to the top */
  align-items: flex-start; /* Align images to the left */
}

.clickable {
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
  cursor: pointer;
}
.clickable::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: var(--c-purple);
  animation: bgTransition 10s infinite;
  transition: left 0.3s ease;
  z-index: -1;
  mix-blend-mode: overlay;
}

.clickable:hover {
  color: white; /* Change text color to white on hover */
}

.clickable:hover::before {
  left: 0; /* Slide in to cover the element */
}

@media (max-width: 768px) {
  .popup-content {
    width: 90%; /* A wider popup on smaller screens */
    padding: 10px; /* Less padding to save space */
  }
}

/*Courses */
#courses div {
  display: flex;
  flex-direction: row;
  gap: 3rem;
}

#courses p.txt-bold {
  font-weight: bold;
  cursor: pointer;
  margin: 10px 0;
}

@media (max-width: 768px) {
  #courses {
    display: none; /* Completely hide the section */
  }
}

#contact {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}
.contact {
  justify-content: center;
  align-items: center;
}

.contact-details {
  /* --details-ml: 22%; */
  --details-padding: 0.5rem;

  position: relative;
  width: 60%;
  padding-top: var(--details-padding);
  padding-bottom: var(--details-padding);
  padding-left: var(--details-padding);
  padding-right: var(--details-padding);

  display: flex;
  flex-direction: row;
  justify-content: space-between;

  animation: bgColor infinite 10s;
}

/* --- Mobile Adjustments --- */
.contact-details > div {
  font-size: var(--fontsize-450);
  color: var(--active-bg);
}

#map {
  width: 65%;
  height: 250px;
  z-index: 1000;
  transform: translate(0%, 0%);
  mix-blend-mode: overlay;
}

.gmap-title {
  position: absolute;
  z-index: 50;
  width: 100%;
  pointer-events: none; /* Allows interaction with map underneath */
}

@media (max-width: 768px) {
  .contact {
    align-items: flex-start;
  }

  .contact-details {
    flex-direction: column; /* Stack content vertically */
    width: 90%; /* Ensure full-width on mobile */
    gap: 1rem; /* Add spacing between the stacked items */
    padding: 2rem 1rem; /* Add padding for better spacing */
  }

  #map {
    width: 100%; /* Full width of the contact details */
    height: 300px; /* Keep a reasonable height for mobile */
  }

  .contact-details > div {
    font-size: var(--fontsize-450); /* Adjust font size for readability */
  }
}
/* --- Miscellaneous --- */
footer {
  display: flex;
  justify-content: end;
  padding-right: 1rem;
}
.subheader {
  font-size: var(--fontsize-500);
  font-weight: bold;
}
.credit {
  position: fixed;
  z-index: 30;
  right: -70px;
  bottom: 50%;

  display: inline-block;
  transform: rotate(90deg);
  font-size: var(--fontsize-300);
  line-height: 1;
}
@media (max-width: 768px) {
  .credit {
    display: none; /* Hide the credit on smaller screens */
  }
}

iframe#main-video {
  position: fixed; /* Stays in the viewport */
  top: 50%;
  left: 50%;
  width: var(--vwidth); /* Dynamically set width */
  height: var(--vheight); /* Full height of viewport */
  transform: translate(-50%, -50%); /* Centering */
  object-fit: cover; /* Ensure it fills the viewport */
  pointer-events: none; /* Prevent interaction */
  z-index: -1; /* Send to background */
  outline: none;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
@media (max-width: 768px) {
  iframe#main-video {
    --vwidth: 300vw;
    --vheight: 300vw;
  }
}
@media (min-width: 768px) and (max-width: 1400px) {
  iframe#main-video {
    --vwidth: 250vw;
    --vheight: 100vw;
  }
}
@media (min-width: 1400px) {
  iframe#main-video {
    --vwidth: 140vw;
    --vheight: 300vw;
  }
}

/* Optional fallback for older browsers */
@supports not (object-fit: cover) {
  iframe#main-video {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    transform: none;
  }
}
/* Student list */
/* General container styling */
#cohortspotlight {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

#cohortspotlight h2 {
  font-size: var(--fontsize-h2);
  font-family: var(--ter-fontfam);
  font-weight: bold;
  text-transform: uppercase;
}

@media screen and (max-width: 768px) {
  #cohortspotlight {
    display: none; /* Hide the section on smaller screens */
  }
}

/* Layout for the entire list */
.list-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* Create 6 equal columns */
  gap: 20px; /* Add spacing between columns */
}

/* Group styling (FSV, MCM, MPP) */
.group {
  grid-column: span 2; /* Each group spans 2 columns */
}

.group h5 {
  font-size: 1.5rem;
  text-transform: uppercase;
  padding-bottom: 5px;
}

/* Columns within each group */
.columns {
  display: flex;
  flex-wrap: wrap; /* Ensure names wrap if necessary */
  gap: 10px; /* Space between columns */
}

.column {
  flex: 1;
  min-width: 150px; /* Minimum width for each column */
  font-size: var(--fontsize-350);
}

.student-name {
  /*background-color: rgb(255, 238, 186, 0.5); /* Light yellow or any color */
  display: inline; /* Keeps the background tight around the text */
  padding: 2px 4px; /* Optional: Adds space around the text */
  border-radius: 4px; /* Optional: Rounded corners */
  line-height: 1.5; /* Ensures proper alignment */
}

@media (min-width: 1600px) {
  .column {
    font-size: var(--fontsize-350);
  }
}

/* Responsive styling */
@media (max-width: 768px) {
  .list-container {
    grid-template-columns: repeat(2, 1fr); /* Reduce to 2 columns on small screens */
  }

  .group {
    grid-column: span 2; /* Each group takes full width on small screens */
  }
}

/* --- Animations --- */
.animate-bg {
  animation: bgColor 10s infinite; /* Adjust duration as needed */
}

@keyframes colorTransition {
  0% {
    filter: brightness(1) hue-rotate(200deg); /* Sky Blue */
  }
  33% {
    filter: brightness(1) hue-rotate(270deg); /* Lavender Purple */
  }
  66% {
    filter: brightness(1) hue-rotate(150deg); /* Mint Green */
  }
  100% {
    filter: brightness(1) hue-rotate(200deg); /* Back to Sky Blue */
  }
}

@keyframes bgTransition {
  0% {
    background-color: rgba(140, 200, 255, 1); /* Sky Blue */
  }
  33% {
    background-color: rgba(190, 140, 255, 1); /* Lavender Purple */
  }
  66% {
    background-color: rgba(130, 255, 195, 1); /* Mint Green */
  }
  100% {
    background-color: rgba(140, 200, 255, 1); /* Back to Sky Blue */
  }
}

@keyframes bgColor {
  0% {
    background-color: rgba(106, 151, 193, 0.7); /* Sky Blue */
  }
  33% {
    background-color: rgba(123, 90, 166, 0.7); /* Lavender Purple */
  }
  66% {
    background-color: rgba(90, 172, 132, 0.7); /* Mint Green */
  }
  100% {
    background-color: rgba(106, 151, 193, 0.7); /* Back to Sky Blue */
  }
}

/* utility */
.border-pri {
  border: 1px solid seagreen;
}
.border-sec {
  border: 1px solid salmon;
}
.border-ter {
  border: 1px solid skyblue;
}
.bg-pri {
  background-color: rgb(187, 236, 222);
}

/*margins-bottom*/
.mb-10 {
  margin-bottom: 1rem;
}
.mb-15 {
  margin-bottom: 1.5rem;
}
.mb-20 {
  margin-bottom: 2rem;
}
.mb-25 {
  margin-bottom: 2.5rem;
}
.mb-30 {
  margin-bottom: 3rem;
}
.mb-100 {
  margin-bottom: 10rem;
}
/*margins-top*/
.mt-10 {
  margin-top: 1rem;
}
.mt-15 {
  margin-top: 1.5rem;
}
.mt-20 {
  margin-top: 2rem;
}
.mt-25 {
  margin-top: 2.5rem;
}
.mt-30 {
  margin-top: 3rem;
}
/* margin-left */
.ml-5 {
  margin-left: 5%;
}
.ml-10 {
  margin-left: 10%;
}
.ml-15 {
  margin-left: 15%;
}
.ml-20 {
  margin-left: 20%;
}
.ml-25 {
  margin-left: 25%;
}
.ml-30 {
  margin-left: 30%;
}
.ml-35 {
  margin-left: 35%;
}
.ml-40 {
  margin-left: 40%;
}

/* mix blend */
.mix-overlay {
  mix-blend-mode: overlay;
  animation: colorTransition infinite 10s;
}
.mix-multiply {
  mix-blend-mode: multiply;
}

.outline {
  font-weight: bold;
  color: var(--c-title); /* Set the same color as the stroke */
  background-color: transparent; /* Ensure no background color interferes */
  text-transform: uppercase;
  -webkit-text-stroke: 2px var(--c-title); /* Stroke color matches the fill */
  -webkit-text-fill-color: transparent; /* Fills the inside with transparency */
}

/* flex */
.flex {
  display: flex;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.gap-1 {
  gap: 1rem;
}
.gap-2 {
  gap: 2rem;
}
.gap-3 {
  gap: 3rem;
}
/*width*/
.w-20 {
  width: 10%;
}
.w-25 {
  width: 25%;
}
.w-30 {
  width: 30%;
}
.w-35 {
  width: 35%;
}
.w-40 {
  width: 40%;
}
.w-45 {
  width: 45%;
}
.w-50 {
  width: 50%;
}

.txt-uppercase {
  text-transform: uppercase;
}

.no-scroll {
  position: fixed;
  overflow: hidden;
  width: 100%;
}

/* Accordion Container */
.team-accordion {
  margin-top: 10px;
  overflow: hidden;
  display: none;
}
button.accordion-header {
  position: initial;
}
/* Accordion Header */
.accordion-header {
  padding: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  border: none;
  outline: none;
  transition: background-color 0.3s ease;
}

/* Accordion Content (Hidden by Default) */
.accordion-content {
  max-height: 0; /* Keeps it hidden initially */
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  padding: 0 15px; /* Padding inside the content */
}

/* Show Content When Active */
.accordion-item.active .accordion-content {
  max-height: 600px; /* Adjust based on content size */
  padding: 10px 15px; /* Add padding when expanded */
}

/* Student List Styling */
.accordion-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.accordion-content li {
  padding: 5px 0;
  border-bottom: 1px solid rgba(187, 236, 222, 0.2);
}

/* Simple Student List (FSV & MPP) */
#simple-student-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#simple-student-list li {
  padding: 5px 0;
  border-bottom: 1px solid rgba(187, 236, 222, 0.2);
}