/* ═══════════════════════════════════════════════════════════
   Feature Comparison Table
   Block: acf/kf-feature-comparison-table
   ═══════════════════════════════════════════════════════════ */

/* ── Reset & Root ──────────────────────────────────────────── */

.kf-fct {
    --gap: 5px;

    background: var(--fct-bg, #1A1A1A);
    width: 100%;
    box-sizing: border-box;
}

/* ── Header ────────────────────────────────────────────────── */

.kf-fct__header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* position: sticky; */
    top: var(--main-header-height);
    z-index: 10;
    /* Solid backing so semi-transparent cell backgrounds
       don't reveal content scrolling behind the sticky header. */
    background: var(--fct-bg, #1A1A1A);

    gap: var(--gap);
}

.kf-fct__header-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 30px 40px;
    min-height: 64px;

    border-top-left-radius: 30px;
    border-top-right-radius: 30px;

}

.kf-fct__header-cell--cap {
    background: var(--cap-header-bg);
    color: var(--cap-title-color);
}

.kf-fct__header-cell--c1 {
    background: var(--c1-header-bg);
    color: var(--c1-title-color);
}

.kf-fct__header-cell--c2 {
    background: var(--c2-header-bg);
    color: var(--c2-title-color);
}

.kf-fct__header-logo {
    display: block;
    height: auto;
    max-width: 100%;
    flex-shrink: 0;

    width: var(--width);
}

.kf-fct__header-title {
    margin: 0;

    font-family: Degular;
    font-weight: 500;
    font-size: clamp(22px, 15.45px + 2.05vw, 40px);
    line-height: 100%;
    letter-spacing: 0%;

}

/* ── Body Rows ─────────────────────────────────────────────── */

.kf-fct__row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap);
}

.kf-fct__cell {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 40px;
    min-height: 52px;

    margin-top: var(--gap);
}

.kf-fct__cell--cap {
    background: var(--cap-cell-bg);
    color: var(--cap-cell-color);
    border-bottom: 1px solid var(--cap-border);
}

.kf-fct__cell--c1 {
    background: var(--c1-cell-bg);
    color: var(--c1-cell-color);
    border-bottom: 1px solid var(--c1-border);
}

.kf-fct__cell--c2 {
    background: var(--c2-cell-bg);
    color: var(--c2-cell-color);
    border-bottom: 1px solid var(--c2-border);
}

/* Remove bottom border on last row */
.kf-fct__row--last .kf-fct__cell {
    border-bottom: none;
}

/* ── Cell Content ──────────────────────────────────────────── */

.kf-fct__cell-icon {
    display: block;
    height: auto;
    max-width: 100%;
    flex-shrink: 0;

    width: var(--width);
}

.kf-fct__cell-text {
    margin: 0;

    font-family: Degular;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.14;

}

/* ── Cell Labels (competitor identity inside body cells) ──── */
/* Hidden by default; visible only in "stacked" mobile.       */

.kf-fct__cell-label {
    display: none;
}

.kf-fct__cell-label-logo {
    display: block;
    height: auto;
    max-width: 100%;
    flex-shrink: 0;
}


@media (max-width: 1100px) {
    .kf-fct {
        --main-header-height: 70px;
    }
}


