/* =====================================================================
   一覧ページ（カテゴリ / 国 / 全記事 / WORLD / アーカイブ / 検索）
   Figma list-pc（2180:5947）/ list-sp（2183:9314）
   PC：見出し行（LIST ＋ 絞り込みチップ）→ 64 → 記事カード（1120px）→ 64 → ページ番号 → 120 → フッター
   ===================================================================== */

.p-list {
  --list-gutter: clamp(var(--page-gutter), 11.111vw, 160px); /* 1440px幅で160px */
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-block: var(--space-40) 120px;
}

/* ---- 見出し行：左に「LIST」（幅400）、右に絞り込みチップ（幅720・折り返し） ---- */

.p-list__head {
  position: relative; /* 絞り込みパネルの位置の基準 */
  display: grid;
  grid-template-areas: "title chips toggle";
  grid-template-columns: 400px minmax(0, 1fr) auto; /* Figma：LIST 400 ＋ チップ 559 ＋ ボタン 161 */
  align-items: center;
  padding-inline: var(--list-gutter);
}

.p-list__title {
  grid-area: title;
  display: block;
  width: fit-content;
  color: var(--color-primary);
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: 80px;
  line-height: var(--lh-none);
  letter-spacing: 0;
}

.p-list__filters {
  grid-area: chips;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  min-width: 0;
  padding-right: var(--space-16);
}

/* ---- 絞り込みチップ（カードのタグと同じ色・高さ28。右に外すための×） ---- */

.c-filter-chip {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  height: var(--tag-h);
  padding: 0 10px 0 var(--space-12);
  border-radius: var(--radius);
  background: var(--color-tag-default);
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}

.c-filter-chip[data-region="asia"]          { background: var(--color-region-asia); }
.c-filter-chip[data-region="europe"]        { background: var(--color-region-europe); }
.c-filter-chip[data-region="north-america"] { background: var(--color-region-north-america); }
.c-filter-chip[data-region="south-america"] { background: var(--color-region-south-america); }
.c-filter-chip[data-region="africa"]        { background: var(--color-region-africa); }

.c-filter-chip--category { background: var(--color-tag-category); }

/* 長い検索語・国名は1行に収まる分だけ出して「…」で省略する（SPで横にはみ出さないように） */
.c-filter-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-filter-chip__remove {
  display: grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius);
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
}

.c-filter-chip__remove svg {
  width: 8px;
  height: 8px;
}

/* ---- 記事カード（Figma：幅1120、カードの間28） ---- */

.p-list__cards {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-inline: var(--list-gutter);
}

/* ---- ページ番号（Alien Block 32px、今のページはロゴと同じ薄い青） ---- */

.c-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-32);
  padding-inline: var(--page-gutter);
}

.c-pagination .page-numbers {
  min-width: 24px;
  color: var(--color-line);
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: var(--lh-none);
  letter-spacing: 0;
  text-align: center;
  transition: color var(--duration) var(--easing);
}

.c-pagination a.page-numbers:hover {
  color: var(--color-primary);
  opacity: 1;
}

.c-pagination .current {
  color: var(--color-primary);
}

/* ---- 0件のとき ---- */

.p-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  padding-inline: var(--list-gutter);
  color: var(--color-text);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  text-align: center;
}

/* ---------------------------------------------------------------
   タブレット幅：LIST の列を詰めて、チップの場所を確保する
   --------------------------------------------------------------- */

@media (min-width: 769px) and (max-width: 1100px) {
  .p-list__title {
    flex-basis: 280px;
  }
}

/* ---------------------------------------------------------------
   SP（Figma list-sp）
   見出し「LIST」48px → 8 → チップ → 48 → カード（間20）→ 44 → ページ番号（間16）→ 80 → フッター
   --------------------------------------------------------------- */

@media (max-width: 768px) {
  .p-list {
    --list-gutter: var(--page-gutter);
    gap: 0;
    padding-block: 0 var(--space-80);
  }

  /* SPは「LIST ＋ アイコンボタン」の行の下にチップが並ぶ（Figma list-sp） */
  .p-list__head {
    grid-template-areas:
      "title toggle"
      "chips chips";
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-16);
  }

  /* 見出しの下の余白は、絞り込みパネルを見出しのすぐ下に出せるよう、カード側で確保する */
  .p-list__cards,
  .p-list__empty {
    margin-top: var(--space-48);
  }

  .p-list__title {
    font-size: 48px;
  }

  .p-list__filters {
    width: 100%;
  }

  .p-list__cards {
    gap: var(--space-20);
  }

  /* Figma：一覧のSPカードは本文の下余白24（TOPのRECENTは20） */
  .p-list .c-card__body {
    padding-bottom: var(--space-24);
  }

  .c-pagination {
    gap: var(--space-16);
    padding-top: 44px; /* 最後のカードの下20 ＋ 24 */
  }
}

