/* ============================================================
   p-archive — 特集記事アーカイブ
   依存：style.css の :root CSS変数
   ============================================================ */

/* ============================================================
   ② ページタイトルエリア
   ============================================================ */
.p-archive__head {
    background-color: var(--color-bg-default); /* #d3f4f7 */
    padding-top: var(--space-2xl);  /* SP: 48px */
    padding-bottom: var(--space-lg); /* 32px gap → 一覧エリアへ */
}

.p-archive__head-inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-xs); /* SP: 16px */
    text-align: center;
}

/* デコSVGはフロント非表示に変更（管理画面の英字装飾テキストに一本化）。
   .p-archive__head-deco / .p-archive__deco は現在未使用。 */

.p-archive__head-title {
    font-family: var(--font-serif);
    font-size: 32px;  /* SP */
    font-weight: 500;
    line-height: 48px;
    letter-spacing: 1.25px;
    color: var(--color-text-default);
    font-feature-settings: "palt" 1;
    margin: 0 0 12px;
    /* 管理画面（textarea）の改行は既定では無視して1行表示（PC・タブレット）。
       SP（max-width:767px）のみ pre-line で改行を反映する。 */
    white-space: normal;
}

.p-archive__head-en {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-accent);
    margin: 0 0 4px;
}

.p-archive__head-sub {
    font-family: var(--font-sans);
    display: block;
    max-width: calc(100vw - 40px);
    font-size: 18px;  /* SP */
    font-weight: 500;
    line-height: 1.7;
    color: var(--color-text-heading);
    text-decoration: none;
    font-feature-settings: "palt" 1;
    margin: 0 auto;
}

/* ============================================================
   島アーカイブ：種別フィルタ（ピル型）
   タイトル下・一覧の上。水色背景を継続し、白ピル＋角丸トーンに合わせる。
   ============================================================ */
/* 島アーカイブ全体を水色背景で連続させ、セクション間に白い隙間/横帯を出さない。
   .tax-island（body class）限定。他アーカイブ・/facility/・TOPには影響しない。 */
.tax-island .p-archive {
    background-color: var(--color-bg-default);
}

.p-island-filter {
    /* 親(.tax-island .p-archive)の水色と一体化。白帯/横線を出さない */
    background: transparent;
    border: 0;
    margin: 0 0 var(--space-lg);
    padding: 0;
}

.p-island-filter__list {
    list-style: none;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-xs);
    display: flex;
    flex-wrap: wrap;            /* 折り返し（横スクロールしない） */
    justify-content: center;
    gap: 12px;
}

.p-island-filter__item {
    margin: 0;
}

.p-island-filter__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 8px 18px;
    background: var(--color-bg-card);
    border: 1px solid rgba(0, 161, 179, 0.24);
    color: var(--color-text-heading);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.p-island-filter__link:hover {
    background: var(--color-bg-subtle);
}

.p-island-filter__link.is-active {
    background: var(--color-text-accent);
    color: #fff;
    border-color: var(--color-text-accent);
}

@media (max-width: 767px) {
    .p-island-filter__link {
        padding: 6px 14px;
        font-size: 13px;
    }

    /* SPのみ：管理画面ページタイトル（textarea）の改行位置で改行表示する。
       例「観光スポット・\nアクティビティ」→ SPで2行。PC/タブレットは1行（normal）。 */
    .p-archive__head-title {
        white-space: pre-line;
    }
}

/* ============================================================
   ③ 記事一覧エリア
   ============================================================ */
.p-archive__list {
    background-color: var(--color-bg-default);
    padding-bottom: var(--space-2xl); /* SP: 48px */
}

.p-archive__list-inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-xs); /* SP: 16px */
    display: flex;
    flex-direction: column;
    gap: var(--space-lg); /* SP: 32px */
}

/* ---- 3a. ピックアップカード ---- */
.p-archive__pickup-card {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative; /* タイトルの stretched link の位置基準 */
}

