/* =========================================================
   ECUremap – Hero Banner (fade/slide) + Metrics (Pro Look)
   ========================================================= */

/* ---------- Tokens / Defaults ---------- */
:root{
  --ecu-fg:        #e9eef7;
  --ecu-muted:     #9fb0c7;
  --ecu-card-bg:   rgba(18, 24, 38, .62);
  --ecu-card-bd:   rgba(255,255,255,.14);
  --ecu-card-hi:   rgba(255,255,255,.06);
  --ecu-radius:    20px;
  --ecu-shadow:    0 18px 60px rgba(3, 8, 20, .45);
  --ecu-accent:    #60a5fa;
  --ecu-accent2:   #a78bfa;
  --ecu-good:      #34d399;
}

/* ========== HERO: wrapper จัดกลาง และล็อกขนาดปลอดภัย ========== */
.hero-frame{
  width:100%;
  display:flex;
  justify-content:center;
  /* ป้องกัน parent บังคับสูง/แพดดิงจาก Cover/Group */
}
.hero-frame .wp-block-cover{ min-height:auto !important; padding:0 !important; }
.hero-frame .wp-block-group{ margin:0 auto; }

/* กล่องแบนเนอร์ */
.duo-hero{
  position: relative;
  display: block;
  width: min(55vw, 100%);   /* Desktop ไม่เกิน 960px, Mobile = 100% */
  margin: 0 auto !important;

  /* วิธีกำหนดความสูงที่ “ไม่พัง” */
  aspect-ratio: 16 / 9;      /* เบราว์เซอร์สมัยใหม่รองรับ */
  min-height: 280px;         /* กันกรณีบางกฎทำให้ความสูงหาย */
  overflow: hidden;
}

/* สไลด์ */
.duo-hero .duo-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform: translateX(2%);
  transition: opacity .8s ease, transform .8s ease;
}
.duo-hero .duo-slide.is-active{
  opacity:1;
  transform: translateX(0);
  z-index:2;
}

/* รูปภาพในสไลด์ */
.duo-hero .duo-slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ลด motion */
@media (prefers-reduced-motion: reduce){
  .duo-hero .duo-slide{ transition:none; }
}

/* ระยะห่างระหว่างแบนเนอร์กับ metrics */
.ecu-metrics-grid{
  margin-top: clamp(10px, 2vh, 18px);
}


/* ---------- METRICS: section/grid ---------- */
.ecu-metrics{
  color: var(--ecu-fg);
}
.ecu-metrics-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2vw, 22px);
  max-width: 960px;                 /* ให้กว้างเท่ากับ hero */
  margin: clamp(8px, 2vh, 16px) auto clamp(10px, 4vw, 36px);
  padding: 0 16px;
}
@media (max-width: 1024px){
  .ecu-metrics-grid{ grid-template-columns: 1fr; }
}

/* ---------- METRICS: card ---------- */
.ecu-metric{
  position: relative;
  border-radius: var(--ecu-radius);
  background: var(--ecu-card-bg);
  border: 1px solid var(--ecu-card-bd);
  box-shadow: var(--ecu-shadow);
  padding: clamp(14px, 2.4vw, 20px) clamp(14px, 2.4vw, 20px) clamp(16px, 2.8vw, 22px);
  isolation: isolate;
  overflow: hidden;
}
.ecu-metric::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--ecu-card-hi), transparent 60%);
  pointer-events:none;
}
.ecu-metric::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  pointer-events:none;
}
@supports (backdrop-filter: blur(6px)){
  .ecu-metric{ backdrop-filter: blur(10px) saturate(120%); }
}

/* header (kicker + number) */
.ecu-metric-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.ecu-metric-kicker{
  font-size: 13px; letter-spacing:.02em; color: var(--ecu-muted);
  padding: 6px 12px; line-height:1;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.ecu-metric-kicker.ecu-good{
  color: var(--ecu-good);
  border-color: color-mix(in oklab, var(--ecu-good) 40%, transparent);
}

.ecu-metric-value{
  font-weight: 900; line-height:1;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(34px, 6vw, 36px);
  text-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.ecu-metric-value .ecu-unit{ font-size:.5em; opacity:.9; margin-left:4px; }

.ecu-metric-title{
  margin: 8px 0 14px;
  font-size: clamp(16px, 2.3vw, 18px);
  font-weight: 650;
  color: #f1f5ff;
}

/* progress bar */
.ecu-progress{
  position: relative;
  height: 12px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
}
@media (min-width: 780px){ .ecu-progress{ height:14px; } }

.ecu-progress-fill{
  height:100%; width:0%;
  border-radius:inherit;
  background: linear-gradient(90deg, var(--ecu-accent), var(--ecu-accent2));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 8px 22px color-mix(in oklab, var(--ecu-accent) 55%, transparent);
  transition: width .9s cubic-bezier(.2,.7,.2,1);
}

/* hover (เบา ๆ) */
@media (hover:hover){
  .ecu-metric:hover{
    transform: translateY(-1px);
    box-shadow: 0 22px 70px rgba(3,8,20,.5);
  }
}

/* ---------- Light mode tweak (พื้นหลังสว่าง) ---------- */
@media (prefers-color-scheme: light){
  :root{
    --ecu-fg:      #0f172a;
    --ecu-muted:   #64748b;
    --ecu-card-bg: rgba(255,255,255,.86);
    --ecu-card-bd: rgba(2, 6, 23, .06);
  }
  .ecu-metric-title{ color:#0f172a; }
}

/* ---------- A11y ---------- */
@media (prefers-reduced-motion: reduce){
  .duo-hero .duo-slide{ transition:none; }
  .ecu-progress-fill{ transition:none; }
}