/* Anva Feature Boxes - Frontend */

.anva-fb-section *,
.anva-fb-section *::before,
.anva-fb-section *::after { box-sizing: border-box; }

.anva-fb-section {
    padding: 40px 0 60px;
    margin: 0;
    width: 100%;
}

.anva-fb-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---- Row layout ---- */
.anva-fb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    align-items: stretch;
}

.anva-fb-column {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
}

/* Column widths: 2, 3, 4, 5, 6 cols */
.anva-fb-col-2 .anva-fb-column { flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); }
.anva-fb-col-3 .anva-fb-column { flex: 0 0 calc(33.333% - 16px); max-width: calc(33.333% - 16px); }
.anva-fb-col-4 .anva-fb-column { flex: 0 0 calc(25% - 18px); max-width: calc(25% - 18px); }
.anva-fb-col-5 .anva-fb-column { flex: 0 0 calc(20% - 19.2px); max-width: calc(20% - 19.2px); }
.anva-fb-col-6 .anva-fb-column { flex: 0 0 calc(16.666% - 20px); max-width: calc(16.666% - 20px); }

/* ---- Box (icon + text side by side) ---- */
.anva-fb-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 16px;
    text-align: left;
    width: 100%;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.anva-fb-box:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.anva-fb-box-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.anva-fb-box-icon img {
    display: block;
    object-fit: contain;
}

.anva-fb-box-content {
    flex: 1;
    min-width: 0;
}

.anva-fb-box-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 6px;
    line-height: 1.3;
}

