/*
 * 弁護士・支部の「担当した解決実績」リスト（1行リスト・専用レイアウト）
 * PCは各行をサブグリッドで4列に整列：分野ピル｜サブ分類｜タイトル｜＞。
 * JSで段階開示（.is-hidden のみ非表示）。全件はHTMLに存在＝SEO対応。
 */
.p-lawyer-results {
  max-width: 1600px;
  width: 92.5vw;
  margin: 0 auto;
  padding-bottom: clamp(20px, 20vw, 150px);
}

/* 見出し：左に「担当した解決実績」、右に件数 */
.p-lawyer-results__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  font-size: clamp(18px, 14.6222222222px + 0.8888888889vw, 26px);
}

/* リスト本体（PC=4列グリッドで縦を揃える） */
.p-lawyer-results__list {
  margin-top: clamp(10px, 4vw, 25px);
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  column-gap: clamp(8px, 1.2vw, 14px);
  border-top: 1px solid var(--main-bg);
}

/* 1行（サブグリッドで親の4列に整列） */
.case-item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  padding: clamp(13px, 2vw, 19px) 0;
  border-bottom: 1px solid var(--main-bg);
  color: inherit;
  transition: background-color 200ms;
}
.case-item:hover {
  background-color: var(--main-bg);
}
.case-item:hover .case-item__title {
  color: var(--main-color);
}

/* 分野（親＝ピル） */
.case-item__cat-parent {
  grid-column: 1;
  justify-self: start;
  font-size: clamp(11px, 9.9666666667px + 0.2666666667vw, 13px);
  font-weight: 700;
  line-height: 1;
  color: var(--pure-white);
  background-color: var(--main-color);
  padding: 5px 11px 4px;
  border-radius: 999px;
  white-space: nowrap;
}
/* 結果（最終結果） */
.case-item__result {
  grid-column: 2;
  justify-self: start;
  font-size: clamp(12px, 11.1555555556px + 0.2222222222vw, 14px);
  font-weight: 700;
  line-height: 1;
  color: var(--main-dark);
  background-color: var(--main-light);
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
}

/* タイトル（PC＝1行省略） */
.case-item__title {
  grid-column: 3;
  min-width: 0;
  font-size: clamp(14px, 13.1555555556px + 0.2222222222vw, 16px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--main-black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 200ms;
}

/* 詳細インジケーター（＞） */
.case-item__more {
  grid-column: 4;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  color: var(--main-color);
}
.case-item__more .material-symbols-outlined {
  font-size: 200%;
  font-variation-settings: "wght" 400;
  transition: transform 200ms;
}
.case-item:hover .case-item__more .material-symbols-outlined {
  transform: translateX(3px);
}

/* スマホ：グリッドをやめ、分野＋＞を上段・タイトルは折り返して下段 */
@media (max-width: 768px) {
  .p-lawyer-results__list {
    display: block;
  }
  .case-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
  }
  .case-item__cat-parent,
  .case-item__result,
  .case-item__title,
  .case-item__more {
    grid-column: auto;
    justify-self: auto;
  }
  .case-item__title {
    order: 3;
    flex-basis: 100%;
    white-space: normal;
    overflow: visible;
  }
  .case-item__more {
    order: 2;
    margin-left: auto;
  }
}

/* もっと見るで表示する行の制御 */
.case-item.is-hidden {
  display: none;
}
/* 新しく表示された行はふわっと（上下移動なし＝ポップしない） */
@keyframes lawyerCaseIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.case-item.is-revealing {
  animation: lawyerCaseIn 0.3s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .case-item.is-revealing {
    animation: none;
  }
}

/* もっと見るボタン */
.p-lawyer-results__more {
  margin-top: clamp(20px, 5vw, 40px);
  display: flex;
  justify-content: center;
}
/* hidden 属性で確実に隠す（display指定が UA の [hidden] を上書きしてしまうため明示） */
.p-lawyer-results__more[hidden] {
  display: none;
}
.p-lawyer-results__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  min-width: min(300px, 80%);
  padding: clamp(12px, 2vw, 16px) clamp(24px, 5vw, 40px);
  font-size: clamp(14px, 13.1555555556px + 0.2222222222vw, 16px);
  font-weight: 700;
  color: var(--main-color);
  background-color: var(--pure-white);
  border: 2px solid var(--main-color);
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 240ms,
    background-color 240ms;
}
.p-lawyer-results__more-btn:hover {
  color: var(--pure-white);
  background-color: var(--main-color);
}
.p-lawyer-results__more-btn .material-symbols-outlined {
  font-size: 135%;
}