/*
 * TOURISM & ACADEMY(Granite Belt Tour and Education = page-tourism-academy.php)
 * 部品は producers.css・trade.css と共通。ここではこのページ独自のレイアウトだけを指定する
 */

/* ---------- ② 3段階のレベル ---------- */
.gzs-levels{
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.gzs-levels__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  counter-reset: none;
}
.gzs-level{
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.gzs-level__media{
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--gz-stone);
}
.gzs-level__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gzs-level__body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--gz-line-strong);
}
/* 段位が上がるほど、上の線を太く・濃くして段階を表す */
.gzs-level:nth-child(2) .gzs-level__body{ border-top: 2px solid var(--gz-stone); }
.gzs-level:nth-child(3) .gzs-level__body{ border-top: 3px solid var(--gz-green); }
.gzs-level__num{
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--gz-terracotta);
}
.gzs-level__num span{
  font-family: var(--gz-serif-en);
  font-size: 22px;
  letter-spacing: 0;
  margin-left: 4px;
}
.gzs-level__name{
  font-family: var(--gz-serif-en);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
}
.gzs-level__ja{
  font-family: var(--gz-serif-ja);
  font-size: 16px;
  line-height: 1.6;
}
.gzs-level__format{
  align-self: flex-start;
  margin-top: 4px !important;
  padding: 3px 10px;
  border: 1px solid var(--gz-green);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gz-green);
}
.gzs-level__text{
  margin-top: 6px !important;
  font-size: 14px;
  line-height: 2;
  color: var(--gz-ink-soft);
}

/* 階段状: Level 1 がいちばん低く、Level 3 がいちばん高い位置から始まる(PC・タブレット横並びのとき) */
.gzs-levels__list{ align-items: start; }
.gzs-level:nth-child(1){ margin-top: 112px; }
.gzs-level:nth-child(2){ margin-top: 56px; }

/* Level 3(修了証付き)を最上位として強調: 深緑の面に白抜き */
.gzs-level--top{
  background: var(--gz-green-deep);
  color: var(--gz-on-dark);
  padding: 20px 20px 28px;
}
.gzs-level--top .gzs-level__body{ border-top-color: var(--gz-mint); }
.gzs-level--top .gzs-level__num{ color: var(--gz-mint); }
.gzs-level--top .gzs-level__format{ border-color: var(--gz-mint); color: var(--gz-mint); }
.gzs-level--top .gzs-level__text{ color: rgba(244,239,228,0.82); }
.gzs-level__cert{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px !important;
  padding: 12px 14px;
  border: 1px solid rgba(244,239,228,0.4);
  font-family: var(--gz-serif-ja);
  font-size: 15px;
}
.gzs-level__cert span{
  flex-shrink: 0;
  padding: 3px 8px;
  background: var(--gz-on-dark);
  color: var(--gz-green-deep);
  font-family: var(--gz-sans);
  font-size: 10px;
  letter-spacing: 0.16em;
}

/* ---------- ③ Winery Tour ---------- */
.gzs-tour{
  background: var(--gz-paper);
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 72px;
  align-items: center;
}
.gzs-tour__media{
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--gz-stone);
}
.gzs-tour__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gzs-tour__body{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gzs-tour__title{
  font-family: var(--gz-serif-en);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.1;
}
.gzs-tour__ja{
  font-family: var(--gz-serif-ja);
  font-size: 17px;
}
.gzs-tour__note{
  align-self: flex-start;
  padding: 3px 10px;
  border: 1px solid var(--gz-terracotta);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gz-terracotta);
}
.gzs-tour__text{
  margin-top: 8px !important;
  font-size: 15px;
  line-height: 2.1;
  color: var(--gz-ink-soft);
}

/* ---------- ④ STAY & TASTE(余白を活かした編集的なグリッド) ---------- */
.gzs-stay{
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.gzs-stay__head{
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}
.gzs-stay__lead{
  font-family: var(--gz-serif-ja);
  font-size: 18px;
  line-height: 2;
  color: var(--gz-ink-soft);
}
/* 7枚を同じ大きさで並べる(PCは4列。最後の段は中央に寄せる) */
.gzs-stay__grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 24px;
}
.gzs-stay__grid .gzs-photo{ width: calc((100% - 24px * 3) / 4); }
@media (max-width: 1023px){ .gzs-stay__grid{ gap: 32px 16px; } .gzs-stay__grid .gzs-photo{ width: calc((100% - 16px * 3) / 4); } }
.gzs-photo{
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gzs-photo__media{
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--gz-stone);
}
.gzs-photo__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gzs-photo figcaption{
  font-size: 13px;
  line-height: 1.8;
  color: var(--gz-ink-soft);
}

