/* =========================================================
   === Page 2: About Styling (page2.css)
   === Only unique About-page rules
   ========================================================= */

/* Title banners */
#page2 .about-banner {
  background-image: url("../images/2page-title1.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 156 / 23;
  margin-bottom: 1em;
  display: block;
}

#page2 .about-banner-secondary {
  background-image: url("../images/2page-title2.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;   /* or 'cover' depending on your preference */
  width: 100%;
  max-width: 350px;           /* match the native width */
  aspect-ratio: 7 / 1;        /* matches 350x50 exactly */
  margin-bottom: 1em;
  display: block;
  box-shadow: 0 0 10px #7526df;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Two-column wrapper */
#page2 .wrapper.two-col {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2em;
  align-items: start;
}

@media (max-width: 900px) {
  #page2 .wrapper.two-col {
    grid-template-columns: 1fr;
  }
}

/* Role cards */
#page2 .roles .role {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1.5em;
  background-color: rgba(30, 0, 50, 0.6);
  border: 1px solid #7526df;
  border-radius: 6px;
  padding: 1em;
  box-shadow: 0 0 10px rgba(117, 38, 223, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

#page2 .roles .role:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(255, 0, 200, 0.8);
}

#page2 .roles .role:not(:last-child) {
  border-bottom: 1px solid rgba(117, 38, 223, 0.4);
  padding-bottom: 1.5em;
}

/* Inject role images */
#page2 .roles .role::before {
  content: "";
  display: block;
  width: 120px;
  height: 120px;
  margin: 0.5em 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#page2 .roles .president::before {
  background-image: url("../images/2page-img1.png");
}
#page2 .roles .vp::before {
  background-image: url("../images/2page-img2.png");
}
#page2 .roles .coordinator::before {
  background-image: url("../images/2page-img3.png");
}

#page2 .roles strong {
  display: block;
  margin-bottom: 0.5em;
  color: #fff;
}
#page2 .roles strong:hover {
  color: #ff00cc;
  text-shadow: 0 0 8px #ff00cc, 0 0 12px #ff00cc;
  cursor: default;
}
#page2 .roles p {
  margin: 0.5em 0 0;
  color: #d0d0d0;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 900px) {
  #page2 .roles .role::before {
    width: 100px;
    height: 100px;
  }
}
@media (max-width: 600px) {
  #page2 .roles .role {
    text-align: left;
    align-items: flex-start;
  }
  #page2 .roles .role::before {
    width: 80px;
    height: 80px;
    margin: 0.25em 0;
  }
}