/*
 * index.html（ホーム）ページ固有のレイアウト・グルーCSS
 *
 * design-system/（tokens.css, layout.css, components.css）は
 * どのページでも使える汎用部品。このファイルは「ヒーロー＋簡易検索＋
 * 運行状況」という具体的な画面構成にだけ関わる、ページ固有の配置調整を
 * 担う。値はすべて design-system/tokens.css のトークンを参照する。
 *
 * ヒーロー・簡易検索カード・運行状況カードは、乗換案内ページの
 * 「白カード＋控えめな影」という世界観（QUIET AUTHORITY / STRUCTURED
 * DENSITY 原則）に合わせ、過剰なグラデーション・拡大シャドウは使わない。
 */

/* ===== main をカードの縦積みコンテナにする（main自体はカード化しない） ===== */
.page-main.home-main {
    padding: 0;
    gap: var(--space-5);
    justify-content: flex-start;
}

@media (max-width: 768px) {
    /* layout.css は「main自体が1枚のカード」なページ（乗換案内等）を想定し、
       モバイルで .page-container を白背景の全画面パネルにする。
       ホームは複数の白カードを並べる「カードの集合」構成のため、
       グレー背景の上に個々のカードが浮く元デザインを再現する。 */
    .page-container {
        background: var(--color-bg-page);
    }
    .page-main.home-main {
        margin-bottom: 20px;
    }
}

/* =========================================================
   モバイルヘッダーの透過（以前の本番方針を踏襲）
   ページ最上部では透明にし、hero をヘッダーの裏まで伸ばして
   画面最上端に配置する。スクロールすると mockup_index_app.js が
   body に is-header-scrolled を付け、ヘッダー用の背景がフェードインする。
   layout.css のヘッダーは常時単色背景の設計のため、この透過演出は
   hero を持つホームページ固有の上書きとして index-page.css 側に置く。
   ========================================================= */
@media (max-width: 768px) {
    .page-header {
        background: transparent;
        box-shadow: none;
    }

    .page-header::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--color-primary);
        box-shadow: var(--shadow-sm);
        opacity: 0;
        transition: opacity var(--duration-base) ease;
        z-index: -1;
    }

    body.is-header-scrolled .page-header::before {
        opacity: 1;
    }
}

/* =========================================================
   ヒーロー（ブランド訴求）
   グラデーション・装飾円は使わず、primaryカラーの単色背景のみ。
   ========================================================= */
.home-hero {
    text-align: center;
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-7) var(--space-6);
}

.home-hero-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.home-hero-logo {
    width: min(260px, 78%);
    height: auto;
    display: block;
}

.home-hero-eyebrow {
    margin: 0;
    font-size: 0.72rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.14em;
    opacity: 0.85;
}

.home-hero-copy {
    margin-top: var(--space-5);
}

.home-hero-title {
    font-size: clamp(1.4rem, 3.2vw, 2rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.home-hero-lead {
    margin-top: var(--space-2);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    opacity: 0.92;
}

@media (max-width: 768px) {
    /* layout.css は .page-container に margin-top:76px（ヘッダー高さ分）を
       付けている。hero だけを同じ分だけ上に引き上げ（margin-top:-76px）、
       その分を padding-top に足し戻すことで、中の要素の見た目の位置は
       変えずに hero の背景だけを透明ヘッダーの裏＝画面最上端まで伸ばす。 */
    .home-hero {
        border-radius: 0;
        margin-top: -76px;
        padding: calc(76px + var(--space-6)) var(--space-4) var(--space-6);
    }
}

/* =========================================================
   セクション共通の見出し（乗換案内 / 運行状況）
   ========================================================= */
.home-section {
    padding: var(--space-6);
}

/* .section-heading は design-system/components.css 側の共通クラス */

@media (max-width: 768px) {
    .home-section {
        margin: 0 var(--space-4);
        padding: var(--space-5);
    }

    /* ホーム画面に追加カード（components.css の .install-card）を他カードと同じ横余白に揃える */
    .home-main .install-card {
        margin: 0 var(--space-4);
    }
}

/* =========================================================
   簡易検索フォーム（乗換案内ページの badge + field パターンを踏襲）
   ========================================================= */
.quick-search-form {
    display: flex;
    flex-direction: column;
}

.quick-search-form .station-input-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.quick-search-form .input-wrapper {
    flex: 1;
    min-width: 0;
    position: relative;
}

.quick-search-swap-row {
    display: flex;
    justify-content: center;
    margin: var(--space-2) 0;
}

/* GO!ボタンは swap ボタンと同じ「全体の中央」に位置を揃え、詳細検索は
   そのすぐ右に添える。両端に等幅の余白トラック(1fr)を置き、中央トラック
   (GO!)を全体の中央に固定しつつ、右トラックの詳細検索はGO!に隣接させる。
   align-items:center で、詳細検索の縦幅がGO!に引き伸ばされないようにする
   （flexのデフォルトstretchを避ける）。 */
.quick-search-actions {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: var(--space-3);
    margin-top: var(--space-6);
}

.quick-search-go {
    grid-column: 2;
    justify-self: center;
    min-width: 160px;
}

.quick-search-detail {
    grid-column: 3;
    justify-self: start;
}

@media (max-width: 768px) {
    .quick-search-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }

    .quick-search-go {
        width: 100%;
        max-width: 300px;
    }
}

.quick-search-form.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.home-search-hint {
    margin-top: var(--space-3);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.home-search-error {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-notice-bg);
    border: 2px solid var(--color-notice-border);
    color: var(--color-notice-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

.home-search-error[hidden] {
    display: none;
}

/* =========================================================
   運行状況カード（枠線+背景色で状態を示す、内容を省略したシンプルな
   構成。路線名 → 状態アイコン → 状態ラベルのみで、説明文や路線ごとの
   色分けバッジは持たない）
   ========================================================= */
.home-status-summary {
    margin-bottom: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.home-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.status-card {
    border: 2px solid var(--color-border);
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    text-align: center;
}

.status-card--normal {
    border-color: var(--color-status-normal);
    background: var(--color-status-normal-bg);
}
.status-card--warning {
    border-color: var(--color-status-warning);
    background: var(--color-status-warning-bg);
}
.status-card--suspend {
    border-color: var(--color-status-suspend);
    background: var(--color-status-suspend-bg);
}

.status-card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
}

.status-card-icon {
    display: flex;
    justify-content: center;
}
.status-card-icon .status-icon {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.status-card--normal .status-card-icon { color: var(--color-status-normal-text); }
.status-card--warning .status-card-icon { color: var(--color-status-warning-text); }
.status-card--suspend .status-card-icon { color: var(--color-status-suspend-text); }

.status-card-text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}
.status-card--normal .status-card-text { color: var(--color-status-normal-text); }
.status-card--warning .status-card-text { color: var(--color-status-warning-text); }
.status-card--suspend .status-card-text { color: var(--color-status-suspend-text); }

.status-card--link {
    cursor: pointer;
    transition: filter var(--duration-fast);
}
.status-card--link:hover {
    filter: brightness(0.97);
}
.status-card--link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* .home-status-grid はモバイル幅でも常に2x2（repeat(2, ...)）を維持する */