/* お知らせ記事専用CSS。news/id-1/index.html の head でだけ読み込む。Figma: 07_PC_/news/id-{$id}/ / 07_SP_/news/id-{$id}/ */
@layer pages {
  /* ---------- 記事（Figma: news。白いカード SP 360 / PC 1240） ---------- */
  .p-article {
    padding-top: var(--wp--preset--spacing--80);
    padding-bottom: var(--wp--preset--spacing--60);
    background-color: var(--wp--preset--color--background-soft);
  }

  .p-article__card {
    width: min(100% - var(--wp--preset--spacing--20) * 2, var(--wp--preset--layout--container-max));
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20)
      var(--wp--preset--spacing--60);
    margin-left: auto;
    margin-right: auto;
    background-color: var(--wp--preset--color--white);
    border-radius: var(--wp--preset--radius--large);
  }

  /* 本文幅（Figma の 1000px カラム） */
  .p-article__inner {
    max-width: var(--wp--preset--layout--content-max);
    margin-left: auto;
    margin-right: auto;
  }

  .p-article__header {
    padding-bottom: var(--wp--preset--spacing--35);
    border-bottom: 1px solid var(--wp--preset--color--border);
  }

  /* 日付 + カテゴリ（c-news-item__meta と同じ見た目） */
  .p-article__meta {
    display: flex;
    gap: var(--wp--preset--spacing--20);
    align-items: center;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    line-height: 2;
    letter-spacing: var(--wp--preset--letter-spacing--wide);
  }

  .p-article__category {
    padding: 0 var(--wp--preset--spacing--20);
    color: var(--wp--preset--color--white);
    -webkit-text-decoration: none;
    text-decoration: none;
    background-color: var(--wp--preset--color--primary);
    border-radius: var(--wp--preset--radius--pill);
    transition: opacity 0.2s;
  }

  .p-article__category--press {
    background-color: var(--wp--preset--color--accent);
  }

  .p-article__category--cultivation {
    background-color: var(--wp--preset--color--text-muted);
  }

  .p-article__category--media {
    background-color: var(--wp--preset--color--text);
  }

  @media (hover: hover) {
    .p-article__category:hover {
      opacity: 0.8;
    }
  }

  /* 記事タイトル（Figma: SP 20px/35px、PC 22px/45px。Medium） */
  .p-article__title {
    margin: var(--wp--preset--spacing--20) 0 0;
    font-size: var(--wp--preset--font-size--article-title);
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: var(--wp--preset--letter-spacing--wide);
    word-break: normal;
  }

  .p-article .entry-content {
    margin-top: var(--wp--preset--spacing--35);
  }

  /* ---------- 前後の記事 + 一覧に戻る（Figma: Button） ---------- */
  .p-article-nav {
    display: grid;
    grid-template:
      "back back" auto
      "newer older" auto / 1fr 1fr;
    grid-gap: var(--wp--preset--spacing--40) 0;
    gap: var(--wp--preset--spacing--40) 0;
    align-items: center;
    padding: 0 var(--wp--preset--spacing--15) var(--wp--preset--spacing--100);
    background-color: var(--wp--preset--color--background-soft);
  }

    .p-article-nav p {
      margin: 0;
    }

  .p-article-nav__newer {
    grid-area: newer;
  }

  .p-article-nav__back {
    grid-area: back;
    text-align: center;
  }

  .p-article-nav__older {
    grid-area: older;
    text-align: right;
  }

  /* ========== 768px 以上 ========== */
  @media (min-width: 768px) {
    .p-article {
      padding-top: var(--wp--preset--spacing--100);
      padding-bottom: var(--wp--preset--spacing--40);
    }

    .p-article__card {
      width: min(
        100% - var(--wp--preset--layout--container-gutter) * 2,
        var(--wp--preset--layout--container-max)
      );
      padding: var(--wp--preset--spacing--100) var(--wp--preset--spacing--120)
        var(--wp--preset--spacing--80);
    }

    .p-article__header {
      padding-bottom: var(--wp--preset--spacing--20);
    }

    .p-article__title {
      line-height: 2.05;
    }

    .p-article .entry-content {
      margin-top: var(--wp--preset--spacing--40);
    }

    /* 両側を同じ幅（1fr）にして、前後の記事が片方しか無くても「一覧に戻る」が中央に来るようにする */
    .p-article-nav {
      grid-template:
        "newer back older" auto / 1fr auto 1fr;
      gap: var(--wp--preset--spacing--100);
      padding: var(--wp--preset--spacing--40) var(--wp--preset--layout--container-gutter)
        var(--wp--preset--spacing--150);
    }

    .p-article-nav__newer {
      text-align: right;
    }

    .p-article-nav__older {
      text-align: left;
    }
  }
}