/* ==========================================================================
   POTOMAK 2026 — NEWS一覧ページ専用スタイル

   /event/ と /event_cat/○○/ で使う。
   カードの骨格(写真の比率・日付・見出し)は base.css の .news-card__* にある。
   ここで決めているのは「何列に並べるか」と、見出しまわりだけ。
   ========================================================================== */

.news-archive__inner {
  /* 上下の空き。全ページ共通の区切りの2倍(ページの端なので広めに取る) */
  padding-block: calc(var(--rule-section) * 2);
}


/* ---------- 見出しの帯 ---------- */

/*
 * 左に「NEWS」、右にカテゴリー。
 * 文字の足元(ベースライン)でそろえる。大きさが違っても同じ一行に乗る。
 */
.news-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
  /* 見出し→中身。全ページ共通のルール */
  margin-bottom: var(--rule-head);
}

/*
 * ページ名。
 * 下層ページの英字ラベル(.page-hero__eyebrow)と同じ性格のものを、
 * ページの顔として一段大きくしている。
 * 色は他ページの英字ラベルと同じ瑠璃色。
 */
.news-head__title {
  font: var(--type-h2-san);
  letter-spacing: var(--ls-page-label);
  color: var(--color-accent);
}


/* ---------- カテゴリーの絞り込み ---------- */

/*
 * COMPANYページのタブバーと同じ性格の「切り替え」。
 * 文字の大きさ・色・下線の引き方をそちらとそろえている。
 */
.news-filter {
  display: flex;
  align-items: baseline;
  gap: var(--space-lg);
  /* 数が増えても折り返さず、狭い画面では横に流す */
  overflow-x: auto;
  scrollbar-width: none;
}

.news-filter::-webkit-scrollbar {
  display: none;
}

.news-filter__item {
  flex: none;
  font: var(--type-list);
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-text-sub);
  transition: color 0.2s ease;
}

.news-filter__item:hover,
.news-filter__item.is-current {
  color: var(--color-accent);
}

/*
 * 選ばれている項目の下線。
 * 幅ではなく「横方向の伸縮」で動かしているので、
 * 描き直しが起きず左から右へなめらかに伸びる
 * (COMPANYのタブバー・読み進めリンクと同じ作り)。
 */
.news-filter__label {
  position: relative;
}

.news-filter__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.news-filter__item.is-current .news-filter__label::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .news-filter__label::after {
    transition: none;
  }
}


/* ---------- カードの並び ---------- */

/*
 * 4列。TOPの一覧と同じ列数。
 *
 * 列と行で空きを変えている。
 * 行の空きは「前の記事の文字」と「次の記事の写真」のあいだになるので、
 * 列の空きと同じにすると、縦のつながりのほうが強く見えてしまう。
 * 列が増えて1枚が細くなったぶん、列の間は少し詰めている。
 */
.news-archive__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--space-lg);
  row-gap: var(--space-2xl);
}

.news-archive__grid .news-card__title {
  font: var(--type-list);
  -webkit-line-clamp: 3;
}

.news-archive__empty {
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}


/* ---------- ページ送り ---------- */

/*
 * 「1 2 … 5 →」の形。
 * 数字は装飾せず、いまのページだけ瑠璃色にする。
 */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  /* 一覧との空き。区切りの2倍 */
  margin-top: calc(var(--rule-section) * 2);
  font: var(--type-list);
  letter-spacing: var(--ls-caption);
}

.pager .page-numbers {
  color: var(--color-text-sub);
  transition: color 0.2s ease;
}

.pager a.page-numbers:hover {
  color: var(--color-accent);
}

.pager .page-numbers.current {
  color: var(--color-accent);
}

/* 「…」は押せないので、色を落として記号として置く */
.pager .page-numbers.dots {
  color: var(--color-text-weak);
}


/* ---------- タブレット ---------- */

