/**
 * Component: Single Related Content
 * Related content sections for single pages
 * シングルページの関連コンテンツセクション
 */

/* Related Section Base */
:where(.c-single-related-001) {
    padding: var(--wp--preset--spacing--3-xl) var(--wp--preset--spacing--lg);
}

:where(.c-single-related-001__inner) {
    max-width: var(--wp--style--global--wide-size);
    margin: 0 auto;
}

/* Title with Icon */
:where(.c-single-related-001__title) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--sm);
    font-size: var(--wp--preset--font-size--2-xl);
    font-weight: var(--wp--custom--font-weight--bold);
    text-align: center;
    margin: 0 0 var(--wp--preset--spacing--3-xl) 0;
}

:where(.c-single-related-001__title .material-symbols-outlined) {
    font-size: 3.2rem;
}

/* Color Variations based on Relation Type */

/* Treatment Relation - Primary (Pink) */
:where(.c-single-related-001[data-relation-type="treatment"]) {
    background: var(--wp--preset--color--primary-lightest);
}

:where(.c-single-related-001[data-relation-type="treatment"] .c-single-related-001__title) {
    color: var(--wp--preset--color--primary-dark);
}

:where(.c-single-related-001[data-relation-type="treatment"] .material-symbols-outlined) {
    color: var(--wp--preset--color--primary);
}

/* Clinic Relation - Tertiary (Gold) */
:where(.c-single-related-001[data-relation-type="clinic"]) {
    background: var(--wp--preset--color--tertiary-lightest);
}

:where(.c-single-related-001[data-relation-type="clinic"] .c-single-related-001__title) {
    color: var(--wp--preset--color--tertiary-dark);
}

:where(.c-single-related-001[data-relation-type="clinic"] .material-symbols-outlined) {
    color: var(--wp--preset--color--tertiary);
}

/* Column Relation - Success (Green) */
:where(.c-single-related-001[data-relation-type="column"]) {
    background: var(--wp--preset--color--success-lightest);
}

:where(.c-single-related-001[data-relation-type="column"] .c-single-related-001__title) {
    color: var(--wp--preset--color--success-dark);
}

:where(.c-single-related-001[data-relation-type="column"] .material-symbols-outlined) {
    color: var(--wp--preset--color--success);
}

/* Grid Layout */
:where(.c-single-related-001__grid) {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--2-xl);
}

/* Responsive */
@media (max-width: 768px) {
    :where(.c-single-related-001) {
        padding: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--base);
    }

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

    :where(.c-single-related-001__title .material-symbols-outlined) {
        font-size: 2.4rem;
    }

    :where(.c-single-related-001__grid) {
        gap: var(--wp--preset--spacing--lg);
    }
}