/* ==========================================================================
   p-user-voice — 活用事例 詳細（Figma: PC/06_CaseDetail 24381:6817 / SP 24381:6892）
   ========================================================================== */

/* ---- sec-article-header ---- */
.p-case-header {
  padding-block: var(--space-80);
  background-color: var(--color-bg-base);
}

.p-case-header__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.p-case-header__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-48);
}

.p-case-header__text {
  display: flex;
  flex: 568 1 0; /* Figma: 568 : 480 */
  flex-direction: column;
  gap: var(--space-32);
  min-width: 0;
}

.p-case-header__title-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.p-case-header__client {
  color: var(--color-text-muted);
}

.p-case-header__visual {
  flex: 480 1 0;
  min-width: 0;
}

.p-case-header__image {
  width: 100%;
  aspect-ratio: 16 / 9; /* Figma: 480 × 270 */
  object-fit: cover;
}

.p-case-header__share {
  align-self: flex-end;
}

/* ---- sec-summary ---- */
.p-case-summary {
  padding-block: var(--space-80);
  background-color: var(--color-bg-brand-subtle);
}

/* ---- sec-article-body（本文 720 + サイドバー 336） ---- */
.p-case-body {
  padding-block: var(--space-80);
}

.p-case-body__inner {
  display: grid;
  grid-template-columns: minmax(0, 720fr) minmax(0, 336fr); /* Figma: 720 / 336 */
  align-items: start;
  gap: var(--space-24);
}

.p-case-body__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  min-width: 0;
}

.p-case-body__share {
  align-self: flex-end;
}

.p-case-body__back {
  align-self: center;
}

.p-case-body__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* ---- 企業プロフィール ---- */
.p-case-profile {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-24);
  border: 1px solid var(--color-border-default);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-base);
}

.p-case-profile__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px; /* Figma 固有寸法: ロゴ枠の高さ */
  background-color: var(--color-bg-base);
}

.p-case-profile__logo-image {
  width: 64%; /* Figma: 184.32 / 288 */
  height: auto;
}

.p-case-profile__info,
.p-case-profile__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.p-case-profile__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.p-case-profile__label {
  flex-shrink: 0;
  width: 72px; /* Figma 固有寸法: ラベル幅 */
  padding-top: 2px; /* ラベル（行間 20px）を値（行間 24px）の 1 行目に揃える */
  color: var(--color-text-muted);
}

.p-case-profile__value {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.p-case-profile__url {
  color: var(--color-text-brand);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.p-case-profile__url:hover {
  text-decoration: none;
}

/* ---- サイドバーの Card/CTA（c-card-cta--brand を使用。サイドバー幅に合わせてボタンの余白だけ調整） ---- */
.p-case-cta__button {
  width: 100%;
  padding-inline: var(--space-24);
}

/* ---- sec-related ---- */
.p-case-related__title {
  width: 100%;
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1339px) {

  .p-case-body__inner {
    grid-template-columns: minmax(0, 1fr) 300px; /* Tablet: サイドバーを最小幅で固定（実装判断） */
  }

  .p-case-cta__button-label {
    font-size: 1rem; /* Tablet: renewal/JP/Label/16/Bold（.t-jp-label-16-bold）。サイドバー幅でラベルが折り返すため */
    line-height: calc(24 / 16);
  }
}

/* ==========================================================================
   SP
   ========================================================================== */
@media (max-width: 1023px) {

  .p-case-header {
    padding-block: var(--space-64);
  }

  .p-case-header__inner {
    gap: var(--space-24);
    padding-inline: var(--space-16); /* Figma SP: 左右 16px */
  }

  .p-case-header__row {
    flex-direction: column;
    gap: var(--space-32);
  }

  .p-case-header__text {
    flex: none;
    gap: var(--space-16);
    width: 100%;
  }

  .p-case-header__title-block {
    gap: var(--space-8);
  }

  .p-case-header__title {
    font-size: 2rem; /* SP: renewal/JP/32/Bold（.t-jp-32-bold） */
    line-height: calc(48 / 32);
  }

  .p-case-header__client {
    font-size: 1rem; /* SP: renewal/JP/Label/16/Bold（.t-jp-label-16-bold） */
    line-height: calc(24 / 16);
  }

  .p-case-header__visual {
    flex: none;
    width: 100%;
  }

  .p-case-summary {
    padding-block: var(--space-64);
  }

  .p-case-summary__inner {
    padding-inline: var(--space-16); /* Figma SP: 左右 16px */
  }

  .p-case-body {
    padding-block: 0;
  }

  .p-case-body__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-inline: 0;
  }

  .p-case-body__main {
    gap: var(--space-24);
    padding: var(--space-64) var(--space-16);
  }

  .p-case-body__share {
    align-self: center;
  }

  .p-case-body__back {
    align-self: stretch;
  }

  .p-case-body__sidebar {
    padding: var(--space-64) var(--space-16);
  }
}