/* ============================================================
   sanson.css — หน้า Sanson Art Toy (แสนซน)
   ธีม "ขาว + พาสเทล" (ข้อยกเว้นจงใจจากธีม dark หลัก)
   โหลดเฉพาะ sanson.html — override style.css กลางได้ปลอดภัย
   ============================================================ */

.sanson-page {
  /* พาสเทลพาเลต */
  --s-cream:      #FBF7F1;   /* พื้นหลักครีมนวล */
  --s-cream-2:    #FFFFFF;
  --s-ink:        #3A3330;   /* ตัวอักษรหลัก อุ่นเข้ม อ่านง่าย */
  --s-ink-soft:   #7A716B;   /* ตัวอักษรรอง */
  --s-pink:       #F4A8B8;
  --s-pink-soft:  #FBE3E8;
  --s-blue:       #A9D6E5;
  --s-blue-soft:  #E3F1F6;
  --s-yellow:     #FBE4A0;
  --s-red:        #E8504E;   /* สีแสนซน (ชุดกันฝน) */
  --s-line:       rgba(58,51,48,0.10);
  --s-shadow:     rgba(120,90,70,0.14);
  --s-serif: 'Anuphan', system-ui, sans-serif;
  --s-ease: cubic-bezier(0.25,0.46,0.45,0.94);

  background: var(--s-cream);
  color: var(--s-ink);
  font-family: var(--s-serif);
}

/* ปุ่มพื้นหลังอุ่นทั้งหน้า (กันธีม dark กลางทับ) */
.sanson-page,
.sanson-page #footer { background: var(--s-cream); }

/* ── NAV (override ให้อ่านออกบนพื้นขาว) ── */
.sanson-page #nav.is-scrolled {
  background: rgba(251,247,241,0.92);
  border-bottom-color: var(--s-line);
}
.sanson-page .nav__logo { color: var(--s-ink); }
.sanson-page .nav__logo span { color: var(--s-ink-soft); }
.sanson-page .nav__links a { color: var(--s-ink-soft); }
.sanson-page .nav__links a:hover,
.sanson-page .nav__links a.is-current { color: var(--s-red); }
.sanson-page .nav__toggle span { background: var(--s-ink); }
.sanson-page .nav__lang span { color: var(--s-ink-soft); }
.sanson-page .lang-btn { color: var(--s-ink-soft); }
.sanson-page .lang-btn.is-active { color: var(--s-red); }

/* mobile nav dropdown ให้พื้นครีม */
@media (max-width: 760px) {
  .sanson-page .nav__links {
    background: var(--s-cream-2);
    border-bottom: 1px solid var(--s-line);
    box-shadow: 0 12px 30px var(--s-shadow);
  }
}

/* ── HERO ── */
.sanson-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 64px;
  position: relative;
  overflow: hidden;
}
/* วงพาสเทลนุ่มๆ เป็นฉากหลัง (ไม่ flashy) */
.sanson-hero::before {
  content: "";
  position: absolute;
  width: min(78vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--s-blue-soft), var(--s-pink-soft) 60%, transparent 72%);
  top: 8%;
  z-index: 0;
  filter: blur(4px);
}
.sanson-hero__img-wrap {
  position: relative;
  z-index: 1;
  width: min(70vw, 340px);
  margin-bottom: 34px;
}
.sanson-hero__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: clamp(28px, 6vw, 52px);
  filter: drop-shadow(0 24px 40px var(--s-shadow));
  animation: sanson-float 5.5s ease-in-out infinite;
}
@keyframes sanson-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .sanson-hero__img { animation: none; }
}
.sanson-hero__eyebrow {
  position: relative; z-index: 1;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--s-red);
  margin-bottom: 18px;
}
.sanson-hero__title {
  position: relative; z-index: 1;
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 500;
  color: var(--s-ink);
  line-height: 1.25;
  margin-bottom: 18px;
}
.sanson-hero__sub {
  position: relative; z-index: 1;
  max-width: 440px;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--s-ink-soft);
  font-weight: 300;
}

