/*
 * AI Motion — Index Layout CSS
 *
 * axdxrobot 디자인 시스템을 상속.
 * 이 파일은 aimotion 전용 오버라이드만 포함합니다.
 *
 * 로드 순서 (base.html):
 *   1. css/axdxrobot/root.css
 *   2. css/axdxrobot/layout_axdxrobot_index.css
 *   3. 이 파일  ← aimotion 전용 오버라이드
 */

/* =============================================================
   Brand Statement — aimotion: 50/50 split (dark bg + video)
   .ax-stmt 클래스 공통 적용 (두 섹션 모두 커버).
   ============================================================= */
.ax-stmt {
  height: 55vh;
  background: #000;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  overflow: hidden;
}

/* 전체 너비 헤더 행 — 흰 배경 / 검정 텍스트 / 중앙 정렬 */
.ax-stmt .ax-stmt__inner {
  grid-column: 1 / -1;
  height: 25vh;
  max-width: 100%;
  width: 100%;
  background: #fff;
  text-align: center;
  padding: 50px 100px 50px 100px;
}
.ax-stmt .ax-stmt__inner .ax-stmt__text {
  color: var(--color-heading, #0a0a0a);
  text-align: center;
}

.ax-stmt .ax-stmt__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 50px;
  min-width: 0;
  min-height: 0;        /* grid child overflow 방지 */
  overflow-y: auto;     /* 콘텐츠가 80vh 초과 시 스크롤 */
}

/* Eyebrow badge */
.ax-stmt .ax-stmt__eyebrow {
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}

.ax-stmt .ax-stmt__headline {
  font-family: var(--font-family);
  font-size: clamp(20px, 5.5vw, 35px);
  font-weight: var(--font-weight-medium);
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}

/* Blue accent second line */
.ax-stmt .ax-stmt__headline-accent {
  display: block;
  font-family: var(--font-family);
  color: #3b82f6;
}

/* Lead text */
.ax-stmt .ax-stmt__lead {
  font-family: var(--font-family);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 400;
  color: #fff;
  line-height: 1.6;
  margin: 0 0 20px;
}

/* Blue horizontal divider */
.ax-stmt .ax-stmt__divider {
  border: none;
  border-top: 2px solid #3b82f6;
  width: 44px;
  margin: 0 0 20px;
}

/* Feature grid — 2×2 */
.ax-stmt .ax-stmt__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 20px;
  margin: 40px 0 24px;
}

.ax-stmt .ax-stmt__feat {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.ax-stmt .ax-stmt__feat-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  color: #fff;
}

.ax-stmt .ax-stmt__feat-icon svg {
  width: 100%;
  height: 100%;
}

.ax-stmt .ax-stmt__feat-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ax-stmt .ax-stmt__feat-title {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
}

.ax-stmt .ax-stmt__feat-desc {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  line-height: 1.6;
  margin: 0;
}

/* Down chevron */
.ax-stmt .ax-stmt__more {
  display: flex;
  align-items: center;
  color: #3b82f6;
  margin-top: 4px;
}

/* Use-case list */
.ax-stmt .ax-stmt__uc-label {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin: 24px 0 8px;
}

.ax-stmt .ax-stmt__usecases {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ax-stmt .ax-stmt__uc-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ax-stmt .ax-stmt__uc-title {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  flex-shrink: 0;
  min-width: 110px;
}

.ax-stmt .ax-stmt__uc-desc {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  line-height: 1.55;
}

.ax-stmt .ax-stmt__text {
  font-family: var(--font-family);
  font-size: clamp(10px, 1.35vw, 15px);
  font-weight: var(--font-weight-normal);
  color: #fff;
  line-height: 1.9;
  text-align: left;
}

.ax-stmt .ax-stmt__media {
  position: relative;
  overflow: hidden;
  min-width: 0;
  /* height: 80vh 그리드에서 stretch로 전체 채움. 비율은 video object-fit:cover 가 담당 */
}
.ax-stmt .ax-stmt__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.40) 100%);
  pointer-events: none;
}

.ax-stmt .ax-stmt__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  .ax-stmt {
    height: auto;          /* 모바일: 1컬럼이므로 콘텐츠 높이에 맞춤 */
    grid-template-columns: 1fr;
  }
  .ax-stmt .ax-stmt__inner {
    padding: 48px 28px 36px;
  }
  .ax-stmt .ax-stmt__media {
    aspect-ratio: 16 / 9; /* 모바일: 1컬럼에서 16/9 비율 유지 */
    height: auto;
  }
  .ax-stmt .ax-stmt__copy {
    padding: 56px 28px 48px;
    overflow-y: visible;
  }
}

@media (max-width: 480px) {
  .ax-stmt .ax-stmt__headline {
    font-size: clamp(20px, 7vw, 32px);
    margin-bottom: 14px;
  }
  .ax-stmt .ax-stmt__text { font-size: 13px; }
  .ax-stmt .ax-stmt__features {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   Hero Video Loading Spinner
   - .visual-card 레벨(z-index 5): 딤 오버레이(2) 위, 탭(6) 아래
   - 히어로 텍스트 영역을 피해 하단(top: 68%)에 배치
   - opacity transition으로 영상 재생 시 부드럽게 소멸
   ============================================================= */
.mha-hero-visual .media-spinner {
  position: absolute;
  top: 68%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.55s ease;
}

.mha-hero-visual .media-spinner.is-hidden {
  opacity: 0;
}

.mha-hero-visual .media-spinner__ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid rgba(59, 130, 246, 0.16);
  border-top-color: #3b82f6;
  border-right-color: rgba(59, 130, 246, 0.58);
  animation: hero-media-spin 0.88s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes hero-media-spin {
  to { transform: rotate(360deg); }
}

/* =============================================================
   Header — 로고 이미지 크기 (공유 32px의 70%)
   ============================================================= */
.logo-img { height: 22px; }

/* =============================================================
   Showcase — aimotion은 title-img 없이 텍스트만 사용
   ============================================================= */
.ax-showcase__text {
  bottom: 120px;
}

@media (max-width: 900px) {
  .ax-showcase__text {
    bottom: 48px;
  }
}

/* =============================================================
   Feature — aimotion 전용 헤드라인 케이스 유지
   ============================================================= */
.ax-feature__headline {
  text-transform: none;
}