/* ═══════════════════════════════
   symbol.css — pages/symbol.php
   ═══════════════════════════════ */
.symbol-body { max-width: 1400px; margin: 0 auto; padding: 3rem 2rem 4rem; }

/* override inner-page-body padding เฉพาะหน้านี้ */
.inner-page-body:has(.symbol-body) { padding: 0; }

/* ── Section wrapper ── */
.sym-section { margin-bottom: 3rem; }

/* ── Large italic section titles ── */
.sym-title {
  font-family: 'Mitr', sans-serif;
  font-size: 2.88rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.25;
  margin-bottom: 1.2rem;
  color: #739073;
}
.sym-title--green  { color: #739073; }
.sym-title--purple { color: #739073; }

/* ── 2-column row (text + logo) ── */
.sym-row {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.sym-row--reverse { flex-direction: row-reverse; }

.sym-text {
  flex: 1 1 60%;
}
.sym-text p {
  font-size: 1.575rem;
  font-weight: 300;
  line-height: 1.9;
  color: #444;
  text-align: justify;
  margin-bottom: 0;
}

.sym-logo {
  flex: 0 0 auto;
  width: 240px;
  text-align: center;
}
.sym-logo img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.sym-logo-placeholder {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  background: var(--g-100);
  border-radius: 50%;
  color: var(--g-400);
  font-size: 2.7rem;
  gap: .5rem;
}
.sym-logo-placeholder span {
  font-size: .7rem;
  font-style: normal;
  color: var(--g-400);
}

/* full-width text paragraph (no logo) */
.sym-section > p {
  font-size: 1.575rem;
  font-weight: 300;
  line-height: 1.9;
  color: #444;
  text-align: justify;
  margin-bottom: 0;
}

/* Responsive */
@media (max-width: 767px) {
  .sym-row,
  .sym-row--reverse {
    flex-direction: column;
  }
  .sym-logo { width: 180px; }
  .sym-title { font-style: normal; }
  .sym-values-logo-wrap img { max-width: 320px; }
  .values-letter { width: 50px; height: 50px; font-size: 1.08rem; }
  .values-label { font-size: .855rem; }
}

/* ── Values brand logo (before ค่านิยม) ── */
.sym-values-logo-wrap {
  text-align: center;
  margin: 2.5rem 0 1rem;
}
.sym-values-logo-wrap img {
  max-width: 720px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ── Values section title spacing ── */
.sym-title--values { margin-top: 1rem; }

/* ── Values list ── */
.values-list {
  list-style: none; padding: 0;
  margin: 1.2rem auto 2rem;
  max-width: 860px;
}
.values-list li {
  display: flex; align-items: center; gap: 1.4rem;
  padding: .8rem 0; border-bottom: 1px solid var(--g-100);
}
.values-list li:last-child { border-bottom: none; }
.values-letter {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.08rem; font-weight: 700; color: #fff; flex-shrink: 0;
  font-family: 'Mitr', sans-serif;
}
.values-label {
  font-family: 'Mitr', sans-serif;
  font-weight: 500;
  color: #1a1a2e;
  font-size: 0.9rem;
  line-height: 1.5;
}
.values-sep { font-weight: 400; color: #555; margin: 0 .25em; }
.values-desc { font-weight: 400; color: #333; }

/* ── UP-CESM wordmark ── */
.wordmark-wrap { text-align: center; padding: 2rem 0 1rem; }
.wordmark-img { max-width: 1200px; width: 100%; height: auto; object-fit: contain; }
.wordmark-top { display: flex; justify-content: center; gap: 3rem; margin-bottom: .5rem; }
.wordmark-top span { font-size: .765rem; font-weight: 600; color: #4a3a8a; }
.wordmark-letters {
  font-size: clamp(2.7rem, 9vw, 4.95rem);
  font-weight: 900; letter-spacing: .02em; line-height: 1;
}
.wordmark-letters .up   { color: #4a3a8a; }
.wordmark-letters .cesm { color: #b8952a; }
.wordmark-bottom { display: flex; justify-content: center; gap: 2.5rem; margin-top: .5rem; }
.wordmark-bottom span { font-size: .765rem; font-weight: 600; }
.wordmark-bottom .p,
.wordmark-bottom .e { color: #4a3a8a; }
.wordmark-bottom .m { color: #b8952a; }