/**
 * narrator.css
 * ナレーター検索ページ専用スタイル
 */

/* =============================================
   絞り込みモーダル：現在の検索条件チップス
============================================= */

#narrator-filter-modal h2 { text-align: center; font-size: 20px; margin-bottom: 20px; font-weight: 700; }

#narrator-filter-modal .filter-list { background: var(--bg-light-blue); padding: 16px; font-size: 16px; margin-bottom: 25px; }
#narrator-filter-modal .filter-list p { font-size: 14px; }
#narrator-filter-modal .filter-list ul { display: flex; flex-wrap: wrap; }
#narrator-filter-modal .filter-list ul li { padding: 2px 20px 2px 0; position: relative; font-weight: 700; font-size: 16px; }
#narrator-filter-modal .filter-list ul li::after { content: "|"; position: absolute; display: block; top: 0; right: 10px; }

/* =============================================
   タグ（カテゴリ切り替えボタン）
============================================= */

/* ナレーターは2行テキストのタグのため幅を広めに */
@media (min-width: 768.02px) {

.narrator-tags .tag {
  width: calc((100% - 8px * 5) / 6);
  min-width: 130px;
  height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  font-size: var(--s-text);
  text-align: center;
}

.narrator-tags .tag span {
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 500;
}

}

@media (min-width: 768.02px) and (max-width: 1080px) {
  .narrator-tags .tag {
    width: calc((100% - 8px * 2) / 3);
  }
}

.openFilter__text--sp {
  display: none;
}

/* PC: アイコンは非表示 */
#openFilter .openFilter__icon {
  display: none;
}

/* =============================================
   ナレーターカード（3列・横並びレイアウト）
============================================= */

.narrator-list {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 20px;
  margin: 0 auto;
}

.narrator-card {
  width: calc((100% - 20px * 5) / 6);
}

.narrator-card__img-wrap {
  position: relative;
}

