/* Values Section */
.values-section {
    min-height: auto;
}

.values-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 4rem 3.75rem;
    /* Match header horizontal padding */
    position: relative;
    z-index: 1;
}

.values-graphic-col {
    width: 41.3%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.values-text-col {
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Graphic Circular Element */
.values-circle__wrapper {
    --p: 1;
    position: relative;
    width: 100%;
    /* tune this % so the ring renders at ~545px at your target viewport — adjust freely */
    aspect-ratio: 1 / 1;
    overflow: visible;
}

.values-circle__ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgb(12, 42, 66);
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            transparent 38%,
            black 58%,
            black 100%);
    /* mask-image: linear-gradient(
        to right,
        transparent 0%,
        transparent 38%,
        black 58%,
        black 100%
    ); */
    mask-image: conic-gradient(from 0deg at 50% 50%, transparent 0deg, black 66deg, black 121deg, transparent 180deg, transparent 360deg);
    z-index: 0;
}

.values-circle__main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 73.2%;
    height: 73.2%;
    background-color: #17243B;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.values-circle__center-icon {
    width: 38%;
    height: auto;
    transform: rotate(calc((1 - var(--p)) * -180deg));
    opacity: calc(0.35 + 0.65 * var(--p));
    will-change: transform, opacity;
}

/* Orbiting Labels */
.values-circle__orbit-label {
    width: fit-content;
    position: absolute;
    transform: translate(-50%, -50%) translate(calc((1 - var(--p)) * var(--dx, 0rem)), calc((1 - var(--p)) * var(--dy, 0rem)));
    opacity: var(--p);
    will-change: transform, opacity;
    /* background-color: rgba(23, 36, 59, 0.85); */
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    color: var(--color-white);
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 1.25rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 4;
    font-family: "Lato", sans-serif;
    pointer-events: none;
    background-color: #0E2C45;
}

.values-circle__orbit-label--love {
    top: 13.5%;
    left: 50%;
    color: #0976DE;
    --dx: 0rem;
    --dy: -3rem;
}

.values-circle__orbit-label--teaching {
    top: 25%;
    left: 17.5%;
    --dx: -3rem;
    --dy: -1.5rem;
}

.values-circle__orbit-label--generosity {
    top: 25%;
    left: 82.5%;
    --dx: 3rem;
    --dy: -1.5rem;
}

.values-circle__orbit-label--hope {
    top: 74%;
    left: 17.5%;
    color: #0976DE;
    --dx: -3rem;
    --dy: 1.5rem;
}

.values-circle__orbit-label--faith {
    top: 74%;
    left: 82.5%;
    color: #0976DE;
    --dx: 3rem;
    --dy: 1.5rem;
}

.values-circle__orbit-label--community {
    top: 88.5%;
    left: 50%;
    --dx: 0rem;
    --dy: 3rem;
}

/* Values Text Content */
.values-heading {
    color: var(--color-white);
    font-weight: 700;
    letter-spacing: 0%;
    line-height: 48px;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(2rem, 1.2rem + 2.35vw, 4.5rem);
    margin: 0 0 1.5rem 0;
}

.values-paragraph {
    color: #B2C7DB;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0;
    margin: 0 0 1.5rem 0;
}

.values-paragraph:nth-of-type(2) {
    margin-bottom: 2rem;
}

.callout-block {
    width: fit-content;
    border-left: 2px solid var(--color-brand-blue);
    padding: 0.1875rem 0rem 0.1875rem 1.25rem;
}

.callout-title {
    width: fit-content;
    color: var(--color-brand-blue);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-family: "Bricolage Grotesque", sans-serif;
    line-height: 16px;
    letter-spacing: 0%;
}

.callout-text {
    width: fit-content;
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0%;
    font-family: "Bricolage Grotesque", sans-serif;
}

@media (max-width: 768px) {
    .values-container {
        flex-direction: column;
        gap: 3.75rem;
        padding: 6.25rem 1rem;
    }

    .values-graphic-col,
    .values-text-col {
        width: 100%;
    }

    .values-circle__wrapper {
        width: 85%;
        /* centered, slightly inset from full width so orbit labels have room */
    }

    .values-circle__orbit-label {
        white-space: normal;
        /* allow wrapping instead of forcing one line */
        font-size: 0.75rem;
        /* scale down for mobile */
        padding: 0.4rem 0.6rem;
        max-width: 5.5rem;
        /* caps how wide any one label can get */
        text-align: center;
    }

    .values-circle__orbit-label--love       { --dx: 0rem;    --dy: -1.5rem; }
    .values-circle__orbit-label--teaching   { --dx: -1.5rem; --dy: -0.75rem; }
    .values-circle__orbit-label--generosity { --dx: 1.5rem;  --dy: -0.75rem; }
    .values-circle__orbit-label--hope       { --dx: -1.5rem; --dy: 0.75rem; }
    .values-circle__orbit-label--faith      { --dx: 1.5rem;  --dy: 0.75rem; }
    .values-circle__orbit-label--community  { --dx: 0rem;    --dy: 1.5rem; }

    .values-text-col {
        padding: 0rem 1rem;
        align-items: center;
        text-align: center;
    }

    .values-text-col>.eyebrow-label {
        margin-bottom: 1rem;
        font-size: 0.875rem;
    }

    .values-text-col>.values-paragraph:first-of-type {
        margin: 0rem;
    }

    .values-text-col>.values-paragraph {
        font-size: 1rem;
        line-height: 24px;
    }



    .eyebrow-label,
    .values-heading,
    .values-paragraph {
        text-align: center;
    }

    .values-heading {
        font-size: clamp(1.5rem, 1.1rem + 4vw, 2rem);
        margin-bottom: 1.25rem;
        line-height: 100%;
    }

    .callout-block {
        border-left: 2px solid var(--color-brand-blue);
        padding: 0.1875rem 0 0.1875rem 0.75rem;
        text-align: center;
    }
}