/** Stylesheet **/

 /* Simple fade-in animation for portfolio filtering */
    .portfolio-item { transition: opacity .3s ease-in-out; }
    .portfolio-item.d-none { opacity: 0; }

/* ---------- Portfolio cards ---------- */

/* cards grow with the viewport – no max-width cap */
.portfolio-wrapper { max-width: none; }

/* No borders / spacing so tiles butt together */
.portfolio-card {
  border: 0;
  border-radius: 0;
}

/* Hover-overlay with fade-in */
.portfolio-card .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease-in-out;
  padding: 1rem;
}
.portfolio-card:hover .overlay { opacity: 1; }

//* ------------- Isotope column sizing ------------- */
/* same width on the invisible sizer and every item */
.grid-sizer,
.portfolio-item      { width: 50%; }             /* 2-up on phones */

/* ≥768 px → 3-up */
@media (min-width: 768px)  {
  .grid-sizer,
  .portfolio-item    { width: 33.333%; }
}

/* ≥1200 px → 4-up */
@media (min-width: 1200px) {
  .grid-sizer,
  .portfolio-item    { width: 25%; }
}

/* anchor must be block for Isotope */
.portfolio-item      { display: block; text-decoration: none; }

/* 3 : 2 aspect ratio */
.ratio-3x2 { position: relative; width: 100%; padding-top: 66.666%; }
.ratio-3x2 > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ≥768 px: 3-up */
@media (min-width: 768px)  { .portfolio-item { width: 33.333%; } }

/* ≥1200 px: 4-up */
@media (min-width: 1200px) { .portfolio-item { width: 25%; } }

/* Button icons */
.summary-btn::after {
  font-family: "bootstrap-icons";
  content: "\F5C5";
  margin-left: .25rem;
}

.link-btn::after {
  font-family: "bootstrap-icons";
  content: "\F470";
  margin-left: .25rem;
}

.buy-btn::after {
  font-family: "bootstrap-icons";
  content: "\F3EC";
  margin-left: .25rem;
}

.pdf-btn::after {
  font-family: "bootstrap-icons";
  content: "\F194";
  margin-left: .25rem;
}

.appendix-btn::after {
  font-family: "bootstrap-icons";
  content: "\F5AA";
  margin-left: .25rem;
}

.data-btn::after {
  font-family: "bootstrap-icons";
  content: "\F17C";
  margin-left: .25rem;
}

.bib-btn::after {
  font-family: "bootstrap-icons";
  content: "\F250";
  margin-left: .25rem;
}

.syllabus-btn::after {
  font-family: "bootstrap-icons";
  content: "\F447";
  margin-left: .25rem;
}
}