@media (max-width: 768px) {
  /* 4列だと1枚が小さくなりすぎるので2列に */
  .news-archive__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ---------- スマートフォン ---------- */

@media (max-width: 600px) {
  /*
   * 見出しとカテゴリーを縦に積む。
   * 横並びのままだとカテゴリーの居場所が無く、
   * 「NEWS」が押しつぶされる。
   */
  .news-head {
    display: block;
  }

  .news-filter {
    margin-top: var(--space-md);
    /* 画面の端まで流せるようにして、続きがあることを分かりやすくする */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    gap: var(--space-md);
  }

  .pager {
    gap: var(--space-md);
  }
}


/* ==========================================================================
   NEWS詳細 ( /event/{ID}/ )

   組み方はスタッフインタビュー詳細(page-interview.css)と同じ。
   大きい写真の右下にカードを重ね、その下に本文を1本の柱で流す。
   違いは書体で、こちらは本体側のページなので見出しに明朝(H1-Serif)を使う。
   ========================================================================== */

/* ---------- ヒーロー ---------- */

.news-detail__hero {
  position: relative;
  /*
   * 写真 → 本文。
   * ヒーローは全面写真で下端が硬い縁になっているので、
   * 区切り(48px)より一拍広い64pxを取る。インタビュー詳細と同じ考え方。
   */
  padding-bottom: var(--space-2xl);
}

.news-detail__photo {
  width: 66%;
  /*
   * 記事の主役の写真。広い画面では 3:2。
   * 4:3(1.33)と16:9(1.78)の中間で、一眼レフの標準比率。
   * インタビュー詳細(.itv-detail__photo)と同じ値にそろえている。
   */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--color-grayge);
}

.news-detail__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * カードの bottom は、ヒーローの padding-bottom と必ず同じ値にすること。
 * 同じにしておくと、カードの下端が写真の下端とぴったりそろう。
 */
.news-detail__card {
  position: absolute;
  /*
   * 右端は画面のふち。
   *
   * 写真が画面の左端から始まっているので、カードだけ本文の余白(120px)ぶん
   * 内側に引っ込んでいると、右側だけが空いて見える。
   * かといって画面のふちに付けると窮屈なので、48pxだけ空ける。
   * 本文の余白(120px)より狭く、カードの内側の余白(48px)と同じ値。
   */
  right: var(--space-xl);
  bottom: var(--rule-section);
  width: min(570px, 46%);
  padding: var(--space-xl);
  background-color: var(--color-paper);
}

/* 写真が登録されていない記事では、カードだけを本文と同じ幅で置く */
.news-detail__hero--noimage .news-detail__card {
  position: static;
  width: min(800px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
  background-color: transparent;
}

.news-detail__label {
  font: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-accent);
}

.news-detail__title {
  /* 英字ラベル → 見出し。全ページ共通の8px */
  margin-top: var(--space-xs);
  /* 記事の題名。他ページの大見出しと同じ H1-Serif(32px) */
  font: var(--type-h1);
  letter-spacing: var(--ls-display);
  color: var(--color-ink);
}

.news-detail__date {
  display: block;
  /* 見出し → 中身。全ページ共通の24px */
  margin-top: var(--rule-head);
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}


/* ---------- 本文 ---------- */

/*
 * 読み物なので横幅を絞る。1行が長すぎると目が戻る位置を見失う。
 * インタビュー記事(.itv-detail__body)と同じ800px。
 */