.anva-fb-box-desc {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* ---- Connector: simple straight line between boxes ---- */

.anva-fb-has-connector {
    flex-wrap: nowrap;
    gap: 0;
    justify-content: center;
}

.anva-fb-has-connector .anva-fb-column {
    position: relative;
    flex: 0 1 auto;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Horizontal gap for the line */
.anva-fb-has-connector .anva-fb-column:not(:last-child) {
    margin-right: 36px;
}

/* Horizontal line */
.anva-fb-has-connector .anva-fb-column:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 36px;
    height: 2px;
    background-color: var(--anva-connector-color, #d4a04a);
    pointer-events: none;
}

/* Not using ::before on desktop */
.anva-fb-has-connector .anva-fb-column::before {
    display: none;
}

.anva-fb-has-connector .anva-fb-box {
    width: auto;
}

/* ---- Connector animation (opt-in) ---- */

.anva-fb-has-connector[data-anva-animate="1"] .anva-fb-column:not(:last-child)::after {
    opacity: 0;
}

.anva-fb-has-connector.anva-fb-animate .anva-fb-column:not(:last-child)::after {
    animation: anva-connector-draw 0.5s ease-out both;
    transform-origin: left center;
}

.anva-fb-has-connector.anva-fb-animate .anva-fb-column:nth-child(1)::after { animation-delay: 0.2s; }
.anva-fb-has-connector.anva-fb-animate .anva-fb-column:nth-child(2)::after { animation-delay: 0.6s; }
.anva-fb-has-connector.anva-fb-animate .anva-fb-column:nth-child(3)::after { animation-delay: 1.0s; }
.anva-fb-has-connector.anva-fb-animate .anva-fb-column:nth-child(4)::after { animation-delay: 1.4s; }
.anva-fb-has-connector.anva-fb-animate .anva-fb-column:nth-child(5)::after { animation-delay: 1.8s; }

@keyframes anva-connector-draw {
    0%   { transform: translateY(-50%) scaleX(0); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translateY(-50%) scaleX(1); opacity: 1; }
}

@keyframes anva-connector-draw-vertical {
    0%   { transform: translateX(-50%) scaleY(0); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translateX(-50%) scaleY(1); opacity: 1; }
}

/* ---- Responsive ---- */

/* Tablet landscape: 4+ col layouts wrap to 2 cols — hide connectors */
@media (max-width: 1024px) {
    .anva-fb-col-4 .anva-fb-column,
    .anva-fb-col-5 .anva-fb-column,
    .anva-fb-col-6 .anva-fb-column {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }

    .anva-fb-has-connector.anva-fb-col-4,
    .anva-fb-has-connector.anva-fb-col-5,
    .anva-fb-has-connector.anva-fb-col-6 {
        flex-wrap: wrap;
        gap: 24px;
    }
    .anva-fb-has-connector.anva-fb-col-4 .anva-fb-column,
    .anva-fb-has-connector.anva-fb-col-5 .anva-fb-column,
    .anva-fb-has-connector.anva-fb-col-6 .anva-fb-column {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
        margin-right: 0;
    }
    .anva-fb-has-connector.anva-fb-col-4 .anva-fb-column::after,
    .anva-fb-has-connector.anva-fb-col-5 .anva-fb-column::after,
    .anva-fb-has-connector.anva-fb-col-6 .anva-fb-column::after {
        display: none;
    }
}

/* ---- Mobile: shared base ---- */
@media (max-width: 768px) {
    .anva-fb-section { padding: 24px 0 36px; }
    .anva-fb-container { padding: 0 16px; }
}

/* ---- Mobile: HORIZONTAL mode (icon on top, side by side) ---- */
@media (max-width: 768px) {
    .anva-fb-mobile-horizontal .anva-fb-row { gap: 16px; }

    .anva-fb-mobile-horizontal .anva-fb-col-2 .anva-fb-column,
    .anva-fb-mobile-horizontal .anva-fb-col-3 .anva-fb-column,
    .anva-fb-mobile-horizontal .anva-fb-col-4 .anva-fb-column,
    .anva-fb-mobile-horizontal .anva-fb-col-5 .anva-fb-column,
    .anva-fb-mobile-horizontal .anva-fb-col-6 .anva-fb-column {
        flex: 1;
        max-width: none;
    }

    .anva-fb-mobile-horizontal .anva-fb-box {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 12px 8px;
        gap: 8px;
    }

    .anva-fb-mobile-horizontal .anva-fb-box-title { font-size: 14px; }
    .anva-fb-mobile-horizontal .anva-fb-box-desc { font-size: 12px; }
    .anva-fb-mobile-horizontal .anva-fb-box-icon { max-width: 36px; max-height: 36px; }
    .anva-fb-mobile-horizontal .anva-fb-box-icon img { max-width: 100%; height: auto; }

    .anva-fb-mobile-horizontal .anva-fb-has-connector .anva-fb-column:not(:last-child) {
        margin-right: 16px;
    }
    .anva-fb-mobile-horizontal .anva-fb-has-connector .anva-fb-column:not(:last-child)::after {
        width: 16px;
    }
}

@media (max-width: 480px) {
    .anva-fb-mobile-horizontal .anva-fb-section { padding: 16px 0 24px; }
    .anva-fb-mobile-horizontal .anva-fb-row { gap: 10px; }

    .anva-fb-mobile-horizontal .anva-fb-box { padding: 10px 4px; gap: 6px; }
    .anva-fb-mobile-horizontal .anva-fb-box-title { font-size: 12px; }
    .anva-fb-mobile-horizontal .anva-fb-box-desc { font-size: 11px; }
    .anva-fb-mobile-horizontal .anva-fb-box-icon { max-width: 32px; max-height: 32px; }

    .anva-fb-mobile-horizontal .anva-fb-has-connector .anva-fb-column:not(:last-child) {
        margin-right: 10px;
    }
    .anva-fb-mobile-horizontal .anva-fb-has-connector .anva-fb-column:not(:last-child)::after {
        width: 10px;
    }
}

/* ---- Mobile: VERTICAL mode (stacked rows, icon left, text right) ---- */
@media (max-width: 768px) {
    .anva-fb-mobile-vertical .anva-fb-row { gap: 0; }

    .anva-fb-mobile-vertical .anva-fb-col-2 .anva-fb-column,
    .anva-fb-mobile-vertical .anva-fb-col-3 .anva-fb-column,
    .anva-fb-mobile-vertical .anva-fb-col-4 .anva-fb-column,
    .anva-fb-mobile-vertical .anva-fb-col-5 .anva-fb-column,
    .anva-fb-mobile-vertical .anva-fb-col-6 .anva-fb-column {
        flex: 0 0 100%;
        max-width: 100%;
        justify-content: flex-start;
    }

    .anva-fb-mobile-vertical .anva-fb-box {
        padding: 14px 16px;
        gap: 14px;
        width: 100%;
    }

    .anva-fb-mobile-vertical .anva-fb-box-title { font-size: 16px; }
    .anva-fb-mobile-vertical .anva-fb-box-desc { font-size: 13px; }

    /* Connector: vertical line between stacked boxes */
    .anva-fb-mobile-vertical .anva-fb-has-connector {
        flex-wrap: wrap;
        gap: 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .anva-fb-mobile-vertical .anva-fb-has-connector .anva-fb-column {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        margin-right: 0;
        justify-content: flex-start;
    }

    /* Hide horizontal line */
    .anva-fb-mobile-vertical .anva-fb-has-connector .anva-fb-column:not(:last-child)::after {
        display: none;
    }

    /* Vertical connector via ::before */
    .anva-fb-mobile-vertical .anva-fb-has-connector .anva-fb-column:not(:last-child)::before {
        display: block;
        content: '';
        position: relative;
        left: 40px;
        width: 2px;
        height: 20px;
        background-color: var(--anva-connector-color, #d4a04a);
        pointer-events: none;
        flex-shrink: 0;
    }

    /* Animation for vertical lines */
    .anva-fb-mobile-vertical .anva-fb-has-connector[data-anva-animate="1"] .anva-fb-column:not(:last-child)::before {
        opacity: 0;
    }
    .anva-fb-mobile-vertical .anva-fb-has-connector.anva-fb-animate .anva-fb-column:not(:last-child)::before {
        animation: anva-connector-draw-vertical 0.4s ease-out both;
        transform-origin: center top;
    }
    .anva-fb-mobile-vertical .anva-fb-has-connector.anva-fb-animate .anva-fb-column:nth-child(1)::before { animation-delay: 0.2s; }
    .anva-fb-mobile-vertical .anva-fb-has-connector.anva-fb-animate .anva-fb-column:nth-child(2)::before { animation-delay: 0.6s; }
    .anva-fb-mobile-vertical .anva-fb-has-connector.anva-fb-animate .anva-fb-column:nth-child(3)::before { animation-delay: 1.0s; }
    .anva-fb-mobile-vertical .anva-fb-has-connector.anva-fb-animate .anva-fb-column:nth-child(4)::before { animation-delay: 1.4s; }
    .anva-fb-mobile-vertical .anva-fb-has-connector.anva-fb-animate .anva-fb-column:nth-child(5)::before { animation-delay: 1.8s; }
}

@media (max-width: 480px) {
    .anva-fb-mobile-vertical .anva-fb-box { padding: 12px 12px; gap: 12px; }
    .anva-fb-mobile-vertical .anva-fb-box-title { font-size: 15px; }
    .anva-fb-mobile-vertical .anva-fb-box-desc { font-size: 12px; }
    .anva-fb-mobile-vertical .anva-fb-box-icon { max-width: 40px; max-height: 40px; }
    .anva-fb-mobile-vertical .anva-fb-box-icon img { max-width: 100%; height: auto; }

    .anva-fb-mobile-vertical .anva-fb-has-connector .anva-fb-column:not(:last-child)::before {
        left: 32px;
        height: 16px;
    }
}