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

.ime-mc { width: 100%; }

/* ======================================================
   DESKTOP
   ====================================================== */
.ime-mc__cards { display: none; }

/* Header */
.ime-mc__header {
display: flex;
    align-items: center;
    border: 1px solid #e4e4ee;
    margin-bottom: 6px;
    background-color: #f4f3f8;
    border-radius: 7px;
	padding: 12px 0;
}

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

.ime-mc__header-cell--feature {
    flex:        0 0 22%;
    color:       #1a2340;
    padding-left: 16px;
}

/* Accent column header — color set inline via style attribute 
.ime-mc__header-cell--accent::before {
    content:        '';
    display:        inline-block;
    width:          7px;
    height:         7px;
    border-radius:  50%;
    background:     var(--ime-mc-dot, #4f52b8);
    margin-right:   7px;
    vertical-align: middle;
}

*/

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

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

.ime-mc__cell {
    flex:        1;
    padding:     12px 16px;
    font-size:   14px;
    color:       #1a2340;
    line-height: 1.45;
    border-right: 1px solid #e4e4ee;
}

.ime-mc__cell:last-child { border-right: none; }

.ime-mc__cell--feature {
    flex:        0 0 22%;
    font-weight: 700;
    background:  #f9f9fc;
}

/* Accent cell — background set inline via style attribute */
.ime-mc__cell--accent { /* tint applied inline */ }

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

    .ime-mc__desktop { display: none; }
    .ime-mc__cards   { display: flex; flex-direction: column; gap: 6px; }

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

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

    .ime-mc__card-cell {
        padding:     10px 14px;
        font-size:   13px;
        color:       #1a2340;
        line-height: 1.4;
        border-top:  1px solid #e4e4ee;
    }

    .ime-mc__card-cell:first-of-type { border-top: none; }

    .ime-mc__card-label {
        display:        block;
        font-size:      10px;
        font-weight:    700;
        letter-spacing: 0.04em;
        margin-bottom:  4px;
        color:          #6b7280;
    }
}