/**
 * Section: product-circle-repeater
 *
 * Extracted from template-parts/product_circle_repeater.php.
 * Loaded via trunorth_enqueue_section('product-circle-repeater').
 */

.pcr-wrap {
        padding: calc(var(--vw) * 5) calc(var(--vw) * 6);
        background-color: #ffffff;
        font-family: 'Montserrat', sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: calc(var(--vw) * 60);

        /* --- Intro block --- */
        .pcr-intro {
            width: 60%;
            text-align: left;
            margin-bottom: calc(var(--vw) * 4);
        }

        .pcr-heading {
            font-size: clamp(1.75rem, calc(var(--vw) * 3), calc(var(--vw) * 3));
            font-weight: 400;
            color: #C22127;
            line-height: 1.2;
            margin: 0 0 calc(var(--vw) * 1.25);
        }

        .pcr-description {
            font-size: var(--font-body);
            font-weight: 400;
            color: #333333;
            line-height: 1.2;
            margin: 0;
        }

        /* --- Product grid --- */
        .pcr-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            width: 100%;
        }

        .pcr-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(var(--vw) * 1);
        }

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

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

        .pcr-placeholder {
            font-size: clamp(1rem, calc(var(--vw) * 1.5), calc(var(--vw) * 1.5));
            font-weight: 600;
            color: #6F6F6F;
        }

        .pcr-name {
            font-size: var(--font-body);
            font-weight: 400;
            color: #C22127;
            line-height: 1.3;
            margin-bottom: calc(var(--vw) * 1.5);
        }

        .pcr-text {
            padding: calc(var(--vw) * 1) calc(var(--vw) * 2);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            gap: calc(var(--vw) * 1);
            text-align: center;
            flex: 1;
            width: 100%;
        }

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

        @media (max-width: 768px) {
            .pcr-intro {
                width: 100%;
                margin-bottom: calc(var(--vw) * 6);
            }

            .pcr-heading {
                font-size: clamp(1.5rem, calc(var(--vw) * 6), calc(var(--vw) * 6));
            }

            .pcr-description {
                font-size: clamp(0.9rem, calc(var(--vw) * 3.5), calc(var(--vw) * 3.5));
            }

            .pcr-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: calc(var(--vw) * 6) calc(var(--vw) * 4);
            }

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

            .pcr-name {
                font-size: clamp(0.85rem, calc(var(--vw) * 3.5), calc(var(--vw) * 3.5));
            }

            .pcr-card-description {
                font-size: clamp(0.8rem, calc(var(--vw) * 3), calc(var(--vw) * 3));
            }
        }
    }