/* Article欄のページ送りボタン（見出し「Article」の左右）

   ページの切り替えは js/article-pager.js が行う。
   本ファイルは見た目と、非表示にする指定だけを持つ。

   本ファイルは style2.css より後に読み込むこと */

/* 見出しを横並びにして、左に◀・右に▶を置く。

   高さについて: この見出しが占める高さは
   css/ogulab-encounter.css で Menu列の見出し(67px)に合わせてある。
   ボタンの高さが文字の行の高さ(32px)を超えると見出しが縦に伸び、
   Article欄とMenu欄の頭の位置がずれるため、
   下のボタンの余白と文字サイズは32pxに収まる値にしてある */
/* 見出しは3列のグリッドにする。
     1列目 空き
     2列目 ◀ Article ▶
     3列目 カテゴリの絞り込みボタン

   1列目と3列目を同じ幅（1fr）にすることで、2列目が必ず行の中央に来る。
   絞り込みボタンは3列目の中だけで折り返すため、
   中央のまとまりと重なることが構造上起こらない。

   以前は絞り込みボタンを絶対配置にし、重ならない幅をJSで計算していたが、
   フォントの読み込み前後でボタンの幅が変わるため計算がずれ、
   環境によって▶と重なる不具合が出ていた */
.right > p.article-heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* 中央のまとまりとボタン群の間隔。
     1列目と3列目が同じ幅のため、間隔を空けても中央はずれない */
  column-gap: 20px;
  align-items: center;
  /* 行の高さ(32px)より中身が高くなったとき、上下へ均等にはみ出させる。
     指定しないと下側だけへはみ出し、記事領域にかぶる */
  align-content: center;

  /* 高さを文字1行分に固定する。

     固定しないと、ボタンが2行になったときに見出し全体が縦に伸び、
     css/ogulab-encounter.css で合わせた Menu列との頭の位置がずれる
     （実測で67px→88px、ずれ21px）。
     高さを固定すればボタン群は行の上下へはみ出すだけで、
     周囲の配置に影響しない。
     はみ出す量は上下それぞれ約10pxで、見出しの余白（上15px・下20px）に収まる */
  height: 32px;
}

/* 行番号を明示する理由:
   グリッドの自動配置は要素の順に左から埋めるため、2列目のこの要素を置いた時点で
   位置が2列目まで進む。その後に1列目を指定した要素（狭い画面でのカテゴリボタン）が
   来ると、1列目は通り過ぎた後ろ側になるため次の行へ送られてしまう。
   その結果ボタン群が16px下がり、記事領域へ7pxかぶっていた。
   両方に行番号を与えて必ず同じ行へ並べる */
.article-heading__center {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  /* 見出しの文字とボタンの間隔。
     14pxではボタンが「Article」に貼り付いて見えるため広げている。
     左右で同じ値のため、広げても「Article」は中央に来たままになる */
  gap: 28px;
}

/* 見出しの文字。フォントサイズは style2.css の `.right p` から受け継ぐ */
.article-heading__text {
  line-height: 1.5;
}

/* ボタン本体。記事カード（css/quest-card.css）と同じ体裁にしている。
   内訳: 文字14px ＋ 上下余白6px ＋ 枠3px ＝ 32px */
.article-heading .article-pager {
  font-family: "Press Start 2P", cursive;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background: #212529;
  border: 3px solid #fff;
  border-radius: 0;
  padding: 6px 8px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
  cursor: pointer;
  /* なめらかな変化をやめ、即時に切り替わるレトロな挙動にする */
  transition: none;
}

/* 選択中の項目のように反転させる（Bookmarkの一覧と同じ考え方） */
.article-heading .article-pager:hover:not(:disabled) {
  background: #f7d51d;
  color: #212529;
}

/* 押した瞬間だけ影を消して沈んで見せる */
.article-heading .article-pager:active:not(:disabled) {
  box-shadow: none;
  transform: translate(3px, 3px);
}

/* 端のページで押せないことを示す。
   消さずに薄くするのは、ページを移動しても見出しの位置がずれないようにするため */
.article-heading .article-pager:disabled {
  opacity: 0.3;
  cursor: default;
}

/* カードが9枚以下のときはボタン自体を出さない（js が hidden を外さない）。
   hidden 属性だけでは、上のルールの display 指定に負ける場合があるため明示する */
.article-heading .article-pager[hidden] {
  display: none;
}

