/* ==========================================================================
   news-page.css
   お知らせ一覧（news-list.php）・お知らせ詳細（news-detail.php）専用スタイル。
   news.css はトップページ・管理画面プレビューでも読み込むため、
   この2ページだけの見た目はこちらに分けている。
   ========================================================================== */

/* ==========================================================================
   p-pagetop（products.php と同じ：帯の画像を変え、下のピンク地と地続きにする）
   css/products.css の .p-pagetop / .p-pagetop__slide と同じ指定
   ========================================================================== */
.p-pagetop {
  margin-bottom: 0;
}

/* お知らせ一覧のページトップ：帯を低めにして余白を詰める。
   PC・タブレット・スマホで「タイトル → すき間 → 帯 → 一覧」の間隔の比率をそろえる。
   ※下余白は下の .p-pagetop--no-photo（帯の高さ＋すき間）が優先される */
.p-pagetop {
  --slide-h: 120px;
  padding: 100px 0 50px;
}

/* タブレット：帯100px、上余白はヘッダー（100px）の直下から少しあける */
@media screen and (max-width: 1024px) {
  .p-pagetop {
    --slide-h: 100px;
    padding-top: 110px;
  }
}

/* スマホ：帯76px、上余白はヘッダー（70px）の直下から少しあける */
@media screen and (max-width: 767px) {
  .p-pagetop {
    --slide-h: 76px;
    padding-top: calc(var(--header-height) + 16px);
  }
}

.p-pagetop__slide {
  --slide-gap: 0px;
  bottom: 0;
  height: calc(var(--slide-h) + var(--slide-gap));
  background-image: url("../img/sub-photo/page-top-slide.jpg");
  background-position-y: 0;
  background-size: var(--slide-w) calc(var(--slide-h) / 2);
}

.p-pagetop__slide::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--slide-h) / 2 - 1px);
  bottom: 0;
  background: #fbf1f2;
}

@media screen and (max-width: 1024px) {
  .p-pagetop__slide {
    --slide-gap: 20px;
  }
}

/* 写真なし（includes/page-top.php で photo を省略）：タイトルを左右中央に置き、
   帯（.p-pagetop__slide）はタイトルの下に離して敷く。
   下余白 = 帯の要素の高さ（--slide-h ＋ すき間）＋ タイトルとのあいだ */
.p-pagetop--no-photo .p-pagetop__inner {
  grid-template-columns: 1fr;
  justify-items: center;
  /* 元は左右で余白が違う（0 5% 0 4%）ので、中央にそろうよう左右同じにする */
  padding-left: 4%;
  padding-right: 4%;
}

.p-pagetop--no-photo .p-pagetop__ttl {
  justify-self: center;
  width: min(85%, 460px);
}

/* 写真なしでは帯の下に余分なすき間（--slide-gap）は付けず、帯のすぐ下から一覧を始める */
.p-pagetop--no-photo .p-pagetop__slide {
  --slide-gap: 0px;
}

.p-pagetop--no-photo {
  padding-bottom: calc(var(--slide-h) + 30px);
}

@media screen and (max-width: 1024px) {
  .p-pagetop--no-photo {
    padding-bottom: calc(var(--slide-h) + 24px);
  }
}

@media screen and (max-width: 767px) {
  .p-pagetop--no-photo {
    padding-bottom: calc(var(--slide-h) + 18px);
  }
}

/* ==========================================================================
   p-news-page（ページトップ下のピンク地）
   ========================================================================== */
.p-news-page {
  padding: 0 0 100px;
  background: #fbf1f2;
}

/* お知らせ詳細はページトップなし：固定ヘッダーの下から始める */
.p-news-page--detail {
  padding-top: calc(var(--header-height) + 50px);
}

/* フッターもピンク地にして、ページ全体を地続きにする（この2ページだけ） */
.l-footer {
  background-color: #fbf1f2;
}

/* ==========================================================================
   お知らせ一覧：ピンク地の上に白いカードを並べる
   （行の区切り線の代わりに、1件ずつ白い角丸カード＋ピンクの影）
   ========================================================================== */
.p-news-page .c-news-list {
  gap: 14px;
  max-width: 1000px;
  margin: 0 auto;
}

.p-news-page .c-news-list .news-item {
  border-bottom: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 5px 0 #f3d4d7;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease;
}

.p-news-page .c-news-list .news-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 #f3d4d7;
}

.p-news-page .c-news-list .news-item-link {
  position: relative;
  padding: 20px 56px 20px 26px;
  opacity: 1;
}

