/**
 * =====================================================
 * 2026 VIVEN 레벨디자인 해커톤
 * Info Bento 슬라이드 스타일
 * =====================================================
 * 행사 안내 페이지 전용 Bento Grid 레이아웃
 * 16:9 화면에 최적화, 발표용 큰 텍스트
 */

/* =====================================================
 * 메인 레이아웃 - 기본 slide 스타일 따름
 * ===================================================== */

.slide--info-bento .slide__content {
  gap: var(--space-xl);
}

/* =====================================================
 * Bento Grid 컨테이너
 * ===================================================== */

.info-bento {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-lg);
  flex: 1;
  min-height: 0;
}

/* =====================================================
 * WiFi 카드 (Featured - 좌측 전체 높이)
 * ===================================================== */

.info-bento__wifi {
  grid-row: 1 / 3;
  background: rgba(106, 171, 191, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(106, 171, 191, 0.25);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* WiFi 라벨 */
.info-bento__wifi-label {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--space-sm);
}

/* WiFi SSID */
.info-bento__wifi-ssid {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: var(--fw-black);
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: var(--space-xl);
}

/* Password 섹션 */
.info-bento__wifi-pw-label {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--space-sm);
}

.info-bento__wifi-pw {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: var(--fw-bold);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: var(--accent-primary);
  background: rgba(0, 0, 0, 0.3);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  display: inline-block;
  letter-spacing: 0.15em;
}

/* =====================================================
 * 시설 정보 카드들 (우측 2x2 그리드)
 * ===================================================== */

.info-bento__card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: var(--transition-fast);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.info-bento__card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* 카드 라벨 - 발표용 크기 */
.info-bento__card-label {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--space-sm);
}

/* 카드 값 - 발표용 크기 */
.info-bento__card-value {
  font-size: var(--fs-heading);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: var(--lh-normal);
}

/* =====================================================
 * 카드 라벨 색상 변형
 * ===================================================== */

.info-bento__card--location .info-bento__card-label {
  color: var(--accent-primary);
}

.info-bento__card--power .info-bento__card-label {
  color: var(--color-success);
}

.info-bento__card--restroom .info-bento__card-label {
  color: var(--accent-purple);
}

.info-bento__card--snack .info-bento__card-label {
  color: var(--color-warning);
}

/* =====================================================
 * 반응형 (태블릿 이하에서는 단순화)
 * ===================================================== */

@media (max-width: 1024px) {
  .info-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }

  .info-bento__wifi {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .info-bento__wifi-ssid {
    font-size: 32px;
  }

  .info-bento__wifi-pw {
    font-size: 28px;
  }
}