/* v2.8.1 — academic positioning, institutional value and platform mechanism */
.hero-positioning {
  max-width: 900px;
  margin: 18px 0 12px;
  padding-left: 18px;
  border-left: 4px solid var(--pink);
  color: var(--purple);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 850;
  line-height: 1.65;
  text-wrap: balance;
}

.copy-definition {
  margin-top: 30px;
}

.copy-definition .callout {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(56, 42, 114, .14);
  background:
    radial-gradient(circle at 88% 12%, rgba(0, 185, 215, .13), transparent 30%),
    linear-gradient(135deg, #f9f7ff, #f2f8ff);
  box-shadow: 0 18px 42px rgba(56, 42, 114, .08);
}

.copy-definition .callout::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--pink), var(--blue));
}

.copy-definition .callout h2 {
  max-width: 900px;
  margin-top: 0;
  color: var(--purple);
}

.copy-definition .callout p {
  max-width: 1060px;
  font-size: 1.03rem;
  line-height: 1.85;
}

/* Six stages read as a balanced 3 x 2 institutional pathway. */
.copy-flow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.copy-flow li {
  min-height: 132px;
  border-top: 3px solid rgba(216, 37, 138, .72);
  box-shadow: 0 12px 30px rgba(56, 42, 114, .06);
}

.section-head {
  align-items: end;
  column-gap: clamp(28px, 5vw, 72px);
}

.section-head > p {
  max-width: 720px;
  line-height: 1.8;
}

.page-hero .eyebrow,
.section-head .eyebrow {
  letter-spacing: .08em;
  line-height: 1.45;
}

.page-hero h1 {
  max-width: 1180px;
  line-height: 1.18;
}

.page-hero .lede {
  max-width: 1080px;
}

/* Give formal bilingual headings room without losing mobile rhythm. */
body[data-locale="en"] .page-hero h1,
body[data-locale="th"] .page-hero h1 {
  font-size: clamp(2.15rem, 4.6vw, 4.9rem);
}

@media (min-width: 901px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr);
    gap: clamp(42px, 6vw, 88px);
    align-items: center;
  }

  .copy-cards > .card {
    padding: clamp(24px, 2.3vw, 34px);
  }
}

@media (max-width: 900px) {
  .copy-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .hero-positioning {
    margin-top: 14px;
    padding-left: 14px;
    font-size: 1rem;
  }

  .copy-flow {
    grid-template-columns: 1fr;
  }

  .copy-flow li {
    min-height: 0;
  }

  .copy-definition {
    margin-top: 22px;
  }

  .page-hero .eyebrow,
  .section-head .eyebrow {
    letter-spacing: .045em;
  }
}