/* =========================================================
   Suriya9 — ผลงานของเรา (Works) — คลาส .wk-*
   ใช้ hero (.cf-hero/.cf-top/.cf-title/.cf-divider) ร่วมกับ coffin.css
   ========================================================= */

.wk { position: relative; background: #fff; }

/* ===== STORIES ===== */
.wk-stories {
  max-width: 1400px;
  margin: 56px auto 0;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.wk-story {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.wk-story--rev { flex-direction: row-reverse; }

.wk-photo {
  position: relative;
  width: 709px;
  height: 391px;
  flex-shrink: 0;
}
.wk-photo__main {
  position: absolute;
  left: 70px;
  top: 0;
  width: 639px;
  height: 362px;
  border-radius: 0 100px 0 100px;
  border: 4px solid #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.wk-photo__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-photo__logo {
  position: absolute;
  left: 0;
  top: 205px;
  width: 200px;
  height: 175px;
}
.wk-photo__logo img { width: 100%; height: 100%; object-fit: contain; }

.wk-text {
  width: 646px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.wk-text__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.2;
  color: #000;
}
.wk-text__sub {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #333;
}
.wk-text__body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}
.wk-text__body p { margin: 0 0 6px; }
.wk-gold  { color: #bd9a4b; }
.wk-gold2 { color: #a67c1e; }
.wk-ink   { color: #333; }
.wk-note  { font-size: 14px; color: #666; }

.wk-smallgal {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.wk-smallgal img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* ===== QUOTE (บทกลอน) — พื้นดอกไม้ขาว-ใบทอง ซ้ายล่าง/ขวาบน จางเข้ากลาง + กล่องกระจกฝ้า (ตามดีไซน์ Figma) ===== */
.wk-quote-zone {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 110px 0 218px;     /* ด้านล่างเผื่อให้หัวข้อแกลเลอรีซ้อนบนพื้นดอกไม้ */
  margin-top: 0;
  overflow: hidden;
}
/* พื้นหลังรูปเดียว (export จาก Figma — ดอกซ้ายล่าง/ขวาบน จางเข้ากลางในตัวรูป) */
.wk-qz__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  /* เฟดขาวด้านล่างรูป → กลืนกับพื้นขาวก่อนแกลเลอรี */
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
}
.wk-quote {
  position: relative;
  z-index: 2;
  width: min(1170px, calc(100% - 64px));
  padding: 48px 48px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.wk-quote__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  /* ตัวอักษรใช้รูปวัดเป็นพื้น (เติมรูปในตัวอักษร) ตามดีไซน์ Figma */
  color: #5f3c0a;                                   /* fallback */
  background: url("../images/works/quote-box-bg.webp") center / cover no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: brightness(0.62) contrast(1.25) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
/* หัวข้อแกลเลอรีซ้อนขึ้นไปอยู่บนพื้นดอกไม้ */
.wk-quote-zone + .wk-gallery { position: relative; z-index: 1; margin-top: -150px; }
@media (max-width: 1100px) {
  .wk-quote__row { font-size: 26px; white-space: normal; }
}
@media (max-width: 760px) {
  .wk-quote-zone { padding: 40px 0 170px; margin-top: 30px; }
  .wk-quote { width: calc(100% - 32px); padding: 28px 16px; gap: 8px; }
  .wk-quote__row { grid-template-columns: 1fr; gap: 0; font-size: 24px; }
}

/* ===== GALLERY ===== */
.wk-gallery {
  margin: 90px auto 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.wk-gallery__head {
  position: relative;
  width: 100%;
  max-width: 1440px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 64px;
}
.wk-corner { width: 112px; height: 118px; overflow: hidden; position: relative; }
.wk-corner img { position: absolute; height: 354.63%; left: -7.14%; top: 0; width: 374.13%; max-width: none; }
.wk-corner--r { transform: scaleY(-1) rotate(180deg); }
.wk-gallery__title {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; pointer-events: none;
}
.wk-gallery__title h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  color: #8c0e0f;
}
.wk-grid { width: min(1418px, calc(100% - 22px)); display: flex; flex-direction: column; gap: 18px; align-items: center; padding-bottom: 120px;}
.wk-row { width: 100%; display: flex; gap: 18px; justify-content: center; }
.wk-thumb { width: calc((100% - 4 * 18px) / 5); aspect-ratio: 1; overflow: hidden; flex-shrink: 0; }
.wk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== ดอกไม้ก่อน footer ===== */
.wk-flowers { position: relative; z-index: 0; height: 366px; overflow: hidden; opacity: 0.3; margin-top: 80px; margin-bottom: -161px; }
.wk-flowers img { position: absolute; width: 108.49%; left: -8.48%; top: -50.27%; height: 243.72%; max-width: none; }

/* มือถือ (ตามดีไซน์): 2 คอลัมน์ รูปสุดท้ายเต็มแถว 2:1 */
@media (max-width: 760px) {
  .wk-grid { width: calc(100% - 24px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .wk-row { display: contents; }
  .wk-thumb { width: auto; }
  .wk-grid .wk-row:last-child .wk-thumb:last-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
}

@media (max-width: 1360px) {
  .wk-story { flex-direction: column; }
  .wk-story--rev { flex-direction: column; }
  .wk-text { width: 100%; max-width: 646px; }
}