.p-archive__pickup-card-link {
    display: flex;
    flex-direction: column; /* SP: 縦積み */
    text-decoration: none;
    color: inherit;
}

/* カード全体をクリック可能にする。
   タグはターム個別リンクのため、カード全体を <a> で包むと入れ子アンカーになり
   DOMが分解される。代わりにタイトルリンクを疑似要素でカード全面に広げる。 */
.p-archive__pickup-title-link {
    color: inherit;
    text-decoration: none;
}

.p-archive__pickup-title-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* タグリンクは stretched link より前面に出して個別にクリックできるようにする */
.p-archive__pickup-body .p-archive__card-tags {
    position: relative;
    z-index: 2;
}

.p-archive__pickup-img {
    width: 100%;
    height: 200px;  /* SP */
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.p-archive__pickup-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-archive__pickup-body {
    padding: var(--space-xs); /* SP: 16px */
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: var(--space-xs);
}

.p-archive__pickup-title {
    font-family: var(--font-sans);
    font-size: 20px;  /* SP */
    font-weight: 700;
    line-height: 30px;
    color: var(--color-text-default);
    font-feature-settings: "palt" 1;
    margin: 0;
}

.p-archive__pickup-date {
    font-family: var(--font-sans);
    font-size: 14px;  /* SP */
    font-weight: 400;
    line-height: 30px;
    color: var(--color-text-subtle);
    margin: 0;
}

/* ---- 共通タグ ---- */
.p-archive__tag {
    display: inline-block;
    background-color: var(--color-bg-subtle);
    color: var(--color-text-heading);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-weight: 400;
    text-decoration: none;
    font-feature-settings: "palt" 1;
    /* SP サイズ */
    padding: 0 6px;
    font-size: 11px;
}

.p-archive__card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}

/* ---- 3b. グリッドカード ---- */
.p-archive__grid {
    display: flex;
    flex-direction: column; /* SP: 1カラム */
    gap: 16px;
}

.p-archive__card {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative; /* タイトルの stretched link の位置基準 */
}

.p-archive__card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ピックアップカードと同様、タグのタームリンクと共存させるため
   カード全体のリンクはタイトルリンクの疑似要素で担保する */
.p-archive__card-title-link {
    color: inherit;
    text-decoration: none;
}

.p-archive__card-title-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* タグリンクは stretched link より前面に出して個別にクリックできるようにする */
.p-archive__card-body .p-archive__card-tags {
    position: relative;
    z-index: 2;
}

.p-archive__card-img {
    width: 100%;
    height: 200px;  /* SP */
    overflow: hidden;
}

.p-archive__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.p-archive__card-body {
    padding: var(--space-xs); /* SP: 16px */
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: var(--space-xs);
}

.p-archive__card-title {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    color: var(--color-text-default);
    font-feature-settings: "palt" 1;
    margin: 0;
}

.p-archive__card-date {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    color: var(--color-text-subtle);
    margin: 0;
}

/* ---- 3c. 「もっと見る」ボタン ---- */
.p-archive__loadmore-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.p-archive__loadmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 48px;
    border-radius: 999px;
    text-decoration: none;
}

/* 「前のページ」ボタン：戻り導線は「もっと見る」より控えめな外枠スタイルにする */
.p-archive__loadmore-btn--prev {
    border: 1px solid var(--color-text-heading);
}

.p-archive__loadmore-btn--prev .p-archive__loadmore-text {
    color: var(--color-text-heading);
}

.p-archive__loadmore-icon.p-archive__loadmore-icon--prev {
    background-color: transparent;
    color: var(--color-text-heading);
    transform: none;
}

.p-archive__loadmore-text {
    font-family: var(--font-sans);
    font-size: 16px;   /* SP */
    font-weight: 700;
    color: var(--color-text-default);
}

.p-archive__loadmore-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;  /* SP */
    height: 24px;
    border-radius: 999px;
    background-color: var(--color-text-heading); /* SP: #00818f */
    flex-shrink: 0;
    /* 下向き矢印にするためSVGを90度回転 */
    transform: rotate(90deg);
}

