/*
 * JFM Golf Difference network-nexus section.
 * Replaces the legacy two-section Elementor composition on the homepage.
 */

body.home .jfm-difference-nexus {
    --jfm-difference-ink: #153a2b;
    --jfm-difference-deep: #123728;
    --jfm-difference-navy: #23406f;
    --jfm-difference-green: #2f8a57;
    --jfm-difference-mint: #d9f2e4;
    --jfm-difference-surface: #f8f8f6;
    --jfm-difference-gold: #cba950;
    position: relative;
    width: auto;
    margin: 12px 10px;
    padding: clamp(58px, 6vw, 90px) clamp(24px, 4.5vw, 76px) clamp(64px, 6.5vw, 98px);
    overflow: hidden;
    border: 1px solid rgba(18, 43, 34, 0.09);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(18, 43, 34, 0.045);
    color: var(--jfm-difference-ink);
    font-family: "Inter", Arial, sans-serif;
    isolation: isolate;
}

body.home .jfm-difference-nexus::before,
body.home .jfm-difference-nexus::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: clamp(250px, 25vw, 430px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-radial-gradient(
        ellipse at center,
        transparent 0 18px,
        rgba(35, 64, 111, 0.035) 19px 20px
    );
    pointer-events: none;
}

body.home .jfm-difference-nexus::before {
    top: clamp(-220px, -12vw, -120px);
    left: clamp(-230px, -13vw, -120px);
}

body.home .jfm-difference-nexus::after {
    right: clamp(-230px, -13vw, -120px);
    bottom: clamp(-240px, -14vw, -130px);
}

body.home .jfm-difference-nexus *,
body.home .jfm-difference-nexus *::before,
body.home .jfm-difference-nexus *::after {
    box-sizing: border-box;
}

body.home .jfm-difference-nexus__inner {
    width: min(100%, 1560px);
    margin: 0 auto;
}

body.home .jfm-difference-nexus__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vw, 48px);
    text-align: center;
}

body.home .jfm-difference-nexus__header h2 {
    margin: 0;
    color: var(--jfm-difference-ink);
    font-family: "League Spartan", "Inter", Arial, sans-serif;
    font-size: clamp(2.6rem, 4.25vw, 4.85rem);
    font-weight: 700;
    line-height: 0.96;
    letter-spacing: 0.015em;
    text-transform: uppercase;
}

body.home .jfm-difference-nexus__the,
body.home .jfm-difference-nexus__difference {
    color: var(--jfm-difference-ink);
    font-weight: 600;
}

body.home .jfm-difference-nexus__jfm {
    color: var(--jfm-difference-navy);
    font-weight: 800;
}

body.home .jfm-difference-nexus__golf {
    color: var(--jfm-difference-green);
    font-weight: 800;
}

body.home .jfm-difference-nexus__rule {
    flex: 0 1 72px;
    height: 2px;
    border-radius: 999px;
    background: var(--jfm-difference-gold);
    opacity: 0.9;
}

body.home .jfm-difference-nexus__title-mark {
    display: block;
    width: 66px;
    height: 4px;
    margin: 22px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--jfm-difference-navy), var(--jfm-difference-green));
}

body.home .jfm-difference-nexus__stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 440px) minmax(320px, 1fr);
    grid-template-areas:
        "left hub right"
        ". shipping .";
    align-items: center;
    gap: 28px clamp(40px, 4vw, 72px);
    min-height: 650px;
    margin-top: clamp(34px, 4vw, 54px);
}

