/* ============================================================
   public/assets/css/big-groups.css
   「記事を探す」6大グループのタブ／タイル／説明文の見た目。
   public/index.html・public/en/index.html で共通(言語差はJS側のテキストのみ)。
   ============================================================ */

.big-group-kicker {
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #6E8062;
  margin-bottom: 0.75rem;
}

/* ── PCタブの行(#bigGroupTabsDesktop)。表示・非表示やレイアウトをすべて
   ここで持つ(Tailwindのhidden/lg:flexユーティリティと併用すると、Tailwind
   CDNが実行時に注入するスタイルとの適用順序次第で意図通り上書きされない
   ことがあったため)。
   2026-09-16、「すべて/All」タブを廃止し6タブになったのに合わせて、
   4列グリッド(4+3)から3列グリッド(3+3)に変更し、閾値もJA/EN実測し直した。
   ENタブ列だけコンテナpaddingを打ち消すmargin-inlineの特例は、6タブ化に
   より不要になったため廃止した(通常のコンテナ幅の範囲内で収まる)。
   - 1024px未満: 非表示(スマホタイルを使う)
   - 1024px〜各言語の閾値未満: 6タブが1行に収まらないため、3列のCSS Gridで
     「3つ＋3つ」のバランスの良い折り返しを明示的に強制する(JA/EN共通。
     3列グリッドは各カラムがmax-contentで独立に幅を持つため、言語による
     文字幅の違いでも1024px以上ではみ出さないことを実測で確認済み)
   - 各言語の閾値以上: 横一列のflexに戻す。閾値はJA/ENそれぞれ実測して
     設定している(下記個別ルール参照)。 */
.big-group-tabs-row {
  display: none;
}
@media (min-width: 1024px) {
  .big-group-tabs-row {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: center;
    gap: 0.5rem;
  }
}

/* JA: 実測で6タブの合計幅は約994px。max-w-7xl(lg:px-8=32px×2)を差し引いた
   コンテナ幅が994pxを上回る1058px以上で1行に収まる計算(実測で確認済み)。
   余裕をもたせて1100pxに設定(2026-09-16、「すべて」タブ廃止後)。 */
@media (min-width: 1100px) {
  html:lang(ja) .big-group-tabs-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.5rem;
  }
}

/* EN: 実測で6タブの合計幅は約1135px。同様にコンテナ幅が1135pxを上回る
   1199px以上で1行に収まる計算(実測で確認済み)。「すべて」タブ廃止により
   通常のコンテナ幅の範囲内(1280px到達前)で収まるようになったため、
   以前のmargin-inlineでpaddingを打ち消す特例は不要になった。余裕をもたせて
   1230pxに設定(2026-09-16)。 */
@media (min-width: 1230px) {
  html:lang(en) .big-group-tabs-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.5rem;
  }
}

/* ── タブ(PC)・タイル(スマホ)共通の配色・枠線 ───────────────────────────── */
.big-group-tab,
.big-group-tile {
  background: #ffffff;
  border: 1.5px solid #1B4332;
  color: #1B4332;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.big-group-tab:hover,
.big-group-tile:hover {
  border-color: #0F2A1C;
  background: #F1F6F1;
}
.big-group-tab.is-active,
.big-group-tile.is-active {
  background: #1B4332;
  border-color: #1B4332;
  color: #ffffff;
}

/* ── 記事数バッジ(薄い緑の丸)。グループ名と視覚的に分離する ─────────────── */
.big-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(110, 128, 98, 0.18);
  color: #1B4332;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  /* 数字の高さを揃える(桁によって数字の見た目の高さがバラつくのを防ぐ) */
  font-variant-numeric: lining-nums tabular-nums;
}
.is-active .big-group-count {
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

/* ── PCタブ:高さ48px・角丸12px・文字17px ──────────────────────────────── */
.big-group-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 48px;
  padding: 0 1rem;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 700;
  /* フォントはJA: .font-serif(Noto Serif JP)/ EN: .font-sans(Lato)を
     JS側でクラス付与して使う。ここではハードコードしない。 */
  /* 絵文字・名前・件数が1行のまま折り返さないようにする(2026-09-16、
     英語名の長いグループでボタンの高さを超えて2行に折り返し、絵文字が
     名前の上に押し出される問題があったため) */
  white-space: nowrap;
  /* 横一列flexモード(min-width:1200px以上、下記参照)で、コンテナ幅が
     足りない場合にボタン自体が縮んで文字がはみ出すのを防ぐ(flexアイテムは
     デフォルトでflex-shrink:1のため、white-space:nowrapと組み合わせると
     縮んだボタン幅からテキストがクリップ/オーバーラップして見える) */
  flex-shrink: 0;
}