/* 記事なし */
.p-archive__empty {
    text-align: center;
    padding: var(--space-3xl);
    color: var(--color-text-subtle);
    font-family: var(--font-sans);
}

/* ============================================================
   ④ キーワードセクション
   ============================================================ */
.p-archive__keywords {
    background-color: var(--color-bg-default);
    padding-block: var(--space-2xl) var(--space-3xl); /* SP: 48px / 64px */
}

.p-archive__keywords-inner {
    max-width: 960px;
    margin-inline: auto;
    padding-inline: var(--space-lg); /* 32px */
}

.p-archive__keywords-heading {
    font-family: var(--font-sans);
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 1.25px;
    color: var(--color-text-default);
    text-align: center;
    font-feature-settings: "palt" 1;
    margin: 0 0 var(--space-lg);
}

.p-archive__keyword-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px; /* SP */
}

.p-archive__keyword-tag {
    display: inline-block;
    background-color: var(--color-bg-subtle);
    color: var(--color-text-heading);
    border: 0.5px solid var(--color-text-heading);
    border-radius: 999px;
    padding: 6px 16px; /* SP */
    font-family: var(--font-sans);
    font-size: 15px;   /* SP */
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
    font-feature-settings: "palt" 1;
    transition: opacity 0.2s;
}

.p-archive__keyword-tag:hover {
    opacity: 0.7;
}

/* ============================================================
   PC（1280px〜）
   ============================================================ */
@media (min-width: 1280px) {

    /* ページタイトル */
    .p-archive__head {
        padding-top: var(--space-4xl); /* PC: 80px */
        padding-bottom: var(--space-3xl); /* 64px gap */
    }

    .p-archive__head-inner {
        padding-inline: 0;
    }

    .p-archive__head-title {
        font-size: 40px;
        line-height: 56px;
    }

    .p-archive__head-sub {
        display: inline-block;
        width: auto;
        max-width: min(760px, calc(100vw - 40px));
        font-size: 22px;
        line-height: 1.8;
        margin-inline: auto;
    }

    .p-archive__head-en {
        font-size: 16px;
    }

    /* 一覧 */
    .p-archive__list {
        padding-bottom: var(--space-5xl); /* PC: 120px */
    }

    .p-archive__list-inner {
        padding-inline: 0;
        gap: var(--space-lg); /* PC: 32px */
    }

    /* ピックアップカード PC：横並び */
    .p-archive__pickup-card-link {
        flex-direction: row;
        /* タイトルが複数行になっても本文がカード上下端に張り付かないよう伸縮させる */
        align-items: stretch;
        gap: var(--space-2xl); /* 48px */
    }

    .p-archive__pickup-img {
        flex: 1;
        position: relative;
        height: auto;
        min-height: 360px; /* 基準360px。本文がこれより高い場合のみ追従して伸びる */
        border-radius: var(--radius-md) 0 0 var(--radius-md);
    }

    /* 画像を絶対配置にして、コンテナ高さを写真の縦横比に左右されないようにする */
    .p-archive__pickup-img img {
        position: absolute;
        inset: 0;
    }

    .p-archive__pickup-body {
        flex: 1;
        min-width: 0; /* 折り返せない長い文字列で画像側が潰れるのを防ぐ */
        /* 上下32px：本文が短いときは中央寄せ、長いときも余白を確保する */
        padding: var(--space-lg) var(--space-2xl) var(--space-lg) 0;
        justify-content: center;
        gap: var(--space-sm); /* 20px：大サムネはタイトル28pxのため3カラムより広く取る */
    }

    /* gap で間隔を取るため、ピックアップ内のタグ下マージンは相殺する */
    .p-archive__pickup-body .p-archive__card-tags {
        margin-bottom: 0;
    }

    .p-archive__pickup-title {
        font-size: 28px;
        line-height: 40px;
    }

    .p-archive__pickup-date {
        font-size: 16px;
    }

    /* タグ（ピックアップ） */
    .p-archive__tag {
        padding: 2px 12px;
        font-size: 14px;
    }

    /* グリッドカード PC：3カラム */
    .p-archive__grid {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-lg); /* 32px */
    }

    .p-archive__card {
        flex: 1 1 calc(33.333% - var(--space-lg));
        max-width: calc(33.333% - var(--space-lg));
    }

    .p-archive__card-img {
        height: 240px;
    }

    .p-archive__card-body {
        padding-inline: var(--space-md); /* PC: 24px */
        padding-bottom: var(--space-md);
        gap: 12px;
    }

    .p-archive__card-title {
        font-size: 20px;
    }

    .p-archive__card-date {
        font-size: 16px;
    }

    /* 「もっと見る」ボタン PC */
    .p-archive__loadmore-text {
        font-size: 20px;
    }

    .p-archive__loadmore-icon {
        width: 32px;
        height: 32px;
        background-color: var(--color-text-accent); /* PC: #00a1b3（Figmaで要確認） */
    }

    /* キーワード */
    .p-archive__keywords {
        padding-block: var(--space-4xl) var(--space-5xl); /* PC: 80px / 120px */
    }

    .p-archive__keywords-inner {
        padding-inline: 0;
    }

    .p-archive__keyword-list {
        gap: 16px 24px;
    }

    .p-archive__keyword-tag {
        padding: 12px 24px;
        font-size: 20px;
    }

} /* end @media PC */

