/**
 * Single Clinic - Treatment List Accordion
 * 施術リストアコーディオン（single-clinic.php専用）
 */

/* ========================================
   施術リスト
   ======================================== */

:where(.c-single-clinic-001__treatment-list) {
    padding: var(--wp--preset--spacing--lg);
}

:where(.c-single-clinic-001__treatment-heading) {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--sm);
    margin: 0 0 var(--wp--preset--spacing--xl) 0;
    font-size: var(--wp--preset--font-size--3-xl);
    font-weight: var(--wp--custom--font-weight--bold);
    color: var(--wp--preset--color--gray-darkest);
}

:where(.c-single-clinic-001__treatment-heading .material-symbols-outlined) {
    font-size: 3.2rem;
    color: var(--wp--preset--color--primary);
}

:where(.c-single-clinic-001__treatment-category) {
    margin-bottom: var(--wp--preset--spacing--base);
    border: var(--wp--custom--border--width--1) solid var(--wp--preset--color--gray-light);
    border-radius: var(--wp--custom--border--radius--md);
    overflow: hidden;
}

:where(.c-single-clinic-001__treatment-toggle) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--wp--preset--spacing--base) var(--wp--preset--spacing--lg);
    background: var(--wp--preset--color--gray-lightest);
    border: none;
    cursor: pointer;
    font-size: var(--wp--preset--font-size--lg);
    text-align: left;
    transition: all var(--wp--custom--transition--duration--base) var(--wp--custom--transition--timing--ease);
}

:where(.c-single-clinic-001__treatment-toggle):hover {
    background: var(--wp--preset--color--primary-lightest);
}

:where(.c-single-clinic-001__treatment-toggle[aria-expanded="true"]) {
    background: var(--wp--preset--color--primary-lightest);
    border-bottom: var(--wp--custom--border--width--1) solid var(--wp--preset--color--gray-light);
}

:where(.c-single-clinic-001__treatment-category-name) {
    font-weight: var(--wp--custom--font-weight--bold);
    color: var(--wp--preset--color--gray-darkest);
    flex: 1;
}

:where(.c-single-clinic-001__treatment-count) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 var(--wp--preset--spacing--xs);
    margin-left: var(--wp--preset--spacing--base);
    margin-right: var(--wp--preset--spacing--base);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: var(--wp--custom--font-weight--bold);
    color: var(--wp--preset--color--white);
    background: var(--wp--preset--color--primary);
    border-radius: var(--wp--custom--border--radius--circle);
}

:where(.c-single-clinic-001__treatment-icon) {
    font-size: 2.4rem;
    color: var(--wp--preset--color--gray-dark);
    transition: transform var(--wp--custom--transition--duration--base) var(--wp--custom--transition--timing--ease);
}

:where(.c-single-clinic-001__treatment-toggle[aria-expanded="true"]) :where(.c-single-clinic-001__treatment-icon) {
    transform: rotate(180deg);
}

:where(.c-single-clinic-001__treatment-items) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--wp--preset--spacing--sm);
    padding: var(--wp--preset--spacing--lg);
    background: var(--wp--preset--color--white);
}

:where(.c-single-clinic-001__treatment-items[hidden]) {
    display: none;
}

:where(.c-single-clinic-001__treatment-item) {
    display: block;
    padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--base);
    font-size: var(--wp--preset--font-size--base);
    color: var(--wp--preset--color--primary-dark);
    background: var(--wp--preset--color--primary-lightest);
    border: var(--wp--custom--border--width--1) solid var(--wp--preset--color--primary-lighter);
    border-radius: var(--wp--custom--border--radius--sm);
    text-decoration: none;
    text-align: center;
    transition: all var(--wp--custom--transition--duration--base) var(--wp--custom--transition--timing--ease);
}

:where(.c-single-clinic-001__treatment-item):hover {
    background: var(--wp--preset--color--primary-light);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary-darker);
    transform: translateY(-2px);
    box-shadow: var(--wp--custom--shadow--sm);
}

:where(.c-single-clinic-001__treatment-item--no-link) {
    color: var(--wp--preset--color--gray-dark);
    background: var(--wp--preset--color--gray-lightest);
    border-color: var(--wp--preset--color--gray-light);
    cursor: default;
}

:where(.c-single-clinic-001__treatment-item--no-link):hover {
    background: var(--wp--preset--color--gray-lightest);
    border-color: var(--wp--preset--color--gray-light);
    color: var(--wp--preset--color--gray-dark);
    transform: none;
    box-shadow: none;
}

/* ========================================
   レスポンシブ
   ======================================== */

@media (max-width: 768px) {
    :where(.c-single-clinic-001__treatment-list) {
        padding: var(--wp--preset--spacing--base);
    }

    :where(.c-single-clinic-001__treatment-heading) {
        font-size: var(--wp--preset--font-size--2-xl);
        margin-bottom: var(--wp--preset--spacing--lg);
    }

    :where(.c-single-clinic-001__treatment-heading .material-symbols-outlined) {
        font-size: 2.4rem;
    }

    :where(.c-single-clinic-001__treatment-toggle) {
        padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--base);
        font-size: var(--wp--preset--font-size--base);
    }

    :where(.c-single-clinic-001__treatment-items) {
        grid-template-columns: 1fr;
        padding: var(--wp--preset--spacing--base);
    }
}