/**
 * Component: Single Content
 * Single page main content - unified card based design
 * 統一カードデザインベースのシングルページメインコンテンツ
 */

/* Hero Section */
:where(.c-single-content-001__hero) {
    background: var(--wp--preset--color--white);
    padding: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--lg);
}

:where(.c-single-content-001__hero-inner) {
    max-width: var(--wp--style--global--wide-size);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--wp--preset--spacing--3-xl);
    align-items: start;
}

/* Thumbnail */
:where(.c-single-content-001__thumbnail) {
    aspect-ratio: 16 / 9;
    border-radius: var(--wp--custom--border--radius--lg);
    overflow: hidden;
    background: var(--wp--preset--color--gray-lightest);
}

:where(.c-single-content-001__thumbnail img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(.c-single-content-001__favorite) {
    margin-left: auto;
    margin-bottom: var(--wp--preset--spacing--base);
}

/* Header Section */
:where(.c-single-content-001__header) {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--lg);
}

/* Type Label with Color Variations */
:where(.c-single-content-001__type-label) {
    display: inline-flex;
    align-items: center;
    padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--base);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: var(--wp--custom--font-weight--bold);
    border-radius: var(--wp--custom--border--radius--full);
    width: fit-content;
}

/* Treatment - Primary (Pink) */
:where(.c-single-content-001[data-post-type="treatment"] .c-single-content-001__type-label) {
    background: var(--wp--preset--color--primary-lightest);
    color: var(--wp--preset--color--primary-dark);
}

/* Clinic - Tertiary (Gold) */
:where(.c-single-content-001[data-post-type="clinic"] .c-single-content-001__type-label) {
    background: var(--wp--preset--color--tertiary-lightest);
    color: var(--wp--preset--color--tertiary-dark);
}

/* Column - Success (Green) */
:where(.c-single-content-001[data-post-type="c-column"] .c-single-content-001__type-label) {
    background: var(--wp--preset--color--success-lightest);
    color: var(--wp--preset--color--success-dark);
}

/* Breadcrumb Tags */
:where(.c-single-content-001__breadcrumb-tags) {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--xs);
    flex-wrap: wrap;
}

:where(.c-single-content-001__breadcrumb-tag) {
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--gray-dark);
    padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
    background: var(--wp--preset--color--gray-lightest);
    border-radius: var(--wp--custom--border--radius--sm);
}

:where(.c-single-content-001__breadcrumb-separator) {
    font-size: 1.6rem;
    color: var(--wp--preset--color--gray);
}

/* Title */
:where(.c-single-content-001__title) {
    font-size: var(--wp--preset--font-size--3-xl);
    font-weight: var(--wp--custom--font-weight--bold);
    line-height: var(--wp--custom--line-height--sm);
    margin: 0;
}

/* Tags */
:where(.c-single-content-001__tags) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--sm);
}

:where(.c-single-content-001__tag) {
    display: inline-flex;
    align-items: center;
    padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--base);
    font-size: var(--wp--preset--font-size--sm);
    border-radius: var(--wp--custom--border--radius--full);
    border: var(--wp--custom--border--width--1) solid;
}

/* Treatment Tags - Primary */
:where(.c-single-content-001[data-post-type="treatment"] .c-single-content-001__tag) {
    background: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--primary-light);
    color: var(--wp--preset--color--primary-dark);
}

/* Clinic Tags - Tertiary */
:where(.c-single-content-001[data-post-type="clinic"] .c-single-content-001__tag) {
    background: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--tertiary-light);
    color: var(--wp--preset--color--tertiary-dark);
}

/* Column Tags - Success */
:where(.c-single-content-001[data-post-type="c-column"] .c-single-content-001__tag) {
    background: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--success-light);
    color: var(--wp--preset--color--success-dark);
}

/* Content Section */
:where(.c-single-content-001__content) {
    background: var(--wp--preset--color--white);
    padding: var(--wp--preset--spacing--3-xl) var(--wp--preset--spacing--lg);
}

:where(.c-single-content-001__content-inner) {
    max-width: var(--wp--style--global--content-size);
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 1024px) {
    :where(.c-single-content-001__hero-inner) {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--2-xl);
    }

    :where(.c-single-content-001__title) {
        font-size: var(--wp--preset--font-size--2-xl);
    }
}

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

    :where(.c-single-content-001__content) {
        padding: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--base);
    }

    :where(.c-single-content-001__title) {
        font-size: var(--wp--preset--font-size--xl);
    }

    :where(.c-single-content-001__favorite) {
        margin-bottom: var(--wp--preset--spacing--sm);
    }
}