/* ============================================================
   site-overrides.css
   制作物（ymd3 2025-04-02）の CSS には手を入れず、
   「実データがデザインの想定と違う」箇所だけを上書きする層。
   ここに書くものは必ず理由をコメントで残す。
   ============================================================ */

/* --- 導入事例カードのサムネイル -------------------------------
   デザインのモックは人物写真（IMG_xxxx.jpg / 横長）を前提に
   `.card .thumbnail { aspect-ratio:16/9 }` + `object-fit:cover;
   object-position:top` になっている。

   しかし現行 twdesk.com の事例アイキャッチは **すべて正方形の企業ロゴ**
   （200x200 / 385x385 / 829x829 など）。cover のままだと上下が切られ、
   「HIS」「MATSUI」「Calbee」などロゴの文字が欠ける。

   → ロゴが欠けないよう contain にし、余白は白で埋める。
     レイアウト（16/9 の枠・グリッド）はデザインどおり維持する。
   ※ アイキャッチを横長の写真に差し替える方針になったらこの節は削除する。 */
.card .thumbnail > img[src*='ctfassets.net'],
.card-post .thumbnail > img[src*='ctfassets.net'] {
  object-fit: contain;
  object-position: center;
  background: #fff;
}

/* --- 事例詳細ヘッダの企業ロゴ枠 -------------------------------
   `.logo-img img { aspect-ratio:180/116; object-fit:cover }` も同じ理由で
   正方形ロゴの上下が切れる（原本モックは横長画像）。枠サイズは維持して contain に。 */
.logo-img img {
  object-fit: contain;
}

/* ホバー時の 1.1 拡大は cover 前提で、contain だと枠外にロゴがはみ出す。
   事例カードだけ拡大量を抑える。 */
.card .thumbnail > img[src*='ctfassets.net']:where(.card:has(.more-link:hover) *),
.card .thumbnail > img[src*='ctfassets.net']:where(.card:has(.more-link:focus-visible) *) {
  scale: 1.04;
}

/* --- 事例詳細「ご担当者様」の写真（.gallery-list） -------------------
   現行 twdesk.com から移行した本文には
   `<ul class="gallery-list"><li><figure><img></figure><figcaption>…` が
   そのまま入っているが、制作物の post.css に `.gallery-list` の定義は無い。
   そのため本文汎用の `.post-body :where(figure) img { min-width:100% }` が
   当たり、200px 前後しかない担当者写真が本文幅（約 760px）まで引き伸ばされて
   解像度不足が目立っていた。

   現行サイトの detail.css は 198x220 の枠 + object-fit:cover で表示している。
   → 高さを 220px に固定し、幅は縦横比から自動計算した上で 198px を上限にする。
     縦長写真（200x260 など）は等倍付近で全体が収まり、横長・正方形の大判写真
     （2560x2560 など）は現行サイトと同じく 198x220 に cover で収まる。
   ※ 本文 HTML（Contentful）は触らず、ここで表示サイズだけを補正する。 */
.post-body .gallery-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-inline-start: 0;
}
.post-body .gallery-list > li {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 280px;
  margin: 0;
}
.post-body .gallery-list figure {
  width: fit-content;
  margin: 0;
}
.post-body .gallery-list figure img {
  min-width: 0;
  width: auto;
  max-width: 198px;
  height: 220px;
  margin: 0;
  object-fit: cover;
}

/* --- 事例詳細の脚注「取材当時の名称（Twitter）で表記」 -------------------
   issue #23: 導入事例は取材当時の発言のため Twitter 表記を残し、その旨を脚注で示す。
   本文（1.125rem）より一段小さく、注記と分かる色にする。 */
.post-body .note-former-name {
  margin-block: 2.5rem 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: #5c5c5c;
}

/* コラム一覧のカテゴリリンク（2026-10-02 計画 D）。
   原本の .list-cat は auto-fit で並ぶ数に合わせて幅を広げるため、カテゴリが 2〜3 個だと
   ボタンが半幅まで広がる。小林さんの参考画像（PC で 1 行 5 個）と同じ幅で左寄せにする。
   ヘルプで使っている .list-cat には影響させない（.column-cat だけ） */
.list-cat.column-cat {
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}
/* 今いるカテゴリ（または「すべて」）を強調。原本のホバー色と同じ青 */
.list-cat.column-cat li.current a {
  color: #007af3;
  --text_color: #007af3;
}
/* archive.css の #column { margin-top: -5vh }（SP）は、原本ではカテゴリリンクの直後でも効き、
   最後のボタンに 20px ほど重なる（390x900 で実測）。カテゴリリンクがあるときだけ打ち消す */
.archive-block-first + #column {
  margin-top: 0;
}

/* 機能の「Coming soon」（2026-10-05）。未提供の機能はリンクせず、ラベルを付けて少し薄く出す */
.coming-soon {
  display: inline-block;
  margin-left: 0.5em;
  padding: 1px 10px;
  border-radius: 20px;
  background: #e8edf3;
  color: #5d7da3;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  vertical-align: middle;
}
.box-feature .coming-soon,
.box-text .coming-soon {
  margin-left: 0;
}
.is-coming-soon .short-title,
.is-coming-soon .pic,
.arrow-link-list > li.is-coming-soon > span {
  opacity: 0.6;
}
.arrow-link-list > li.is-coming-soon > span {
  display: block;
  padding: 8px;
}

/* 本文画像の拡大表示（issue #51、public/assets/js/lightbox.js） */
.post-body a[href$=".png"] img,
.post-body a[href$=".jpg"] img,
.post-body a[href$=".jpeg"] img,
.post-body a[href$=".gif"] img,
.post-body img.lb-zoomable {
  cursor: zoom-in;
}
html.lb-open {
  overflow: hidden;
}
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 48px 16px 24px;
  background: rgba(0, 0, 0, 0.8);
}
.lb-overlay[hidden] {
  display: none;
}
.lb-figure {
  margin: 0;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: grid;
  justify-items: center;
  gap: 8px;
}
.lb-img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  width: auto;
  height: auto;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  touch-action: pinch-zoom;
}
.lb-caption {
  color: #fff;
  font-size: 14px;
  text-align: center;
}
.lb-close {
  position: fixed;
  top: 8px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

/* Pardot forms (go.ayudante.jp) on phones: the narrow body column leaves the iframe ~250px wide,
   which clips the 304px reCAPTCHA. Let the iframe use the full viewport width minus the 16px gutters. */
@media screen and (max-width: 768px) {
  .post-body iframe[src^="https://go.ayudante.jp/"] {
    display: block;
    width: calc(100vw - 32px);
    max-width: none;
    margin-left: calc(50% - 50vw + 16px);
  }
}

/* Phones (the kv-sp background, below 640px): the bullets sit on the laptop keyboard,
   so put a translucent white panel behind them to keep them readable. */
@media screen and (max-width: 639px) {
  .top-main-header .header-inner .list-style {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: 8px;
    padding: 0.6em 0.9em;
  }
}