/* =====================================================
     このページ（お知らせ詳細）だけで使う、追加のスタイルです。
     一覧ページ用の style.css に加えて、ここだけの見た目を上書き・追加しています。
     ===================================================== */

  /* 詳細ページのコンテナ。
     PCでは「日付・タイトル」と「写真」を2列に並べるので、
     一覧ページと同じくらいの横幅まで広げています。 */
  /* 詳細ページのコンテナ。
     PCでは「日付・タイトル」と「写真」を2列に並べるので、
     一覧ページと同じくらいの横幅まで広げています。
     ★修正★ パンくずリストをposition: absoluteに変更したことで、
     本文がヘッダー・パンくずリストの下に隠れてしまうため、
     上の余白を広げた(スマホ:124px、PC:146px[下のmedia参照])。 */
  .detail-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 124px 24px 60px;

    /* display: grid で、要素を「決まった位置」に配置できるようにする */
    display: grid;
    grid-template-columns: 1fr; /* まずは1列（スマホ用） */
    gap: 28px;
  }

  /* 日付＋タイトルをまとめる入れ物（PCで左列に置くため） */
  .detail-head {
    /* 中身（日付・マーク・タイトル）を縦に並べる */
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* 記事の日付 */
  .detail-date {
    font-size: 13px;
    font-weight: 700;
    color: #8A8377;
    letter-spacing: 0.05em;
  }

  /* 記事のタイトル（本文と同じ色に統一） */
  .detail-title {
    font-size: 26px;
    font-weight: 900;
    color: #333333;
    margin: 0;
    line-height: 1.5;
  }

  /* 記事のメイン画像
     -----------------------------------------------------
     object-fit: contain にすると、写真の縦横比によっては
     箱の中に余白（すき間）ができます。背景色を指定しないと、
     縦長・横長の写真のときに「角丸の箱」だと分かりにくく
     なってしまうことがあるため、白背景を敷いて、
     どんな縦横比の写真でも角丸がきれいに見えるようにして
     います。 */
  .detail-image {
    width: 100%;
    height: 340px;
    border-radius: 8px;
    object-fit: contain;
  }

  /* -----------------------------------------------------
     写真の高さだけを短くしたいページ専用のクラス
     -----------------------------------------------------
     .detail-image はいろんな詳細ページで共通して使っている
     クラスなので、ここを直接書き換えると全ページの写真の
     高さが変わってしまいます。

     「このページの写真だけ、もう少し低くしたい」という
     ときは、HTML側で class="detail-image detail-image--compact"
     のように、このクラスを追加して使ってください。
     （幅はそのまま、高さだけを .detail-image より
       小さい数値で上書きする、という仕組みです） */
  .detail-image--compact {
    height: 160px;
  }

  /* 本文 */
  .detail-body {
    font-size: 15px;
    color: #333333;
    line-height: 1.9;
  }

  .detail-body p {
    margin: 0 0 1.4em 0;
  }

  /* 本文の中に箇条書き（<ul><li>）を使うページ用のスタイル。
     文章の途中に「開催日：〜」のような項目を並べて見せたい
     ときに使います。 */
  .detail-body ul {
    margin: 0 0 1.4em 0;
    padding-left: 1.4em;
  }

  .detail-body li {
    margin-bottom: 0.4em;
  }

  /* -----------------------------------------------------
     ★練習3で追加★ 注意書きを目立たせるためのクラス
     -----------------------------------------------------
     「※高校生不可」のように、読み飛ばされると困る一言に使います。
     使い方：<strong class="detail-caution">※高校生不可</strong>

     ・font-weight: 900 … 普通の太字(700)より、さらに太くする
     ・font-size: 1.1em … 周りの文字の1.1倍の大きさにする
       (em は「親の文字サイズを1とした倍率」という意味)
     ・color … 黒。本文(#333333)より少しだけ濃い真っ黒にして、
       太さ・大きさとあわせて目立たせています
       (練習3の途中まで赤でしたが、黒に変更しました) */
  .detail-caution {
    font-weight: 900;
    font-size: 1.1em;
    color: #000000;
  }

  /* -----------------------------------------------------
     ★練習5で追加★ 本文の中で「名前」などを大きく見せるための段落
     -----------------------------------------------------
     使い方：<p class="detail-lead">「エゾカムイくん」</p>
     ・font-size: 1.4em … 本文の1.4倍の大きさ
     ・font-weight: 900 … とても太く
     ・text-align: center … 真ん中寄せにして、名前の発表らしく見せる */
  .detail-body .detail-lead {
    font-size: 1.4em;
    font-weight: 900;
    text-align: center;
    margin: 0.4em 0;
  }

  /* 「一覧に戻る」リンク。スマホ・PCどちらでも右下に配置する */
  .back-link {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #333333;
    text-decoration: none;

    /* グリッドの中で、自分自身だけを右端に寄せる */
    justify-self: end;
  }

  .back-link:hover {
    text-decoration: underline;
  }

  /* =====================================================
     PC（画面幅700px以上）向けのレイアウト調整
     -----------------------------------------------------
     「日付・タイトル」を左列、「写真」を右列に配置し、
     本文とリンクはその下に全幅で表示します。
     ===================================================== */
  @media (min-width: 700px) {
    .detail-container {
      /* 1fr 1fr で、同じ幅の列を2つ作る */
      grid-template-columns: 1fr 1fr;
      column-gap: 48px;
      /* ★追加★ PCではヘッダー・パンくずリストの位置が下がるため、
         上の余白もそれに合わせて広げる */
      padding-top: 146px;
    }

    /* grid-column / grid-row で、それぞれの置き場所を指定する */

    /* -----------------------------------------------------
       【変更メモ】
       以前はここで、.breadcrumb を「グリッドの1行目・全幅」に
       配置する指定をしていました。

       今回、パンくずリストのHTMLを .detail-container の外に
       出したため（style.css の .breadcrumb-wrapper が位置を
       管理する方式に変更）、.breadcrumb はもう
       .detail-container のグリッドの一員ではなくなりました。
       そのため、この配置指定は不要になったので削除しています。
       ----------------------------------------------------- */

    .detail-head {
      grid-column: 1;
      grid-row: 2;
      /* 写真と上下中央がそろうように調整 */
      justify-content: center;
    }

    .detail-image {
      grid-column: 2;
      grid-row: 2;
      /* PCでは写真を縦長にして、見せ場を大きくする */
      height: 100%;
      min-height: 320px;
    }

    /* PC表示のときのコンパクト版：
       .detail-image { height: 100%; } を、より詳しいセレクタ
       （.detail-image と .detail-image--compact の組み合わせ）
       で上書きすることで、確実に高さを固定値に変更する。
       min-height（下限の指定）だけだと、写真がそれより大きい
       ときに効果が出ないため、height を直接指定する方式にした。 */
    .detail-image.detail-image--compact {
      height: 280px;
      min-height: 0;
    }

    /* "1 / -1" は「1列目から一番最後の列まで」という意味。
       つまり本文とリンクを、2列分の横幅いっぱいに広げている */
    .detail-body {
      grid-column: 1 / -1;
      grid-row: 3;
      /* PCのときだけ、幅と左上の余白を指定する */
      width: 670px;
      padding: 20px 0 0 50px;
    }

    .back-link {
      grid-column: 1 / -1;
      grid-row: 4;
    }

    .detail-title {
      font-size: 28px;
    }
  }