/**
 * TOP カード帯：グリッド・余白・ホバー・高さ揃え（DOM/既存JSは触らない前提の上書き専用）
 */

/* ----- セクション上下余白（ヒーロー除く・旧 80px はヒーロー直下が空きすぎるため詰める） ----- */
#app.lib-app--top .st-sections > .lib-top-section:not(.lib-top-section--hero) {
  padding-top: clamp(1rem, 2.6vw, 1.85rem);
  padding-bottom: clamp(1rem, 2.6vw, 1.85rem);
  box-sizing: border-box;
}

@media (max-width: 640px) {
  #app.lib-app--top .st-sections > .lib-top-section:not(.lib-top-section--hero) {
    padding-top: clamp(0.85rem, 3.5vw, 1.35rem);
    padding-bottom: clamp(0.85rem, 3.5vw, 1.35rem);
  }
}

/* lib-commercial-top の 900px 1 列化を上書き（TOP の auto-fit を維持） */
@media (max-width: 900px) {
  #app.lib-app--top .lib-api-top-services .lib-st-columns-container,
  #app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container,
  #app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  }
}

/* ----- カード親：指定グリッド（TOP の列コンテナ） ----- */
#app.lib-app--top .lib-api-top-services .lib-st-columns-container,
#app.lib-app--top .lib-svc-grid-wrap .lib-st-columns-container,
#app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: clamp(1rem, 2.4vw, 1.5rem) !important;
  row-gap: clamp(1rem, 2.4vw, 1.5rem) !important;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

/* 主要ページ（ナビ）カタログ: 行間をやや詰めて整列感を出す（帯内ルールより後で上書き可） */
#app.lib-app--top .lib-top-section--nav_cards .lib-st-columns-container {
  gap: clamp(0.65rem, 1.8vw, 1.05rem) !important;
  row-gap: clamp(0.65rem, 1.75vw, 1rem) !important;
}

/* ----- 列ラッパー：グリッド子として高さ伸長 ----- */
#app.lib-app--top .lib-api-top-services [data-testid="column"].stColumn,
#app.lib-app--top .lib-svc-grid-wrap [data-testid="column"].stColumn,
#app.lib-app--top .lib-top-section--nav_cards [data-testid="column"].stColumn {
  display: flex !important;
  flex-direction: column;
  flex: unset !important;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

#app.lib-app--top .lib-api-top-services [data-testid="column"] > [data-testid="stVerticalBlock"],
#app.lib-app--top .lib-svc-grid-wrap [data-testid="column"] > [data-testid="stVerticalBlock"],
#app.lib-app--top .lib-top-section--nav_cards [data-testid="column"] > [data-testid="stVerticalBlock"] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

/* ----- メトリックカード（a.card）：高さ統一・余白・角丸・影 ----- */
#app.lib-app--top a.lib-metric.card.st-node--card {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  text-decoration: none;
}

#app.lib-app--top a.lib-metric.card.st-node--card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

/* タイトル（.val）を上段に、下に 16px、本文（.lbl）を伸長 */
#app.lib-app--top a.lib-metric.card.st-node--card .val {
  order: -1;
  margin: 0 0 16px 0;
}

#app.lib-app--top a.lib-metric.card.st-node--card .lbl {
  order: 1;
  flex: 1 1 auto;
  margin: 0;
}

/* 有効な img があるカード：既存ダイヤ装飾を無効化（src は触らない） */
#app.lib-app--top a.lib-metric.card.st-node--card:has(img):not(.lib-card-img-missing)::before {
  content: none !important;
  display: none !important;
}

/* img 無し・欠損時：統一プレースホルダ（先頭帯） */
#app.lib-app--top a.lib-metric.card.st-node--card:not(:has(img))::before,
#app.lib-app--top a.lib-metric.card.st-node--card.lib-card-img-missing::before {
  content: "";
  display: block;
  flex-shrink: 0;
  order: -2;
  height: 160px;
  margin: -24px -24px 16px -24px;
  width: auto;
  max-width: none;
  border-radius: 16px 16px 0 0;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url("/assets/ai_city_generic.jpg");
  position: relative;
  z-index: 0;
}

#app.lib-app--top a.lib-metric.card.st-node--card.lib-card-img-missing .val {
  margin-top: 0;
}

/* ----- ナビカード（button）：同一トーン（クラスは既存のまま） ----- */
#app.lib-app--top .lib-top-section--nav_cards button.lib-nav-card-pro {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

#app.lib-app--top .lib-top-section--nav_cards button.lib-nav-card-pro .st-nav-card-label {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
}

#app.lib-app--top .lib-top-section--nav_cards button.lib-nav-card-pro:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

/* TOP 後付け：非表示（remove / innerHTML 禁止方針） */
.hidden-by-ai {
  display: none !important;
}

/*
 * 上の .hidden-by-ai より詳細度が高い列ルール（本ファイル 42–52 行付近の display:flex !important）
 * があるため、列に .hidden-by-ai を付けても画面上は消えなかった。同一チェーン末尾に .hidden-by-ai を
 * 足したセレクタで display:none を再指定する。
 */
#app.lib-app--top .lib-api-top-services [data-testid="column"].stColumn.hidden-by-ai,
#app.lib-app--top .lib-svc-grid-wrap [data-testid="column"].stColumn.hidden-by-ai,
#app.lib-app--top .lib-top-section--nav_cards [data-testid="column"].stColumn.hidden-by-ai,
#app.lib-app--top .lib-top-section--ai_tools [data-testid="column"].stColumn.hidden-by-ai,
#app.lib-app--top .lib-top-section--services [data-testid="column"].stColumn.hidden-by-ai {
  display: none !important;
}

/* フッター重複など section 丸ごと非表示でも、帯レイアウトの flex が勝たないようにする */
#app.lib-app--top section.st-section.lib-section.hidden-by-ai {
  display: none !important;
}

/* 業務のご案内 / AI分析ツール：見出し＋列を包む data-lib-api ルート（列がすべて hidden のとき JS が付与） */
#app.lib-app--top div.lib-api-top-services.hidden-by-ai,
#app.lib-app--top div.lib-svc-grid-wrap.hidden-by-ai,
#app.lib-app--top div.lib-top-ai-tools-wrap.hidden-by-ai {
  display: none !important;
}

/* ----- TOP 縦リズム：セクション間 gap・ページ枠・hr（streamlit-port-append より後段で上書き） ----- */
#app.st-app-view.st-app-view--top.lib-app--top .st-sections {
  gap: clamp(0.45rem, 1.4vw, 0.95rem);
}

#app.st-app-view.st-app-view--top.lib-app--top .block-container {
  padding-top: clamp(0.55rem, 1.5vw, 1rem) !important;
  padding-bottom: clamp(1.1rem, 2.6vw, 2rem) !important;
}

#app.st-app-view.st-app-view--top.lib-app--top .hr {
  margin: clamp(0.65rem, 1.8vw, 1.1rem) 0;
}