/* ============================================================
   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;
}

/* 피처드 저널 대표영상 (YouTube/Vimeo iframe) — 요청 24.
   iframe은 object-fit이 안 먹으므로 16:9 비율을 히어로에 cover 시키는
   min-width/min-height + 중앙정렬 transform 기법 사용. */
.home-hero__video-wrap--embed {
  pointer-events: none;  /* 오버레이 클릭/일시정지 방지 */
}
.home-hero__embed {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 히어로보다 넓거나 높은 쪽을 채우도록 16:9 기준 최소 크기 확보 */
  width: 177.78vh;   /* 100vh * 16/9 */
  min-width: 100%;
  height: 56.25vw;   /* 100vw * 9/16 */
  min-height: 100%;
  border: 0;
  display: block;
}

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

/* 2차요청: 영상 모드에서도 저널 제목·링크 버튼을 함께 표시.
   (기존에는 영상만 보여주려 숨겼으나, 제목/버튼이 보이도록 변경)
   영상 위에서 흰 텍스트가 읽히도록 오버레이를 조금 더 진하게 + 하단 그라데이션. */
.home-hero--has-video .home-hero__overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.34) 55%,
    rgba(0, 0, 0, 0.50) 100%
  );
}

/* 영상 위 텍스트 가독성 보강 */
.home-hero--has-video .home-hero__title,
.home-hero--has-video .home-hero__sub {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

/* 접근성 — 동작 줄이기 설정 사용자에겐 영상 숨김 (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;
}

/* 태블릿·모바일: 한 번에 2개 표시 (2차요청: 모바일에서 캐러셀만 1개씩 크게 보이던 문제 → 일반 섹션과 통일).
   가로 gap은 모바일에서 spacing-md로 축소해 일반 grid 섹션의 2개 노출과 카드 폭을 정확히 일치시킴. */
@media (max-width: 800px) {
  .home-section__grid--carousel {
    gap: var(--spacing-md);
  }
  .home-section__grid--carousel .home-card {
    flex: 0 0 calc((100% - var(--spacing-md)) / 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;
}

/* 요청 8: 학생 이름 확대 + 블랙 */
.home-card__student {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: #000;
}

/* ── 모든 아이디어 보기 버튼 ─────────────────────────────────── */
.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);
  }
}

/* ── 모바일 (요청 7): 테마당 2개씩 노출 + 수평 스크롤 ───────────
   자동 슬라이드 캐러셀(--carousel, 작품 4개↑)은 기존 동작 유지.
   일반 grid(작품 3개 이하)만 가로 스크롤로 전환. */
@media (max-width: 640px) {
  .home-section__grid:not(.home-section__grid--carousel) {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--spacing-md);
    padding-bottom: 8px;   /* 스크롤바 여백 */
  }
  .home-section__grid:not(.home-section__grid--carousel) > .home-card {
    flex: 0 0 calc((100% - var(--spacing-md)) / 2);  /* 2개 노출 */
    scroll-snap-align: start;
  }

  /* 2차요청: 작품이 1개뿐인 섹션은 가로스크롤 없이
     좌측 정렬 절반 폭 카드 하나만 (다른 섹션 카드와 동일 크기·좌측선). */
  .home-section__grid--single {
    justify-content: flex-start;
    overflow-x: visible;
  }
  .home-section__grid--single > .home-card {
    flex: 0 0 calc((100% - var(--spacing-md)) / 2);
  }
}