/* =========================================================
   KARI — news.css（Newsページだけの見た目）
   共通の色・フォント・タイトル・ナビ・モーションは style.css にあります。
   スクロールで現れる動きは niejta / floreisen と同じ共通の .reveal です。
   ---------------------------------------------------------
   1. 設定値
   2. ニュースの並び（2列。増えると下へ行が増えます）
   3. ニュース1件（画像・日付・本文）
   4. スマートフォン・狭い画面
   5. ページ出現モーションの順番
   ========================================================= */


/* ---------------------------------------------------------
   1. 設定値
   --------------------------------------------------------- */
.page-news {
  --news-left: 17.375vw;          /* 1列目の左端 */
  --news-right: 80.9vw;           /* 2列目の右端 */
  --news-top: 52.6vh;             /* 1行目の画像の上端 */
  --news-col-gap: 6.16vw;         /* 左右の間隔 */
  --news-row-gap: 6.16vw;         /* 上下の間隔（行と行の間） */
  --news-bottom: 16vh;            /* いちばん下の余白 */
  --news-image-ratio: 2 / 1;      /* 画像は 横2：縦1 */

  --font-size-news-date: clamp(16px, 1.31vw, 31px);   /* 画像の中の日付 */
  --font-size-news-text: clamp(14px, 0.985vw, 24px);   /* 本文 */
  --news-text-lines: 4;           /* 本文は最大4行（これ以上は表示されません） */
  --news-text-gap: 0.99vw;        /* 画像と本文の間 */
  --news-text-inset: 0.75vw;      /* 本文の左右の内側の余白 */
  --news-line-height: 1.52;       /* 本文の行間（ラフどおり） */

  min-height: 100vh;
}


/* ---------------------------------------------------------
   2. ニュースの並び
   --------------------------------------------------------- */
.news-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--news-col-gap);
  row-gap: var(--news-row-gap);
  width: calc(var(--news-right) - var(--news-left));
  margin-left: var(--news-left);
  padding: var(--news-top) 0 var(--news-bottom);
}


/* ---------------------------------------------------------
   3. ニュース1件
   --------------------------------------------------------- */
.news-image {
  position: relative;
}
.news-image img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--news-image-ratio);
  object-fit: cover;
  background: var(--color-image-placeholder);
}

/* 画像の中央の日付（白） */
.news-date {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.25em;
  font-family: var(--font-serif);
  font-size: var(--font-size-news-date);
  line-height: var(--line-height-tight);
  color: var(--color-text-inverse);
  pointer-events: none;
}

/* 画像の下の本文（高さは4行分で固定。どのニュースも同じ大きさになります） */
.news-text {
  margin-top: var(--news-text-gap);
  padding: 0 var(--news-text-inset);
  height: calc(var(--news-text-lines) * var(--news-line-height) * 1em);
  overflow: hidden;
  font-family: var(--font-japanese);
  font-size: var(--font-size-news-text);
  line-height: var(--news-line-height);
  color: var(--color-text);
}


/* ---------------------------------------------------------
   4. スマートフォン（画面幅760px以下）：1列
   KARI・メニュー・タイトルの位置は style.css の共通設定です
   --------------------------------------------------------- */
@media (max-width: 760px) {
  .page-news {
    --news-left: var(--page-padding);
    --news-right: calc(100vw - var(--page-padding));
    --news-top: 82.06vw;              /* 1件目の画像の上位置 */
    --news-row-gap: 11.26vw;          /* ニュースとニュースの間 */
    --news-bottom: 24vw;
    --font-size-news-date: 4.14vw;    /* 画像の中の日付 */
    --font-size-news-text: 2.92vw;    /* 本文 */
    --news-text-gap: 2.74vw;          /* 画像と本文の間 */
    --news-text-inset: 1.81vw;        /* 本文の左の余白 */
    --news-text-inset-right: 3.3vw;   /* 本文の右の余白 */
  }
  .news-list { grid-template-columns: 1fr; }
  .news-text { padding-right: var(--news-text-inset-right); }
}

/* ---------------------------------------------------------
   4-2. タブレット（画面幅761〜1199px）：1列
   1件の幅は2列分（PCの左右の端まで）を使い、本文を読みやすく
   --------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1199px) {
  .news-list { grid-template-columns: 1fr; }
  /* 日付の大きさを「画像の幅に対する割合」で決め、PC・スマートフォンと同じバランスに
     （PC：画像の幅の約4.57%、スマートフォン：約4.74%） */
  .news-image { container-type: inline-size; }
  .page-news { --font-size-news-date: 4.6cqw; }
}


/* ---------------------------------------------------------
   5. ページ出現モーションの順番（動きは style.css の共通設定）
   news → updates → ニュース（スクロールで現れる共通の動き）
   --------------------------------------------------------- */
.page-news .page-title    { --enter-order: 0; }
.page-news .page-subtitle { --enter-order: 1; }