/**
 * Section: team-circle-strip
 *
 * Extracted from template-parts/team_circle_strip.php.
 * Loaded via trunorth_enqueue_section('team-circle-strip').
 */

.tcs-wrap {
        padding: calc(var(--vw) * 4) calc(var(--vw) * 5);
        background-color: #ffffff;
        font-family: 'Open Sans', sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Reserved height only when actually showing people. When the
           people strip is absent (see :not() rule below) the section
           collapses to just intro + even top/bottom padding. */

        /* --- Intro block --- */
        .tcs-intro {
            width: 45%;
            text-align: left;
        }
        /* Only add spacing below the intro when people follow it */
        &:has(.tcs-strip) .tcs-intro {
            margin-bottom: calc(var(--vw) * 4);
        }
        &:has(.tcs-strip) {
            min-height: calc(var(--vw) * 33);
        }

        .tcs-heading {
            font-size: var(--font-h4);
            font-weight: 400;
            color: #C22127;
            letter-spacing: 0.05em;
            margin-bottom: calc(var(--vw) * 1.25);
        }

        .tcs-description {
            font-size: clamp(1rem, calc(var(--vw) * 1.25), calc(var(--vw) * 1.25));
            font-weight: 400;
            color: #333333;
            line-height: 1.2;
        }

        /* --- Circle strip --- */
        .tcs-strip {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: calc(var(--vw) * 1.5);
            width: 100%;
        }

        .tcs-person {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(var(--vw) * 0.5);
            text-align: center;
        }

        .tcs-circle {
            width: clamp(70px, calc(var(--vw) * 8.5), calc(var(--vw) * 8.5));
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            background-color: #D9D9D9;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;

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

        .tcs-placeholder {
            font-size: clamp(0.75rem, calc(var(--vw) * 1), calc(var(--vw) * 1));
            color: #666666;
            font-weight: 400;
        }

        .tcs-name {
            font-size: var(--font-body);
            font-weight: 400;
            color: #111111;
            text-align: center;
            margin: 0;
        }

        .tcs-role {
            font-size: clamp(0.7rem, calc(var(--vw) * 0.85), calc(var(--vw) * 0.85));
            font-weight: 400;
            color: #666666;
            text-align: center;
            margin: 0;
        }

        @media (max-width: 768px) {
            & {
                padding: calc(var(--vw) * 6) calc(var(--vw) * 5);
            }

            .tcs-intro {
                width: 100%;
                margin-bottom: calc(var(--vw) * 6);
            }

            .tcs-strip {
                gap: calc(var(--vw) * 5);
            }

            .tcs-circle {
                width: clamp(80px, calc(var(--vw) * 22), 130px);
            }
        }
    }