/* =========================================================
   ARB KHAO — home.css (home page only)
   ========================================================= */

/* hero info strip */
.hero-info { max-width: 960px; margin: clamp(40px, 5.5vw, 64px) auto 0; }
.hero-info__list { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.hero-info__list > div { padding: 22px 18px 20px; text-align: center; }
.hero-info__list > div + div { border-left: 1px solid var(--line-light); }
.hero-info dt { font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
html[lang="th"] .hero-info dt { font-size: 12px; letter-spacing: .04em; }
.hero-info dd { margin: 8px 0 0; }
.hero-info strong { display: block; color: inherit; font-weight: 200; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; }
html[lang="th"] .hero-info strong { font-weight: 300; font-size: clamp(20px, 2vw, 28px); line-height: 1.5; }
.hero-info dd span { display: block; font-size: 12px; opacity: .72; margin-top: 4px; }
.hero-info__cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero__scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); min-width: 44px; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: .8; }
.hero__scroll i { width: 1px; height: 42px; background: linear-gradient(currentColor 50%, transparent 50%) 0 0 / 1px 200%; animation: scrollCue 2.2s var(--ease) infinite; }
@keyframes scrollCue { from { background-position: 0 100%; } to { background-position: 0 -100%; } }

/* intro */
.intro__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 110px); align-items: end; }
.intro__text p { margin: 0 0 18px; }
.intro__img { aspect-ratio: 4 / 5; overflow: hidden; }
.intro__img img { width: 100%; height: 100%; object-fit: cover; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.stats strong { display: block; color: inherit; font-weight: 200; font-size: clamp(34px, 3.4vw, 50px); line-height: 1; }
.stats span { font-size: var(--fs-small); color: var(--c-muted); }

/* highlights carousel */
.objects__stage { position: relative; display: grid; grid-template-columns: 1fr 1.9fr 1fr; align-items: center; gap: clamp(16px, 4vw, 70px); min-height: clamp(360px, 46vw, 640px); }
.objects__side, .objects__main { position: relative; overflow: hidden; margin: 0; }
.objects__side { aspect-ratio: 3 / 4; opacity: .95; cursor: pointer; border: 0; padding: 0; background: none; }
.objects__side--prev { margin-left: calc(var(--gutter) * -1); }
.objects__side--next { margin-right: calc(var(--gutter) * -1); }
.objects__main { aspect-ratio: 1 / 1; max-width: 560px; width: 100%; justify-self: center; }
.objects img { width: 100%; height: 100%; object-fit: cover; transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.objects.is-changing img { opacity: 0; transform: scale(1.06); }
.objects__title { position: absolute; left: 50%; top: 50%; z-index: 2; margin: 20px 0; transform: translate(-50%, -50%); width: max-content; max-width: 100vw; text-align: center; color: var(--white); pointer-events: none; text-shadow: 0 2px 30px rgba(20, 24, 18, .35); }
.objects__title .line { transition: opacity .6s var(--ease), transform .8s var(--ease); }
.objects.is-changing .objects__title .line { opacity: 0; transform: translateY(18px); }
.objects__foot { display: flex; align-items: flex-start; justify-content: center; gap: clamp(20px, 4vw, 60px); margin-top: 28px; position: relative; z-index: 2; }
.objects__foot p { max-width: 330px; margin: 0; font-size: 14px; transition: opacity .6s; }
.objects.is-changing .objects__foot p { opacity: 0; }
.objects__controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 36px; position: relative; z-index: 2; }
.objects__count { font-size: var(--fs-label); letter-spacing: .1em; min-width: 48px; text-align: center; }

@media (max-width: 991px) {
  .intro__grid { grid-template-columns: 1fr; }
  .intro__img { aspect-ratio: 4 / 3; }
  .objects__stage { grid-template-columns: .5fr 2fr .5fr; gap: 14px; }
  .hero-info__list > div { padding: 18px 8px; }
  .hero-info dd span { display: none; }
}
@media (max-width: 767px) {
  .stats { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .objects__stage { grid-template-columns: 1fr; min-height: 0; }
  .objects__side { display: none; }
  .objects__title { width: 92vw; }
  .objects__foot { flex-direction: column; align-items: center; text-align: center; }
  .hero-info strong { font-size: 22px; }
  .hero__scroll { display: none; }
}
/* phones: hero facts stack as rows — label left, value right */
@media (max-width: 575px) {
  .hero-info { margin-top: 32px; }
  .hero-info__list { grid-template-columns: 1fr; }
  .hero-info__list > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 2px; text-align: left; }
  .hero-info__list > div + div { border-left: 0; border-top: 1px solid var(--line-light); }
  .hero-info dd { margin: 0; text-align: right; }
  .hero-info dd span { display: block; margin-top: 2px; }
  .hero-info__cta .pill { min-width: 200px; justify-content: center; }
  .stats strong { font-size: 30px; }
}