/**
 * Section: split-panel
 *
 * Extracted from template-parts/split_panel.php.
 * Loaded via trunorth_enqueue_section('split-panel').
 */

.sp-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: calc(var(--vw) * 40);
        font-family: 'Open Sans', sans-serif;

        /* --- Text panel --- */
        .sp-text-panel {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 calc(var(--vw) * 6);
            gap: calc(var(--vw) * 2);
        }

        .sp-heading,
        .sp-heading * {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(1.5rem, calc(var(--vw) * 2.5), calc(var(--vw) * 2.5));
            font-weight: 350;
            line-height: 1.2;
            margin: 0;
        }

        .sp-description {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(1rem, calc(var(--vw) * 2), calc(var(--vw) * 2));
            font-weight: 300;
            line-height: 1.2;
            margin: 0;
        }

        /* --- Image panel --- */
        .sp-image-panel {
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding: calc(var(--vw) * 4);

            img {
                width: calc(var(--vw) * 30);
                object-fit: contain;
                display: block;
            }
        }

        @media (max-width: 768px) {
            & {
                grid-template-columns: 1fr;
                min-height: unset;
            }

            .sp-text-panel {
                padding: calc(var(--vw) * 8) calc(var(--vw) * 6);
                gap: calc(var(--vw) * 4);
                order: 1;
            }

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

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

            .sp-image-panel {
                order: 2;
                min-height: calc(var(--vw) * 60);

                img {
                    object-fit: cover;
                }
            }
        }
    }