/* ── SECTION frame ── */
.sanson-section { padding: 72px 0; }
.sanson-section__head { text-align: center; margin-bottom: 44px; }
.sanson-section__eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--s-red);
  display: block;
  margin-bottom: 12px;
}
.sanson-section__title {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 500;
  color: var(--s-ink);
}
.sanson-section__note {
  max-width: 520px;
  margin: 14px auto 0;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--s-ink-soft);
  font-weight: 300;
  text-align: center;
}

/* ── GALLERY (ภาพเป็นพระเอก เว้นที่ว่างเยอะ) ── */
.sanson-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
}
.sanson-card {
  background: var(--s-cream-2);
  border: 1px solid var(--s-line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 26px var(--s-shadow);
  transition: transform 0.4s var(--s-ease), box-shadow 0.4s var(--s-ease);
}
.sanson-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px var(--s-shadow);
}
.sanson-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--s-blue-soft);
}
.sanson-card__cap {
  padding: 14px 16px 18px;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--s-ink-soft);
}

/* raincoat 4 มุม — เน้นให้ภาพตุ๊กตาลอยบนพื้นนวล */
.sanson-gallery--toy .sanson-card__img {
  object-fit: contain;
  padding: 12px;
  background: linear-gradient(160deg, var(--s-pink-soft), var(--s-blue-soft));
}

/* ── KOI GRID (49 ต้นฉบับ — เริ่มจากภาพวาด) ── */
.sanson-koi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}
.sanson-koi-card {
  margin: 0;
  background: var(--s-cream-2);
  border: 1px solid var(--s-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 16px var(--s-shadow);
  transition: transform 0.35s var(--s-ease), box-shadow 0.35s var(--s-ease);
}
.sanson-koi-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px var(--s-shadow); }
.sanson-koi-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--s-cream);
}

/* ── RAINCOAT PAIRS (ภาพต้นแบบ ↔ โมเดล) ── */
.sanson-rc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}
.rc-pair {
  background: var(--s-cream-2);
  border: 1px solid var(--s-line);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 10px 26px var(--s-shadow);
  transition: transform 0.35s var(--s-ease), box-shadow 0.35s var(--s-ease);
}
.rc-pair:hover { transform: translateY(-4px); box-shadow: 0 16px 36px var(--s-shadow); }
.rc-pair__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 0 4px;
}
.rc-pair__no {
  font-family: var(--s-serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--s-red);
  letter-spacing: 0.04em;
}
.rc-pair__color {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--s-ink-soft);
}
.rc-pair__body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.rc-pair__side { text-align: center; }
.rc-pair__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--s-pink-soft), var(--s-blue-soft));
  padding: 8px;
}
.rc-pair__cap {
  display: block;
  margin-top: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--s-ink-soft);
}
.rc-pair__link {
  color: var(--s-red);
  font-size: 1.2rem;
  opacity: 0.7;
}
/* silhouette (เงา — โมเดลที่ยังไม่มี) */
.rc-pair__side--soon .rc-pair__cap { color: var(--s-ink-soft); opacity: 0.75; }
.rc-pair__silhouette {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  background: var(--s-cream);
  border: 1px dashed var(--s-line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rc-pair__silhouette .sanson-sil-svg {
  width: 62%;
  height: auto;
  opacity: 0.85;
}

/* ── EXHIBITION (ประกาศจัดแสดง) ── */
.sanson-exhibit { text-align: center; }
.sanson-exhibit__card {
  max-width: 560px;
  margin: 0 auto;
  background: linear-gradient(160deg, var(--s-pink-soft), var(--s-blue-soft));
  border: 1px solid var(--s-line);
  border-radius: 22px;
  padding: 40px 32px;
  box-shadow: 0 14px 34px var(--s-shadow);
}
.sanson-exhibit__label {
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--s-red);
  display: block;
  margin-bottom: 16px;
}
.sanson-exhibit__venue {
  font-size: clamp(1.35rem, 3.4vw, 1.8rem);
  font-weight: 500;
  color: var(--s-ink);
  line-height: 1.4;
  margin-bottom: 8px;
}
.sanson-exhibit__place {
  font-size: 0.95rem;
  color: var(--s-ink-soft);
  margin-bottom: 22px;
}
.sanson-exhibit__dates {
  display: inline-block;
  background: var(--s-cream-2);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: var(--s-ink);
}

/* ── CONTACT (override .btn-inquiry ให้เด่นบนพื้นขาว) ── */
.sanson-contact { text-align: center; }
.sanson-contact__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}
.sanson-page .btn-inquiry {
  background: var(--s-cream-2);
  border: 1.5px solid var(--s-pink);
  color: var(--s-ink);
  border-radius: 999px;
  padding: 13px 26px;
}
.sanson-page .btn-inquiry:hover {
  background: var(--s-pink-soft);
  border-color: var(--s-red);
  color: var(--s-red);
}
.sanson-page .btn-inquiry .btn-dot { background: var(--s-red); }
.sanson-contact__note {
  margin-top: 22px;
  font-size: 0.85rem;
  color: var(--s-ink-soft);
  font-weight: 300;
}

