/*
 * GRANITE BELT(産地紹介 = page-granite-belt.php)
 * 部品は producers.css・wines.css と共通。ここではこのページ独自のレイアウトだけを指定する
 */

/* ---------- ② 数字で見る産地 ---------- */
.gzg-numbers__head{
  padding: 0 var(--gz-gutter) 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gzg-numbers{ padding-top: 120px; }

/* ---------- ③ 生産者(4件) ---------- */
.gzg-producers{
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.gzg-producers__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.gzg-producers .gzp-other__name{ font-size: 24px; }

/* ---------- ④ ワイン(4件) ---------- */
.gzg-wines{
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 0;
}
.gzg-wines .gzw-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 32px; }
.gzg-wines .gzw-card__media{ height: 340px; }
.gzg-wines .gzw-card__media img{ height: 290px; }

/* ---------- ⑤ 産地を訪れる ---------- */
.gzg-visit{
  background: var(--gz-paper);
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.gzg-visit__intro{
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 72px;
  align-items: center;
}
.gzg-visit__media{
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--gz-stone);
}
.gzg-visit__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gzg-visit__text{
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.gzg-visit__lead{
  font-size: 15px;
  line-height: 2.1;
  color: var(--gz-ink-soft);
}
.gzg-visit__links{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 36px;
}

.gzg-visit__chapters{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.gzg-chapter{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gzg-chapter__media{
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  margin-bottom: 8px;
  background: var(--gz-stone);
}
.gzg-chapter__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.gzg-chapter:hover .gzg-chapter__media img{ transform: scale(1.03); }
.gzg-chapter__label{
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gz-terracotta);
}
.gzg-chapter__title{
  font-family: var(--gz-serif-ja);
  font-size: 19px;
  line-height: 1.6;
}
.gzg-chapter__text{
  font-size: 13px;
  line-height: 1.9;
  color: var(--gz-ink-soft);
}

/* ---------- タブレット ---------- */
@media (max-width: 1179px){
  .gzg-producers__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .gzg-wines .gzw-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gzg-visit__intro{ gap: 48px; }
  .gzg-numbers{ padding-top: 96px; }
}
@media (max-width: 1023px){
  .gzg-visit__intro{ grid-template-columns: 1fr; gap: 32px; }
  .gzg-visit__chapters{ grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- スマートフォン ---------- */
@media (max-width: 767px){
  .gzg-numbers{ padding-top: 72px; }
  .gzg-numbers__head{ padding: 0 24px 8px; }
  .gzg-producers,
  .gzg-wines{ gap: 32px; }
  .gzg-producers__grid{ gap: 32px 16px; }
  .gzg-producers .gzp-other__name{ font-size: 19px; }
  /* ワインは2列。カードが細くなるので、写真・文字を小さくし、流通区分は種別の下に回す */
  .gzg-wines .gzw-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
  .gzg-wines .gzw-card{ gap: 14px; }
  .gzg-wines .gzw-card__media{ height: 220px; padding: 0 12px 16px; }
  .gzg-wines .gzw-card__media img{ height: 190px; }
  .gzg-wines .gzw-card__top{ flex-direction: column; align-items: flex-start; gap: 4px; }
  .gzg-wines .gzw-card__status{ align-items: flex-start; white-space: normal; font-size: 10px; letter-spacing: 0.02em; line-height: 1.6; }
  .gzg-wines .gzw-card__dot{ margin-top: 5px; }
  .gzg-wines .gzw-badge{ font-size: 9px; letter-spacing: 0.06em; padding: 3px 6px; }
  .gzg-wines .gzw-card__name{ font-size: 19px; }
  .gzg-wines .gzw-card__meta{ font-size: 11px; }
  .gzg-wines .gzw-card__note{ font-size: 12px; line-height: 1.8; }
  .gzg-visit{ gap: 48px; }
  .gzg-visit__lead{ font-size: 14px; }
  .gzg-visit__links{ flex-direction: column; gap: 4px; }
  .gzg-chapter__title{ font-size: 17px; }
}