/* ============================================================
   施設系・イベント・キャンペーン・ガイド 共通カード拡張
   ============================================================ */

/* カードに説明文 */
.p-archive__card-desc {
    font-family: var(--font-sans);
    font-size: 14px;  /* SP */
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-subtle);
    margin: 0;
    font-feature-settings: "palt" 1;
    /* 3行クランプ */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 会場・提供元テキスト */
.p-archive__card-venue,
.p-archive__card-provider {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-text-subtle);
    margin: 0;
}

/* ============================================================
   spot / hotel / event / campaign / guide グリッドカード
   ============================================================ */

/* SP: 1カラム */
.p-archive__grid--spot,
.p-archive__grid--hotel,
.p-archive__grid--event,
.p-archive__grid--campaign {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.p-archive__card--facility {
    background-color: var(--color-bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* ============================================================
   guide 一覧：Check Point 風 導線カード（.p-guide-archive）
   guide 専用クラス。他アーカイブ（spot/hotel/event/campaign）には影響しない。
   背景は親の .p-archive__list（淡い水色）を維持し、カードのみ白で配置。
   ============================================================ */
.p-guide-archive__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* SP: 2カラム */
    gap: var(--space-xs); /* 16px */
}

.p-guide-archive__card {
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    padding: var(--space-lg) var(--space-md);
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.p-guide-archive__card:hover {
    transform: translateY(-3px);
    opacity: 0.92;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.p-guide-archive__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--color-bg-default);
    color: var(--color-text-heading);
    flex-shrink: 0;
    overflow: hidden;
}

.p-guide-archive__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-guide-archive__label {
    display: inline-block;
    background: var(--color-bg-subtle);
    color: var(--color-text-heading);
    border-radius: 999px;
    padding: 2px 12px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
}

.p-guide-archive__title {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-text-heading);
    margin: 0;
    font-feature-settings: "palt" 1;
}

.p-guide-archive__description {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-text-subtle);
    margin: 0;
    font-feature-settings: "palt" 1;
}

