/**
 * =====================================================
 * 2026 VIVEN 레벨디자인 해커톤
 * Cards 슬라이드 스타일
 * =====================================================
 * 2, 3, 4 컬럼 그리드 지원
 * 아이콘 + 타이틀 + 설명 구조
 */

/*
  사용 예시 HTML:
  <section class="slide slide--cards">
    <div class="slide__content">
      <header class="slide__header">
        <h2 class="slide__title">카드 그리드 예시</h2>
        <p class="slide__subtitle">다양한 정보를 한눈에</p>
      </header>
      <div class="cards-grid cards-grid--3">
        <div class="card">
          <div class="card__icon">🎨</div>
          <h3 class="card__title">카드 타이틀</h3>
          <p class="card__description">카드 설명 텍스트</p>
        </div>
        <div class="card card--highlight">
          <div class="card__icon">✨</div>
          <h3 class="card__title">하이라이트 카드</h3>
          <p class="card__description">강조 스타일</p>
        </div>
      </div>
    </div>
  </section>
*/

/* =====================================================
 * 카드 슬라이드 레이아웃
 * ===================================================== */

.slide--cards .slide__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.slide--cards .slide__header {
  flex-shrink: 0;
}

/* =====================================================
 * 카드 그리드
 * ===================================================== */

.cards-grid {
  display: grid;
  gap: var(--space-lg);
  width: 100%;
  flex: 1;
  align-content: start;
}

/* 컬럼 수 */
.cards-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.cards-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.cards-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.cards-grid--5 {
  grid-template-columns: repeat(5, 1fr);
}

/* 자동 맞춤 */
.cards-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* =====================================================
 * 카드 스타일 - 미니멀 (ShadCN 참고)
 * ===================================================== */

.cards-grid .card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cards-grid .card:hover {
  background: var(--bg-elevated);
  border-color: rgba(255, 255, 255, 0.1);
}

/* =====================================================
 * 카드 요소
 * ===================================================== */

.cards-grid .card__icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
  line-height: 1;
}

