/* ============================================================
   Section 3 polish — Cellon Signature
   bxSlider 폐기 후 5장 카드 3+2 그리드로 한 번에 노출.
   IntersectionObserver staggered reveal 인터랙션.
   ============================================================ */

/* ── 1. 기존 세로 PNG 숨김 + 가로 모던 헤더 ─────────────── */

.section_main.section3 .bg {
  display: none !important;
}

/* 원본 .section_main.section3 height 1106px (모바일 480px) 고정 → 그리드 콘텐츠
   가 overflow 되어 section4 와 겹침. height auto 로 콘텐츠 따라가게. */
.section_main.section3 {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}

.section_main.section3 .inner {
  position: relative;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 80px 5% 80px !important;
}

.section_main.section3 .inner::before {
  content: 'Cellon Signature';
  display: block;
  position: relative;
  z-index: 5;
  font-family: 'Cormorant Infant', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: #2a2521;
  text-align: center;
  /* 텍스트 아래에 hairline 을 box-shadow 로 (pseudo ::after 가 grid 뒤로 가서 선이 카드 하단에 보이던 버그 회피) */
  padding-bottom: 16px;
  margin-bottom: 56px;
  background:
    linear-gradient(#aa8e7d, #aa8e7d) center bottom / 32px 1px no-repeat;
}

/* ── 2. 3+2 그리드 레이아웃 ─────────────────────────────── */

.section_main.section3 .wrap_slide.s3-grid {
  position: relative !important;
  left: 0 !important;
  top: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.section_main.section3 .s3-grid-list {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  width: 100% !important;
  transform: none !important;
  transition: none !important;
}

/* 상단 3장 — 각 2칸 차지 */
.section_main.section3 .s3-grid-list > li:nth-child(1) { grid-column: 1 / 3; }
.section_main.section3 .s3-grid-list > li:nth-child(2) { grid-column: 3 / 5; }
.section_main.section3 .s3-grid-list > li:nth-child(3) { grid-column: 5 / 7; }
/* 하단 2장 — 가운데 정렬 (2-4, 4-6 컬럼) */
.section_main.section3 .s3-grid-list > li:nth-child(4) { grid-column: 2 / 4; }
.section_main.section3 .s3-grid-list > li:nth-child(5) { grid-column: 4 / 6; }

.section_main.section3 .s3-grid-list > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
}

@media (max-width: 1024px) {
  .section_main.section3 .s3-grid-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  /* 모바일: 2-2-1 (마지막은 가운데) */
  .section_main.section3 .s3-grid-list > li:nth-child(1),
  .section_main.section3 .s3-grid-list > li:nth-child(2),
  .section_main.section3 .s3-grid-list > li:nth-child(3),
  .section_main.section3 .s3-grid-list > li:nth-child(4) {
    grid-column: span 1;
  }
  .section_main.section3 .s3-grid-list > li:nth-child(5) {
    grid-column: 1 / 3;
    max-width: 60%;
    justify-self: center;
  }
  .section_main.section3 .inner {
    padding: 60px 24px !important;
  }
}

@media (max-width: 480px) {
  .section_main.section3 .s3-grid-list > li:nth-child(5) {
    max-width: 100%;
  }
}

/* ── 3. 카드 — 이미지 + 텍스트 overlay ───────────────────── */

.section_main.section3 .s3-grid-list > li > a {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  text-decoration: none !important;
  border-radius: 2px;
  isolation: isolate;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.section_main.section3 .s3-grid-list > li > a:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(58, 40, 28, 0.32);
}

.section_main.section3 .s3-grid-list > li .img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  z-index: 1;
}

.section_main.section3 .s3-grid-list > li .img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.section_main.section3 .s3-grid-list > li > a:hover .img img {
  transform: scale(1.08);
}

.section_main.section3 .s3-grid-list > li > a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, 0.32) 75%,
    rgba(0, 0, 0, 0.66) 100%
  );
  z-index: 2;
  pointer-events: none;
  transition: background 0.4s ease;
}

.section_main.section3 .s3-grid-list > li > a:hover::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 30%,
    rgba(0, 0, 0, 0.42) 70%,
    rgba(0, 0, 0, 0.74) 100%
  );
}

.section_main.section3 .s3-grid-list > li .txt {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 26px 24px;
  z-index: 3;
  text-align: left !important;
  margin: 0 !important;
}

.section_main.section3 .s3-grid-list > li .txt p {
  font-family: 'Pretendard Variable', sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: #ffffff !important;
  margin: 0 0 4px !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.section_main.section3 .s3-grid-list > li .txt span {
  font-family: 'Cormorant Infant', serif !important;
  font-size: 16px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: 0.015em !important;
  color: rgba(255, 255, 255, 0.92) !important;
  display: block;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

@media (max-width: 1024px) {
  .section_main.section3 .s3-grid-list > li .txt {
    padding: 18px 20px 20px;
  }
  .section_main.section3 .s3-grid-list > li .txt p {
    font-size: 18px !important;
  }
  .section_main.section3 .s3-grid-list > li .txt span {
    font-size: 13px !important;
  }
}

/* ── 4. Staggered reveal 진입 인터랙션 ─────────────────── */

/* 기본: 초기 hidden 상태 (살짝 아래 + 약간 작게 + 투명) */
.section_main.section3 .s3-grid-list > li {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  filter: blur(2px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* in-view 시 reveal — staggered delay */
.section_main.section3 .s3-grid-list.s3-in-view > li {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.section_main.section3 .s3-grid-list.s3-in-view > li:nth-child(1) { transition-delay: 0s;     }
.section_main.section3 .s3-grid-list.s3-in-view > li:nth-child(2) { transition-delay: 0.10s;  }
.section_main.section3 .s3-grid-list.s3-in-view > li:nth-child(3) { transition-delay: 0.20s;  }
.section_main.section3 .s3-grid-list.s3-in-view > li:nth-child(4) { transition-delay: 0.32s;  }
.section_main.section3 .s3-grid-list.s3-in-view > li:nth-child(5) { transition-delay: 0.42s;  }

/* 카운터 / Peek 관련 잔재 제거 */
.section_main.section3 .s3-counter { display: none !important; }