/* さらに狭い画面（〜359px）では1カラム */
@media (max-width: 359px) {
    .p-guide-archive__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   news リスト型
   ============================================================ */
.p-archive__news-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: var(--color-bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.p-archive__news-item {
    border-bottom: 1px solid var(--color-border-default);
}

.p-archive__news-item:last-child {
    border-bottom: none;
}

.p-archive__news-link {
    display: flex;
    flex-direction: column; /* SP: 縦積み */
    gap: 4px;
    padding: 16px var(--space-xs);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s;
}

.p-archive__news-link:hover {
    background-color: var(--color-bg-default);
}

.p-archive__news-date {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-subtle);
    flex-shrink: 0;
    font-feature-settings: "pwid" 1;
}

.p-archive__news-cat {
    display: inline-block;
    background-color: var(--color-bg-subtle);
    color: var(--color-text-heading);
    border-radius: 999px;
    padding: 0 8px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}

.p-archive__news-title {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    color: var(--color-text-default);
    font-feature-settings: "palt" 1;
}

/* ============================================================
   PC 拡張
   ============================================================ */
@media (min-width: 1280px) {

    /* 施設系・event・campaign: 3カラム */
    .p-archive__grid--spot,
    .p-archive__grid--hotel,
    .p-archive__grid--event,
    .p-archive__grid--campaign {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-lg);
    }

    .p-archive__grid--spot .p-archive__card--facility,
    .p-archive__grid--hotel .p-archive__card--facility,
    .p-archive__grid--event .p-archive__card--facility,
    .p-archive__grid--campaign .p-archive__card--facility {
        flex: 1 1 calc(33.333% - var(--space-lg));
        max-width: calc(33.333% - var(--space-lg));
    }

    /* guide（Check Point 風カード）: 4カラム PC */
    .p-guide-archive__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-lg);
    }

    .p-guide-archive__card {
        min-height: 200px;
        padding: var(--space-xl) var(--space-md);
    }

    /* カード画像高さ */
    .p-archive__card--facility .p-archive__card-img {
        height: 220px;
    }

    .p-archive__card--facility .p-archive__card-body {
        padding-inline: var(--space-md);
        padding-bottom: var(--space-md);
        gap: 8px;
    }

    .p-archive__card-desc {
        font-size: 15px;
    }

    /* news: PC 横並び */
    .p-archive__news-link {
        flex-direction: row;
        align-items: center;
        gap: var(--space-md);
        padding: 20px var(--space-md);
    }

    .p-archive__news-date {
        font-size: 14px;
        min-width: 90px;
    }

    .p-archive__news-title {
        font-size: 16px;
    }

} /* end @media PC 拡張 */

/* ============================================================
   spot 一覧：写真中心カードUI（/spot/ 専用）
   他アーカイブ（article/hotel/event/campaign/guide/news）には影響しない。
   背景は親の .p-archive__list（淡い水色）を維持し、カードのみ白で配置。
   ============================================================ */

/* spot文脈の一覧ページ（/spot/・/spot/?theme=・?island=・/theme/{slug}/）の背景統一。
   $current_pt='spot' のとき <main> に付与される .p-archive--spot を唯一のフックにする。
   これにより spot 投稿タイプアーカイブも theme タクソノミーアーカイブも同一ルールで
   淡い水色に揃い、見出し〜フィルター〜カード一覧が白帯・白線で分断されない。
   article/hotel/event/campaign/guide/news/island/facility は p-archive--spot が付かない
   ため一切影響しない。 */
.p-archive--spot {
    background-color: var(--color-bg-default);
}

/* spot文脈ではフィルターを包む横帯（白背景・影・罫線）を出さない（ボタン自体は白でOK） */
.p-archive--spot .p-spot-filter {
    background: transparent;
    box-shadow: none;
    border: 0;
}

/* ---- 島・カテゴリ リンク式フィルター（ピル型・SP折り返し） ---- */
.p-spot-filter {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0 0 var(--space-lg);
    padding: 0;
}

.p-spot-filter__list {
    list-style: none;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-xs);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.p-spot-filter__item {
    margin: 0;
}

.p-spot-filter__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 8px 18px;
    background: var(--color-bg-card);
    border: 1px solid rgba(0, 161, 179, 0.24);
    color: var(--color-text-heading);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.p-spot-filter__link:hover {
    background: var(--color-bg-subtle);
}

.p-spot-filter__link.is-active {
    background: var(--color-text-accent);
    color: #fff;
    border-color: var(--color-text-accent);
}

