/* =====================================================================
   home.css — ibit.dev ホーム（ランディング）固有のスタイル
   style.css の design token / 構造クラスを前提に、ランディング用の
   装飾だけをここに足す。インライン <style> は CSP で禁止のため外部化。
   ===================================================================== */

/* ナビの現在地（Home）強調は style.css の `.nav-menu li a.is-active`
   （色 + 下線）が担当する。home.css では重複定義しない。 */

/* =====================================================================
   セクション見出しに添える件数バッジ（控えめな注記）
   ===================================================================== */
/* 見た目 (accent 枠/地/文字色/pill) は style.css V17 のピルバッジ基底に集約。
   ここは配置と寸法の差分のみ (旧 border/background/color 直書きは refine.css に
   恒常上書きされる死宣言だったため削除)。 */
.count-badge {
    display: inline-block;
    margin-left: 10px;
    padding: var(--badge-pad);
    /* 2-4: 見出し脇バッジの寸法を about/skills と統一 */
    font-size: 0.72rem;
    line-height: 1.6;
    vertical-align: middle;
    white-space: nowrap;
}

/* 固定ヘッダとのズレ防止は style.css の section[id] { scroll-margin-top: ... }
   が全 <section id> に既に効いているため、ここでの再宣言は不要 (死宣言だった)。 */

/* 各ティーザーの「詳しく見る →」行 */
.teaser-more {
    margin: 22px 0 0;
}

.teaser-more .card-link {
    font-weight: 600;
}

/* ティーザーのカードは単一/少数なので幅を抑えて読みやすく */
.home-teaser-cards {
    grid-template-columns: minmax(0, 420px);
}

/* V15: 640 → 600 (BP policy 380/600/768/860 に統一。style.css:1824 の .cards
   1列化と境界が揃い、601-640 帯でティーザーだけ先に1列化する不一致を解消) */