.narrator-card__img {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.narrator-card__img .number{position:absolute; left:10px; bottom:8px; font-size:var(--ss-text); color:#fff;}
.narrator-card__img.featured:before{content:"PICKUP"; display:block; width:fit-content; background:rgba(0,0,0,0.6); color:#fff; font-size:var(--ss-text); padding:5px 10px; position:absolute; top:0; left:0;}
.narrator-card__img.featured:lang(en)::before { content: "PICKUP";}

.narrator-card__img img {
  width: 100%;
  height: auto;
  display: block;
}

/* モデルNo. 左下表示 */
.narrator-card__img .number { position: absolute; left: 10px; bottom: 8px; font-size: 14px; color: #fff; }

/* ブックマークボタンは画像右下 */
.narrator-card__img-wrap .fav-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
}

.narrator-card__profile {
  margin-top: 16px;
}

.narrator-card:where(:not(.musician-card, .dancer-card)) {
  display: flex;
  flex-direction: column;
}

.narrator-card:where(:not(.musician-card, .dancer-card))  > * {
  flex: 1 1 0;
}

:where(.narrator-card:is(:not(.musician-card, .dancer-card))) .narrator-card__profile {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.narrator-card__profile > * {
  flex: 1 1 0;
}

/* 名前（カナ）: 太字・key-blue */
.narrator-card__name {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.5;
}

/* 声のイメージ: 黒文字・最大3行表示 */
.narrator-card__voice-image {
  font-size: 13px;
  color: #858f9c;
  line-height: 1.75;
  margin: 0;
  flex: 1;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

:where(.narrator-card__voice-image) + .narrator-card__voice-image {
  margin-top: 2px;
}

:where(.narrator-card__voice-image) + .narrator-card__voice-image--genre {
  margin-top: 8px;
}

.narrator-card__voice-image strong {
  color: #787e86;
  color: #3a3d40;
}

/* メタ情報（声の高さ・言語） */
.narrator-card__meta {
  margin-top: auto;
}

/* 声の高さ・言語: 太字・key-blue・小さめフォント */
.narrator-card__pitch,
.narrator-card__lang,
.narrator-card__japanese {
  font-size: 11px;
  font-weight: 700;
  color: var(--key-blue);
  margin: 2px 0;
  line-height: 1.5;
}

.narrator-card__pitch strong,
.narrator-card__lang strong,
.narrator-card__japanese strong {
  font-weight: 700;
}

/* =============================================
   レスポンシブ
============================================= */

@media (max-width: 1080px) {
  .narrator-list {
    gap: 24px 16px;
  }
  .narrator-card {
    width: calc((100% - 16px * 3) / 4);
  }
}

@media (max-width: 768px) {
  .narrator-list {
    --gap-x : var(--card-sm-gap);
    gap: 24px var(--gap-x);
  }
  .narrator-list .narrator-card {
    width: calc((100% - var(--gap-x) * 2) / 3);
  }

  .narrator-card__img {
    container-type: inline-size;
  }

  /* Pick Up
  修正するときは、`.model-card__img.featured:before`も
  */
  .narrator-card__img.featured:before{
    font-size: 10px;
    font-size: var(--pickup-font-size);
    line-height: 1;
    letter-spacing: 0.05em;
    padding: var(--pickup-padding);
  }

  .narrator-card__pitch,
  .narrator-card__lang,
  .narrator-card__japanese {
    font-size: var(--card-sm-text-sm);
    line-height: var(--card-sm-text-sm-line-height);
    margin: 0;
  }

  .narrator-card__pitch strong, 
  .narrator-card__lang strong, 
  .narrator-card__japanese strong {
    font-weight: normal;
  }

  /* .narrator-card__pitch:first-child, 
  .narrator-card__lang:first-child, 
  .narrator-card__japanese:first-child {
    margin-top: 0;
  }
  .narrator-card__pitch:last-child, 
  .narrator-card__lang:last-child, 
  .narrator-card__japanese:last-child {
    margin-bottom: 0;
  } */
}

@media (max-width: 576px) {

  .narrator-card__img {
    /* border-radius: var(--border-radius-md); */
  }

  .narrator-card__profile {
    margin-top: var(--card-sm-space-y-lg);
  }
  
  .narrator-card__name {
    font-size: var(--card-sm-title);
    line-height: var(--line-height-label);
    margin: 0 0 var(--card-sm-space-y);
  }

  .narrator-card__voice-image {
    color: #4a5461;
    font-size: var(--card-sm-text-sm);
    line-height: var(--card-sm-text-sm-line-height);
  }

  .narrator-card__voice-image--genre {
    line-height: var(--card-sm-text-sm-line-height);
  }

  /* 「ジャンル」が太文字な分詰まって見えるので微調整 */
  :where(.narrator-card__voice-image) + .narrator-card__voice-image {
    margin-top: 1px;
  }
  :where(.narrator-card__voice-image) + .narrator-card__voice-image--genre {
    margin-top: 1px;
  }

  /* :where(.narrator-card__voice-image) + .narrator-card__voice-image {
    margin-top: 0;
  }
  :where(.narrator-card__voice-image) + .narrator-card__voice-image--genre {
    margin-top: 0;
  } */

  .narrator-card__voice-image strong {
    color: #3c4045;
    font-weight: 800;
  }

  /* SP: 絞り込みボタンはアイコンのみ */
  #openFilter .openFilter__text {
    display: none;
  }

  .openFilter__text--sp {
    display: inline;
  }

  #openFilter .openFilter__icon {
    display: block;
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
  }
}

/* =============================================
   絞り込みモーダル：3列レイアウト
============================================= */

.filter-group--col3 {
  align-items: flex-start;
}

@media (min-width: 768.02px) {
  .item-list--col3 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    align-items: flex-start;
    width: calc(100% - 8em - 20px);
  }

  .item-list--col3 .item-list__col {
    flex: 1;
    padding-right: 16px;
  }
}

.item-list__sublabel {
  font-weight: 700;
  font-size: 13px;
  color: #444;
  margin: 0 0 8px;
}

@media (max-width: 768px) {
  .item-list--col3 {
    flex-direction: column !important;
    width: 100%;
  }

  .item-list--col3 .item-list__col {
    padding-right: 0;
    margin-bottom: 16px;
  }

  .filter-group--col3 {
    flex-direction: column;
    gap: 8px;
  }
}

/* =============================================
   プロフィールエリア（<div> に変更、内部リンク対応）
============================================= */

.narrator-card__profile {
  flex-direction: column;  /* 上書き: <div> でも flex column を維持 */
}

.narrator-card__profile-link {
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.narrator-card__profile-link:hover {
  color: inherit;
}

/* =============================================
   ボイスサンプルボタン
============================================= */

.narrator-voice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 8px);
  margin: 8px 4px 4px;
  padding: 5px 32px 5px 8px;
  border: 2px solid var(--key-blue);
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: #222;
  position: relative;
  transition: background 0.2s, color 0.2s;
  line-height: 1.4;
  flex-shrink: 0;
}

.narrator-voice-btn:hover {
  background: var(--bg-light-blue);
}

.narrator-voice-btn.is-playing {
  background: var(--bg-light-blue);
}

.narrator-voice-btn__text {
  flex: 1;
  text-align: center;
}

/* 右端アイコン（丸背景 + SVG） */
.narrator-voice-btn__icon {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: var(--key-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}

/* ボタンの幅が十分にあったら、ラベルを中央寄せにするためにアイコンをabsoluteにする */
@container (width >= 12em) {
  .narrator-voice-btn__icon {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    right: .5em;
  }
}

.narrator-voice-btn.is-playing .narrator-voice-btn__icon {
  background: var(--key-navy, #00195f);
}

.narrator-voice-btn__play,
.narrator-voice-btn__stop {
  aspect-ratio: 10 / 10;
  width: calc(10 / 22 * 100%);
  height: auto;
}

/* 再生マークの三角アイコンを中心から少しずらすほうが綺麗 */
.narrator-voice-btn__play {
  translate: 5% 0;
}

/* =============================================
   ミュージシャンカード専用上書き
============================================= */

.musician-card .narrator-card__voice-image,
.dancer-card .narrator-card__voice-image {
  flex: none;
}

.key-navy {
  color: var(--key-navy);
  font-weight: 700;
}

/* =============================================
   レスポンシブ
============================================= */

@media (max-width: 768px) {
  .narrator-voice-btn {
    width: stretch;
    border-radius: 2em;
    flex: 0 0 auto;
    gap: .25em;
  }
  :where(.narrator-voice-btn).narrator-detail__voice-btn {
    gap: 1em;
  }
  .narrator-voice-btn {
    margin: var(--card-sm-space-y) 0 0;
    padding: calc(4 / 9 * 1em) calc(6 / 9 * 1em) calc(4 / 9 * 1em) calc(8 / 9 * 1em);
    font-size: min(calc(9 / 375 * 100vw), 12px);
    min-height: var(--btn-min-height-xs);
  }

  .narrator-detail__sample-list .narrator-voice-btn {
    padding: calc(4 / 9 * 1em) calc(6 / 9 * 1em) calc(4 / 9 * 1em) calc(12 / 9 * 1em);
    font-size: var(--ss-text);
  }

  .narrator-detail__sample-list .narrator-voice-btn .narrator-voice-btn__text {
    font-size: inherit;
  }

  .narrator-voice-btn__text {
    position: relative;
    top: 0.5px;
  }

  .narrator-voice-btn__icon {
    position: static;
    transform: none;
    right: auto;
    top: auto;
    width: 1.5em;
    height: auto;
    aspect-ratio: 1;
  }

  :where(.narrator-voice-btn) .narrator-voice-btn__icon {
    width: 1.25em;
  }

  .narrator-detail__sample-list {
    gap: var(--gap-x-sm) var(--gap-x-xs);
  }
  
}

@media (max-width: 360px) {

  .narrator-voice-btn {
    font-size: 8px;
  }

}