/**
 * Section: triple-column-repeater-card-grid
 *
 * Extracted from template-parts/triple_column_repeater_card_grid.php.
 * Loaded via trunorth_enqueue_section('triple-column-repeater-card-grid').
 */

.card-grid-section {
        width: 100%;

        .card-grid {
            display: grid;
            width: 100%;
            grid-template-columns: repeat(3, minmax(0, calc(var(--vw) * 25)));
            gap: calc(var(--vw) * 2) calc(var(--vw) * 6);
            justify-content: space-between;
            padding: calc(var(--vw) * 2) calc(var(--vw) * 8);
            max-width: 1400px;
            margin: 0 auto;
        }

        .card-grid-item {
            text-decoration: none;
            color: inherit;
            display: block;

            &:hover .card-grid-item-image {
                transform: scale(1.05);
            }

            p {
                text-align: center;
                margin-top: 1rem;
                /* Match the swatch-label style (Clay, Brookstone, etc.)
                   used elsewhere on the site — body size, weight 400,
                   inherited font so every under-image label reads the
                   same across every template. */
                font-family: inherit;
                font-size: var(--font-body);
                font-weight: 400;
                color: #4a4a4a;
                line-height: 1.25;
            }
        }

        .card-grid-item-image {
            transition: transform 0.3s ease;
            width: 100%;
            aspect-ratio: 3 / 3;
            background: #ddd;
            border-radius: 4px;
            overflow: hidden;

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

        .card-grid-description-wrap {
            display: flex;
            justify-content: center;
            padding: 0 calc(var(--vw) * 5) calc(var(--vw) * 1.5) calc(var(--vw) * 5);
        }

        .card-grid-description {
            /* Body-size, regular weight to sit as a caption under the image. */
            font-size: var(--font-body);
            font-weight: 400;
            color: #333;
            line-height: 1.3;
            text-align: center;
        }
    }