/*
 * Vitruv Triad for Elementor
 * Responsive, transparent and layout-safe styles.
 */

.elementor-widget-vitruv-triad {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    align-self: stretch;
}

.elementor-widget-vitruv-triad > .elementor-widget-container {
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
    background: transparent !important;
}

.vitruv-triad-shell,
.vitruv-triad-shell * {
    box-sizing: border-box;
}

.vitruv-triad-shell {
    display: flex !important;
    align-items: flex-start;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent !important;
    overflow: visible;
}

.vitruv-triad {
    display: block !important;
    flex: 0 1 680px;
    width: 100% !important;
    max-width: 680px;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0;
}

.vitruv-triad-stage {
    --vt-top-y: 13.5%;
    --vt-bottom-y: 68.5%;
    --vt-side-x: 20%;
    --vt-center-y: 58.5%;
    --vt-dot-size: 6px;

    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1000 / 860;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0;
    isolation: isolate;
    overflow: visible !important;
    container-type: inline-size;
}

.vt-triad-svg {
    position: absolute !important;
    inset: 0;
    z-index: 1;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
    background: transparent !important;
    pointer-events: none;
}

.vt-triad-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.vt-triad-outer-primary {
    stroke: #b5964d;
    stroke-width: 1.5;
    stroke-opacity: 0.72;
}

.vt-triad-outer-secondary {
    stroke: #6f5d32;
    stroke-width: 1.5;
    stroke-opacity: 0.35;
}

.vt-triad-inner-line {
    stroke: #a98738;
    stroke-width: 1.5;
    stroke-opacity: 0.72;
}

.vt-triad-vertex-dot {
    r: var(--vt-dot-size, 6px);
    fill: #b5964d;
}

.vt-triad-point {
    position: absolute !important;
    z-index: 3;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 31%;
    max-width: 210px;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    background: transparent !important;
    pointer-events: none;
}

.vt-triad-point-1 {
    top: var(--vt-top-y);
    left: 50%;
    width: 34%;
    transform: translateX(-50%);
}

.vt-triad-point-2 {
    top: var(--vt-bottom-y);
    left: var(--vt-side-x);
    transform: translateX(-50%);
}

.vt-triad-point-3 {
    top: var(--vt-bottom-y);
    right: var(--vt-side-x);
    transform: translateX(50%);
}

.vt-triad-marker {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    min-width: 0;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    color: #d3ae57;
    background: #251f22;
    border: 1.5px solid #b5964d;
    border-radius: 50%;
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}

.vt-triad-marker i,
.vt-triad-marker svg {
    display: block;
    width: 19px;
    height: 19px;
    margin: 0;
    color: currentColor;
    fill: currentColor;
    font-size: 19px;
    line-height: 1;
}

.vt-triad-label {
    display: block !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 9px;
    padding: 0;
    color: #f7f1e8;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 1.2px;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.vt-triad-center {
    position: absolute !important;
    top: var(--vt-center-y);
    left: 50%;
    z-index: 2;
    display: block !important;
    width: 34%;
    max-width: 220px;
    min-width: 0;
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
    color: #f7f1e8;
    background: transparent !important;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.8px;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
    pointer-events: none;
}

.vt-triad-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Tablet and phone sizing. The geometry remains proportional at every width. */
@media (max-width: 767px) {
    .vitruv-triad-stage {
        --vt-top-y: 12.5%;
        --vt-bottom-y: 68.5%;
        --vt-side-x: 20%;
        --vt-center-y: 58.5%;
    }

    .vt-triad-marker {
        width: 44px;
        height: 44px;
    }

    .vt-triad-label {
        margin-top: 7px;
        font-size: clamp(10px, 3.65vw, 16px);
        letter-spacing: 0.65px;
    }

    .vt-triad-center {
        width: 36%;
        max-width: 190px;
        font-size: clamp(12px, 4vw, 19px);
        letter-spacing: 0.4px;
    }
}

/* Container queries protect the graphic when Elementor places it in a narrow column. */
@container (max-width: 460px) {
    .vt-triad-point {
        width: 32%;
    }

    .vt-triad-point-1 {
        width: 36%;
    }

    .vt-triad-marker {
        width: clamp(34px, 11.5cqi, 44px) !important;
        height: clamp(34px, 11.5cqi, 44px) !important;
        font-size: clamp(13px, 4.6cqi, 18px) !important;
    }

    .vt-triad-marker i,
    .vt-triad-marker svg {
        width: clamp(13px, 4.6cqi, 18px) !important;
        height: clamp(13px, 4.6cqi, 18px) !important;
        font-size: clamp(13px, 4.6cqi, 18px) !important;
    }

    .vt-triad-label {
        margin-top: clamp(4px, 1.8cqi, 7px) !important;
        font-size: clamp(9px, 4.1cqi, 15px) !important;
        line-height: 1.15 !important;
        letter-spacing: clamp(0.15px, 0.16cqi, 0.6px) !important;
    }

    .vt-triad-center {
        width: 37%;
        max-width: none;
        font-size: clamp(10px, 4.7cqi, 17px) !important;
        line-height: 1.28 !important;
        letter-spacing: clamp(0px, 0.12cqi, 0.4px) !important;
    }
}

@container (max-width: 300px) {
    .vitruv-triad-stage {
        --vt-top-y: 11.5%;
        --vt-bottom-y: 67%;
        --vt-side-x: 19%;
        --vt-center-y: 57%;
    }

    .vt-triad-label {
        font-size: clamp(8px, 4.3cqi, 12px) !important;
    }

    .vt-triad-center {
        width: 39%;
        font-size: clamp(9px, 4.8cqi, 14px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vitruv-triad-shell,
    .vitruv-triad-shell * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}