/* IME Gutenberg Blocks — IME Feature Comparison — Frontend styles */

/* ======================================================
   DESKTOP
   ====================================================== */
.ime-fc { width: 100%;     margin: 30px 0 30px 0;}

.ime-fc__cards { display: none; }

/* Header */
.ime-fc__header {
    display: flex;
    align-items: center;

    border: 1px solid #e4e4ee;
    margin-bottom: 6px;
    background-color: #f4f3f8;
    border-radius: 7px;
}

.ime-fc__header-cell {
    font-size:      13px;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          #6b7280;
    padding:        0 16px;
}

.ime-fc__header-cell--feature {
    width:       28%;
    flex-shrink: 0;
    padding-left: 16px;
    color:       #1a2340;
}

.ime-fc__header-cell:nth-child(2) {
    width:       36%;
    flex-shrink: 0;
}

.ime-fc__header-cell--ime {
    width: 36%;
    /*flex-shrink: 0;*/
    color: #4f52b8;
    background-color: #eceffe;
    height: 100%;
    padding: 12px 0 10px 16px;
}

/* Rows */
.ime-fc__rows { display: flex; flex-direction: column; gap: 6px; }

.ime-fc__row {
    display:       flex;
    align-items:   stretch;
    background:    #ffffff;
    border:        1px solid #e4e4ee;
    border-radius: 10px;
    overflow:      hidden;
}

.ime-fc__cell {
    padding:     12px 16px;
font-size: 16px;
    font-weight: var(--font-weight-regular);
color: var(--text);
    line-height: 1.45;
}

.ime-fc__cell--feature {
    width:        28%;
    flex-shrink:  0;
    font-weight:  700;
    background:   #f9f9fc;
    border-right: 1px solid #e4e4ee;
}

.ime-fc__cell--left {
    width:        36%;
    flex-shrink:  0;
    border-right: 1px solid #e4e4ee;
}

.ime-fc__cell--right {
    width:      36%;
    flex-shrink: 0;
    background: #eceffe;
}

/* ======================================================
   MOBILE
   ====================================================== */
@media ( max-width: 640px ) {

    .ime-fc__header { display: none; }
    .ime-fc__rows   { display: none; }
    .ime-fc__cards  { display: flex; flex-direction: column; gap: 6px; }

    .ime-fc__card {
        background:    #ffffff;
        border:        1px solid #e4e4ee;
        border-radius: 10px;
        overflow:      hidden;
    }

    .ime-fc__card-feature {
        padding:        10px 14px 8px;
        font-size:      14px;
        font-weight:    700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color:          #6b7280;
        background:     #f4f4f8;
        border-bottom:  1px solid #e4e4ee;
    }

    .ime-fc__card-cell {
        padding:     10px 14px;
        font-size:   16px;
        color:       #1a2340;
        line-height: 1.4;
    }

    .ime-fc__card-cell--ime {
        background:  #fafafe;
        border-top:  1px solid #e4e4ee;
    }

    .ime-fc__card-label {
        display:        block;
        font-size:      10px;
        font-weight:    700;
        letter-spacing: 0.04em;
        margin-bottom:  4px;
    }

    .ime-fc__card-label--left  { color: #6b7280;  font-size:15px;}
    .ime-fc__card-label--right { color: #4f52b8; font-size:15px;}
}