@charset "UTF-8";

/*
    ムービー一覧
    Figma: PC 2503:1991（Movies）/ SP 2503:2162（Movies (SP)）

    濃い背景（bg-dark）。先頭1件が大きく、残り4件は PC で2カラム、SP で1カラム
*/

.lixil-2026 .movies {
    background-color: var(--bg-dark);
}

.lixil-2026 .movies__inner {
    padding: var(--layout-section-py) var(--layout-page-margin);
}

/* 最新動画エリアは一覧に重複して並ぶため、<ul> の外に独立して置く（記事一覧と同じ） */
.lixil-2026 .movies__featured {
    margin-top: var(--layout-item-gap);
}

.lixil-2026 .movies__list {
    display: flex;
    flex-direction: column;
    gap: var(--layout-item-gap);
    margin-top: var(--layout-item-gap);
}

/* ---- 1件分 ---- */

.lixil-2026 .movie-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.lixil-2026 .movie-card__head {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
}

.lixil-2026 .movie-card__vol {
    flex-shrink: 0;
    padding-top: var(--movies-vol-offset);
    color: var(--font-secondary);
    font-family: var(--font-family-en);
    font-size: var(--text-numeral-s-size);
    font-weight: var(--font-weight-black);
    line-height: 1;
}

.lixil-2026 .movie-card__title {
    flex: 1;
    color: var(--font-muted);
    font-size: var(--text-title-s-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--text-title-s-lh);
}

/* ---- 先頭1件 ---- */

.lixil-2026 .movie-card--featured .movie-card__head {
    align-items: center;
}

.lixil-2026 .movie-card--featured .movie-card__vol {
    display: flex;
    align-items: flex-end;
    padding-top: 0;
}

.lixil-2026 .movie-card--featured .movie-card__vol-number {
    font-size: var(--text-numeral-m-size);
}

.lixil-2026 .movie-card--featured .movie-card__title {
    color: var(--font-inverse);
    font-size: var(--text-title-l-size);
    line-height: var(--text-title-l-lh);
}

/*
    Coming Soon（公開前）: Figma PC 2742:2235 / SP 2742:2320
    「公開されていない動画はタイトルなしで、番号表示とComing Soonのデフォルト画像
      だけが表示される。動画の埋め込みもなし。」（Figma アノテーション）
*/
.lixil-2026 .movie-card--coming-soon .movie-card__title {
    display: none;
}

/* ==============================================================
   PC（769px〜）
   ============================================================== */
@media (min-width: 769px) {
    .lixil-2026 .movies__inner {
        max-width: var(--content-max-width);
        margin-right: auto;
        margin-left: auto;
        padding: var(--space-6xl) var(--space-4xl);
    }

    .lixil-2026 .movies__featured {
        margin-top: var(--space-4xl);
    }

    .lixil-2026 .movies__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--movies-row-gap) var(--space-3xl);
        margin-top: var(--space-4xl);
    }

    /* 高さの違う Coming Soon カードが行の高さを吸わないよう上端で揃える */
    .lixil-2026 .movies__item {
        align-self: start;
    }

    .lixil-2026 .movie-card--featured {
        gap: var(--space-lg);
    }

    .lixil-2026 .movie-card--featured .movie-card__head {
        gap: var(--space-md);
    }

    .lixil-2026 .movie-card--featured .movie-card__title {
        flex: 0 1 auto;
    }
}