/* =====================================================================
   404
   大きな「404」の真ん中の0が目になっている（ロゴと同じ作り）
   ===================================================================== */

.p-notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 「404」の文字は上下に余白（行の高さ分）を持っているので、それを見込んだ値にしている */
  padding: var(--space-56) var(--page-gutter) 120px;
  text-align: center;
}

.p-notfound__text {
  margin-top: var(--space-16);
}

.p-notfound .c-button {
  margin-top: var(--space-48);
}

.p-notfound__code {
  color: var(--color-primary);
  font-family: var(--font-logo);
  font-size: 240px;
  font-weight: 400;
  line-height: var(--lh-none);
  letter-spacing: 0;
}

.p-notfound__eye-char {
  position: relative;
}

/* 目は0の中心に置く。大きさは文字サイズに連動させる */
.p-notfound__eye-char .c-eye {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.26em;
  height: 0.26em;
  transform: translate(-50%, -50%);
}

.p-notfound__text {
  color: var(--color-text);
  font-family: var(--font-jp);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-wide);
}

/* 一覧が0件のときの見出し */
.p-list__empty-title {
  font-family: var(--font-jp);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: var(--lh-title);
  letter-spacing: 0.06em;
}

/* =====================================================================
   汎用の固定ページ（プライバシーポリシー等）
   専用のデザインは無いので、記事詳細の本文と同じ幅・文字組みにしている
   ===================================================================== */

.p-page__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  width: 100%;
  max-width: calc(607px + var(--page-gutter) * 2);
  margin-inline: auto;
  padding: var(--space-40) var(--page-gutter) 120px;
}

.p-page__title {
  font-family: var(--font-jp);
  font-size: 28px;
  font-weight: 500;
  line-height: var(--lh-body);
  letter-spacing: 0.06em;
}

@media (max-width: 768px) {
  .p-notfound {
    padding: var(--space-40) var(--page-gutter) var(--space-80);
  }

  .p-notfound__text {
    margin-top: var(--space-8);
  }

  .p-notfound .c-button {
    margin-top: var(--space-40);
  }

  .p-notfound__code {
    font-size: 120px;
  }

  .p-notfound .c-button {
    width: 303px;
    max-width: 100%;
  }

  .p-page__inner {
    gap: var(--space-40);
    padding: 0 var(--page-gutter) var(--space-80);
  }

  .p-page__title {
    font-size: var(--fs-lg);
    line-height: var(--lh-title);
  }
}

/* =====================================================================
   絞り込みパネル（「条件を追加」で開く）
   Figma list-pc 2190:13787 / list-sp 2190:14016
   国もカテゴリも複数選べる。選ぶと枠付きのタグになり、×で外せる。
   件数は選ぶたびに数え直す（assets/js/list.js → /wp-json/vialog/v1/count）
   ===================================================================== */

.p-list__filter-toggle {
  grid-area: toggle;
  justify-self: end;
}

/* 「条件を追加」「閉じる」など、一覧で使う小さめのボタン（Figma：高さ40・文字14px） */
.c-button--small {
  padding: var(--space-8) var(--space-20) var(--space-8) var(--space-32);
  font-size: var(--fs-sm);
  line-height: 24px; /* 高さ40 = 上下の余白16 + 24 */
}

.c-button--small .c-button__arrow {
  width: 18px;
  height: 18px;
}

.p-filter {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  overflow-y: auto;
  /* 上の余白は左右の余白（パネル1200pxの外側）と同じにする。ただし広い画面では
     左右の余白が300px以上になりパネルが画面の下の方に出てしまうので、80pxで打ち止めにする */
  padding: clamp(var(--space-20), calc((100% - 1200px) / 2), var(--space-80)) var(--space-20) var(--space-40);
  background: rgba(0, 0, 0, 0.1); /* 背景の黒い幕 */
}

.p-filter[hidden] {
  display: none;
}

/* パネル本体。縦に長いときはモーダルごとスクロールする */
.p-filter__form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  width: 100%;
  max-width: 1200px;
  height: max-content;
  margin-inline: auto;
  padding: var(--space-64) var(--space-80);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--color-line);
  background: #fafafa;
}

