/* ══ HERO WRAP ══════════════════════════════ */
.block-ailoggedinhero {
  background: #06040e;
  position: relative;
  width: 100%;
  min-height: clamp(650px, 100dvh, 600px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 768px) {
  .block-ailoggedinhero {
    grid-template-columns: 1fr;
    min-height: auto; /* ❗ ปล่อยให้ content กำหนด */
    
  }
}
/* ── Background image ──────────────────────── */
.ailoggedinhero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ailoggedinhero-bgimage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
  transition: transform 10s ease;
}

/* ── Overlay ──────────────────────────────── */
.ailoggedinhero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
//   background:
//     linear-gradient(105deg,
//       rgba(8,4,22,0.97) 0%,
//       rgba(10,5,28,0.88) 22%,
//       rgba(12,6,30,0.55) 48%,
//       rgba(8,4,18,0.15) 72%,
//       rgba(6,3,14,0.05) 100%
//     ),
//     radial-gradient(ellipse 50% 80% at 8% 50%, rgba(90,30,180,0.4) 0%, transparent 60%),
//     radial-gradient(ellipse 30% 50% at 0% 100%, rgba(110,25,200,0.25) 0%, transparent 55%);
}

/* ── Main body ─────────────────────────────── */
.ailoggedinhero-body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: 360px 1fr !important;
  align-items: center;
  padding: 0 56px 0 48px;
  gap: 0;
}

/* ══ LEFT STATS PANEL ═══════════════════════ */
.ailoggedinhero-leftstats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 48px 32px 48px 0;
  border-right: 1px solid rgba(255,255,255,0.06);
}

.stat-block {
    text-align: center !important;
    width: 100%;
  padding: 18px 16px;
  border-radius: 12px;
  transition: background .2s;
  cursor: default;
  animation: fade-in-left 0.6s ease both;
}
.stat-block:nth-child(1){ animation-delay:.05s }
.stat-block:nth-child(2){ animation-delay:.12s }
.stat-block:nth-child(3){ animation-delay:.19s }
.stat-block:nth-child(4){ animation-delay:.26s }

@keyframes fade-in-left {
  from { opacity:0; transform: translateX(-12px); }
  to   { opacity:1; transform: translateX(0); }
}
.stat-block:hover {
  background: rgba(160,120,255,0.07);
}

.stat-title {
  font-size: 14px !important;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(175,150,255,0.45);
  margin-bottom: 5px;
}

.stat-value {
  font-family: 'Syne', sans-serif;
  font-size: 24px !important;
  font-weight: 700;
  color: #e8e0ff;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Progress bar under progress stat */
.stat-progress-bar {
  margin-top: 8px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
.stat-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #9d60ff, #c49aff);
  box-shadow: 0 0 8px rgba(180,130,255,0.5);
  animation: fill-bar 1.4s 0.3s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes fill-bar {
  to { width: 0%; } /* will be overridden inline */
}

/* ══ CENTER CONTENT ═════════════════════════ */
.ailoggedinhero-center {
  padding: 48px 0 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: fade-in-up 0.8s 0.1s ease both;
}
@keyframes fade-in-up {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Greeting eyebrow */
.ailh-greeting {
  font-size: 14px !important;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(175,145,255,0.5);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ailh-greeting::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: rgba(175,145,255,0.4);
}

.welcome {
  font-family: 'Syne', sans-serif;
  font-size: 82px !important;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.0;
  margin-bottom: 40px;
}

/* Divider */
.ailh-divider {
  width: 52px;
  height: 1px;
  background: linear-gradient(90deg, rgba(160,120,255,0.6), transparent);
  margin-bottom: 28px;
}

.continue-label {
  font-size: 14px !important;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(175,145,255,0.5);
  margin-bottom: 10px;
}

.continue {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 700;
  color: rgba(230,220,255,0.88);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 6px;
}

.course {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(190,175,240,0.6);
  letter-spacing: 0.01em;
  margin-bottom: 36px;
}

/* ── Bottom fade ──────────────────────────── */
.ailoggedinhero-bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(6,4,14,0.7), transparent);
  z-index: 2;
  pointer-events: none;
}

/* ══ RESPONSIVE ═════════════════════════════ */
@media (max-width: 860px) {
  .ailoggedinhero-body {
    grid-template-columns: 1fr;
    padding: 40px 28px;
    gap: 40px;
  }
  .ailoggedinhero-leftstats {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 0 0 32px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .stat-block {
    flex: 1 1 140px;
  }
  .ailoggedinhero-center {
    padding: 0;
  }
}