/* ── FOOTER (override dark → cream) ── */
.sanson-page #footer {
  border-top: 1px solid var(--s-line);
  color: var(--s-ink-soft);
}
.sanson-page .footer__brand { color: var(--s-ink); }
.sanson-page .footer__sub,
.sanson-page .footer__location,
.sanson-page .footer__copy { color: var(--s-ink-soft); }
.sanson-page .footer__links a { color: var(--s-ink-soft); }
.sanson-page .footer__links a:hover { color: var(--s-red); }
.sanson-page .footer__sep { color: var(--s-line); }

/* ── responsive ── */
@media (max-width: 620px) {
  .sanson-section { padding: 54px 0; }
  .sanson-hero { padding-top: 104px; }
  .sanson-gallery { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
  .sanson-card { border-radius: 16px; }
  .sanson-koi-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
  /* คู่ภาพวาด↔โมเดล stack แนวตั้งบนมือถือ (ภาพใหญ่ขึ้น) */
  .rc-pair__body { grid-template-columns: 1fr; gap: 14px; }
  .rc-pair__img, .rc-pair__silhouette { max-width: 260px; margin: 0 auto; }
  .rc-pair__link { transform: rotate(90deg); justify-self: center; }
}

/* ── KOI card clickable ── */
.sanson-koi-card { cursor: pointer; }
.sanson-koi-card:focus-visible {
  outline: 2px solid var(--s-red);
  outline-offset: 2px;
}

/* ── KOI LIGHTBOX (ซูมภาพต้นฉบับ + ชื่อพันธุ์) ── */
.sanson-lb {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(58, 51, 48, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 1;                       /* base = มองเห็นแน่นอน (ไม่พึ่ง transition ที่ค้างได้บนมือถือ) */
}
.sanson-lb[hidden] { display: none; }
/* โชว์ทันทีเมื่อเปิด (ไม่ใช้ transition/animation กับ container — กัน opacity ค้างบนมือถือ) */
.sanson-lb__stage {
  margin: 0;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.sanson-lb__img {
  max-width: 92vw;
  max-height: 76vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: clamp(16px, 3vw, 26px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  background: var(--s-cream);
  opacity: 1;                       /* มองเห็นแน่นอน — JS ตั้ง src ตรงๆ ไม่พึ่ง fade */
}
.sanson-lb__cap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: #FFFFFF;
  text-align: center;
}
.sanson-lb__name {
  font-family: var(--s-serif);
  font-size: 1rem;
  letter-spacing: 0.08em;
}
.sanson-lb__count {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
}
.sanson-lb__close,
.sanson-lb__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.25s var(--s-ease);
}
.sanson-lb__close:hover,
.sanson-lb__nav:hover { background: rgba(255, 255, 255, 0.3); }
.sanson-lb__close {
  top: 22px; right: 24px;
  width: 44px; height: 44px;
  font-size: 1.1rem;
}
.sanson-lb__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  font-size: 1.9rem;
  line-height: 1;
  padding-bottom: 4px;
}
.sanson-lb__nav--prev { left: 24px; }
.sanson-lb__nav--next { right: 24px; }

@media (max-width: 620px) {
  .sanson-lb { padding: 16px; }
  .sanson-lb__nav { width: 42px; height: 42px; font-size: 1.5rem; }
  .sanson-lb__nav--prev { left: 10px; }
  .sanson-lb__nav--next { right: 10px; }
  .sanson-lb__close { top: 14px; right: 14px; }
  .sanson-lb__img { max-height: 70vh; }
}