/* =========================================================
   PROJECTS PAGE — riêng cho projects.html
   Cần load SAU pages.css (dùng chung biến, nav, hero, bento-card...)
   ========================================================= */

.projects-main {
  padding-top: 140px;
}


/* =========================================================
   WORK HEADING
   ========================================================= */

.work-heading {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  margin-bottom: 32px;
}


.work-heading h1 {
  font-size:
    clamp(
      49px,
      6vw,
      75px
    );
}


/* =========================================================
   FILTERS
   ========================================================= */

.filters {
  display: flex;

  gap: 8px;
}


.filter {
  padding: 10px 13px;

  border:
    1px solid #ffffff25;

  border-radius: 9px;

  background: #151822;

  color: #9ca4ba;

  font:
    10px
    var(--font-mono);

  cursor: pointer;
}


.filter.active,
.filter:hover {
  border-color: #809eff;

  background:
    linear-gradient(
      135deg,
      #5d8eff,
      #8c6be1
    );

  color: #fff;
}


/* =========================================================
   PROJECT GRID
   ========================================================= */

.project-bento {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 14px;
}


.project-card.large {
  grid-column: span 2;
}


/* PROJECT ART */

.project-art {
  position: relative;

  height: 245px;

  overflow: hidden;

  border-bottom:
    1px solid var(--line);

  border-radius:
    16px 16px 0 0;
}


.large .project-art {
  height: 330px;
}


.project-art > span {
  position: absolute;

  z-index: 1;

  top: 17px;
  left: 19px;

  color: #c0caee;

  font:
    9px
    var(--font-mono);
}


/* MORI */

.mori-art {
  background:
    radial-gradient(
      circle at 67% 42%,
      #5682e2,
      #213f94 35%,
      #101937 69%
    );
}


.mori-art > b {
  position: absolute;

  right: 20%;
  bottom: -34px;

  color: #c9d8ff26;

  font-size: 330px;

  line-height: 1;
}


.mori-art i,
.kin-art i {
  position: absolute;

  left: 23px;
  bottom: 22px;

  color: #eef2ff;

  font:
    15px/1.1
    var(--font-mono);
}


/* NOTE */

.note-art {
  display: grid;

  place-items: center;

  background:
    radial-gradient(
      circle at 50% 45%,
      #8b72b8,
      #2e255e 38%,
      #161832 69%
    );
}


.note-paper {
  width: 145px;
  height: 176px;

  padding: 18px;

  transform: rotate(-7deg);

  background: #d3e3ff;

  color: #20264b;

  box-shadow:
    9px 12px #0005;
}


.note-paper small {
  font:
    9px
    var(--font-mono);
}


.note-paper b {
  display: block;

  margin-top: 34px;

  font-size: 19px;

  line-height: 1.15;
}


/* KIN */

.kin-art {
  background:
    linear-gradient(
      145deg,
      #182845,
      #242056
    );
}


.kin-art::after {
  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

  right: 13%;
  top: -65px;

  border-radius: 50%;

  background: #a993ff42;
}


.kin-art > b {
  position: absolute;

  left: 25px;
  bottom: 42px;

  color: #d1b2ff;

  font-size: 60px;

  letter-spacing: -.09em;
}


/* PROJECT COPY */

.project-copy {
  display: flex;

  justify-content: space-between;

  gap: 12px;

  padding: 18px;
}


.project-copy small {
  color: #7b849b;

  font:
    9px
    var(--font-mono);
}


.project-copy h2 {
  margin: 8px 0 5px;

  font-size: 20px;

  letter-spacing: -.06em;
}


.project-copy p {
  margin: 0;

  color: #969daf;

  font-size: 12px;

  line-height: 1.6;
}


.project-copy a {
  display: grid;

  place-items: center;

  flex: none;

  width: 31px;
  height: 31px;

  border:
    1px solid #8398dc61;

  border-radius: 9px;

  color: #c5d0ff;

  text-decoration: none;

  text-align: center;
  vertical-align: middle;
}


/* =========================================================
   BUILD CARD (CTA cuối trang Projects)
   ========================================================= */

.build-card {
  min-height: 215px;

  padding: 24px;

  background:
    radial-gradient(
      circle at 84% 18%,
      #6b55d346,
      transparent 46%
    ),
    linear-gradient(
      145deg,
      #18192a,
      #15131e
    );
}


.build-card h2 {
  margin: 0;

  color: #f0eff8;

  font-size: 25px;

  line-height: 1.15;

  letter-spacing: -.06em;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 780px) {

  .work-heading {
    align-items: flex-start;

    flex-direction: column;

    gap: 22px;
  }


  .large .project-art {
    height: 260px;
  }
}