/* ═══════════════════════════════
   vision.css — pages/vision.php
   ═══════════════════════════════ */
.vision-body { max-width: 860px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.vision-section { padding: 2rem 0; border-bottom: 1px solid var(--g-200); }
.vision-section:last-child { border-bottom: none; }
.vision-section-title {
  font-size: 1rem; font-weight: 700; color: var(--g-600); margin-bottom: .75rem;
  display: flex; align-items: center; gap: .5rem;
}
.vision-section-title::before {
  content: ''; display: inline-block;
  width: 8px; height: 8px;
  background: var(--g-500); border-radius: 50%;
}
.vision-section p { font-size: .9rem; line-height: 1.9; color: #444; text-align: justify; margin: 0; }

/* ── วิสัยทัศน์ — section แยก ชิดซ้าย ─────────────────────── */
.vs-vision-sec {
  padding: 3rem 3rem 1rem 3%;
}
.vs-vision-title {
  font-size: 3.2rem; font-weight: 400;
  color: var(--g-700, #374938);
  margin-bottom: 1rem;
}
.vs-vision-body {
  font-size: 1.75rem; font-weight: 300;
  line-height: 1.75; color: #333;
  text-align: left;
}
.vs-hi { color: #739073; font-size: 1.1em; }

/* ── พันธกิจ ─────────────────────────────────────────────────── */
.vs-tasks-sec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  padding: 0;
}
.vs-tasks-img-col {
  display: flex; align-items: center; justify-content: center;
  padding: 0 1rem;
}
.vs-tasks-img {
  width: 100%; max-width: 500px;
  height: auto; display: block;
}
.vs-tasks-img-ph {
  font-size: 8rem; color: #739073; opacity: .25;
  display: flex; align-items: center; justify-content: center;
  height: 400px;
}
.vs-tasks-content-col { padding: 1rem 4% 1rem 2rem; }
.vs-tasks-title {
  font-size: 3.2rem; font-weight: 400;
  color: var(--g-700, #374938);
  margin-bottom: 1.5rem;
}
.vs-tasks-list p {
  font-size: 1.75rem; font-weight: 300;
  line-height: 1.6; color: #333;
  margin-bottom: 1.2rem;
}
.vs-tasks-list p:last-child { margin-bottom: 0; }
.vs-hi-lg { font-size: 1.15em; }

@media (max-width: 900px) {
  .vs-tasks-sec { grid-template-columns: 1fr; }
  .vs-tasks-img { max-width: 320px; margin: 0 auto; }
}

/* ── เป้าประสงค์ ─────────────────────────────────────────────── */
.vs-goals-sec {
  position: relative;
  padding: 1.5rem 6% 420px;
  background: #fff;
  overflow: hidden;
}
.vs-goals-title {
  font-size: 3.2rem; font-weight: 400;
  color: var(--g-700, #374938);
  margin-bottom: 2rem;
}
.vs-goals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5rem;
  position: relative; z-index: 1;
  margin-bottom: 1rem;
  align-items: stretch;
  min-height: 320px;
}
.vs-goal-col {
  display: flex; flex-direction: column; gap: .5rem;
  word-break: break-word; overflow-wrap: break-word;
}
.vs-goal-left  { text-align: left;   justify-content: flex-end; }
.vs-goal-center { text-align: center; }
.vs-goal-right { text-align: right;  justify-content: flex-end; }
.vs-goal-body {
  font-size: 1.25rem; font-weight: 300;
  line-height: 1.9; color: #333;
  margin: 0;
  text-align: justify;
  text-justify: inter-character;
  hyphens: auto;
}
.vs-goal-label {
  font-size: 2.1rem; font-weight: 300;
  color: #9F9F9F;
  margin-top: .8rem;
  text-align: center;
  white-space: nowrap;
}
.vs-goal-dot { color: #739073; font-size: 1.3em; }
.vs-goal-dot-center {
  color: #739073; font-size: 2.73rem; text-align: center;
  margin-top: -1.5rem;
}
/* รูปโลกต้นไม้ absolute ล่างกลาง */
.vs-goals-globe {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 55%; max-width: 820px;
  z-index: 0;
  pointer-events: none;
}
.vs-goals-globe-ph { height: 0; }

@media (max-width: 1200px) {
  .vs-goals-grid { gap: 3.5rem; min-height: 380px; }
  .vs-goal-body { font-size: 1.15rem; }
  .vs-goal-label { font-size: 1.8rem; }
}
@media (max-width: 900px) {
  .vs-goals-sec { padding: 2rem 5% 320px; }
  .vs-goals-grid { grid-template-columns: 1fr; gap: 2rem; min-height: unset; }
  .vs-goal-left,
  .vs-goal-right { justify-content: flex-start; text-align: left; }
  .vs-goal-center { text-align: left; }
  .vs-goal-label { text-align: left; font-size: 1.6rem; white-space: normal; }
  .vs-goal-dot-center { text-align: left; }
  .vs-goals-globe { width: 90%; }
}
@media (max-width: 576px) {
  .vs-goals-sec { padding: 1.5rem 4% 260px; }
  .vs-goals-grid { gap: 1.5rem; }
  .vs-goal-body { font-size: 1rem; }
  .vs-goal-label { font-size: 1.4rem; }
  .vs-goals-globe { width: 100%; }
}

/* ── ปรัชญา + ปณิธาน hero section ───────────────────────────── */
.vs-ph-wrap {
  background: #dde9df center/cover no-repeat; /* fallback สีเขียวอ่อน ก่อนมีรูป */
  padding: 7rem 1.5rem;
  min-height: 75vh;
  display: flex;
  align-items: center;
  position: relative;
}
.vs-ph-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.vs-ph-wrap .vs-ph-inner { position: relative; z-index: 1; }
.vs-ph-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}
.vs-ph-block { padding: 2.2rem 0 1.8rem; }
.vs-ph-title {
  font-size: 3.2rem; font-weight: 400;
  color: var(--g-700, #374938);
  margin-bottom: .85rem;
}
.vs-ph-body {
  font-size: 1.75rem; font-weight: 300;
  line-height: 1.75;
  color: #333;
}
.vs-ph-body p { margin: 0 0 .35rem; }
.vs-ph-body p:last-child { margin-bottom: 0; }
.vs-ph-quote {
  color: #739073;
  font-weight: 300;
  font-size: 1.1em;
}
.vs-ph-en {
  font-size: .72em;
  font-weight: 300;
  color: #555;
}
.vs-ph-sep {
  width: 240px; height: 1px;
  background: rgba(55,73,56,.25);
  margin: 0 auto;
}