/* ---------- ⑤ 発酵紀行 ---------- */
.gzs-journey{
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.gzs-journey__grid{
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 40px;
  align-items: start;
}
.gzs-journey__main{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gzs-journey__media,
.gzs-chapter__media{
  position: relative;
  overflow: hidden;
  background: var(--gz-stone);
}
.gzs-journey__media{ aspect-ratio: 3 / 2; }
.gzs-chapter__media{ aspect-ratio: 1 / 1; flex-shrink: 0; width: 120px; }
.gzs-journey__media img,
.gzs-chapter__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.gzs-journey__main:hover img,
.gzs-chapter:hover img{ transform: scale(1.03); }
.gzs-journey__count{
  font-family: var(--gz-serif-en);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--gz-green);
}
.gzs-journey__count span{ font-size: 36px; letter-spacing: 0; margin-right: 6px; }
.gzs-journey__byline{
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gz-ink-soft);
}
.gzs-journey__chapters{
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--gz-line-strong);
}
.gzs-chapter{
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gz-line);
}
.gzs-chapter__title{
  font-family: var(--gz-serif-ja);
  font-size: 17px;
  line-height: 1.6;
}

/* 2つ続く旅の記録(発酵紀行・Kennyのツアー)の間隔 */
.gzs-journey + .gzs-journey{ padding-top: 0; }

/* Instagram の一言リンク(site.css)を、このページの余白に合わせる */
.gzs + .gz-insta-note{ padding-top: 56px; }

/* ---------- タブレット ---------- */
@media (max-width: 1179px){
  .gzs-levels__list{ gap: 24px; }
  .gzs-level__name{ font-size: 26px; }
  .gzs-tour{ gap: 48px; }
}
@media (max-width: 1023px){
  .gzs-level:nth-child(1),
  .gzs-level:nth-child(2){ margin-top: 0; }
  .gzs-levels__list{ grid-template-columns: 1fr; gap: 48px; }
  .gzs-levels .gzp-head{ flex-direction: column; align-items: flex-start; gap: 20px; }
  .gzs-level{ display: grid; grid-template-columns: 2fr 3fr; gap: 28px; align-items: start; }
  .gzs-level__body{ padding-top: 16px; }
  .gzs-tour{ grid-template-columns: 1fr; gap: 32px; }
  .gzs-journey__grid{ grid-template-columns: 1fr; }
}

/* ---------- スマートフォン ---------- */
@media (max-width: 767px){
  .gzs-level--top{ padding: 16px 16px 24px; }
  .gzs-stay{ gap: 36px; }
  .gzs-stay__lead{ font-size: 15px; }
  .gzs-stay__lead br{ display: none; }
  .gzs-stay__grid{ gap: 28px 12px; }
  .gzs-stay__grid .gzs-photo{ width: calc((100% - 12px) / 2); }
  .gzs-stay__grid .gzs-photo:last-child{ width: 100%; }
  .gzs-photo figcaption{ font-size: 12px; }
  /* ヒーロー: 樽の明るい鏡板が文字の後ろに来るため、文字の来る下半分を暗くする */
  .gzs .gzp-hero::before{ background: linear-gradient(180deg, rgba(7,50,41,0.6) 0%, rgba(7,50,41,0.35) 28%, rgba(7,50,41,0.84) 52%, rgba(7,50,41,0.94) 100%); }
  .gzs-levels{ gap: 36px; }
  .gzs-level{ display: flex; align-items: stretch; gap: 18px; }
  .gzs-level__name{ font-size: 26px; }
  .gzs-level__ja{ font-size: 15px; }
  .gzs-level__text{ font-size: 13px; }
  .gzs-tour__title{ font-size: 36px; }
  .gzs-tour__text{ font-size: 14px; }
  .gzs-journey{ gap: 32px; }
  .gzs-chapter__media{ width: 88px; }
  .gzs-chapter__title{ font-size: 15px; }
}