/* ==========================================================================
   aprz-visual.css — 採用サイトTOP（/index.html）専用のビジュアル要素
   --------------------------------------------------------------------------
   ・共通の aprz.css は下層ページ・build_jobs.py からも参照されるため手を入れず、
     写真まわりのスタイルはこのファイルに分離している。
   ・読み込みは /index.html のみ（aprz.css の後に読み込むこと）。
   ・デザイントークン（--line / --shadow / --radius 等）は aprz.css のものを利用。
   ========================================================================== */

/* ---------- 共通：picture 要素を img と同じ振る舞いにする ---------- */
.aprz-pic { display: block; }
.aprz-pic img { display: block; width: 100%; height: auto; }

/* ---------- 1. HERO：2カラム（コピー＋キービジュアル） ---------- */
.aprz-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 56px;
  align-items: center;
}
.aprz-hero__grid .aprz-hero__title { font-size: clamp(34px, 4.6vw, 58px); }
.aprz-hero__visual { position: relative; margin: 0; }
.aprz-hero__visual::before {
  /* 背面のグラデーション光彩（ブランドカラー） */
  content: ""; position: absolute; inset: 8% -6% -6% 8%; z-index: 0;
  background: var(--grad); opacity: .16; filter: blur(42px); border-radius: 40px;
}
.aprz-hero__visual .aprz-pic {
  position: relative; z-index: 1;
  border-radius: 24px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(24, 60, 130, .16);
}
.aprz-hero__visual figcaption {
  position: absolute; z-index: 2; left: -18px; bottom: 26px;
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: .16em;
  color: var(--blue); background: #fff; border: 1px solid var(--line);
  padding: 8px 14px; border-radius: 999px; box-shadow: var(--shadow);
}

/* ---------- 2. Why：写真3枚の横並び ---------- */
.aprz-photos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin: 56px 0 0; padding: 0; list-style: none;
}
.aprz-photos figure { margin: 0; }
.aprz-photos .aprz-pic {
  border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow);
  aspect-ratio: 3 / 2;
}
.aprz-photos .aprz-pic img { height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.aprz-photos figure:hover .aprz-pic img { transform: scale(1.04); }
.aprz-photos figcaption { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--ink); }
.aprz-photos figcaption small {
  display: block; margin-bottom: 2px;
  font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 500;
  letter-spacing: .16em; color: var(--cyan);
}

/* ---------- 3. 横長バナー写真（キャプションを重ねる） ---------- */
.aprz-banner {
  position: relative; margin: 56px 0 0;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.aprz-banner .aprz-pic { aspect-ratio: 21 / 9; }
.aprz-banner .aprz-pic img { height: 100%; object-fit: cover; object-position: center 45%; }
.aprz-banner figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 64px 40px 30px;
  background: linear-gradient(0deg, rgba(14, 27, 51, .82) 0%, rgba(14, 27, 51, 0) 100%);
  color: #fff;
}
.aprz-banner figcaption small {
  display: block; margin-bottom: 6px;
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .2em; color: #8FE6F2;
}
.aprz-banner figcaption strong {
  font-family: "Space Grotesk", "Noto Sans JP", sans-serif;
  font-size: clamp(18px, 2.4vw, 26px); font-weight: 700; line-height: 1.5;
}

/* ---------- 4. 汎用フィギュア（aprz-figure の拡張） ---------- */
.aprz-figure--narrow { max-width: 900px; margin-inline: auto; }
.aprz-figure--crop .aprz-pic { aspect-ratio: 21 / 8; }
.aprz-figure--crop .aprz-pic img { height: 100%; object-fit: cover; object-position: center 30%; }
.aprz-figure--faq { max-width: 860px; margin: 40px auto 40px; }

/* ---------- 5. 最終CTA：写真付き2カラム ---------- */
.aprz-final--photo { text-align: left; padding: 120px 0; }
.aprz-final__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px; align-items: center;
}
.aprz-final__photo { margin: 0; }
.aprz-final__photo .aprz-pic {
  border-radius: 24px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(24, 60, 130, .14);
}
.aprz-final--photo .aprz-final__t { font-size: clamp(28px, 3.6vw, 44px); }
.aprz-final--photo .aprz-final__d { margin: 0 0 36px; }
.aprz-final--photo .aprz-final__cta { justify-content: flex-start; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1000px) {
  .aprz-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .aprz-hero__grid .aprz-hero__title { font-size: clamp(34px, 6.6vw, 58px); }
  .aprz-hero__visual { max-width: 620px; }
  .aprz-hero__visual figcaption { left: 14px; bottom: 14px; }
  .aprz-final__grid { grid-template-columns: 1fr; gap: 44px; }
  .aprz-final--photo { text-align: center; }
  .aprz-final__photo { max-width: 620px; margin-inline: auto; }
  .aprz-final--photo .aprz-final__d { margin: 0 auto 36px; }
  .aprz-final--photo .aprz-final__cta { justify-content: center; }
}
@media (max-width: 860px) {
  .aprz-photos { grid-template-columns: 1fr; gap: 26px; max-width: 560px; margin-inline: auto; }
  .aprz-banner .aprz-pic { aspect-ratio: 4 / 3; }
  .aprz-banner figcaption { padding: 48px 22px 20px; }
  .aprz-figure--crop .aprz-pic { aspect-ratio: 16 / 9; }
  .aprz-final--photo { padding: 96px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aprz-photos .aprz-pic img { transition: none; }
  .aprz-photos figure:hover .aprz-pic img { transform: none; }
}
@media print {
  .aprz-hero__visual::before { display: none; }
}