.news-detail__body {
  width: min(800px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: var(--rule-section);
}

/*
 * ここから下は、旧サイトから引き継いだ本文HTMLを整えるための指定。
 *
 * 記事はプレスリリース配信サービスから貼り付けたもので、
 * 意味のない入れ子のdivや、配信元のclassがそのまま残っている。
 * 中身は書き換えられないので、「何が来ても読める」形に矯正する。
 * セレクタが要素名なのはそのため(classが当てにならない)。
 */

/*
 * 枠からはみ出さないようにする。
 *
 * 元のHTMLには、幅を直接持った表や画像、配信元の入れ子のdivが入っていて、
 * そのままだとページ全体に横スクロールが出る。
 * 中身が何であっても、本文の柱(800px)より広がらないようにしておく。
 */
.news-detail__body,
.news-detail__body * {
  max-width: 100%;
  box-sizing: border-box;
}

/*
 * 折り返し。
 * 長いURLや英数字の連続は、途中でも折り返してよいことにする。
 * (折り返せないと、その1語のぶんだけ横に伸びてしまう)
 */
.news-detail__body {
  overflow-wrap: anywhere;
}

/* 表や整形済みテキストは、枠の中だけで横スクロールさせる */
.news-detail__body table,
.news-detail__body pre {
  display: block;
  overflow-x: auto;
}

.news-detail__body p {
  font: var(--type-body);
  /* 行送りは「読ませる本文」の2.2。インタビュー記事と同じ */
  line-height: var(--lh-read);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.news-detail__body p + p {
  margin-top: 1.4em;
}

/* 記事の中の見出し。本文(15px)との差は大きさで付ける */
.news-detail__body h2,
.news-detail__body h3,
.news-detail__body h4 {
  /* かたまりどうし。全ページ共通の48px */
  margin-top: var(--rule-block);
  /* 見出し → 本文。全ページ共通の24px */
  margin-bottom: var(--rule-head);
  font: var(--type-h3);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink);
}

.news-detail__body h2:first-child,
.news-detail__body h3:first-child {
  margin-top: 0;
}

/*
 * 写真。元のHTMLは幅や高さを属性で持っていることがあるので、
 * ここで打ち消して枠に合わせる。
 */
.news-detail__body img {
  display: block;
  width: 100%;
  height: auto;
  /* 文章 → 写真。かたまりの中の区切りなので48px */
  margin: var(--rule-block) auto;
}

.news-detail__body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.news-detail__body strong,
.news-detail__body b {
  font-weight: 500;
}

.news-detail__body ul,
.news-detail__body ol {
  margin: var(--rule-head) 0;
  padding-left: 1.5em;
  font: var(--type-body);
  line-height: var(--lh-read);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.news-detail__body li + li {
  margin-top: var(--space-2xs);
}

/* 表と埋め込み動画。枠からはみ出さないようにするだけ */
.news-detail__body table {
  width: 100%;
  border-collapse: collapse;
  font: var(--type-list);
}

.news-detail__body th,
.news-detail__body td {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.news-detail__body iframe,
.news-detail__body video {
  max-width: 100%;
  margin: var(--rule-block) 0;
}

/* 空の段落(貼り付けの名残)が余白を作らないようにする */
.news-detail__body p:empty {
  display: none;
}

/*
 * 配信元が文字に直接書いている大きさ・書体を打ち消す。
 *
 * プレスリリースの本文には style="font-size: 1.3rem" のような指定が
 * 文の途中に点在していて、そのまま出すと1文だけ大きくなったり、
 * 同じ役割の行の大きさがそろわなかったりする。
 * サイトの文字の段はトークンで決めているので、ここでは本文の大きさに戻す。
 *
 * 要素に直接書かれた指定は、!important を付けないと上書きできない。
 * このファイルで !important を使っているのはここだけ。
 *
 * 色は打ち消していない。注意書きを赤にしているなど、
 * 書いた側の意図がある場合に消してしまうため。
 */
.news-detail__body [style*="font-size"],
.news-detail__body [style*="font-family"],
.news-detail__body [style*="line-height"],
.news-detail__body [style*="white-space"] {
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
  /* nowrap が書かれていると折り返さず、横に突き抜ける */
  white-space: normal !important;
}


/* ---------- この記事の店舗 ---------- */

/*
 * 中身のカードはNEWSと同じ部品(.news__grid + .news-card / base.css)。
 * 店舗専用の見た目は作らない。同じ「写真 + 文字」の並びを2か所で持つと、
 * 片方だけ直して食い違う。
 */
.news-shops {
  /* 本文と同じ幅の柱に乗せる(本文の中ではなく、そのすぐ下に置いている) */
  width: min(800px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /*
   * 本文 → 店舗。かたまりどうしなので48px。
   * 本文側が自分の padding-bottom(24px)を先に持っているので、その差ぶんだけ足す。
   */
  margin-top: calc(var(--rule-block) - var(--rule-section));
  padding-bottom: var(--rule-section);
}

.news-shops__title {
  /* 見出し → 中身。全ページ共通の24px */
  margin-bottom: var(--rule-head);
  font: var(--type-h3);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink);
}

/*
 * 件数が少ないときは列を減らす。
 *
 * 4列のままだと、1店舗しかない記事でカードが本文幅の1/4になり、
 * 写真が小さすぎて何の店か分からなくなる。
 * ここは一覧ではなく「この記事の行き先」なので、数に合わせて大きく見せる。
 *
 * :has() は「その子を持っているか」で数を数えている。
 *   3枚目が無い          → 1〜2件 → 2列
 *   3枚目はあるが4枚目が無い → 3件   → 3列
 */
.news-shops .news__grid:not(:has(.news-card:nth-child(3))) {
  grid-template-columns: repeat(2, 1fr);
}

.news-shops .news__grid:has(.news-card:nth-child(3)):not(:has(.news-card:nth-child(4))) {
  grid-template-columns: repeat(3, 1fr);
}


/* ---------- ほかのニュース ---------- */

/*
 * 地色を沈ませた面。
 * 境目の内側・外側とも --rule-fill(48px)。理由は tokens.css を参照。
 * 外側は隣のセクションの padding(--rule-section)が先に入っているので、
 * その差ぶんだけ margin で足す。
 */
.news-others {
  margin-block: calc(var(--rule-fill) - var(--rule-section));
  padding-block: var(--rule-fill);
}


/* ---------- タブレット ---------- */

@media (max-width: 1100px) {
  .news-detail__card {
    padding: var(--space-lg);
  }
}


/* ---------- スマートフォン ---------- */

@media (max-width: 768px) {
  /*
   * 狭い画面では重ねるのをやめる。
   * 重ねたままだと写真もカードも小さくなって、どちらも読めなくなる。
   */
  .news-detail__hero {
    padding-bottom: 0;
  }

  /*
   * 狭い画面でも 3:2 のまま。
   * 一覧のサムネイル(.news-card__thumb)も記事のトップも同じ比率にして、
   * 画面幅で写真の形が変わらないようにしている。
   * 横に広げるのは幅だけ。
   */
  .news-detail__photo {
    width: 100%;
  }

  .news-detail__card {
    position: static;
    width: 100%;
    padding: var(--space-xl) var(--gutter);
  }
}


/* ---------- 一覧の末尾、TOPへ戻る ---------- */

/*
 * ページ送りのすぐ下に置くと、送りの一部に見えてしまう。
 * ひとつ上の階層へ戻る導線なので、間を一段広く取る。
 */
.news-archive__back {
  margin-top: var(--rule-fill);
}


/* ==========================================================================
   画面幅による切り替え(このファイルの指定より後ろに置くこと)

   CSSは「同じ強さなら、あとに書いたほうが勝つ」。メディアクエリでも同じで、
   画面幅の指定を先に書いても、あとから普通の指定を書くと上書きされてしまう。
   実際にここで一度その事故を起こしたので、切り替えは全部ここに集めている。
   ========================================================================== */

@media (max-width: 520px) {
  /*
   * NEWS一覧を、TOPと同じリスト型(サムネイル + 文字を横に並べる)にする。
   * カード側の指定は base.css にあるが、並びの指定だけはここに置く。
   * base.css より後に読み込まれるこのファイルで .news-archive__grid を
   * display: grid にしているため、こちらで上書きしないと効かない。
   */
  .news-archive__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
}