/*
 * ご利用いただいた方の声 アーカイブ
 * Design spec extracted from Figma:
 *   PC: 760px artboard — horizontal card layout
 *   SP: 351px artboard — vertical card layout (avatar centered above text)
 */

/* ── タイトル ── */
.c-pageTitle {
  max-width: 736px;
  margin: auto;
}

/* ── Container ── */
#main_content.voice-archive {
  padding-top: 64px;
  padding-bottom: 80px;
}

#main_content.voice-archive .voice-archive-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 736px;
  margin: 40px auto 0;
}

/* ── Card (PC default: horizontal layout) ── */
#main_content.voice-archive .voice-archive-card {
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
  padding: 32px 40px !important;
  background: #fff !important;
  border: none;
  border-radius: 8px !important;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.15);
  color: #1D1D1D !important;
  text-decoration: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#main_content.voice-archive .voice-archive-card:hover {
  transform: translateY(-2px);
  box-shadow: 2px 6px 20px rgba(0, 0, 0, 0.2);
  opacity: 1 !important;
}

/* ── Avatar ── */
#main_content.voice-archive .voice-archive-card__icon {
  width: 144px;
  height: 144px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #eaf4fa;
}

#main_content.voice-archive .voice-archive-card__icon img,
#main_content.voice-archive .voice-archive-card__icon .attachment-medium {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* ── Body ── */
#main_content.voice-archive .voice-archive-card__body {
  flex: 1;
  min-width: 0;
}

/* ── Title ── */
#main_content.voice-archive .voice-archive-card__title {
  font-size: var(--text-xl);
  line-height: var(--height-xl);
  font-weight: 700 !important;
  color: #1D1D1D !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

#main_content.voice-archive .voice-archive-card__title::before,
#main_content.voice-archive .voice-archive-card__title::after {
  content: none !important;
  display: none !important;
}

/* ── Meta (名前 / 役割) ── */
#main_content.voice-archive .voice-col-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 4px;
}

#main_content.voice-archive .voice-archive-card__meta {
  display: flex !important;
  align-items: baseline;
  gap: 4px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--text-base) !important;
  line-height: var(--height-base) !important;
  color: #1D1D1D !important;
  background: none !important;
  border: 0 !important;
}

#main_content.voice-archive .voice-archive-card__meta dt {
  font-weight: 700 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #1D1D1D !important;
  background: none !important;
  border: 0 !important;
}

#main_content.voice-archive .voice-archive-card__meta dd {
  margin: 0 !important;
  padding: 0 !important;
  color: #1D1D1D !important;
  background: none !important;
  border: 0 !important;
}

/* ── Comment ── */
#main_content.voice-archive p.voice-archive-card__comment {
  font-size: var(--text-base);
  line-height: var(--height-base);
  color: #1D1D1D !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

/* ── SP: vertical card layout ── */
@media screen and (max-width: 767px) {
  #main_content.voice-archive .voice-archive-list {
    gap: 24px;
    margin-top: 24px;
  }

  #main_content.voice-archive .voice-archive-card {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 28px 24px !important;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.15);
  }

  #main_content.voice-archive .voice-archive-card__icon {
    width: 112px;
    height: 112px;
  }

  #main_content.voice-archive .voice-archive-card__body {
    width: 100%;
  }

  #main_content.voice-archive .voice-archive-card__title {
    font-size: var(--text-lg) !important;
    line-height: var(--height-lg);
  }
}