/*
 * choku-list-head.css
 * 一覧ページの頭（template-parts/choku-list-head.php）。ひと記事・しかた記事・ちょくマケ・作り手日記で共通
 * 基準はちょくマケの形：英字ラベル（Jost・字間広め）＋明朝のタイトル。色が変わるのは英字ラベルと絞り込みの選択中だけ
 * 一覧を足すときは .choku-lh--{キー} に色を1行足す
 */

.choku-lh {
    --lh-color: var(--choku-key);
    margin: 0 0 28px;
    color: var(--choku-ink);
}
.choku-lh--hito    { --lh-color: #bb5548; }
.choku-lh--shikata { --lh-color: #7a5a2c; }
.choku-lh--item    { --lh-color: #4f6340; }
.choku-lh--diary   { --lh-color: #3d5a6c; }

/* パンくずからの始まりの位置をそろえる（Arkhe の本文の上の余白 48px を詰める。一覧の幅は各CSSで 1180px） */
body.post-type-archive-hito .l-content__body,
body.post-type-archive-shikata .l-content__body,
body.tax-shikata_cat .l-content__body,
body.post-type-archive-tsukurite_item .l-content__body,
body.post-type-archive-tsukurite_diary .l-content__body {
    margin-top: 16px;
}

/* 英字ラベル・タイトル */
.choku-lh__head {
    margin: 0 0 16px;
}
.choku-lh__label {
    margin: 0;
    font-family: 'Jost', 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .24em;
    color: var(--lh-color);
}
.choku-lh__title {
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: 'Noto Serif JP', serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .03em;
    color: var(--choku-ink);
}

/* TOP画像（16:2、スマホは 16:9） */
.choku-lh__visual {
    display: block;
    margin: 0 0 16px;
    border-radius: 16px;
    overflow: hidden;
    background: #f3e9da;
}
.choku-lh__visual-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 2;
    object-fit: cover;
}

/* 説明文：1行40字くらいで折り返す */
.choku-lh__desc {
    max-width: 40em;
    margin: 0 0 24px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    line-height: 1.9;
    color: var(--choku-ink-sub);
    line-break: strict;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}
.choku-lh__desc a {
    color: var(--lh-color);
    text-decoration: none;
}
.choku-lh__desc a:hover {
    text-decoration: underline;
}

/* 絞り込み：1段目は丸いタブ（選択中は塗り）、2段目（小カテゴリ）は小さい文字 */
.choku-lh__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 0 0 12px;
}
.choku-lh__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.choku-lh__tabs a {
    padding: 7px 18px;
    border: 1px solid var(--choku-line);
    border-radius: 999px;
    background: #fff;
    color: var(--choku-ink);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.choku-lh__tabs a:hover {
    border-color: var(--lh-color);
    color: var(--lh-color);
}
.choku-lh__tabs a.is-current {
    border-color: var(--lh-color);
    background: var(--lh-color);
    color: #fff;
}
.choku-lh__tabs--sub {
    gap: 4px;
    margin: 0 0 12px;
}
.choku-lh__tabs--sub a,
.choku-lh__tabs--sub a:hover {
    padding: 3px 12px;
    border: 0;
    background: none;
    color: var(--lh-color);
    font-size: 13px;
}
.choku-lh__tabs--sub a.is-current {
    background: color-mix(in srgb, var(--lh-color) 12%, #fff);
    color: var(--lh-color);
    font-weight: 700;
}
.choku-lh__aside {
    padding: 7px 20px;
    border-radius: 999px;
    background: var(--choku-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background .15s;
}
.choku-lh__aside:hover,
.choku-lh__aside:focus-visible {
    background: var(--lh-color);
    color: #fff;
}

/* いちばん下の要素の余白は .choku-lh の margin だけにする */
.choku-lh > :last-child {
    margin-bottom: 0;
}

@media (max-width: 599px) {
    .choku-lh {
        margin-bottom: 24px;
    }
    .choku-lh__title {
        font-size: 26px;
    }
    .choku-lh__visual {
        margin-bottom: 14px;
        border-radius: 12px;
    }
    .choku-lh__visual-img {
        aspect-ratio: 16 / 9;
    }
    .choku-lh__desc {
        max-width: none;
    }
}