/* Container wrapper using flex to prevent card breaking */
.syncore-chevron-container .wp-block-columns {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

.syncore-chevron-container {
    overflow: visible;
}

.syncore-chevron-row {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* Base Arrow Card Shape:
   The chevron clip-path and the background live on ::before so the card's
   own filter: drop-shadow is NOT clipped away by clip-path (filters are
   applied, then clip-path clips the result, which would erase the shadow). */
.syncore-arrow-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px 18px !important;
    text-align: center;
    position: relative;
    z-index: 6;
    box-shadow: 0 8px 22px rgba(2, 40, 58, 0.22);
}

/* The chevron clip-path and background live on ::before so the card's own
   box-shadow (drawn from the border-box, later in paint order) is NOT clipped.
   A filter: drop-shadow would be erased by the card's separate clip-path. */
.syncore-arrow-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    clip-path: polygon(0% 0%, 94% 0%, 100% 50%, 94% 100%, 0% 100%, 6% 50%);
}

.syncore-arrow-card:first-child::before {
    clip-path: polygon(0% 0%, 94% 0%, 100% 50%, 94% 100%, 0% 100%);
}

/* Step titles never break mid-word; two-word labels may wrap at the space */
.syncore-arrow-card h3 {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
}

/* Cards sit flush side by side: no overlap, each arrow fills its share of the row */
.syncore-arrow-card:not(:first-child) {
    margin-left: 0 !important;
}

/* Earlier cards stack on top of the cards they lap into (1 highest, 6 lowest) */
.syncore-chevron-row .syncore-arrow-card:nth-child(1) { z-index: 6; }
.syncore-chevron-row .syncore-arrow-card:nth-child(2) { z-index: 5; }
.syncore-chevron-row .syncore-arrow-card:nth-child(3) { z-index: 4; }
.syncore-chevron-row .syncore-arrow-card:nth-child(4) { z-index: 3; }
.syncore-chevron-row .syncore-arrow-card:nth-child(5) { z-index: 2; }
.syncore-chevron-row .syncore-arrow-card:nth-child(6) { z-index: 1; }

/* Card 1 Theme Styling (Active Teal) */
.syncore-arrow-card.is-active-teal {
    color: #ffffff !important;
}

.syncore-arrow-card.is-active-teal::before {
    background: linear-gradient(135deg, #00a896, #028090);
}

/* Cards 2-6 Theme Styling (Inactive White) */
.syncore-arrow-card:not(.is-active-teal) {
    color: #333333 !important;
}

.syncore-arrow-card:not(.is-active-teal)::before {
    background-color: #ffffff;
}

/* Centered inner content rhythm: fixed slots keep icon/number/title/text
   aligned at the same tops across all six cards regardless of content length */
.syncore-arrow-card > .wp-block-image {
    margin-bottom: 14px !important;
}

.syncore-arrow-card > p:nth-of-type(1) {
    margin: 0 0 8px !important;
}

.syncore-arrow-card > h3 {
    margin: 0 0 12px !important;
    min-height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.syncore-arrow-card > p:nth-of-type(2) {
    margin: 0 !important;
    min-height: 54px;
}

/* Responsive: WP stacks the columns below 782px */
@media (max-width: 781px) {
    .syncore-chevron-container .wp-block-columns {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .syncore-arrow-card {
        margin-left: 0;
        padding: 16px;
        width: 100% !important;
        box-shadow: 0 4px 12px rgba(2, 40, 58, 0.15);
    }

    .syncore-arrow-card::before {
        clip-path: none;
        border-radius: 12px;
    }

    .syncore-arrow-card h3 {
        font-size: 13px !important;
        letter-spacing: 0.03em !important;
    }
}