@media (max-width: 767px) {
    .p-spot-filter__link {
        padding: 6px 14px;
        font-size: 13px;
    }
}

/* ---- 2段フィルター（1段目=カテゴリ / 2段目=島）----
   背景透明のままページ背景の淡い水色と一体化させ、白帯を出さない。
   各段とも中央揃え。段を分断する横罫線は出さず、わずかな余白のみで繋げる。 */
.p-spot-filter--2row {
    display: flex;
    flex-direction: column;
    align-items: center;   /* 段全体を中央に揃える */
    gap: 10px;
}

/* 既存 .p-spot-filter__list の margin-inline:auto / justify-content:center を維持し、
   各段のボタン群を中央揃えにする（width:100% で中央基準を安定させる） */
.p-spot-filter--2row .p-spot-filter__list {
    width: 100%;
    margin-inline: auto;
}

/* 島段：罫線なし。わずかな上余白のみで主従を付け、ピルは少し小さめ */
.p-spot-filter__list--island {
    padding-top: 4px;
}

.p-spot-filter__list--island .p-spot-filter__link {
    padding: 6px 16px;
    font-size: 13px;
}

@media (max-width: 767px) {
    .p-spot-filter--2row {
        gap: 8px;
    }
    .p-spot-filter__list--island .p-spot-filter__link {
        padding: 5px 13px;
        font-size: 12px;
    }
}

/* ---- カードグリッド ----
   auto-fit + minmax + 中央寄せで、1件でもカードが横長巨大にならず、
   PCでも左に寄りすぎない。SPは画面幅に応じて1〜2列、PCは3〜4列に自動調整。
   カード最大幅は360pxで固定し、画像比率4:3でカード高さが揃う。 */
.p-spot-archive__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 360px));
    justify-content: center;
    gap: var(--space-md); /* 24px */
}

.p-spot-archive__card {
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.p-spot-archive__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.p-spot-archive__card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* 画像比率を 4:3 で統一（カード高さが揃う） */
.p-spot-archive__card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-bg-default);
}

.p-spot-archive__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.p-spot-archive__card:hover .p-spot-archive__card-img img {
    transform: scale(1.05);
}

/* 画像なし時のフォールバック（崩れ防止） */
.p-spot-archive__card-noimg {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-bg-subtle);
}

.p-spot-archive__card-body {
    padding: 12px var(--space-xs) var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.p-spot-archive__card-title {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-text-default);
    font-feature-settings: "palt" 1;
    margin: 0;
}

.p-spot-archive__card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.p-spot-archive__card-tag {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text-heading);
    background: var(--color-bg-subtle);
    border-radius: 999px;
    padding: 1px 10px;
}

/* PC（1280px〜）: 余白を広げ写真を大きく見せる */
@media (min-width: 1280px) {
    .p-spot-archive__grid {
        gap: var(--space-lg); /* 32px */
    }

    .p-spot-archive__card-body {
        padding: var(--space-xs) var(--space-md) var(--space-md);
    }

    .p-spot-archive__card-title {
        font-size: 18px;
    }
}

/* ============================================================
   狭幅PC / タブレット横（1024〜1279px）中間レイアウト
   目的：ベース(SP)が1279pxまで全適用され、article / hotel / event /
        campaign 一覧が1カラム巨大表示になる問題を是正する。
   非干渉：PC(min-width:1280px) と SP(〜1023px) は変更しない。
   対象：plain .p-archive__grid を使う article（grid）と
        hotel/event/campaign（grid + --modifier）を一括で2カラム化。
   非対象：spot系（.p-spot-archive__grid は auto-fit で既に可変。
        通常spot・テーマ絞り込み・島絞り込みのspot文脈は触らない）／
        guide（.p-guide-archive__grid は base 2カラムで適正）／
        ピックアップカード・フィルター・見出しは非変更。
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {

    /* article / hotel / event / campaign：1カラム→2カラム
       （いずれも plain .p-archive__grid を持つ。spot/guide は別クラスのため非対象） */
    .p-archive__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg); /* 32px */
    }
}