/* ===== カテゴリでの絞り込みボタン =====

   「Article」を行の中央に置いたまま、ボタン群だけを右端へ寄せる必要がある。
   同じ並びに入れると中央がボタン群のぶん左へずれるため、
   絶対配置で行から切り離している。

   1050px以下では列幅が足りず中央のページ送りと重なるため、
   通常の並びに戻して折り返させる（下のメディアクエリを参照） */
.article-heading .article-filter {
  grid-column: 3;
  grid-row: 1;
  /* 3列目の中で右詰めにする */
  justify-self: end;
  display: flex;
  align-items: center;
  /* 右詰めで並べ、列の幅に収まらなくなったら下の行へ折り返す */
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  /* 列の幅より狭くなれるようにする。これがないと折り返さずに列を押し広げる */
  min-width: 0;

  /* 右端の位置。記事カードの列の右端に合わせるため、
     js/article-pager.js が margin-right を実際の列幅から計算して設定する。
     ここでの値は、その計算が走る前の初期表示用 */
  margin-right: 25px;

  /* 高さの上限。2行ぶん（ボタン1個24px×2 ＋ 行間5px ＝ 53px）まで広げ、
     3行目からはスクロールで送る。
     3行に広げると見出しの余白を越えて記事領域（aliceblue）へかぶるため。
     スクロールバーはサイト全体の方針に合わせて隠している */
  max-height: 53px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.article-heading .article-filter::-webkit-scrollbar {
  display: none;
}

/* ボタン本体。ページ送りのボタンと同じ体裁だが、
   5つ並べても中央の「Article」と重ならないよう文字を小さくしている。
   9pxにすると横幅が549pxになり、▶と8px重なる。
   高さ: 文字8px ＋ 上下余白5px ＋ 枠2px ＝ 22px（見出しの32pxに収まる） */
.article-filter .article-filter__btn,
.article-filter .article-filter__release {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "Press Start 2P", cursive;
  font-size: 8px;
  line-height: 1;
  color: #fff;
  background: #212529;
  border: 2px solid #fff;
  border-radius: 0;
  padding: 5px 6px;
  cursor: pointer;
  transition: none;
  /* 高さを揃える。
     カテゴリボタンは中の色見本（10px）に押し広げられて24pxになるが、
     色見本を持たない解除ボタンは22pxになり、並べたときに段差が出る */
  box-sizing: border-box;
  min-height: 24px;
}

/* 絞り込みの解除ボタン。
   文言が英字のため、書体・大きさとも上のカテゴリボタンと同じものを使う。
   末尾の絵文字だけは別のフォントで描かれるが、
   文字サイズが8pxのため高さには影響しない。

   背景と枠でカテゴリボタンと区別する。
   背景の深い赤は、カテゴリの5色（黄・青・緑・橙・紫）のいずれとも重ならない色を選んでいる。
   枠を3pxに太らせても、box-sizing が border-box のため高さは24pxのまま変わらない
   （24 － 枠3×2 － 余白5×2 ＝ 文字8px でちょうど収まる） */
.article-filter .article-filter__release {
  background: radial-gradient(black, transparent);
  border-width: 3px;
}

/* 絞り込んでいないときは押す意味がないため、押せない状態にする。
   消さずに薄くするのは、並びがずれてレイアウトが動くのを避けるため */
.article-filter .article-filter__release:disabled {
  opacity: 0.3;
  cursor: default;
}

.article-filter .article-filter__release:hover:not(:disabled) {
  background: #f7d51d;
  color: #212529;
}

/* カテゴリの色見本。記事カードのラベルと同じ色を使う */
.article-filter .article-filter__swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  /* 既定色。下のカテゴリ別指定が当たらなかった場合に目立つようにしている */
  background: #adafbc;
}

/* ===== カテゴリと色の対応 =====

   記事カードのラベルと、絞り込みボタンの色見本の両方をここでまとめて決める。
   2箇所に分けて書くと、片方だけ直したときに食い違うため。

   | カテゴリ    | 色      |
   | IT EVENT    | #f7d51d 黄 |
   | Programming | #209cee 青 |
   | Analyze     | #92cc41 緑 |
   | TRYHACK     | #e76e55 橙 |
   | NETWORK     | #8a4fd3 紫 |

   もともと記事カード側の色は class（category / category2 …）で決まっており、
   カテゴリ名とは無関係だった。そのため次の重複が起きていた。
     - IT EVENT と NETWORK がどちらも黄
     - TRYHACK が記事によって橙と緑に分かれる
   色だけでカテゴリを判別できるよう、重複していた3件へ
   cat-network / cat-tryhack を付けて色を上書きしている。

   文字色も併せて指定している。
   css/theme.css では category / category2 の文字色が濃色、
   category3 / category4 が白と分かれており、
   背景だけ変えると次の不都合が起きるため。
     - TRYHACK: 他2件（category4）が白なのに1件だけ濃色になり不揃いになる
     - NETWORK: 紫地に濃色の文字となり、コントラスト比が約2.6:1まで落ちて読みにくい

   詳細度: css/theme.css の `.card01 .description .category`（クラス3つ）を
   上回る必要があるため、#article を前置している */