@media (max-width: 600px) {
    .home-teaser-cards {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   各セクションを「1画面のスライドパネル」に
   - 中身を縦中央に据え、上詰め+下空白だった死に余白を構図に変える
   - 縦長・大画面では 720px でキャップして底なし空白を防ぐ
   - 内容が画面より高い場合は min-height なので自然に伸びる
   home.css はホームでのみ読み込まれるため影響はホーム限定。
   ===================================================================== */
/* 768px以下は全画面パネル化すると 7 セクション分の縦スクロールが
   812pxずつに間延びし空白だらけになるため、769px以上のみ適用。
   ---
   高さは「1画面1メッセージ」感を保ちつつ、7 セクション（About/Projects/
   Community/Articles/Skills/AI/Contact）分の総スクロール量を抑えるため
   100svh から 78svh に緩和。実測: 800px 前後 → 620px 前後。中身が薄い節
   （AI/Contact）が広大な余白に見えるのを防ぎ、スキャンしやすさを優先。 */
@media (min-width: 769px) {
    .section {
        min-height: 620px; /* svh/min() 非対応のフォールバック（順序が生命線） */
        min-height: min(78svh, 720px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* flex 化すると margin:auto の子は交差軸で stretch されず fit-content に
   収縮する（仕様）。width:100% を明示して従来どおり全幅+中央寄せを保つ。 */
.section > .section-container,
main .hero .hero-container {
    width: 100%;
}

/* =====================================================================
   ヒーロー = 第一画面。「100svh − ヘッダー」ぶんを占め、名前・アバター・
   CTA が中央に収まる完結したポスター構図にする（クイックナビ廃止に伴い、
   その帯ぶんの控除は撤去）。main .hero で refine.css の .hero
   padding(104/72) より詳細度を上げて上書きする（読み込み順は
   style → home → refine のため）。
   ===================================================================== */
/* Projects/Contact への内部導線。SNSボタンより上、名前の直下に置くための
   余白調整のみ（見た目は既存の .btn / .btn-primary を流用）。 */
.hero-cta {
    margin-bottom: 18px;
}

@media (min-width: 769px) {
    main .hero {
        /* 次セクション上端のヘアラインを56px分覗かせ、続きがある手がかりにする */
        min-height: min(calc(100vh - var(--header-height) - 56px), 780px);
        min-height: min(calc(100svh - var(--header-height) - 56px), 780px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

/* 768px以下は style.css 側で .hero-left / .social-bar が中央寄せになる
   （既存のモバイル分岐）。.hero-cta もそれに揃える。 */
@media (max-width: 768px) {
    .hero-cta {
        justify-content: center;
    }

    /* タイプライターの文言は35〜51文字あり、768px以下では折り返して2行に
       なることがある。.subtext の高さ予約が style.css 側で1行分
       (min-height:1.6em) しか無いため、文の切替のたびに直下の .hero-cta /
       .social-bar が跳ねていた (CLS)。.subtext は index.php でしか
       使われないため、ここで2行分に引き上げてホームだけ影響させる。 */
    .subtext {
        min-height: 3.4em;
    }
}

/* =====================================================================
   見開き2カラムのティーザー（861px以上）
   左=見出し+リード+「詳しく見る」/ 右=カード の編集誌風レイアウト。
   Projects→Community→Skills→Articles→AI の 5 セクションで、
   偶数番目 (Community・Articles) を鏡像にしてジグザグのリズムを作る
   （右→左→右→左→右）。
   769-860px は左カラムが痩せすぎるため現状の縦積みを維持。
   ===================================================================== */
@media (min-width: 861px) {
    :is(#projects, #community, #skills, #articles, #ai) .section-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
        /* 左カラムを1グループとして扱う（title/lead/more を1トラックに束ね、
           1frトラックの前後にauto余白トラックを置いて縦センターに寄せる） */
        grid-template-rows: 1fr auto auto auto 1fr;
        grid-template-areas:
            ".     cards"
            "title cards"
            "lead  cards"
            "more  cards"
            ".     cards";
        column-gap: 64px;
        align-items: start;
    }

    :is(#projects, #community, #skills, #articles, #ai) .section-title {
        grid-area: title;
    }

    :is(#projects, #community, #skills, #articles, #ai) .contact-lead {
        grid-area: lead;
    }

    :is(#projects, #community, #skills, #articles, #ai) .section-container > :is(.cards, .card) {
        grid-area: cards;
        align-self: center;
        width: 100%;
    }

    :is(#projects, #community, #skills, #articles, #ai) .teaser-more {
        grid-area: more;
        align-self: start;
    }

    .home-teaser-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Community・Articles は鏡像（カード左・テキスト右）。
       Projects から数えて偶数番目のセクションをミラーにすることで
       normal→mirror→normal→mirror→normal の左右交互リズムを作る。
       grid-template-rows は基底の 5 行 (1fr auto auto auto 1fr) を継承したまま
       なので、areas 側も 5 行構成に揃えて上下の空 1fr 行 (センタリング用の
       spacer) を保つ。以前は areas を 3 行にしか置き換えておらず、余った
       4/5 行目 (auto/1fr) が無名のまま残って下に伸び、カード+テキストが
       上詰めになっていた。 */
    :is(#community, #articles) .section-container {
        grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
        grid-template-areas:
            "cards ."
            "cards title"
            "cards lead"
            "cards more"
            "cards .";
    }

    /* AIカードは refine.css 側で max-width:none 済みだが、見開きグリッドの
       cards 列幅(480px)に委ねる責務は home.css 側に明示しておく。 */
    #ai .ai-card {
        max-width: none;
    }
}

/* =====================================================================
   About ティーザーをステートメント・タイポグラフィに
   遠目でも3つのキーワード（.hl）が拾える「見出しのような本文」へ。
   about ページ本体は home.css を読まないため無影響。
   ===================================================================== */
/* max-width は 34em だと3文目「新しい技術を~興味があります。」が
   折り返してしまう幅だったため撤去。<br> で改行位置を明示制御している
   構成（自然な追い込みでの読みやすさ調整ではない）ため、幅の上限は
   親の .section-container(1040px) に任せて問題ない。 */
#about .about-text {
    font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.5rem);
    /* 2.05 は間隔が空きすぎて視線が文と文で迷子になる。1.9 に締めて
       段落感を残しつつテンポよく読ませる（<br>で改行制御している都合、
       完全に詰めると窮屈になるためこの中間値） */
    line-height: 1.9;
}

/* 3文目は1000px超なら1行に収まる（実測）。それ未満では自動折り返しが
   動詞の活用途中（例:「あり」/「ます。」）で割れるため、読点の位置で
   明示的に改行する（条件付き<br>: 広い画面では消し、狭い画面でだけ効かせる）。 */
.about-text-break {
    display: none;
}

/* V15: 1000 → 860 (BP policy 準拠)。861-1000 帯で <br> が中途半端に効く帯域は
   なくなる (860 未満で改行、861 以上で 1 行に収まる)。 */
@media (max-width: 860px) {
    .about-text-break {
        display: inline;
    }
}

#about .about-text .hl {
    padding: 0 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, transparent 64%, rgba(var(--accent-rgb), 0.28) 64%);
}

/* =====================================================================
   Contact（最終セクション）= 終着点の演出
   cta-band と同じ中央寄せ様式 + 下端の着地灯グロー。フッター上端の
   発光ヘアラインと光が連続する。
   ===================================================================== */
#contact {
    position: relative;
}

/* 中身が「見出し + リード + CTA1個」なので、他セクションと同じ 720px は
   広すぎて空白ばかりに見える。着地灯グロー(::after)の直径 280px を
   活かせる高さに絞り、コンパクトな終着点にする。 */
@media (min-width: 769px) {
    #contact {
        min-height: 520px;
        min-height: min(64svh, 560px);
    }
}

#contact .section-container {
    text-align: center;
}

