/**
 * CGI Comparison Table Widget Stylesheet ("Why Choose Us")
 * 
 * Standards:
 * - 1rem = 10px (HTML font-size: 62.5%)
 * - Strict Mobile-First (zero max-width media queries)
 * - Flexbox table with mobile collapsing
 */

.cgi-table-wrap {
    --cgi-table-headline-size: 3rem;
    width: 100%;
    max-width: var(--cgi-container-narrow, 110rem);
    margin: 0 auto;
}

.cgi-table-wrap .cgi-table-wrap__headline,
.cgi-table-wrap h2.cgi-table-wrap__headline {
    margin: 0 0 3.6rem;
    color: var(--cgi-color-primary, #334D8A);
    font-size: var(--cgi-table-headline-size, 3rem);
    line-height: 1.15;
    font-weight: 700;
    text-align: center;
    text-transform: none;
}

.cgi-table {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    width: 100%;
    font-family: var(--cgi-font-primary, 'Titillium Web', sans-serif);
}

/* Header is hidden on small mobile cards */
.cgi-table__header {
    display: none;
}

/* Mobile: Each row is an elevated card */
.cgi-table__row {
    display: flex;
    flex-direction: column;
    background-color: var(--cgi-color-white, #FFFFFF);
    border: 0.1rem solid var(--cgi-color-card-border, #E2E6EE);
    border-radius: var(--cgi-radius-sm, 0.4rem);
    padding: 2rem;
    box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.04);
}

.cgi-table__cell--metric {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    color: var(--cgi-color-dark, #1B2232);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.cgi-table__bullet {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: var(--cgi-color-accent, #F68701);
    flex-shrink: 0;
}

.cgi-table__cell--advantage {
    color: var(--cgi-color-text, #424242);
    font-size: 1.6rem;
    line-height: 1.5;
}

.cgi-table__cell--advantage p {
    margin: 0;
}

.cgi-table__cell--advantage p + p {
    margin-top: 0.6rem;
}

.cgi-table__cell--advantage a {
    color: var(--cgi-color-primary, #334D8A);
    text-decoration: underline;
    font-weight: 600;
    transition: var(--cgi-transition, all 0.2s ease-in-out);
}

.cgi-table__cell--advantage a:hover {
    color: var(--cgi-color-primary-dark, #1F3266);
}

/* Tablet Upward: m (600px / 60rem) - Transitions to Flexbox Table */
@media (min-width: 37.5em) {
    .cgi-table-wrap {
        --cgi-table-headline-size: 3.8rem;
    }

    .cgi-table-wrap .cgi-table-wrap__headline,
    .cgi-table-wrap h2.cgi-table-wrap__headline,
    .cgi-table-wrap__headline {
        font-size: var(--cgi-table-headline-size, 3.8rem);
    }

    .cgi-table {
        gap: 0;
        background-color: var(--cgi-color-white, #FFFFFF);
        border: 0.1rem solid var(--cgi-color-card-border, #E2E6EE);
        border-radius: var(--cgi-radius-sm, 0.4rem);
        overflow: hidden;
        box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.05);
    }

    .cgi-table__header {
        display: flex;
        background-color: var(--cgi-color-primary, #334D8A);
        color: var(--cgi-color-white, #FFFFFF);
    }

    .cgi-table__th {
        padding: 1.6rem 2.4rem;
        font-size: 1.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .cgi-table__th--metric {
        flex: 0 0 32%;
        border-right: 0.1rem solid rgba(255, 255, 255, 0.15);
    }

    .cgi-table__th--advantage {
        flex: 1 1 68%;
    }

    .cgi-table__row {
        flex-direction: row;
        border: none;
        border-radius: 0;
        border-bottom: 0.1rem solid var(--cgi-color-card-border, #E2E6EE);
        padding: 0;
        box-shadow: none;
        transition: background-color 0.2s ease;
    }

    .cgi-table__row:last-child {
        border-bottom: none;
    }

    .cgi-table__row:hover {
        background-color: var(--cgi-color-bg-light, #F4F6FA);
    }

    .cgi-table__cell--metric {
        flex: 0 0 32%;
        padding: 2rem 2.4rem;
        margin-bottom: 0;
        font-size: 1.7rem;
        border-right: 0.1rem solid var(--cgi-color-card-border, #E2E6EE);
    }

    .cgi-table__cell--advantage {
        flex: 1 1 68%;
        padding: 2rem 2.4rem;
        font-size: 1.7rem;
        display: flex;
        align-items: center;
    }
}