/*
 * カタログ一覧（page-catalog.php。Figma「下層 / カタログ一覧」PC 2041:11964 / SP 2041:12135）。
 * 背景・余白はよくあるご質問と同じ（パンくずの下に薄い緑が続き、フッターの山まで同じ色）。
 * 下の来店チケットは components.css（.visit-ticket）
 */
.catalog {
    display: flex;
    flex-direction: column;
    gap: 56px;
    padding: 24px 20px 96px;
    color: #333;
    background-color: var(--color-pale);
}

.catalog > * {
    width: min(100%, 1140px);
    margin-inline: auto;
}

/*
 * 文章は SP・PC とも Figma どおり 2 つの文の間で改行する。SP は左寄せ（2026-11-10 Chatwork「SP の文章は基本的に左寄せ」。
 * Figma Page 1 の SP 1869:1556 は中央）、PC は中央
 */
@media (min-width: 1024px) {
    .catalog__lead {
        text-align: center;
    }
}

.catalog__lead span {
    display: block;
}

.catalog__list-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/*
 * パンフレットのカード。SP は 1 列（Figma 335px）、768〜1023px は 2 列、1024px 以上は 3 列（Figma 360px × 3・間隔 30px）。
 * カードの高さは行の中でそろえる（Figma の self-stretch）
 */
.catalog__list {
    display: grid;
    gap: 24px;
}

.catalog__list > li {
    display: flex;
}

.catalog-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--color-white);
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.06);
}

/* 表紙（Figma: 薄い緑の上に表紙 SP 190×269 / PC 230×325。影付き） */
.catalog-card__cover {
    display: flex;
    justify-content: center;
    padding: 28px 0;
    background-color: #e9efe9;
}

.catalog-card__cover-image,
.catalog-card__cover-pending {
    width: 190px;
    height: 269px;
}

.catalog-card__cover-image {
    object-fit: cover;
    box-shadow: 0 8px 18px rgb(0 0 0 / 0.18);
}

/*
 * PDF のある表紙はリンク（page-catalog.php）。ホバーで表紙を少し持ち上げ、影を濃くする（2026-11-09 Chatwork の指示「ホバーで動き」。Figma に指定なし）。
 * 動きを減らす設定のときは持ち上げず、影だけ変える
 */
.catalog-card__cover-link {
    display: block;
}

.catalog-card__cover-link .catalog-card__cover-image {
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
    .catalog-card__cover-link:hover .catalog-card__cover-image {
        box-shadow: 0 16px 28px rgb(0 0 0 / 0.24);
        transform: translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .catalog-card__cover-link .catalog-card__cover-image {
        transition: none;
    }

    .catalog-card__cover-link:hover .catalog-card__cover-image {
        transform: none;
    }
}

/* 表紙が無い車種（Figma「表紙：準備中」）: 白地に点線の枠 */
.catalog-card__cover-pending {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5a5a5a;
    background-color: var(--color-white);
    border: 1.5px dashed #dde5df;
    font-size: 1rem; /* 16px */
    font-weight: 700;
}

.catalog-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px 26px;
}

.catalog-card__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    line-height: normal;
}

.catalog-card__model {
    color: var(--color-green);
    font-family: var(--font-en);
    font-size: 1.625rem; /* 26px */
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* 近日公開の車種は車種名を薄くする（Figma #b8bdb9） */
.catalog-card--soon .catalog-card__model {
    color: #b8bdb9;
}

.catalog-card__base {
    color: #5a5a5a;
    font-family: var(--font-en);
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    letter-spacing: 0.08em;
}

.catalog-card__who {
    font-size: 1rem; /* 16px */
    font-weight: 700;
    line-height: 1.6;
}

.catalog-card__meta {
    color: #5a5a5a;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: normal;
}

.catalog-card__meta--pending {
    line-height: 1.7;
}

.catalog-card__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 6px;
}

/* パンフレットを見る（Figma: 緑・高さ 60px・角丸 3px。横の「PDF」は英字 12px）。準備中は灰色で押せない */
.catalog-card__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 60px;
    padding: 0 20px;
    color: var(--color-white);
    background-color: var(--color-green);
    border-radius: 3px;
    font-size: 1.0625rem; /* 17px */
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.catalog-card__button--pending {
    color: #5a5a5a;
    background-color: #edf0ed;
}

/* 準備中のボタンは本文の下端にそろえる（PDF のある車種とない車種でカードの高さが同じになるように） */
.catalog-card__button--pending:last-child {
    margin-top: auto;
}

.catalog-card__pdf {
    font-family: var(--font-en);
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    letter-spacing: 0.06em;
}

.catalog-card__download {
    color: var(--color-green);
    font-size: 1rem; /* 16px */
    font-weight: 700;
    text-decoration: underline;
    text-underline-position: from-font;
}

@media (hover: hover) {
    .catalog-card__button:not(.catalog-card__button--pending):hover {
        opacity: 0.85;
    }

    .catalog-card__download:hover {
        text-decoration: none;
    }
}

.catalog__note {
    color: #5a5a5a;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 1.7;
}

/* フッターの山は、本文の下の余白（SP 96px / PC 140px）に重ねる（faq.css と同じ） */
.site-footer {
    margin-top: 0;
}

@media (min-width: 768px) {
    .catalog {
        padding-inline: 40px;
    }

    .catalog__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .catalog {
        gap: 72px;
        padding: 40px 40px 140px;
    }

    .catalog__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px;
    }

    .catalog-card__cover {
        padding: 36px 0;
    }

    .catalog-card__cover-image,
    .catalog-card__cover-pending {
        width: 230px;
        height: 325px;
    }

    .catalog-card__body {
        padding: 26px 28px 30px;
    }

    .catalog-card__model {
        font-size: 1.75rem; /* 28px */
    }

    /* 来店チケットは Figma どおり左右に 25px ずつ内側（1090px） */
    .catalog .visit-ticket {
        width: min(100%, 1090px);
    }
}