#contact .section-title::after {
    left: 0;
    right: 0;
    margin-inline: auto;
}

#contact .contact-lead {
    margin-inline: auto;
}

#contact .btn-group {
    justify-content: center;
}

#contact .btn-primary {
    padding: 16px 36px;
    font-size: 1.08rem;
}

#contact::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(720px, 92%);
    height: 280px;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(closest-side at 50% 100%,
        rgba(var(--accent-rgb), 0.12), rgba(var(--accent-2-rgb), 0.04) 62%, transparent);
}

/* =====================================================================
   縦の奥行きリズム — main.left 直下の <section> を先頭 (hero) から数えて
   偶数番目 (現在の並びでは About/Community/Articles/Contact) をほんの少し
   沈めて、スクロールで明→暗→明と呼吸させる。セクション構成が変わると
   対象も自動的にずれるため、固有のセクション名ではなく「偶数番目」という
   ルール自体で覚えておくこと。fixed のオーロラが透けるため単なるベタ塗り
   にならない。
   ===================================================================== */
main.left > .section:nth-of-type(2n) {
    background: linear-gradient(180deg,
        rgba(var(--shade-rgb), 0) 0%,
        rgba(var(--shade-rgb), 0.30) 14%,
        rgba(var(--shade-rgb), 0.30) 86%,
        rgba(var(--shade-rgb), 0) 100%);
}

/* =====================================================================
   各スライドパネルの下端を淡いヘアラインで締める「段落」の区切り。
   #contact は独自の着地灯グロー(::after)を持つ終着点なので対象外。
   home.css はホームでのみ読み込まれるため適用はホーム限定。
   非表示ガード（reduced-motion / forced-colors）は refine.css の
   M / forced-colors ブロック側にある。
   ===================================================================== */
.section {
    position: relative;
}

.section:not(#contact)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(760px, 88%);
    height: 1px;
    transform: translateX(-50%);
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.16), transparent);
}

/* =====================================================================
   ホームのセクション見出しを一段引き上げる。
   「1画面 = 1メッセージ」の構図なのに、既定の --fs-h2 だと存在感が
   薄い。ホームでだけ少し大きく振り、見出し・リード・カードの
   タイポグラフィ階層を明確にする（refine.css の .section-title を
   詳細度と後発の位置で上書き）。
   他ページ(about/projects/…)の .section-title は home.css を読まないため
   影響なし。
   ===================================================================== */
@media (min-width: 769px) {
    main.left h2.section-title {
        font-size: clamp(1.85rem, 1.35rem + 1.4vw, 2.4rem);
        line-height: 1.2;
    }
}

/* ホームのリード（各セクションの説明1行）は既定より少し大きめにして、
   見出しとカード本文の間の「橋渡し」として読ませる。 */
main.left .section .contact-lead {
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 20px;
}