/* ======================================================================
   hero-slideshow.css
   카테고리 히어로 배경 = 컨셉컷 모델 사진 자동 crossfade 슬라이드.
   - 세로 모델 컷: cover + 우측 정렬(모델 우측 / 좌측 텍스트 공간)
   - 좌측이 밝아지는 오버레이로 제목·설명 가독 (신상 기존 톤 #f7f6f3)
   - 두 레이어 opacity crossfade (성능 가벼움, GPU 합성)
   js/hero-slideshow.js 가 data-hero-slides 를 읽어 자동 구동.
   ====================================================================== */

/* 슬라이드쇼가 붙는 히어로: 텍스트(eyebrow/title/desc)는 배경 위에 떠야 함 */
.category-hero.has-hero-slideshow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* 배경색은 슬라이드 레이어가 덮으므로 중립 */
  background: var(--color-bg-warm, #f4f4f4);
}

/* 사진 레이어 컨테이너 (히어로 전체를 덮음) */
.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* 개별 사진 레이어 — opacity 로 crossfade */
.hero-slideshow__layer {
  position: absolute;
  inset: 0;
  background-position: center right; /* 모델 우측 */
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  will-change: opacity;
}

.hero-slideshow__layer.is-active {
  opacity: 1;
}

/* 좌측이 밝아지는 가독 오버레이 (신상 기존 방식과 동일 톤) */
.hero-slideshow__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(247, 246, 243, 0.93) 0%,
    rgba(247, 246, 243, 0.6) 44%,
    rgba(247, 246, 243, 0.14) 72%,
    rgba(247, 246, 243, 0) 100%
  );
}

/* 히어로 텍스트는 사진/오버레이 위로 */
.category-hero.has-hero-slideshow .category-hero__eyebrow,
.category-hero.has-hero-slideshow .category-hero__title,
.category-hero.has-hero-slideshow .category-hero__desc {
  position: relative;
  z-index: 2;
}

/* 슬라이드쇼 켜진 히어로는 좌측 정렬(텍스트가 밝은 좌측에 오도록) + 넉넉한 높이 */
.category-hero.has-hero-slideshow {
  text-align: left;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 모바일 (390 등): 위→아래 오버레이로 상단 텍스트 가독, 모델은 우측 하단 */
@media (max-width: 768px) {
  .category-hero.has-hero-slideshow {
    min-height: 380px;
    text-align: center;
  }
  .hero-slideshow__layer {
    background-position: 82% center;
  }
  .hero-slideshow__overlay {
    background: linear-gradient(
      180deg,
      rgba(247, 246, 243, 0.94) 0%,
      rgba(247, 246, 243, 0.68) 42%,
      rgba(247, 246, 243, 0.32) 100%
    );
  }
}

/* 모션 최소화 선호 사용자: 전환 끔(첫 장만 표시) */
@media (prefers-reduced-motion: reduce) {
  .hero-slideshow__layer {
    transition: none;
  }
}

/* ======================================================================
   히어로 타이포그래피 — 세련되게 다듬기 (이 6개 히어로에만 적용)
   - 영문 제목: 가벼운 굵기 + 넓은 자간(트래킹) + 또렷한 크기 위계
   - 사진 위 가독: 은은한 그림자 + 색 대비
   - eyebrow / 제목 / 설명 톤 통일 (new "NEW 5%" 포함)
   ====================================================================== */

/* eyebrow — 미니멀, 넓은 자간의 소문자 라벨 톤 */
.category-hero.has-hero-slideshow .category-hero__eyebrow {
  font-family: var(--font-body, "Inter", sans-serif);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.42em;          /* 넓은 트래킹 = 고급 라벨 */
  text-transform: uppercase;
  color: var(--color-text-secondary, #6b6b6b);
  margin-bottom: 14px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
}

/* 제목 — 가는 굵기 + 넓은 자간 + 큰 위계 */
.category-hero.has-hero-slideshow .category-hero__title {
  font-family: var(--font-headline, "Inter", sans-serif);
  font-weight: 300;                /* 두껍고 뭉툭함 제거 */
  font-size: clamp(40px, 7vw, 72px);
  letter-spacing: 0.16em;          /* 영문 트래킹 — 세련 */
  line-height: 1.04;
  color: var(--color-text-primary, #1a1a1a);
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.45);
  margin: 0;
}

/* 설명 — 제목과 톤 맞춘 은은한 서브 */
.category-hero.has-hero-slideshow .category-hero__desc {
  font-family: var(--font-body, "Inter", sans-serif);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary, #4a4a4a);
  margin-top: 16px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* 모바일: 위계 유지하되 자간 살짝 줄여 줄바꿈 방지 */
@media (max-width: 768px) {
  .category-hero.has-hero-slideshow .category-hero__title {
    font-size: clamp(36px, 12vw, 56px);
    letter-spacing: 0.12em;
  }
  .category-hero.has-hero-slideshow .category-hero__eyebrow {
    letter-spacing: 0.34em;
  }
}