/* =========================================================
    Component: Feature Card (Magazine Style)
    File: assets/css/3_components/feature-card.css
========================================================= */

/* --- 1. Base (共通の土台) --- */
.c-featureArchiveCard {
    border-bottom: 1px solid #eee;
    padding: 16px 0;
}

.c-featureArchiveCard__item {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: stretch;
}

/* --- 2. Image Area --- */
.c-featureArchiveCard__img {
    flex: 0 0 130px; /* スマホデフォルト */
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
    background: #f7f7f7;
}

.c-featureArchiveCard__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- 3. Body Content --- */
.c-featureArchiveCard__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.c-featureArchiveCard__title {
    font-weight: 800;
    color: #111;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.c-featureArchiveCard__title a {
    text-decoration: none;
    color: inherit;
}

/* メタ情報（場所） */
.c-featureArchiveCard__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.c-stayCard__areaIcon {
    display: inline-block;
    background: url(https://wantrip.jp/wp-content/uploads/2026/03/icon-map-1.png) no-repeat center / contain;
    flex-shrink: 0;
}

.c-featureArchiveCard__pref,
.c-featureArchiveCard__area,
.c-featureArchiveCard__separator {
    display: inline-block;
    color: var(--wan-orange);
    font-weight: 700;
    text-decoration: none;
}

/* --- 4. Smartphone Adjustments (768px以下) --- */
@media screen and (max-width: 768px) {
    .c-featureArchiveCard__title {
        font-size: 12px;
        /* スマホは2行に制限して高さを揃える */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .c-featureArchiveCard__meta {
        gap: 6px;
    }

    .c-stayCard__areaIcon {
        width: 12px;
        height: 12px;
        margin-right: 2px;
    }

    .c-featureArchiveCard__pref,
    .c-featureArchiveCard__area,
    .c-featureArchiveCard__separator {
        font-size: 11px;
    }

    /* 日付を最下部に固定 */
    .c-featureArchiveCard__date {
        margin-top: auto;
        font-size: 10px;
        color: #999;
        padding-top: 4px;
    }

    .c-featureArchiveCard__tags,
    .c-featureArchiveCard__excerpt {
        display: none;
    }
}

/* --- 5. PC Adjustments (769px以上) --- */
@media screen and (min-width: 769px) {
    .c-featureArchiveCard {
        padding: 32px 0; /* PCは余白を広げてゆったり見せる */
    }

    .c-featureArchiveCard__item {
        gap: 32px; /* 画像と情報の距離を離す */
    }

    .c-featureArchiveCard__img {
        flex: 0 0 360px; /* PCは画像を大きく */
    }

    .c-featureArchiveCard__title {
        font-size: 24px; /* タイトルを力強く */
        margin-bottom: 12px;
    }

    /* PCでは場所と日付を横に並べて「情報の行」としてまとめる */
    .c-featureArchiveCard__meta {
        gap: 12px;
        margin-bottom: 8px;
    }

    .c-stayCard__areaIcon {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }

    .c-featureArchiveCard__pref,
    .c-featureArchiveCard__area,
    .c-featureArchiveCard__separator {
        font-size: 14px;
    }

    .c-featureArchiveCard__date {
        font-size: 14px;
        color: #666;
		margin-bottom: 8px;
    }

    /* タグのデザイン（マガジン風） */
    .c-featureArchiveCard__tags {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
    }

    .c-featureArchiveCard__tagItem {
        background: #f2f2f2;
        padding: 4px 12px;
        font-size: 12px;
        color: #666;
        border-radius: 4px;
    }

    /* 抜粋を3行までに制限 */
    .c-featureArchiveCard__excerpt {
        font-size: 15px;
        color: #444;
        line-height: 1.8;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}