/* ==========================================================================
   layout.css — โครงหน้า / container / section / grid
   ========================================================================== */

.site { position: relative; overflow-x: clip; }

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Section ---------- */
.section { position: relative; padding: 96px 0; }
.section--tint { background: var(--c-tint); }
.section--tint-soft { background: var(--c-tint-2); }
.section--tight { padding: 64px 0; }
.section--navy { background: var(--c-navy); color: #c4d3ea; }
.section--navy .section-title,
.section--navy h3 { color: #fff; }
.section--navy .section-lead { color: #a9bddc; }
.section--navy .eyebrow { color: #7fb3f0; }

.section-head { max-width: 700px; margin-bottom: 40px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
}
.section-head--row > div { max-width: 660px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.section-head--center .eyebrow::after {
  content: "";
  width: 22px; height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.section-title { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 10px; }
.section-title small {
  display: block;
  margin-top: 6px;
  font-size: .6em;
  color: var(--c-navy-2);
}
.section-title .is-accent { color: var(--c-primary); }
.section-lead { color: var(--c-muted); font-size: 17px; margin: 0; }

/* ---------- Split (ข้อความ + รูป) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
}
.split--top { align-items: start; }

/* ---------- Grid ---------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }