/* =========================================================
   PORTFOLIO PAGE  (Figma: Portfolio Desktop / Tablet / Mobile)
   Loaded after styles.css. The bottom band and footer come from styles.css.
   ========================================================= */

/* ---------- Light page + blue nav ---------- */
.page-light, .page-light body { background: var(--mist); }
.page-light .nav { background: var(--mist); }
.page-light .nav__mark svg { fill: var(--blue); }
.page-light .nav__toggle-bg { fill: #aebbf4; }
.page-light .nav__toggle-sweep { fill: #98a9f1; }
.page-light .nav__toggle .bar { stroke: var(--blue); }
@media (min-width: 1100px) {
  .page-light .nav__links { color: var(--blue); }
  .page-light .nav__cta { color: var(--blue); background: #aebbf4; }   /* Figma: lavender pill */
  .page-light .nav__cta::before { background: #98a9f1; }
}
/* the page you're on keeps its underline */
.nav__links a[aria-current="page"] .uline { background-size: 100% var(--uline-w); background-position-x: 0; }

/* ---------- Page ---------- */
.pf { color: var(--blue); }
.pf__title {
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.04em;
}
.pf__title { max-width: 7.2em; }      /* breaks after "Our", as in Figma */
.pf__cat {
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.04em;
}

/* ---------- Project card (same proportions at every size) ----------
   Measured from the Figma card (760 wide): every part is a share of the
   card's width (cqw), so the photo, frames and corners always line up. */
.pcard {
  position: relative;
  aspect-ratio: 1;
  container-type: inline-size;
  border: max(1px, calc(1.56 * var(--s))) solid var(--frame);
  background: var(--mist);
  color: #fff;
}
.pcard::before {                         /* coloured square */
  content: "";
  position: absolute;
  inset: 2.686cqw;
  background: var(--card);
}
.pcard__tag {                            /* tab hanging from the top edge */
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  z-index: 1;
  display: grid;
  place-items: start center;
  width: 28.73cqw;
  height: 4.88cqw;
  margin: 0;
  /* the lettering (capitals to the slash's foot) centred between the top line and the tab's bottom edge */
  padding: calc(4.88cqw * .57 - 1.316cqw) 0 0;
  background: var(--mist);
  clip-path: polygon(0 0, 100% 0, 100% 20.18%, 92.21% 100%, 7.79% 100%, 0 20.18%);
  color: var(--blue);
  font-size: 2.632cqw;
  line-height: 1;
  letter-spacing: -0.04em;
}
.pcard__photo {                          /* outlined frame around the picture */
  position: absolute;
  left: 8.594cqw;
  top: 10.05cqw;
  width: 82.76cqw;
  height: 48.52cqw;
  border: max(1px, calc(1.56 * var(--s))) solid var(--card-frame);
}
.pcard__img {
  position: absolute;
  inset: 2.282cqw;
  width: calc(100% - 4.564cqw);
  height: calc(100% - 4.564cqw);
  object-fit: cover;
  display: block;
}
.pcard__photo::before,
.pcard__photo::after {                   /* corner flags on the picture */
  content: "";
  position: absolute;
  z-index: 1;
  width: 3.902cqw;
  aspect-ratio: 1;
  background: var(--card-tri);
}
.pcard__photo::before { top: 3.2cqw; right: 3.2cqw; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.pcard__photo::after  { bottom: 3.2cqw; left: 3.2cqw; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.pcard__name {
  position: absolute;
  left: 8.594cqw;
  right: 8.594cqw;
  top: 63.67cqw;
  margin: 0;
  font-size: 7.238cqw;
  font-weight: 400;
  line-height: 1.073;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.pcard__text {
  position: absolute;
  left: 8.594cqw;
  top: 72.75cqw;
  width: 82.76cqw;                      /* same width as the picture frame */
  margin: 0;
  font-size: 2.021cqw;
  line-height: 1.3;
  letter-spacing: -0.04em;
}

/* ---------- Client squares ----------
   Hover (same timing as the homepage portfolio tiles): the square fills
   blue, the logo turns white, and a white flag slides into the top-right
   corner; everything reverses when the pointer leaves. */
.psq {
  --hover-t: .29s;
  --hover-ease: cubic-bezier(.5, .3, .5, 1);
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  font: inherit;
  border: max(1px, calc(1.56 * var(--s))) solid var(--frame);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--hover-t) var(--hover-ease);
}
.psq img { display: block; height: auto; transition: filter var(--hover-t) var(--hover-ease); }
.psq::after {                            /* the white flag (as on the homepage) */
  content: "";
  position: absolute;
  top: 4%;
  right: 4%;
  width: 10.9%;
  aspect-ratio: 1;
  background: var(--flag);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: 0;
  transform: translate(-19%, 19%);
  transition: opacity .3s var(--hover-ease) .04s, transform .3s var(--hover-ease) .04s;
  pointer-events: none;
}
.psq[data-show].is-active,
.psq[data-show]:hover,
.psq[data-show]:focus-visible { background: var(--sq-bg, var(--blue)); }   /* each square takes its project card's colour (portfolio.js) */
.psq[data-show].is-active img,
.psq[data-show]:hover img,
.psq[data-show]:focus-visible img { filter: brightness(0) invert(1); }
.psq[data-show].is-active::after,
.psq[data-show]:hover::after,
.psq[data-show]:focus-visible::after { opacity: 1; transform: none; }
.psq[aria-disabled="true"] { cursor: default; }
/* squares for projects that aren't up yet */
.psq__soon {
  position: absolute;
  left: 0; right: 0;
  bottom: 13%;
  color: var(--blue);
  opacity: .7;
  font-size: calc(17 * var(--s));
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .psq, .psq img, .psq::after { transition-duration: .01s; transition-delay: 0s; }
}

/* =========================================================
   DESKTOP: title, then a sticky card on the left and the client
   squares on the right (they scroll; hovering one shows its project)
   ========================================================= */
@media (min-width: 1100px) {
  /* same side margins as the homepage (its 200px gutter) */
  .pf__head {
    margin: calc(110 * var(--s)) var(--gutter) 0;
  }
  .pf__title {
    font-size: calc(113 * var(--s));
    line-height: calc(125 / 113);
  }
  .pf__body {
    display: grid;
    grid-template-columns: calc(760 * var(--s)) 1fr;
    column-gap: calc(41 * var(--s));
    margin: calc(57 * var(--s)) var(--gutter) 0;
    padding-bottom: calc(300 * var(--s));
  }
  .pf__cards { position: relative; }
  /* The card scrolls up with the page until it sits just below where the nav
     bar is, then stays there while the squares scroll past (on short screens
     it stops a little higher so the whole card fits) */
  .pf__stick {
    position: sticky;
    top: min(calc(var(--nav-h, 0px) + 24 * var(--s)), calc(100vh - 760 * var(--s) - 16px));
    aspect-ratio: 1;
  }
  .pf__cat--list { display: none; }
  /* all cards sit on top of each other; the chosen one fades in */
  .pf__stick .pcard {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
  }
  .pf__stick .pcard.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .35s ease;
  }
  /* When a card comes in, its two corner triangles slide into place with the
     square's flag: the top one the same way, the bottom one mirrored */
  .pf__stick .pcard__photo::before,
  .pf__stick .pcard__photo::after {
    opacity: 0;
    transition: opacity .3s cubic-bezier(.5, .3, .5, 1) .04s, transform .3s cubic-bezier(.5, .3, .5, 1) .04s;
  }
  .pf__stick .pcard__photo::before { transform: translate(-19%, 19%); }
  .pf__stick .pcard__photo::after  { transform: translate(19%, -19%); }
  .pf__stick .pcard.is-active .pcard__photo::before,
  .pf__stick .pcard.is-active .pcard__photo::after { opacity: 1; transform: none; }
  /* replay: portfolio.js snaps the triangles back to their start for a frame */
  .pf__stick .pcard.tri-reset .pcard__photo::before,
  .pf__stick .pcard.tri-reset .pcard__photo::after { opacity: 0; transition: none; }
  .pf__stick .pcard.tri-reset .pcard__photo::before { transform: translate(-19%, 19%); }
  .pf__stick .pcard.tri-reset .pcard__photo::after  { transform: translate(19%, -19%); }
  .pf__index { padding-top: calc(9 * var(--s)); }
  .pf__index .pf__cat {
    margin: calc(86 * var(--s)) 0 calc(49 * var(--s));
    font-size: calc(56 * var(--s));
    line-height: calc(66 / 56);
  }
  .pf__index .pf__cat:first-child { margin-top: 0; }
  .pf__br { display: none; }
  .pf__squares {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* last column ends on the right margin */
    gap: calc(14.5 * var(--s));
  }
}

/* =========================================================
   TABLET + PHONE: one card after another, grouped by category
   ========================================================= */
@media (max-width: 1099px) {
  .pf { padding: 0 var(--gutter); }
  .pf__head { margin-top: calc(90 * var(--s)); }
  .pf__title {
    font-size: var(--fs-display);
    line-height: 1.106;
  }
  .pf__index { display: none; }
  .pf__body { padding-bottom: calc(120 * var(--s)); }
  .pf__cat--list {
    margin: calc(70 * var(--s)) 0 calc(28 * var(--s));
    font-size: var(--fs-title);
    line-height: 1.2;
  }
  .pf__stick .pf__cat--list:first-child { margin-top: calc(50 * var(--s)); }
  .pcard + .pcard { margin-top: 4vw; }
  .pf .more { margin: 0 calc(var(--gutter) * -1); }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .pcard__name { font-size: 6.156cqw; }   /* tablet: 55px on the 893px Figma card */
}
@media (max-width: 599px) {
  /* phone: the card shows the name only, centred */
  .pcard__text { display: none; }
  .pcard__name {
    top: auto;
    bottom: 12cqw;
    text-align: center;
    white-space: normal;
    line-height: 1.1;
  }
}

/* cards with a project page: the whole card is the link */
.pcard__link { color: inherit; }
.pcard:has(.pcard__link) { cursor: pointer; }

/* wide layout: the tab lettering sits where it was (capitals' middle 68.5% down the tab) */
@media (min-width: 1100px) {
  .pcard__tag { padding-top: calc(4.88cqw * .685 - 1.316cqw); }
}
/* Multivu's square fills white on hover, so its logo and flag stay navy */
.psq[data-show="multivu"]:hover img, .psq[data-show="multivu"]:focus-visible img, .psq[data-show="multivu"].is-active img { filter: none; }
.psq[data-show="multivu"]::after { background: var(--blue); }
.psq[data-show="multivu"].is-active, .psq[data-show="multivu"]:hover { background: #fbfbfb; }
/* title starts at the same height as the homepage title */
@media (min-width: 1100px) { .pf__head { margin-top: calc(212 * var(--s)); } }
@media (min-width: 600px) and (max-width: 1099px) { .pf__head { margin-top: calc(156 * var(--s)); } }
@media (max-width: 599px) { .pf__head { margin-top: calc(69 * var(--s)); } }
/* tab lettering about 22% smaller, so it sits in the tab with more air around it */
.pcard__tag { font-size: 2.05cqw; padding-top: calc(4.88cqw * .57 - 1.025cqw); }
@media (min-width: 1100px) { .pcard__tag { padding-top: calc(4.88cqw * .685 - 1.025cqw); } }
/* Northeastern card: text breaks into five lines */
.pcard[data-project="northeastern"] .pcard__text { width: 68cqw; }
/* no single word left alone on the last line of any card text */
.pcard__text { text-wrap: pretty; }
/* Multivu card: its longer text runs a little smaller */
.pcard[data-project="multivu"] .pcard__text { font-size: 1.86cqw; }