/* =====================================================================
   ibit.dev — AI ページ固有スタイル (ai.php)
   共有 style.css のトークン/クラスを再利用し、ここでは AI ページ専用の
   装飾（小見出し・ワークフローのグリッド・役割分担の2カラム等）だけを定義する。
   ===================================================================== */

/* セクション内の小見出し
   V14: font-size を refine.css の `.ai-subheading { font-size: var(--fs-h3) }`
   に一本化。旧 1.35rem は clamp min と等価だが後がけ CSS の宣言と 2 重で
   詳細度が拮抗しており、他 h3 (contact FAQ 等) と揃わなくなる潜在バグを予防。 */
.ai-subheading {
    margin: 52px 0 10px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

.ai-sub-lead {
    margin: 0 0 22px;
    font-size: 1rem;
    color: var(--muted);
}

/* Built with Claude カードと小見出しの間に余白 */
.ai-card {
    margin-bottom: 8px;
}

/* ---- ワークフロー: カードのグリッド ---- */
.ai-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.ai-flow-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 土台は style.css V17 のアイコンタイル基底。ここは寸法差分のみ。 */
.ai-flow-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
    font-size: 1.25rem;
}

.ai-flow-card .card-title {
    margin: 0 0 4px;
}

/* ---- 役割分担: 2カラム ---- */
.ai-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.ai-role-card .card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.ai-role-tag {
    color: var(--accent);
    font-size: 1.05rem;
}

.ai-list {
    /* list reset: style.css :where() で一元管理 */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.97rem;
    line-height: 1.7;
    color: var(--muted);
}

.ai-list .fa-icon {
    flex-shrink: 0;
    margin-top: 0.4em;
    color: var(--accent);
    font-size: 0.72rem;
}

/* AIとの向き合い方の注記 */
.ai-note {
    margin: 18px 0 0;
    padding: 16px 18px;
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    font-size: 0.97rem;
    line-height: 1.85;
    color: var(--muted);
}

.ai-note strong {
    color: var(--accent-strong);
    font-weight: 700;
}

/* ---- ページ内目次（render_page_toc）の見た目は refine.css に集約 ---- */

/* アンカー先がヘッダーに隠れないように */
#ai-built,
#ai-usage,
#ai-roles,
#ai-toolbelt {
    scroll-margin-top: calc(var(--header-height) + 16px);
}

/* ---- 使ってきた生成AI（チップ列） ---- */
.ai-toolbelt {
    margin-top: 10px;
}

.ai-toolbelt-cat {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.02em;
    margin: 26px 0 6px;
}

/* :first-of-type にすることで .ai-toolbelt 内の先頭に別要素が入っても
   最初のカテゴリ見出しの上マージンだけ確実に詰まる。 */
.ai-toolbelt > .ai-toolbelt-cat:first-of-type {
    margin-top: 6px;
}

/* 大きめピルの寸法・地色は style.css に集約（.skills-stack と共有）。
   ここではセクション内の位置調整のみ。 */
.ai-toolbelt .tech-tags {
    margin: 8px 0 0;
}

/* ---- レスポンシブ ---- */
@media (max-width: 768px) {
    .ai-grid,
    .ai-split {
        grid-template-columns: 1fr;
    }

    .ai-subheading {
        margin-top: 40px;
    }
}