/* ===== Mystical Pass - Section CSS ===== */
/*@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');*/

/* ===== INTRO SECTION: mystical pass คืออะไร ===== */
.introSection {
  width: 100%;
  display: flex;
  gap: 50px;
  align-items: flex-start;
}

/* ---- LEFT PANEL: กล่อง detail ---- */
.introLeft {
  flex: 1;
  position: relative;
  background-image: url('../images/Frame276.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 30px 280px 30px 50px; /* right: เผื่อพื้นที่ NPC (340px) + offset */
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* text + NPC อยู่แถวเดียวกันในกล่องซ้าย */
.introLeftInner {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.introLeftText {
  flex: 1;
  display: flex;
  flex-direction: column;
/*  gap: 10px;*/
}

.npcArea {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
}

.npcArea img {
  width: 200px;
  object-fit: contain;
}

.introSectionTitle {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}

.introSectionTitleInner {
  background: linear-gradient(90deg, #1e5a6a 0%, #0d3040 50%, #1e5a6a 100%);
  border: 1px solid #00e5ff;
  border-radius: 6px;
  padding: 6px 28px;
  font-family: "Google Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #f5e642;
  text-shadow: 0 0 10px rgba(245, 230, 66, 0.5);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.introBodyText {
  font-family: "Google Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #c8dde8;
  line-height: 1.8;
}

.introBodyText span {
  color: rgba(255, 243, 165, 1);


/*  font-weight: 600;*/
}

.npcServiceBox {
  margin-top: 4px;
}

.npcServiceTitle {
  font-family: "Google Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.npcServiceList {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: "Google Sans", sans-serif;
  font-size: 13.5px;
  color: #c8dde8;
  line-height: 1.9;
}

.npcServiceList li::before {
  content: '- ';
}

.introWarning {
  font-family: "Google Sans", sans-serif;
  font-size: 13px;
  color: #c8dde8;
  line-height: 1.75;
  margin-top: 4px;
}

.introWarning strong {
  color: #ffffff;
  font-weight: 600;
}

/* ---- RIGHT PANEL: NPC + Pass cards ---- */
.introRight {
  width: 500px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* NPC middle area */
.npcArea {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
    right: -50px;
}

.npcArea img {
  width: 340px;
  object-fit: contain;
}

/* Pass cards */
.passCard {
  position: relative;
/*  border-radius: 8px;*/
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 220px;
}

/* bg image เป็น Maskgroup */
.passCardBg {
    background: url('../images/Frame340.png')no-repeat;
        background-size: 100% 100%;
        background-position: 50% 50%;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  border-radius: 8px;
}
.passCardBg2 {
    background: url('../images/Frame341.png')no-repeat;
        background-size: 100% 100%;
        background-position: 50% 50%;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  border-radius: 8px;
}

.passCardContent {
    
    position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 90%;
  padding: 20px 20px 8px;
  margin: 0 auto;
  transform: translateY(15px);
/*
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 30px;
  width: 90%;
  padding: 20px;
    margin: auto;
*/
}

.passCardImg {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100px;
}

.passCardImg img {
  width: 100%;
  object-fit: contain;
}

.passCardImgLabel {
  font-family: "Google Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  color: #000000;
}

.passCardText {
  flex: 1;
  font-family: "Google Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  line-height: 1.5;
        text-shadow: 2px 2px 7px black;
}

/* ==============================
   RESPONSIVE
   ============================== */

/* ───── Desktop XL (≥1600px) — NPC ใหญ่ขึ้น ───── */
@media (min-width: 1600px) {
  .npcArea img { width: 380px; }
  .introRight { width: 540px; }
}

/* ───── Desktop กลาง (max 1400px) — ลด NPC + ปรับตำแหน่ง ───── */
@media (max-width: 1400px) {
  .npcArea img { width: 300px; }
  .npcArea { right: -30px; }
  .introLeft { padding: 28px 220px 28px 40px; }
  .introRight { width: 460px; }
}

/* ───── Tablet Landscape (max 1200px) — ลดขนาด layout ───── */
@media (max-width: 1200px) {
  .introSection { gap: 30px; }
  .npcArea img { width: 240px; }
  .npcArea { right: -10px; }
  .introLeft { padding: 24px 180px 24px 32px; }
  .introRight { width: 400px; }
  .passCard { min-height: 190px; }
  .passCardContent { gap: 16px; padding: 14px 16px 6px; }
  .passCardImg { width: 80px; }
  .passCardText { font-size: 13px; }
  .introBodyText { font-size: 13.5px; line-height: 1.7; }
  .introSectionTitleInner { font-size: 16px; padding: 6px 22px; }
}

/* ───── Tablet (max 1100px) — stack เร็วขึ้น ───── */
@media (max-width: 1100px) {
  .introSection {
    flex-direction: column;
    gap: 28px;
  }
  .introLeft {
    padding: 28px 36px;
    width: 100%;
  }
  .introRight {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
  }
  /* NPC กลับเข้า flex flow แทนที่จะ absolute */
  .introLeftInner {
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
  }
  .npcArea {
    position: relative;
    right: auto;
    flex-shrink: 0;
  }
  .npcArea img { width: 220px; }
}

/* ───── Mobile Large (max 768px) ───── */
@media (max-width: 900px) {
  .introSection {
    flex-direction: column;
    gap: 24px;
  }
  .introLeft { padding: 22px 24px; }
  .introRight { width: 100%; max-width: 100%; }

  .introLeftInner {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .npcArea {
    position: relative;
    right: auto;
    width: 100%;
    justify-content: center;
  }
  .npcArea img { width: clamp(180px, 38vw, 260px); }

  .introBodyText { font-size: 13.5px; }

  .passCard { min-height: 170px; }
  .passCardContent {
    gap: 14px;
    padding: 12px 14px 4px;
  }
  .passCardImg { width: 76px; }
  .passCardText { font-size: 12.5px; }
}

/* ───── Mobile Medium (max 576px) ───── */
@media (max-width: 576px) {
  .introLeft { padding: 18px 16px; }
  .introSectionTitleInner {
    font-size: 14.5px;
    padding: 5px 18px;
  }
  .introBodyText {
    font-size: 13px;
    line-height: 1.65;
  }
  .npcArea img { width: clamp(160px, 50vw, 220px); }

  .npcServiceTitle { font-size: 13px; }
  .npcServiceList { font-size: 12.5px; line-height: 1.75; }
  .introWarning { font-size: 12px; line-height: 1.6; }

  .passCard { min-height: 150px; }
  .passCardContent {
    flex-direction: row;
    gap: 10px;
    padding: 10px 12px 4px;
  }
  .passCardImg { width: 64px; }
  .passCardImgLabel { font-size: 11px; }
  .passCardText {
    font-size: 11.5px;
    line-height: 1.45;
  }
}

/* ───── Mobile Small (max 480px) ───── */
@media (max-width: 480px) {
  .introLeft { padding: 16px 12px; }
  .introSectionTitleInner {
    font-size: 13.5px;
    padding: 4px 14px;
    white-space: normal;
    text-align: center;
  }
  .introBodyText { font-size: 12.5px; }
  .npcArea img { width: clamp(150px, 56vw, 200px); }

  .passCardContent {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 12px 14px;
    transform: none;
  }
  .passCardImg { width: 64px; }
  .passCardText {
    font-size: 11.5px;
    text-align: center;
  }
  .passCard { min-height: 220px; }
}

/* ───── Mobile Tiny (max 380px) ───── */
@media (max-width: 380px) {
  .introLeft { padding: 14px 10px; }
  .introBodyText { font-size: 12px; line-height: 1.6; }
  .npcArea img { width: 160px; }
  .passCardImg { width: 58px; }
  .passCardText { font-size: 11px; }
}

/* ───── Hover เฉพาะ device ที่ใช้เมาส์จริง ───── */
@media (hover: none) {
  .passCard:hover { transform: none; }
}