#article .description .cat-network {
  background: #8a4fd3;
  color: #fff;
}

#article .description .cat-tryhack {
  background: #e76e55;
  color: #fff;
}

/* 絞り込みボタンの色見本。上の表と同じ色を使うこと */
.article-filter__btn[data-category="IT EVENT"] .article-filter__swatch {
  background: #f7d51d;
}

.article-filter__btn[data-category="Programming"] .article-filter__swatch {
  background: #209cee;
}

.article-filter__btn[data-category="Analyze"] .article-filter__swatch {
  background: #92cc41;
}

.article-filter__btn[data-category="NETWORK"] .article-filter__swatch {
  background: #8a4fd3;
}

.article-filter__btn[data-category="TRYHACK"] .article-filter__swatch {
  background: #e76e55;
}

.article-filter .article-filter__btn:hover {
  background: #f7d51d;
  color: #212529;
}

/* 絞り込み中のカテゴリ。選択されていることが一目で分かるよう反転させる */
.article-filter .article-filter__btn[aria-pressed="true"] {
  background: #fff;
  color: #212529;
}

/* 1050px以下は列幅が足りないため、絶対配置をやめて折り返させる。
   この画面幅では見出しの高さをMenu欄に合わせる必要がないため、
   2段になっても問題ない */
/* 画面が狭いときは、カテゴリボタンを左端へ寄せる。

   ヘッダーのカービィ（.home-link）は position: fixed で画面の右上に貼り付いており、
   画面が狭くなるとカテゴリボタンの位置まで下りてくる。
   実測（1350px）ではカービィの絵と横81px・縦53px重なっていた。
   吹き出しも同様に重なる。

   右端に寄せるのをやめ、記事カードの左端に合わせて左詰めにすることで回避する。
   左端の33pxの内訳は #theme の左マージン15px ＋ 内側余白10px ＋ カードの左マージン8px。
   右端と違って半端な余りが出ないため、固定値で合わせられる */
@media screen and (min-width: 1051px) and (max-width: 1525px) {
  .article-heading .article-filter {
    grid-column: 1;
    justify-self: start;
    justify-content: flex-start;
    margin-left: 33px;
    margin-right: 0;
  }
}

@media screen and (max-width: 1050px) {
  /* 3列に分ける余裕がないため、中央のまとまりとボタン群を縦に積む。
     縦に積む以上は高さの固定を解除する（この幅では頭揃えの必要がない） */
  .right > p.article-heading {
    grid-template-columns: 1fr;
    height: auto;
    row-gap: 8px;
  }

  .article-heading__center {
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
  }

  /* 2行目へ置くこと。
     広い画面向けの指定で両方に grid-row: 1 を与えているため、
     ここで上書きしないと中央のまとまりと同じマスに入り、重なって表示される */
  .article-heading .article-filter {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    justify-content: center;
    margin-left: 0;
    /* 広い画面向けの制限は解除する（中央のまとまりとは別の行になるため） */
    margin-right: 0;
    max-height: none;
    overflow-y: visible;
  }
}

/* 初期化が終わるまで記事一覧を隠す。

   HTMLには10枚すべてのカードが並んだ状態で書かれているため、
   ブラウザは先に既定の状態（1ページ目・スクロール先頭）を描いてしまう。
   記事ページから戻ったときは、そのあとJSが2ページ目や
   読んでいた位置へ戻すため、一瞬だけ既定の表示がちらついていた。

   目印の js-article-pager は index.html の <head> にある小さなスクリプトが付け、
   js/article-pager.js が初期化を終えた時点で外す。
   JSが無効な環境では目印自体が付かないため、一覧はそのまま表示される。
   万一の場合に備え、head 側で一定時間後に外す保険も入れている */
.js-article-pager #article {
  visibility: hidden;
}

/* ページから外れた記事カードと広告枠を隠す。

   js は hidden 属性を付け外しして切り替えている。
   card01〜03 や .ad-inline には display の指定があり、
   hidden 属性の既定の display:none より優先されてしまうため、
   同じ場所で上書きできるようクラス3つ分の詳細度にしている */
.right #theme #article > [hidden] {
  display: none;
}