.cards-grid .card__title {
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.cards-grid .card__description {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  flex: 1;
}

/* =====================================================
 * 하이라이트 카드 - 미니멀
 * ===================================================== */

.cards-grid .card--highlight {
  border-color: rgba(106, 171, 191, 0.3);
  background: rgba(106, 171, 191, 0.08);
}

.cards-grid .card--highlight:hover {
  background: rgba(106, 171, 191, 0.12);
  border-color: rgba(106, 171, 191, 0.4);
}

.cards-grid .card--highlight .card__title {
  color: var(--accent-primary);
}

/* =====================================================
 * 퍼플 카드 - 미니멀
 * ===================================================== */

.cards-grid .card--purple {
  border-color: rgba(123, 107, 158, 0.3);
  background: rgba(123, 107, 158, 0.08);
}

.cards-grid .card--purple:hover {
  background: rgba(123, 107, 158, 0.12);
  border-color: rgba(123, 107, 158, 0.4);
}

.cards-grid .card--purple .card__title {
  color: var(--accent-purple);
}

/* =====================================================
 * Variant 카드 - 타이틀 색상만 변경
 * ===================================================== */

.cards-grid .card--cyan .card__title {
  color: var(--accent-primary);
}

.cards-grid .card--warning .card__title {
  color: var(--color-warning);
}

.cards-grid .card--success .card__title {
  color: var(--color-success);
}

.cards-grid .card--danger .card__title {
  color: var(--color-danger);
}

/* =====================================================
 * 컴팩트 카드
 * ===================================================== */

.cards-grid--compact .card {
  padding: var(--space-lg);
}

.cards-grid--compact .card__icon {
  font-size: 36px;
  margin-bottom: var(--space-sm);
}

.cards-grid--compact .card__title {
  font-size: var(--fs-body);
}

.cards-grid--compact .card__description {
  font-size: var(--fs-caption);
}

/* =====================================================
 * 센터 정렬 카드
 * ===================================================== */

.cards-grid--center .card {
  align-items: center;
  text-align: center;
}

/* =====================================================
 * 카드 애니메이션
 * ===================================================== */

.cards-grid .card {
  animation: cardReveal 0.5s ease-out both;
}

.cards-grid .card:nth-child(1) { animation-delay: 0.1s; }
.cards-grid .card:nth-child(2) { animation-delay: 0.15s; }
.cards-grid .card:nth-child(3) { animation-delay: 0.2s; }
.cards-grid .card:nth-child(4) { animation-delay: 0.25s; }
.cards-grid .card:nth-child(5) { animation-delay: 0.3s; }
.cards-grid .card:nth-child(6) { animation-delay: 0.35s; }

@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =====================================================
 * 스태프 카드 (5개 특별 레이아웃: 1 + 2x2)
 * ===================================================== */

.cards-grid--staff {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: var(--space-lg);
  align-content: center;
}

/* 첫 번째 카드 (총괄) - 상단 중앙, 2칸 */
.cards-grid--staff .card:nth-child(1) {
  grid-column: 2 / 4;
  background: linear-gradient(
    180deg,
    rgba(106, 171, 191, 0.15) 0%,
    rgba(36, 52, 71, 0.9) 100%
  );
  border-color: var(--accent-primary);
  box-shadow: 0 0 30px rgba(106, 171, 191, 0.2);
}

.cards-grid--staff .card:nth-child(1) .card__icon {
  font-size: 56px;
}

.cards-grid--staff .card:nth-child(1) .card__title {
  font-size: var(--fs-heading);
  color: var(--accent-primary);
}

.cards-grid--staff .card:nth-child(1) .card__description {
  font-size: var(--fs-body);
}

/* 나머지 4개 카드 - 하단 균등 배치 */
.cards-grid--staff .card:nth-child(n+2) {
  padding: var(--space-lg);
}

.cards-grid--staff .card:nth-child(n+2) .card__icon {
  font-size: 36px;
  margin-bottom: var(--space-sm);
}

.cards-grid--staff .card:nth-child(n+2) .card__title {
  font-size: var(--fs-body);
  margin-bottom: var(--space-2xs);
}

.cards-grid--staff .card:nth-child(n+2) .card__description {
  font-size: var(--fs-caption);
}

/* 개발 서포터 (3번째) - 인원이 많아서 약간 강조 */
.cards-grid--staff .card:nth-child(3) {
  border-color: rgba(123, 107, 158, 0.5);
}

/* =====================================================
 * 팀 카드 (9개 3x3 그리드 최적화)
 * ===================================================== */

.cards-grid--teams {
  gap: var(--space-md);
  align-content: center;
}

.cards-grid--teams .card {
  padding: var(--space-md) var(--space-lg);
  min-height: auto;
}

.cards-grid--teams .card__icon {
  font-size: 32px;
  margin-bottom: var(--space-sm);
}

.cards-grid--teams .card__title {
  font-size: var(--fs-body);
  margin-bottom: var(--space-2xs);
}

.cards-grid--teams .card__description {
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
}

/* 더 컴팩트한 버전 (10개 이상) */
.cards-grid--dense {
  gap: var(--space-sm);
}

.cards-grid--dense .card {
  padding: var(--space-sm) var(--space-md);
}

.cards-grid--dense .card__icon {
  font-size: 24px;
  margin-bottom: var(--space-xs);
}

.cards-grid--dense .card__title {
  font-size: var(--fs-caption);
}

.cards-grid--dense .card__description {
  font-size: var(--fs-small);
}

/* =====================================================
 * 반응형
 * ===================================================== */

@media (max-width: 1280px) {
  .cards-grid--4,
  .cards-grid--5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 960px) {
  .cards-grid--3,
  .cards-grid--4,
  .cards-grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .cards-grid--2,
  .cards-grid--3,
  .cards-grid--4,
  .cards-grid--5 {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
 * 이미지 카드
 * ===================================================== */

.cards-grid .card--with-image {
  padding: 0;
  overflow: hidden;
}

.cards-grid .card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.cards-grid .card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.cards-grid .card--with-image:hover .card__image img {
  transform: scale(1.05);
}

.cards-grid .card--with-image .card__title,
.cards-grid .card--with-image .card__description {
  padding: 0 var(--space-lg);
}

.cards-grid .card--with-image .card__title {
  padding-top: var(--space-md);
}

.cards-grid .card--with-image .card__description {
  padding-bottom: var(--space-lg);
}

/* =====================================================
 * 마스코트 이미지 (하단 중앙 고정)
 * ===================================================== */

.slide__mascot {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}

.slide__mascot img {
  height: 540px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* =====================================================
 * VIVEN 소개 섹션 스타일
 * ===================================================== */

/* 리스트 아이템 - 번호 스타일 + 색상 */
[data-section="viven-intro"] .list__item {
  counter-increment: viven-item;
  position: relative;
  padding-left: 3rem;
}

[data-section="viven-intro"] .list__item::before {
  content: counter(viven-item, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--accent-primary);
}

[data-section="viven-intro"] .list {
  counter-reset: viven-item;
}

[data-section="viven-intro"] .list__item-text {
  color: var(--text-primary);
}

/* 홀수/짝수 아이템 색상 교차 */
[data-section="viven-intro"] .list__item:nth-child(odd)::before {
  color: var(--accent-primary);
}

[data-section="viven-intro"] .list__item:nth-child(even)::before {
  color: var(--accent-purple-light);
}