body.home .jfm-difference-nexus__connectors {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

body.home .jfm-difference-nexus__orbit {
    fill: none;
    stroke: rgba(35, 64, 111, 0.16);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 3 10;
}

body.home .jfm-difference-nexus__connector {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

body.home .jfm-difference-nexus__connector--shipping {
    stroke: var(--jfm-difference-green);
}

body.home .jfm-difference-nexus__hub,
body.home .jfm-difference-nexus__group,
body.home .jfm-difference-nexus__node {
    position: relative;
    z-index: 1;
}

body.home .jfm-difference-nexus__hub {
    grid-area: hub;
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 440px;
}

body.home .jfm-difference-nexus__hub-shape {
    position: absolute;
    inset: -18px -22px 14px;
    border-radius: 42% 58% 48% 52% / 52% 44% 56% 48%;
    background: var(--jfm-difference-mint);
    opacity: 0.58;
    transform: rotate(-2deg);
}

body.home .jfm-difference-nexus__media {
    position: relative;
    z-index: 1;
    aspect-ratio: 0.92 / 1;
    margin: 0;
}

body.home .jfm-difference-nexus__course-image {
    display: block;
    width: 100%;
    height: 100%;
    border: 5px solid #fff;
    border-radius: 38px;
    object-fit: cover;
    object-position: center;
    background: var(--jfm-difference-surface);
    box-shadow: 0 22px 50px rgba(18, 55, 40, 0.14), 0 0 0 1px rgba(35, 64, 111, 0.12);
}

body.home .jfm-difference-nexus__badge {
    position: absolute;
    right: clamp(-18px, -1.4vw, -8px);
    bottom: clamp(-18px, -1.5vw, -10px);
    width: clamp(92px, 8.5vw, 126px);
    height: auto;
    border-radius: 50%;
    clip-path: circle(48% at 50% 50%);
    filter: drop-shadow(0 10px 16px rgba(18, 43, 34, 0.18));
}

body.home .jfm-difference-nexus__group {
    display: grid;
    align-content: space-between;
    gap: clamp(76px, 7vw, 106px);
    min-width: 0;
}

body.home .jfm-difference-nexus__group--left {
    grid-area: left;
}

body.home .jfm-difference-nexus__group--right {
    grid-area: right;
}

body.home .jfm-difference-nexus__node {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.5vw, 20px);
    width: 100%;
    min-height: 112px;
    padding: 12px clamp(26px, 2.3vw, 38px);
    border: 1px solid rgba(47, 138, 87, 0.25);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 34px rgba(18, 55, 40, 0.075);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

body.home .jfm-difference-nexus__node:hover {
    border-color: rgba(35, 64, 111, 0.34);
    box-shadow: 0 18px 38px rgba(18, 55, 40, 0.105);
    transform: translateY(-2px);
}

body.home .jfm-difference-nexus__node--shipping {
    grid-area: shipping;
    justify-self: center;
    width: min(100%, 580px);
    min-height: 88px;
    padding-right: clamp(30px, 3vw, 46px);
    padding-left: clamp(30px, 3vw, 46px);
}

body.home .jfm-difference-nexus__icon {
    display: inline-flex;
    flex: 0 0 clamp(56px, 3.8vw, 64px);
    align-items: center;
    justify-content: center;
    width: clamp(56px, 3.8vw, 64px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(217, 242, 228, 0.95), rgba(255, 255, 255, 0.9));
    color: var(--jfm-difference-green);
    box-shadow: inset 0 0 0 1px rgba(47, 138, 87, 0.12);
}

body.home .jfm-difference-nexus__node--shipping .jfm-difference-nexus__icon {
    background: linear-gradient(145deg, var(--jfm-difference-green), var(--jfm-difference-deep));
    color: #fff;
}

body.home .jfm-difference-nexus__icon svg {
    width: 56%;
    height: 56%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.home .jfm-difference-nexus__node-copy {
    min-width: 0;
}

body.home .jfm-difference-nexus__node h3 {
    margin: 0 0 4px;
    color: var(--jfm-difference-ink);
    font-family: "League Spartan", "Inter", Arial, sans-serif;
    font-size: clamp(1rem, 1.12vw, 1.16rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

body.home .jfm-difference-nexus__node p {
    margin: 0;
    color: #59655e;
    font-size: clamp(0.81rem, 0.84vw, 0.9rem);
    line-height: 1.35;
}

body.home .jfm-difference-nexus__anchor {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--jfm-difference-green);
    box-shadow: 0 0 0 2px rgba(47, 138, 87, 0.34);
    transform: translateY(-50%);
}

body.home .jfm-difference-nexus__node--left .jfm-difference-nexus__anchor {
    right: -8px;
}

body.home .jfm-difference-nexus__node--right .jfm-difference-nexus__anchor {
    left: -8px;
}

body.home .jfm-difference-nexus__node--shipping .jfm-difference-nexus__anchor {
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 1199.98px) {
    body.home .jfm-difference-nexus__stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "hub hub"
            "left right"
            "shipping shipping";
        gap: 30px;
        min-height: 0;
    }

    body.home .jfm-difference-nexus__connectors,
    body.home .jfm-difference-nexus__anchor {
        display: none;
    }

    body.home .jfm-difference-nexus__hub {
        width: min(100%, 470px);
        margin-bottom: 10px;
    }

    body.home .jfm-difference-nexus__group {
        align-self: stretch;
        align-content: start;
        gap: 20px;
    }

    body.home .jfm-difference-nexus__node {
        min-height: 116px;
    }

    body.home .jfm-difference-nexus__node--shipping {
        width: min(100%, 680px);
    }
}

@media (max-width: 767.98px) {
    body.home .jfm-difference-nexus {
        margin-right: 8px;
        margin-left: 8px;
        padding: 44px 18px 50px;
        border-radius: 20px;
    }

    body.home .jfm-difference-nexus__header {
        gap: 0;
    }

    body.home .jfm-difference-nexus__header h2 {
        max-width: 12ch;
        font-size: clamp(2.25rem, 11vw, 3.25rem);
        line-height: 0.98;
    }

    body.home .jfm-difference-nexus__rule {
        display: none;
    }

    body.home .jfm-difference-nexus__title-mark {
        margin-top: 18px;
    }

    body.home .jfm-difference-nexus__stage {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "hub"
            "left"
            "right"
            "shipping";
        gap: 20px;
        margin-top: 34px;
    }

    body.home .jfm-difference-nexus__hub {
        width: min(94%, 380px);
        margin-bottom: 8px;
    }

    body.home .jfm-difference-nexus__course-image {
        border-width: 4px;
        border-radius: 30px;
    }

    body.home .jfm-difference-nexus__badge {
        right: -12px;
        bottom: -12px;
        width: 88px;
    }

    body.home .jfm-difference-nexus__group {
        gap: 14px;
    }

    body.home .jfm-difference-nexus__node,
    body.home .jfm-difference-nexus__node--shipping {
        min-height: 0;
        padding: 18px;
        border-radius: 28px;
    }

    body.home .jfm-difference-nexus__icon {
        flex-basis: 62px;
        width: 62px;
    }

    body.home .jfm-difference-nexus__node h3 {
        font-size: 1.03rem;
    }

    body.home .jfm-difference-nexus__node p {
        font-size: 0.88rem;
        line-height: 1.45;
    }
}

@media (max-width: 420px) {
    body.home .jfm-difference-nexus__node,
    body.home .jfm-difference-nexus__node--shipping {
        align-items: flex-start;
        gap: 14px;
        padding: 17px 15px;
    }

    body.home .jfm-difference-nexus__icon {
        flex-basis: 54px;
        width: 54px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.home .jfm-difference-nexus__node {
        transition: none;
    }
}