/**
 * Section: icon-link-grid
 *
 * Extracted from template-parts/icon_link_grid.php.
 * Loaded via trunorth_enqueue_section('icon-link-grid').
 */

.ILG-Section {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: calc(var(--vw) * 2) calc(var(--vw) * 5);
        font-family: "Open Sans", sans-serif;

        .ILG-Heading {
            font-size: var(--font-h3);
            font-weight: 600;
            margin-bottom: calc(var(--vw) * 2);
            text-align: center;

            * {
                font-size: inherit;
                font-weight: inherit;
            }
        }

        .ILG-Grid {
            display: grid;
            width: 100%;
            grid-template-columns: repeat(var(--ilg-col-count, 1), 1fr);
            gap: calc(var(--vw) * 1.5);
            justify-items: center;
            align-items: center;
        }

        .ILG-Item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: inherit;
            gap: 0.75rem;
            cursor: pointer;
            min-width: 0;
            width: 100%;

            &:hover .ILG-Icon {
                transform: scale(1.07);
            }

            p {
                font-size: var(--font-small);
                font-weight: 600;
                text-align: center;
                margin: 0;
            }
        }

        .ILG-Icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: var(--font-icon-size);
            height: var(--font-icon-size);
            max-width: 100%;
            max-height: 100%;
            transition: transform 0.25s ease;

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

        .ILG-Icon-placeholder {
            width: 60%;
            height: 60%;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            display: block;
        }

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

            .ILG-Grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }