/* ============================================================
   Section 7 — 翻轉卡片
   ============================================================ */

#flip-cards {
  background: var(--color-bg);
}

/* --- Grid（固定 4 欄，讓最後一排的 Ryan & Bella 可以透過 grid-column 置中） --- */
.flip-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

/* --- 翻轉卡片容器
   display: grid 讓兩個 sizer 和 inner 疊在同一格（grid-area: 1/1），
   grid row 高度自動取最高的那個（正面或背面內容）
--- */
.flip-card {
  display: grid;
  position: relative;
  perspective: 1200px;
  cursor: pointer;
}

/* --- 隱形 sizer：驅動高度，不顯示 --- */
.flip-card__sizer,
.flip-card-inner {
  grid-area: 1 / 1;
}

.flip-card__sizer {
  visibility: hidden;
  pointer-events: none;
}

.flip-card__sizer--front {
  padding: var(--space-6) 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  min-height: 340px;
}

.flip-card__sizer--back {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 340px;
}

.flip-card__sizer-avatar--lg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  flex-shrink: 0;
}

.flip-card__sizer-avatar--sm {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* --- flip-card-inner 隨 grid cell 高度撐開 --- */
.flip-card-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform var(--flip-duration) cubic-bezier(0.4, 0, 0.2, 1);
}

.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(-180deg);
}

/* --- 正面 & 背面共用 --- */
.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- 正面 --- */
.flip-card-front {
  background: var(--color-surface);
  align-items: center;
  text-align: center;
  padding: var(--space-6) 16px;
  gap: var(--space-4);
}

/* 正面文字內容高於裝飾 SVG */
.flip-card-front > *:not(svg) {
  position: relative;
  z-index: 1;
}

.flip-card-front:hover {
  box-shadow: var(--shadow-card-hover);
}

.flip-card-front__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 3px solid var(--color-bg);
  box-shadow: var(--shadow-card);
}

.flip-card-front__name {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.flip-card-front__answer {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

.flip-card-front__answer-item {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  text-align: center;
  padding: var(--space-3) 0;
  width: 100%;
}

.flip-card-front__divider {
  width: 100%;
  height: 1px;
  background: var(--color-border-light);
  flex-shrink: 0;
}

/* --- 背面 --- */
.flip-card-back {
  background: var(--color-surface);
  transform: rotateY(-180deg);
  padding: var(--space-5);
  gap: var(--space-4);
}

.flip-card-back__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
}

.flip-card-back__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  flex-shrink: 0;
}

.flip-card-back__name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.flip-card-back__qa {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.flip-card-back__qa-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.flip-card-back__qa-q {
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1A1A26;
}

.flip-card-back__qa-a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}


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

@media (max-width: 768px) {
  .flip-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 小螢幕不做置中，讓排版自然流動 */
  .flip-card:nth-child(13),
  .flip-card:nth-child(14) {
    grid-column: auto;
  }
}