/* ============================================================
   HIARC — home.css
   ============================================================ */

/* ── 히어로 배너 ────────────────────────────────────────────── */
/* 풀-와이드 (배경 잘림 OK), 1920px까지 확장 */
.home-hero {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  display: flex;
  padding: 210px 64px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* 저널 없을 때 기본 회색 배경 */
.home-hero--empty {
  background-color: #999;
}

/* ── 자체 호스팅 mp4 영상 히어로 ─────────────────────────────
   영상이 등록되면 background-image 위에 <video>가 cover로 덮임.
   영상 로드 전/실패 시 / reduced-motion 사용자에겐 background-image fallback.
   <video poster="..."> 도 background-image와 동일한 fallback 역할. */
.home-hero__video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;  /* 사용자 클릭 차단 — 일시정지 방지 */
}

/* Fallback (구버전 브라우저 — Safari 15 이하 등):
   container query 미지원 시 단순 stretch. 영상은 object-fit으로 비율 유지. */
.home-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* <video> 비율 유지 + cover */
  background: transparent;
  border: 0;
  display: block;
}

/* 모던 브라우저 — container query는 위 object-fit과 함께 작동 (불필요지만 호환성 유지) */
@supports (container-type: size) {
  .home-hero__video-wrap {
    container-type: size;
  }
}

/* 영상 모드일 때: 텍스트 오버레이/오버레이 어둡게 처리 모두 숨김 — 영상만 보여줌 */
.home-hero--has-video .home-hero__overlay,
.home-hero--has-video .home-hero__content {
  display: none;
}

/* 접근성 — 동작 줄이기 설정 사용자에겐 영상 숨김 (background-image fallback 자동 노출) */
@media (prefers-reduced-motion: reduce) {
  .home-hero__video-wrap {
    display: none;
  }
}

/* 배경 위 반투명 오버레이 */
.home-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

/* 중앙 텍스트 컨테이너 */
.home-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

/* 부제 */
.home-hero__sub {
  font-family: var(--font-base);
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: -0.12px;
  color: var(--color-text);
}

/* 메인 타이틀 */
.home-hero__title {
  font-family: var(--font-base);
  font-size: 64px;
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -1.28px;
  color: var(--color-text);
}

/* 더 보기 버튼 */
.home-hero__btn {
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: var(--color-text);
  color: var(--color-text-inverse);
  font-family: var(--font-base);
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  letter-spacing: -0.09px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.home-hero__btn:hover {
  opacity: 0.85;
}

/* ── 큐레이션 섹션 ─────────────────────────────────────────── */
.home-section {
  padding: var(--spacing-60) 0;
}

/* 짝수 섹션(2, 4번째): 회색 배경 */
.home-section--gray {
  background-color: #F5F5F5;
}

.home-section__title {
  font-family: var(--font-base);
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  line-height: 100%;
  letter-spacing: -0.64px;
  color: #000;
  text-align: center;
  margin-bottom: var(--spacing-32);
}

/* 3열 카드 그리드 (작품 ≤3개 정적 표시) */
.home-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-32);
}

/* ── 캐러셀 (작품 4~5개) ────────────────────────────────────
   carousel = relative 부모 (화살표 기준).
   grid-wrap = overflow hidden viewport. grid가 transform으로 슬라이드. */
.home-section__carousel {
  position: relative;
}
.home-section__grid-wrap {
  overflow: hidden;
}

/* 좌우 화살표 — 데스크탑 전용. carousel 좌/우 끝에 absolute. 외곽선 없이 화살표만 */
.home-carousel-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}
.home-carousel-nav:hover {
  opacity: 0.6;
}
.home-carousel-nav svg {
  width: 32px;
  height: 32px;
}
.home-carousel-nav--prev { left:  -48px; }
.home-carousel-nav--next { right: -48px; }

/* 데스크탑에서만 표시 */
@media (min-width: 801px) {
  .home-carousel-nav { display: inline-flex; }
}
.home-section__grid--carousel {
  display: flex;
  grid-template-columns: none;  /* grid 속성 무효화 */
  gap: var(--spacing-32);
  transition: transform 0.6s ease;
  will-change: transform;
}
.home-section__grid--carousel .home-card {
  flex: 0 0 calc((100% - var(--spacing-32) * 2) / 3);  /* 3개 동시 표시 (gap 2개) */
  min-width: 0;
}

/* 모바일: 한 번에 1개 표시 */
@media (max-width: 480px) {
  .home-section__grid--carousel .home-card {
    flex: 0 0 100%;
  }
}
/* 태블릿: 한 번에 2개 표시 */
@media (max-width: 800px) and (min-width: 481px) {
  .home-section__grid--carousel .home-card {
    flex: 0 0 calc((100% - var(--spacing-32)) / 2);
  }
}

/* 접근성 — 동작 줄이기: 자동 슬라이드 비활성 (JS도 함께 체크) */
@media (prefers-reduced-motion: reduce) {
  .home-section__grid--carousel {
    transition: none;
  }
}

/* ── 작품 카드 ──────────────────────────────────────────────── */
.home-card {
  display: block;
  text-decoration: none;
  color: var(--color-text);
}

.home-card__thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-size: 115%;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: var(--spacing-sm);
  transition: background-size 0.3s ease;
}

.home-card:hover .home-card__thumb {
  background-size: 120%;
}

.home-card__title {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.08px;
  color: var(--color-text);
  margin-bottom: 2px;
}

.home-card__student {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--color-gray-200);
}

/* ── 모든 아이디어 보기 버튼 ─────────────────────────────────── */
.home-cta {
  display: flex;
  justify-content: center;
  padding-top: var(--spacing-60);
  padding-bottom: var(--spacing-60);
}

.home-cta__btn {
  display: flex;
  height: 40px;
  padding: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #FFF;
  font-family: var(--font-base);
  font-size: 20px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.4px;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.15s;
}

.home-cta__btn:hover {
  opacity: 0.85;
}

/* ── 태블릿 ───────────────────────────────────────────────── */
@media (max-width: 800px) {
  .home-hero {
    padding: 120px 20px;
    gap: 32px;
  }

  .home-hero__title { font-size: var(--fs-36); }
  .home-hero__sub   { font-size: var(--fs-18); }

  .home-section__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-20);
  }
}

/* ── 모바일 ───────────────────────────────────────────────── */
@media (max-width: 375px) {
  .home-hero {
    padding: 80px 16px;
    gap: 24px;
  }

  .home-hero__title { font-size: var(--fs-32); letter-spacing: -0.5px; }
  .home-hero__sub   { font-size: var(--fs-16); }

  .home-section__grid {
    grid-template-columns: 1fr;
  }
}