/* 右端の矢印（クリックできることを伝える） */
.p-news-page .c-news-list .news-item-link::after {
  content: "\f054";
  position: absolute;
  top: 50%;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background: var(--color-pink, #fbf1f2);
  color: var(--color-main);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.7rem;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.p-news-page .c-news-list .news-item:hover .news-item-link::after {
  background: var(--color-main);
  color: #fff;
}

/* 分類は白地に映えるよう、赤の塗りつぶしに */
.p-news-page .c-news-list .news-item-category {
  border: 0;
  background: var(--color-main);
  color: #fff;
}

.p-news-page .c-news-list .news-item-date {
  color: #b07a7d;
}

.p-news-page .c-news-list .news-item-title-text {
  font-weight: 700;
}

.p-news-page .news-empty {
  border-radius: 20px;
  background: #fff;
}

/* ページネーション：ピンク地でも見えるよう白地に */
.p-news-page .c-pagination__link {
  border-color: #f0d3d5;
  background: #fff;
}

.p-news-page .c-pagination__link.is-active {
  border-color: var(--color-main);
  background: var(--color-main);
}

/* ==========================================================================
   お知らせ詳細：products.php #supermarket（.p-super__card）と同じ方眼＋紙テープのカード
   ========================================================================== */
.p-news-card {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 76px 70px 60px;
  border-radius: 60px;
  /* 白地に、小さく淡い方眼（縦線＋横線）を敷く */
  background-color: #fff;
  background-image: linear-gradient(rgba(200, 39, 46, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 39, 46, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center;
  outline: 2px dashed var(--color-main);
  outline-offset: -18px;
  box-shadow:
    0 0 0 8px #fff7f7,
    0 10px 40px rgba(232, 150, 156, 0.25);
}

/* 上の左右の角に貼った紙テープ（.p-super__tape と同じ柄） */
.p-news-card__tape {
  position: absolute;
  top: 18px;
  z-index: 2;
  width: 130px;
  height: 34px;
  background: repeating-linear-gradient(45deg, rgba(214, 164, 76, 0.85) 0 10px, rgba(232, 199, 138, 0.85) 10px 20px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.p-news-card__tape--l {
  left: -30px;
  transform: rotate(-38deg);
}

.p-news-card__tape--r {
  right: -30px;
  transform: rotate(38deg);
  background: repeating-linear-gradient(45deg, rgba(200, 39, 46, 0.75) 0 10px, rgba(232, 120, 125, 0.75) 10px 20px);
}

/* news.css の詳細の文字サイズは大きめなので、このカード内では他ページの本文に合わせる */
.p-news-card .news-detail {
  max-width: none;
}

.p-news-card .news-detail-meta .news-item-category {
  padding: 3px 14px;
  border: 0;
  background: var(--color-main);
  color: #fff;
  font-size: 0.8rem;
}

.p-news-card .news-detail-date {
  color: #b07a7d;
  font-size: 0.95rem;
}

.p-news-card .news-detail-title {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 2px dotted #f0c9cc;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  color: var(--color-main);
}

.p-news-card .news-detail-title .news-item-new {
  font-size: 0.75rem;
}

.p-news-card .news-detail-body {
  font-size: 1.05rem;
  font-weight: 500;
}

/* 写真がある投稿：本文の右側に写真（幅300px）を縦に並べる。
   見出し・日付・動画は2列ぶんの幅を使う */
.p-news-card .news-detail:has(.news-detail-photos) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: 40px;
  align-items: start;
}

.p-news-card .news-detail-meta,
.p-news-card .news-detail-title,
.p-news-card .news-detail-video {
  grid-column: 1 / -1;
}

.p-news-card .news-detail-photos {
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 0;
}

/* 写真はクリックで拡大（sub.js が <button> で包み、#galleryModal で開く） */
.news-detail-photo {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: none;
  cursor: zoom-in;
  box-shadow:
    0 0 0 4px #fff,
    0 6px 16px rgba(232, 150, 156, 0.3);
}

.news-detail-photo img {
  transition: transform 0.3s ease;
}

.news-detail-photo:hover img {
  transform: scale(1.06);
}

.news-detail-photo:focus-visible {
  outline: 3px solid var(--color-sun);
  outline-offset: 3px;
}

/* 右下の虫めがね（拡大できることを伝える） */
.news-detail-photo::after {
  content: "\f00e";
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(200, 39, 46, 0.9);
  color: #fff;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.8rem;
  box-shadow: 0 0 0 2px #fff;
}

.p-news-page__back {
  margin-top: 48px;
  text-align: center;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media screen and (max-width: 767px) {
  .p-news-page {
    padding: 0 0 70px;
  }

  .p-news-page--detail {
    padding-top: calc(var(--header-height) + 30px);
  }

  .p-news-page .c-news-list .news-item-link {
    gap: 10px 14px;
    padding: 18px 48px 18px 18px;
  }

  .p-news-page .c-news-list .news-item-link::after {
    right: 14px;
  }

  .p-news-card {
    padding: 50px 26px 34px;
    border-radius: 36px;
    outline-offset: -10px;
    box-shadow:
      0 0 0 6px #fff7f7,
      0 8px 28px rgba(232, 150, 156, 0.25);
  }

  .p-news-card__tape {
    top: 12px;
    width: 90px;
    height: 26px;
  }

  .p-news-card__tape--l {
    left: -22px;
  }

  .p-news-card__tape--r {
    right: -22px;
  }

  .p-news-card .news-detail-body {
    font-size: 0.95rem;
  }
}

/* 900px以下：横に並べると本文が狭くなるので、写真は本文の下へ（1枚ずつ横幅いっぱい） */
@media screen and (max-width: 900px) {
  .p-news-card .news-detail:has(.news-detail-photos) {
    display: block;
  }

  .p-news-card .news-detail-photos {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }
}