/* ══════════════════════════════════════════════════════════════
   Nhật Phan Portfolio — Work page
   Figma node 36:17305 — 1366×3336px
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --brand-red: #e9251f;
  --ink: #000000;
}

html { scroll-behavior: smooth; }

body {
  background: #f4f1ea;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }

.site {
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
  background: #ffffff;
}



/* ════════════ WORK PAGE — absolute canvas ════════════ */
.work-page {
  position: relative;
  width: 1366px;
  height: 3162px; /* 3336 - 174 navbar */
  overflow: hidden;
}

/* Hero background — paper texture (176→510, h=334) */
.hero-bg {
  position: absolute;
  left: 0; top: 2px; /* 176-174 */
  width: 1366px;
  height: 334px;
  background: url('../img/bg_paper.webp') center / cover no-repeat;
}

/* MY WORK title — (529, 312) → top=138 */
.work-title {
  position: absolute;
  left: 529px;
  top: 138px;
  width: 307px;
  height: 62px;
}

/* Category headers — handwritten vector PNGs */
.cat-header {
  position: absolute;
}
/* HANWHA LIFE VIETNAM — (147, 587) → top=413 */
.cat-header--left {
  left: 147px;
  top: 413px;
  width: 426px;
  height: 64px;
}
/* CAKE BY VPBANK — (847, 600) → top=426 */
.cat-header--right {
  left: 847px;
  top: 426px;
  width: 316px;
  height: 38px;
}


/* ════════════ PROJECT CARDS ════════════ */
.project-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  transition: transform .25s ease;
}
.project-card:hover { transform: scale(1.02); }

.card-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Row 1 — BeCam (93, 742) + Debeat (726, 718) */
.project-card--becam  { left: 93px;  top: 568px; width: 548px; }
.project-card--debeat { left: 726px; top: 544px; width: 573px; }

/* Row 2 — BaoHiem (104, 1284) + TrungThu (743, 1286) */
.project-card--baohiem  { left: 104px; top: 1110px; width: 550px; }
.project-card--trungthu { left: 743px; top: 1112px; width: 552px; }

/* Row 3 — LoiNhan (118, 1924) + ChamCake (754, 1918) */
.project-card--loinhan  { left: 118px; top: 1750px; width: 523px; }
.project-card--chamcake { left: 754px; top: 1744px; width: 530px; }


/* ════════════ CAPTIONS — vector PNGs from Figma ════════════ */
.caption { position: absolute; }

/* Row 1: BÉ CAM MASCOT (273,1128) + DEBEAT CARD (938,1114) */
.caption--becam   { left: 273px; top: 954px;  width: 191px; height: 26px; }
.caption--debeat  { left: 938px; top: 940px;  width: 154px; height: 50px; }

/* Row 2: BẢO HIỂM (188,1689) + TRUNG THU (807,1688) */
.caption--baohiem  { left: 188px; top: 1515px; width: 364px; height: 51px; }
.caption--trungthu { left: 807px; top: 1514px; width: 396px; height: 52px; }

/* Row 3: LỜI NHẮN NHỦ (281,2317) + CHẠM CAKE (886,2316) */
.caption--loinhan  { left: 281px; top: 2143px; width: 171px; height: 49px; }
.caption--chamcake { left: 886px; top: 2142px; width: 285px; height: 50px; }


/* ════════════ GALLERY TEASER — (0, 2535, 1422×827) ════════════ */
.gallery-teaser {
  position: absolute;
  left: 0;
  top: 2361px; /* 2535-174 */
  width: 1366px;
  height: 801px;
  overflow: hidden;
}

.gallery-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Speech bubble cloud — node 36:17682 (437, 2740, 492×335) */
.gallery-cloud {
  position: absolute;
  left: 437px;
  top: 205px; /* 2740-2535 */
  width: 492px;
  height: 335px;
  z-index: 10;
}

/* Handwritten text inside bubble — node 36:17964 (498, 2840, 384×139) */
.gallery-bubble-text {
  position: absolute;
  left: 498px;
  top: 305px; /* 2840-2535 */
  width: 384px;
  height: 139px;
  z-index: 11;
}

/* ENTER GALLERY — composed letters (550, 3079, 282×45) */
.enter-gallery {
  position: absolute;
  left: 550px;
  top: 544px; /* 3079-2535 */
  z-index: 10;
  transition: transform .25s ease;
}
.enter-gallery:hover { transform: scale(1.05); }
.enter-gallery img {
  width: 282px;
  height: 45px;
}

/* ════════════ RESPONSIVE ════════════ */
.work-wrapper {
  width: 100%;
  overflow: hidden;
}

@media (max-width: 1365px) {
  .work-page {
    transform-origin: top left;
  }
}