/* ── スマホタイル(3列×2段)。配色・枠線・角丸はタブと統一 ────────────────── */
.big-group-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border-radius: 12px;
  padding: 0.85rem 0.5rem;
  min-height: 44px;
}
.big-group-tile .big-group-tile-emoji {
  font-size: 1.5rem;
  line-height: 1;
}
.big-group-tile .big-group-tile-label {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
}

/* ── 説明文の帯:薄い緑の背景+左4pxの緑ライン ───────────────────────────── */
.big-group-desc-band {
  background: #E9F1E9;
  border-left: 4px solid #1B4332;
  border-radius: 0 0.75rem 0.75rem 0;
  /* 左右paddingはスマホ幅(600px未満)だけ1remに詰める。語句ごとのinline-block
     スパンは自由なテキスト流し込みより行の詰まりが悪く、375px前後では
     1.5remのままだと一部グループが4行を超えてしまうため(実測で確認済み)。 */
  padding: 1.25rem 1rem;
  text-align: left;
}
@media (min-width: 600px) {
  .big-group-desc-band {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .big-group-desc-band {
    /* 本文(語句ごとのinline-blockスパン)を6グループすべて2行に収めるには、
       実測上おおよそ39em相当の帯幅が必要だった(30em程度だと6件中3件が
       3行になった)。読点・助詞で区切ったスパン単位で改行されるぶん、
       自由なテキスト流し込みより行の詰まりが悪くなるため。 */
    max-width: 39em;
    margin-inline: auto;
  }
}

.big-group-description {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #2F3A3C;
  text-wrap: balance;
}
/* auto-phraseはChrome系のみの補助。日本語の語句分割自体はJS側
   (wrapJaPhrases())の<span style="display:inline-block">が主担当で、
   auto-phraseはそれを補完する形。英語版の要素にはlang="ja"を付けない
   ため、このルールはJA本文にのみ効く。 */
.big-group-description[lang="ja"] {
  word-break: auto-phrase;
}

/* ── 帯の中の「すべての記事に戻る」ボタン ────────────────────────────────
   2026-09-16、PC幅の「すべて/All」タブ廃止に伴い、グループ選択中はPC幅でも
   この戻るボタンを表示するようにした(以前はlg:hiddenでスマホのみ表示)。
   表示・非表示自体は#bigGroupInfoの.hiddenクラス(グループ未選択時)に
   委ねているため、ここではdisplayを指定しない。 */
.big-group-back-btn {
  margin-top: 0.85rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #1B4332;
}
.big-group-back-btn:hover {
  color: #C9A84C;
}

/* ── 帯の中の詳細テーマチップ:白背景をやめ、枠線だけの控えめな形に ───────── */
.big-group-desc-band .group-theme-chip {
  background: transparent;
  border: 1px solid #1B4332;
  color: #1B4332;
}
.big-group-desc-band .group-theme-chip:hover {
  border-color: #0F2A1C;
  color: #0F2A1C;
}
.big-group-desc-band .group-theme-chip.is-active {
  background: #1B4332;
  border-color: #1B4332;
  color: #ffffff;
}