/**
 * Section: contact-cards-grid
 *
 * Extracted from template-parts/contact_cards_grid.php.
 * Loaded via trunorth_enqueue_section('contact-cards-grid').
 */

.ccg-wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        background-color: #EDEDED;
        font-family: 'Montserrat', sans-serif;
        padding: calc(var(--vw) * 3) calc(var(--vw) * 10);

        /* --- Card --- */
        .ccg-card {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: calc(var(--vw) * 0.75);
            padding: calc(var(--vw) * 1.5) calc(var(--vw) * 3);
        }

        /* --- Main card icon --- */
        .ccg-card-icon-wrap {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-bottom: calc(var(--vw) * 2);
        }

        .ccg-card-icon {
            width: calc(var(--vw) * 6);
            height: calc(var(--vw) * 6);
            object-fit: contain;
        }

        .ccg-card-icon-placeholder {
            width: calc(var(--vw) * 6);
            height: calc(var(--vw) * 6);
            border-radius: 50%;
            background-color: #D9D9D9;
        }

        /* --- Description --- */
        .ccg-desc {
            font-size: clamp(0.85rem, calc(var(--vw) * 1), calc(var(--vw) * 1));
            font-weight: 400;
            color: #333333;
            line-height: 1.2;
            margin: 0;
        }

        /* --- Contact rows --- */
        .ccg-contact-rows {
            display: flex;
            flex-direction: column;
            gap: calc(var(--vw) * 0.6);
            margin-top: calc(var(--vw) * 0.5);
        }

        .ccg-contact-link {
            display: flex;
            align-items: center;
            gap: calc(var(--vw) * 0.75);
            text-decoration: none;
            color: #333333;
            font-size: clamp(0.85rem, calc(var(--vw) * 1), calc(var(--vw) * 1));
            font-weight: 400;
            transition: color 0.2s ease;

            &:hover {
                color: #C22127;
            }
        }

        .ccg-contact-icon {
            width: calc(var(--vw) * 3);
            height: calc(var(--vw) * 3);
            object-fit: contain;
            flex-shrink: 0;
        }

        .ccg-contact-icon-placeholder {
            width: calc(var(--vw) * 3);
            height: calc(var(--vw) * 3);
            min-width: calc(var(--vw) * 3);
            border-radius: 50%;
            background-color: #D9D9D9;
            flex-shrink: 0;
        }

        /* --- Mobile --- */
        @media (max-width: 768px) {
            & {
                grid-template-columns: 1fr;
            }

            .ccg-card {
                gap: calc(var(--vw) * 4);
                padding: calc(var(--vw) * 8) calc(var(--vw) * 6);
            }

            .ccg-card-icon,
            .ccg-card-icon-placeholder {
                width: calc(var(--vw) * 20);
                height: calc(var(--vw) * 20);
            }

            .ccg-desc,
            .ccg-contact-link {
                font-size: clamp(0.9rem, calc(var(--vw) * 3.5), calc(var(--vw) * 3.5));
            }

            .ccg-contact-rows {
                gap: calc(var(--vw) * 3);
            }

            .ccg-contact-icon,
            .ccg-contact-icon-placeholder {
                width: calc(var(--vw) * 5);
                height: calc(var(--vw) * 5);
                min-width: calc(var(--vw) * 5);
            }
        }
    }