/* ═══════════════════════════════════════════════════════════
   Mobile (max-width: 767px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* ── Shared mobile adjustments ──────────────────────── */

    .kf-fct {
        margin-left: calc(-1 * var(--wp--style--root--padding-left, 40px)) !important;
        margin-right: calc(-1 * var(--wp--style--root--padding-right, 40px)) !important;
        width: calc(100% + var(--wp--style--root--padding-left, 40px) + var(--wp--style--root--padding-right, 40px));
        max-width: none;
    }
    

    .kf-fct__header-cell {
        padding: 16px;
        gap: 8px;
    }

    .kf-fct__header-title {
        font-size: 26px;
    }

    .kf-fct__header-logo {
        width: calc(var(--width) * 0.75);
    }

    .kf-fct__cell {
        padding: 12px 16px;
    }

    .kf-fct__cell-text {
        font-size: 16px;
    }

    /* ──────────────────────────────────────────────────────
       Style 1: Two Columns
       Capability row spans full width as a section label.
       Two competitor cells sit side by side below it.
       Competitor header remains sticky.
       ────────────────────────────────────────────────────── */

    [data-mobile-style="two-columns"] .kf-fct__header {
        grid-template-columns: 1fr 1fr;
    }

    [data-mobile-style="two-columns"] .kf-fct__header-cell--cap {
        display: none;
    }

    [data-mobile-style="two-columns"] .kf-fct__row {
        grid-template-columns: 1fr 1fr;
    }

    /* Capability cell spans both columns as a row title */
    [data-mobile-style="two-columns"] .kf-fct__cell--cap {
        grid-column: 1 / -1;
        border-bottom: none;
        padding-bottom: 4px;
        font-weight: 600;
    }

    /* Tighter top spacing for competitor cells below the cap label */
    [data-mobile-style="two-columns"] .kf-fct__cell--c1,
    [data-mobile-style="two-columns"] .kf-fct__cell--c2 {
        padding-top: 4px;
    }

    /* Cell labels stay hidden — header provides competitor context */

    /* ──────────────────────────────────────────────────────
       Style 2: Stacked Cards
       Header hidden entirely. Each capability becomes a
       self-contained vertical card. Competitor identity
       is shown inline via .kf-fct__cell-label.
       ────────────────────────────────────────────────────── */

    [data-mobile-style="stacked"] .kf-fct__header {
        display: none;
    }

    [data-mobile-style="stacked"] .kf-fct__row {
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;
    }

    [data-mobile-style="stacked"] .kf-fct__row--last {
        margin-bottom: 0;
    }

    /* Capability cell as card heading */
    [data-mobile-style="stacked"] .kf-fct__cell--cap {
        border-bottom: none;
        padding-bottom: 8px;
        font-weight: 600;
    }

    /* Competitor cells stack vertically with left accent border */
    [data-mobile-style="stacked"] .kf-fct__cell--c1,
    [data-mobile-style="stacked"] .kf-fct__cell--c2 {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        border-bottom: none;
        border-left: 3px solid var(--c1-border);
        margin-left: 16px;
        padding: 12px 16px;
    }

    [data-mobile-style="stacked"] .kf-fct__cell--c2 {
        border-left-color: var(--c2-border);
    }

    /* Reveal cell labels inside competitor cells */
    [data-mobile-style="stacked"] .kf-fct__cell-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        font-size: 13px;
        line-height: 1.3;
    }

    /* Constrain label logos on small screens */
    [data-mobile-style="stacked"] .kf-fct__cell-label-logo {
        max-width: 80px;
    }

    /* ──────────────────────────────────────────────────────
       Style 3: Horizontal Scroll
       Note: overflow-x creates a scroll container that
       prevents vertical sticky on the header.
       ────────────────────────────────────────────────────── */

    [data-mobile-style="scroll"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    [data-mobile-style="scroll"] .kf-fct__header {
        /* Cannot be sticky-top inside a scroll container */
        position: static;
        min-width: 600px;
        grid-template-columns: 180px 1fr 1fr;
    }

    [data-mobile-style="scroll"] .kf-fct__row {
        min-width: 600px;
        grid-template-columns: 180px 1fr 1fr;
    }

    /* Pin capability column to left edge while scrolling horizontally.
       Composite background: semi-transparent cell bg on top of
       solid base bg — prevents content bleeding through. */
    [data-mobile-style="scroll"] .kf-fct__header-cell--cap {
        /* position: sticky; */
        left: 0;
        z-index: 2;
        background:
            linear-gradient(0deg, var(--cap-header-bg), var(--cap-header-bg)),
            linear-gradient(0deg, var(--fct-bg, #1A1A1A), var(--fct-bg, #1A1A1A));
    }

    [data-mobile-style="scroll"] .kf-fct__cell--cap {
        /* position: sticky; */
        left: 0;
        z-index: 2;
        background:
            linear-gradient(0deg, var(--cap-cell-bg), var(--cap-cell-bg)),
            linear-gradient(0deg, var(--fct-bg, #1A1A1A), var(--fct-bg, #1A1A1A));
    }

    /* Cell labels stay hidden — full table structure is visible */
}