/* ==========================================================
   第1回 延岡AI画像コンテスト 応募作品ギャラリー
   共通スタイル（../assets/css/style.css）への追加ぶん
   ========================================================== */

/* ====== ヒーロー ====== */
.gw-hero {
  margin-top: var(--header-h);
  background: var(--grad-hero);
  color: #fff;
  padding: 48px 0 40px;
  text-align: center;
}
.gw-hero .hero-badge { display: inline-block; }
.gw-hero-title {
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  font-weight: 900;
  margin: 12px 0 14px;
}
.gw-hero-title .accent { color: var(--c-yellow); }
.gw-hero-sub { font-size: .98rem; line-height: 1.9; margin: 0; }

/* ====== 案内 ====== */
.gw-note {
  background: #eaf4ff; border: 1px solid #c9e2ff; border-radius: var(--radius);
  padding: 14px 18px; font-size: .92rem; line-height: 1.8; margin-bottom: 24px;
}

/* ====== 作品グリッド ====== */
.gw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.gw-card {
  margin: 0;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.gw-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gw-card.is-award { border: 2px solid var(--c-yellow); box-shadow: 0 10px 28px rgba(255,210,63,.3); }

.gw-media {
  position: relative; display: block; width: 100%;
  border: none; padding: 0; margin: 0; cursor: zoom-in;
  background: #0f1626;
}
.gw-media img {
  width: 100%; height: 190px; object-fit: contain; display: block;
}
.gw-award {
  position: absolute; top: 8px; left: 8px;
  background: var(--grad-coral); color: #fff;
  font-size: .7rem; font-weight: 800; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px; box-shadow: var(--shadow-sm);
}

.gw-card figcaption {
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.gw-cat {
  align-self: flex-start;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  color: var(--c-teal); background: #e8fbf6;
  padding: 1px 8px; border-radius: 999px;
}
.gw-title { font-size: .95rem; font-weight: 800; line-height: 1.5; }
.gw-person { font-size: .8rem; color: var(--c-muted); line-height: 1.5; }
.gw-person::before { content: "✍ "; }

/* ====== プロンプトの折りたたみ ====== */
.gw-details { border-top: 1px solid var(--c-line); margin-top: auto; }
.gw-details > summary {
  cursor: pointer; list-style: none;
  padding: 10px 14px;
  font-size: .82rem; font-weight: 700; color: var(--c-blue);
  display: flex; align-items: center; gap: 6px;
}
.gw-details > summary::-webkit-details-marker { display: none; }
.gw-details > summary::before { content: "▶"; font-size: .64em; transition: transform .2s; }
.gw-details[open] > summary::before { transform: rotate(90deg); }
.gw-details > summary:hover { background: #f2f7fc; }
.gw-details-body { padding: 4px 14px 14px; }
.gw-field + .gw-field { margin-top: 10px; }
.gw-field-label {
  display: block; font-size: .68rem; font-weight: 700;
  color: var(--c-teal); letter-spacing: .06em; margin-bottom: 2px;
}
.gw-field-text {
  font-size: .82rem; line-height: 1.75; margin: 0;
  white-space: pre-wrap; word-break: break-word; color: var(--c-text);
}

/* ====== おわりに ====== */
.section-outro { background: var(--grad-soft); }

/* ====== おわりに（明るい背景用の上書き） ====== */
/* 共通CSSの .cta-sub a は濃い背景向けの白文字なので、ここで読める色に戻す */
.section-outro .cta-box {
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
}
.section-outro .cta-eyebrow { color: var(--c-muted); opacity: 1; }
.section-outro .cta-title { color: var(--c-text); }
.section-outro .cta-note { color: var(--c-text); opacity: 1; font-size: .95rem; }
.section-outro .cta-sub a,
.section-outro .cta-note a { color: var(--c-blue); opacity: 1; font-weight: 700; }

/* ====== 画像の拡大 ====== */
.gw-lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 14, 26, .93);
  display: grid; place-items: center; padding: 24px;
  cursor: zoom-out;
}
.gw-lb img { max-width: 100%; max-height: 84vh; object-fit: contain; border-radius: 8px; }
.gw-lb-cap { color: #fff; text-align: center; margin: 12px 0 0; font-size: .92rem; }
.gw-lb-close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.16); color: #fff; font-size: 1.3rem; cursor: pointer;
}

@media (max-width: 560px) {
  .gw-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gw-media img { height: 130px; }
  .gw-card figcaption { padding: 10px 10px; }
  .gw-title { font-size: .84rem; }
  .gw-details > summary { padding: 9px 10px; font-size: .76rem; }
  .gw-details-body { padding: 4px 10px 12px; }
}