/* 閉じるボタンはパネルの右上（位置は list.js が実測して渡す）。
   パネルと一緒にスクロールするので、中身と重ならない */
/* 「閉じる」はパネル本体の右上に固定。中身の高さやページの種類で位置が動かないようにする
   （以前は「条件を追加」ボタンの座標に合わせていたが、一覧の種類で上下にずれて中身に重なった） */
.p-filter__close {
  position: absolute;
  top: var(--space-32);
  right: var(--space-32);
  padding-right: 18px;
}

.p-filter__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

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

.p-filter__title {
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

.p-filter__regions {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  padding-left: var(--space-16);
}

/* 国の少ない地域（北米・南米・アフリカ）は横に並べる */
.p-filter__region-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24) var(--space-32);
}

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

.p-filter__region-name {
  color: var(--color-text-gray);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
}

.p-filter__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-24);
  padding-left: var(--space-4);
}

.p-filter__options--indent {
  padding-left: var(--space-16);
}

/* ---- 選択肢。未選択は文字だけ、選ぶと白い枠付きのタグ（Figma） ---- */

.c-filter-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--tag-h);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-en);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration) var(--easing);
}

.c-filter-option:hover {
  color: var(--color-text-gray);
}

/* チェックボックス本体は隠すが、キーボード操作はできるようにする */
.c-filter-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.c-filter-option:has(input:focus-visible) {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.c-filter-option:has(input:checked) {
  padding: 0 var(--space-8) 0 var(--space-12);
  box-shadow: inset 0 0 0 1px var(--color-text-gray);
  background: var(--color-white);
  color: var(--color-text);
}

/* 親を選んだときの子：「含まれています」状態。選べないが、消えたわけではないと分かるようにする */
.c-filter-option.is-included {
  padding: 0 var(--space-12);
  box-shadow: inset 0 0 0 1px var(--color-line);
  background: var(--color-bg-subtle);
  color: var(--color-text-gray);
  cursor: default;
  pointer-events: none;
}

/* チェックのアイコン。色は文字色に追従させたいので、画像ではなくマスクとして使う */
.c-filter-option.is-included .c-filter-option__label::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: url("../images/check.svg") no-repeat center / contain;
  mask: url("../images/check.svg") no-repeat center / contain;
}

.c-filter-option__remove {
  display: none;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius);
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
}

.c-filter-option__remove svg {
  width: 8px;
  height: 8px;
}

.c-filter-option:has(input:checked) .c-filter-option__remove {
  display: grid;
}

/* ---- 下段：件数と「記事を表示する」 ---- */

.p-filter__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

.p-filter__count {
  color: var(--color-text);
  font-family: var(--font-jp);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-wide);
}

.p-filter__count-number {
  padding-inline: 0 var(--space-4); /* 「条件に合う」との間は0、数字と「件の…」の間だけ4px */
  color: var(--color-region-asia); /* Figma：緑 */
  font-family: var(--font-en);
  font-size: 50px;
  letter-spacing: 0; /* Figma：0% */
}

@media (max-width: 768px) {
  /* SPは文字を出さずアイコンだけ。Figma：32×32・角丸4・線1px・アイコン20px */
  .p-list__filter-toggle,
  .p-filter .p-filter__close {
    top: var(--space-16);
    right: var(--space-16);
    align-self: center;
    gap: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0;
  }

  .p-list__filter-toggle .c-button__arrow,
  .p-filter__close .c-button__arrow {
    width: 20px;
    height: 20px;
  }

  .p-filter {
    padding: var(--space-20) 10px; /* 画面の上から20px（オーナー指示） */
  }

  /* パネルの中のボタン（記事を表示する）は、SPでも中身に合わせた幅にする */
  .p-filter__foot .c-button {
    width: auto;
  }

  .p-filter__form {
    gap: var(--space-16);
    padding: var(--space-48) var(--space-24);
  }



  /* 「条件に合う◯件の記事があります」は数字以外16px（オーナー指示） */
  .p-filter__count {
    font-size: var(--fs-base);
  }

  .p-filter__body {
    gap: var(--space-32);
  }

  .p-filter__group {
    gap: var(--space-24);
  }

  .p-filter__title {
    font-size: var(--fs-md);
    color: var(--color-text-gray);
  }

  .p-filter__regions {
    gap: var(--space-24);
    padding-left: var(--space-8);
  }

  .p-filter__region {
    gap: var(--space-16);
  }

  .p-filter__region-row {
    flex-direction: column;
    gap: var(--space-24);
  }

  .p-filter__options--indent {
    padding-left: var(--space-8);
  }
}