/**
 * Treatment Card Component
 * 施術カードコンポーネント
 *
 * Usage: loop-card-treatment.php
 */

:where(.c-card-treatment-001) {
    display: block;
    background: var(--wp--preset--color--white);
    border-radius: var(--wp--custom--border--radius--md);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

:where(.c-card-treatment-001):hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

:where(.c-card-treatment-001__link) {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* サムネイル */
:where(.c-card-treatment-001__thumbnail) {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    overflow: hidden;
    background: var(--wp--preset--color--gray-100);
}

:where(.c-card-treatment-001__thumbnail img) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

:where(.c-card-treatment-001):hover :where(.c-card-treatment-001__thumbnail img) {
    transform: scale(1.05);
}

/* コンテンツ */
:where(.c-card-treatment-001__content) {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--base);
    padding: var(--wp--preset--spacing--lg);
    flex: 1;
}

/* キャッチコピー */
:where(.c-card-treatment-001__catchcopy) {
    margin: 0;
    font-size: var(--wp--preset--font-size--sm);
    font-weight: var(--wp--custom--font-weight--semibold);
    color: var(--wp--preset--color--primary);
    line-height: var(--wp--custom--line-height--sm);
    letter-spacing: var(--wp--custom--letter-spacing--xs);
}

/* タイトル */
:where(.c-card-treatment-001__title) {
    margin: 0;
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 700;
    line-height: var(--wp--custom--line-height--sm);
    color: var(--wp--preset--color--gray-darkest);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* バッジ */
:where(.c-card-treatment-001__badges) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--xs);
}

:where(.c-card-treatment-001__badge) {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--4-xs);
    padding: var(--wp--preset--spacing--4-xs) var(--wp--preset--spacing--sm);
    border-radius: var(--wp--custom--border--radius--full);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: var(--wp--custom--font-weight--medium);
    background: var(--wp--preset--color--gray-lightest);
    color: var(--wp--preset--color--gray-dark);
}

:where(.c-card-treatment-001__badge--nayami) {
    background: var(--wp--preset--color--info-lightest);
    color: var(--wp--preset--color--info-dark);
    border: var(--wp--custom--border--width--1) solid var(--wp--preset--color--info-light);
}

/* 概要 */
:where(.c-card-treatment-001__summary) {
    margin: 0;
    font-size: var(--wp--preset--font-size--sm);
    line-height: var(--wp--custom--line-height--base);
    color: var(--wp--preset--color--gray-dark);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* 機器名・承認情報 */
:where(.c-card-treatment-001__device) {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--xs);
    padding: var(--wp--preset--spacing--sm);
    background: var(--wp--preset--color--gray-lightest);
    border-radius: var(--wp--custom--border--radius--sm);
    font-size: var(--wp--preset--font-size--sm);
}

:where(.c-card-treatment-001__device-name),
:where(.c-card-treatment-001__approval) {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--4-xs);
    color: var(--wp--preset--color--gray-dark);
}

:where(.c-card-treatment-001__device-name .material-symbols-outlined),
:where(.c-card-treatment-001__approval .material-symbols-outlined) {
    font-size: 1.8rem;
    color: var(--wp--preset--color--primary);
}

/* メタ情報 */
:where(.c-card-treatment-001__meta) {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--base);
    margin-top: auto;
    padding-top: var(--wp--preset--spacing--base);
    border-top: var(--wp--custom--border--width--1) solid var(--wp--preset--color--gray-lighter);
}

/* 価格表示 */
:where(.c-card-treatment-001__price) {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--sm);
    padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--base);
    background: var(--wp--preset--color--primary-lightest);
    border-radius: var(--wp--custom--border--radius--sm);
}

:where(.c-card-treatment-001__price-label) {
    font-size: var(--wp--preset--font-size--sm);
    font-weight: var(--wp--custom--font-weight--semibold);
    color: var(--wp--preset--color--primary-dark);
}

:where(.c-card-treatment-001__price-amount) {
    display: flex;
    align-items: baseline;
    gap: var(--wp--preset--spacing--4-xs);
    font-size: var(--wp--preset--font-size--xl);
    font-weight: var(--wp--custom--font-weight--bold);
    color: var(--wp--preset--color--primary);
}

:where(.c-card-treatment-001__price-unit) {
    font-size: var(--wp--preset--font-size--sm);
    font-weight: var(--wp--custom--font-weight--normal);
    color: var(--wp--preset--color--gray-dark);
}

:where(.c-card-treatment-001__price-suffix) {
    font-size: var(--wp--preset--font-size--sm);
    font-weight: var(--wp--custom--font-weight--normal);
    color: var(--wp--preset--color--gray-dark);
}

/* メタ情報行 */
:where(.c-card-treatment-001__meta-row) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--sm);
}

:where(.c-card-treatment-001__meta-item) {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--4-xs);
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--gray-dark);
}

:where(.c-card-treatment-001__meta-item .material-symbols-outlined) {
    font-size: 1.8rem;
    color: var(--wp--preset--color--primary);
}

/* レスポンシブ */
@media (max-width: 768px) {
    :where(.c-card-treatment-001__content) {
        padding: var(--wp--preset--spacing--base);
        gap: var(--wp--preset--spacing--sm);
    }

    :where(.c-card-treatment-001__catchcopy) {
        font-size: var(--wp--preset--font-size--sm);
    }

    :where(.c-card-treatment-001__title) {
        font-size: var(--wp--preset--font-size--base);
    }

    :where(.c-card-treatment-001__badge) {
        font-size: var(--wp--preset--font-size--sm);
    }

    :where(.c-card-treatment-001__summary) {
        font-size: var(--wp--preset--font-size--sm);
    }

    :where(.c-card-treatment-001__device) {
        font-size: var(--wp--preset--font-size--sm);
    }

    :where(.c-card-treatment-001__price-amount) {
        font-size: var(--wp--preset--font-size--lg);
    }

    :where(.c-card-treatment-001__meta-item) {
        font-size: var(--wp--preset--font-size--sm);
    }

    :where(.c-card-treatment-001__meta-item .material-symbols-outlined) {
        font-size: 1.6rem;
    }
}