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

/* --- PEOPLE GRID --- */


#hexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  list-style-type: none;
}

.hex {
  position: relative;
  outline: 1px solid transparent;
}

.hex::after {
  content: '';
  display: block;
  padding-bottom: 86.602%; /* = 100 / tan(60) * 1.5 */
}

.hexIn {
  position: absolute;
  width: 96%;
  padding-bottom: 110.851%; /* = width / sin(60) */
  margin: 0 2%;
  overflow: hidden;
  visibility: hidden;
  outline: 1px solid transparent;
  transform: rotate3d(0,0,1,-60deg) skewY(30deg);
}

.hexIn * {
  position: absolute;
  visibility: visible;
  outline: 1px solid transparent;
}

.hexLink {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  overflow: hidden;
  transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}

.hexContent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 85, 184, 0.7);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  padding: 10px;
  box-sizing: border-box;
  color: #fff;
  font-weight: 300;

  transform: translateY(-100%);
  transition: transform 0.4s ease-out;
}

/* on hover, slide down to fill hex */
.hexLink:hover .hexContent,
.hexLink:focus .hexContent {
  transform: translateY(0);
}

.hexContent * {
  position: relative; /* Overrides the absolute positioning from .hexIn * */
}

/* ================= HEX CONTENT ================= */
.hex img {
  left: -100%;
  right: -100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin: 0 auto;
  transform: rotate3d(0,0,0,0deg);
}

.hexContent h3,
.hexContent p {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 2. Create the line using the ::after pseudo-element */
.hexContent h3::after {
  content: '';
  display: block;
  width: 25%;
  height: 2px;
  background: #fff;
  margin: 10px auto;
}

/* ================= HEXAGON SIZING / RESPONSIVE ================= */
@media (min-width:1201px) {
  #hexGrid { padding-bottom: 4.4%; }
  .hex { width: 20%; } /* 5 hex per row */
  .hex:nth-child(9n+6) { margin-left: 10%; }
}

@media (max-width:1200px) and (min-width:901px) {
  #hexGrid { padding-bottom: 5.5%; }
  .hex { width: 25%; } /* 4 hex per row */
  .hex:nth-child(7n+5) { margin-left: 12.5%; }
}

@media (max-width:900px) and (min-width:601px) {
  #hexGrid { padding-bottom: 7.4%; }
  .hex { width: 33.333%; } /* 3 hex per row */
  .hex:nth-child(5n+4) { margin-left: 16.666%; }
}

@media (max-width:600px) {
  #hexGrid { padding-bottom: 11.2%; }
  .hex { width: 50%; } /* 2 hex per row */
  .hex:nth-child(3n+3) { margin-left: 25%; }
}

@media (max-width:400px) {
  #hexGrid { font-size: 13px; }
}

/* MODAL BACKDROP */
.hexModal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* HEXAGONAL POP-UP */
.hexModal-content {
  width: clamp(300px, 70%, 800px);
  background: white;
  padding: 25px;
  position: relative;
  color: #000;
  box-sizing: border-box;

  max-height: 90vh;
  overflow-y: auto;
}

/* CLOSE BUTTON */
.hexModal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
}

/* CONTENT STYLING */
.hexModal-content img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  margin: 0 auto 0.75rem auto;
  transition: transform 0.3s ease;

  /* Remove circle */
  border-radius: 0;

  /* Hexagon mask */
  clip-path: polygon(
    25% 6.7%,
    75% 6.7%,
    100% 50%,
    75% 93.3%,
    25% 93.3%,
    0% 50%
  );
}

.hexModal-content h3 {
  margin: 0 0 8px;
}

.hexModal-content p {
  margin: 0 0 10px;
}

#modalBio p {
  margin-bottom: 10px;
}

.most-person__social a {
  display: inline-block;
  margin: 0 5px 5px 0;
  font-size: 0.85rem;
}

.most-person__bio {
  text-align: justify;
  margin-top: 10px;
}