/**
 * Model comparison matrix.
 *
 * Rendered by hehku_specs_matrix_html() in inc/woocommerce-product.php, on
 * product pages and wherever [hehku_vertailu] is used.
 *
 * Colours come from the theme scheme tokens in css/themes/, so the block
 * follows the active colour scheme without hardcoding anything.
 */

.hehku-specs {
    max-width: 900px;
    margin: 48px auto 8px;
    padding: 0 15px;
    clear: both;
}

.hehku-specs__heading {
    font: 400 28px/34px "Roboto", sans-serif;
    color: var(--onBackground);
    margin: 0 0 20px;
}

/* The table can be wider than the phone; scroll it, never the page. */
.hehku-specs__scroll {
    overflow-x: auto;
    border: 1px solid var(--outline);
    border-radius: 6px;
    -webkit-overflow-scrolling: touch;
}

.hehku-specs__table {
    width: 100%;
    border-collapse: collapse;
    background: var(--background);
    font: 400 15px/22px "Roboto", sans-serif;
    color: var(--onBackground);
}

.hehku-specs__table th,
.hehku-specs__table td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--outline);
}

.hehku-specs__table tbody tr:last-child th,
.hehku-specs__table tbody tr:last-child td {
    border-bottom: 0;
}

/* Value cells sit under the model images, so centre them */
.hehku-specs__table tbody td {
    text-align: center;
}

/* Row label column */
.hehku-specs__table tbody th {
    font-weight: 400;
    color: var(--onBackground);
    opacity: .78;
    width: 38%;
    min-width: 190px;
}

/* Model header */
.hehku-specs__model {
    min-width: 150px;
    text-align: center;
    border-bottom: 2px solid var(--outline);
}

.hehku-specs__link {
    display: block;
    color: var(--onBackground);
    text-decoration: none;
}

/**
 * The product PNGs are a thin vertical probe on a transparent canvas: the
 * artwork fills only 19% of the width and 87% of the height. Sized by width it
 * renders as a barely visible sliver inside a mostly empty box, which also
 * pushes the model name far down the header. A narrow, tall box with
 * object-fit: cover crops the dead margins and lets the probe fill the frame.
 */
.hehku-specs__image {
    display: block;
    width: 68px;
    height: 128px;
    object-fit: cover;
    object-position: center;
    margin: 0 auto 10px;
}

.hehku-specs__name {
    display: block;
    font: 500 18px/24px "Roboto", sans-serif;
}

.hehku-specs__link:hover .hehku-specs__name,
.hehku-specs__link:focus-visible .hehku-specs__name {
    color: var(--primary);
    text-decoration: underline;
}

.hehku-specs__link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 4px;
}

.hehku-specs__price {
    display: block;
    margin-top: 3px;
    font: 400 15px/21px "Roboto", sans-serif;
    color: var(--onBackground);
    opacity: .75;
}

.hehku-specs__price del {
    opacity: .6;
    margin-right: 5px;
}

.hehku-specs__badge {
    display: inline-block;
    margin-top: 7px;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--primary);
    color: #fff;
    font: 500 11px/18px "Roboto", sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* The product being viewed gets a quiet tint down its column. */
.hehku-specs__model.is-current,
.hehku-specs__table td.is-current {
    background: color-mix(in srgb, var(--primary) 7%, transparent);
}

/* Rows where the models actually differ — the reason the table exists. */
.hehku-specs__row.is-different th,
.hehku-specs__row.is-different td {
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    font-weight: 500;
}

.hehku-specs__row.is-different th {
    box-shadow: inset 3px 0 0 var(--primary);
    opacity: 1;
}

.hehku-specs__row.is-different td.is-current {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
}

/* Fallback for browsers without color-mix: a plain border keeps the meaning. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .hehku-specs__row.is-different th,
    .hehku-specs__row.is-different td {
        border-top: 2px solid var(--primary);
    }
}

.hehku-specs__note {
    margin: 12px 2px 0;
    font: 400 14px/21px "Roboto", sans-serif;
    color: var(--onBackground);
    opacity: .7;
}

@media (max-width: 700px) {
    .hehku-specs {
        margin-top: 34px;
    }

    .hehku-specs__heading {
        font-size: 24px;
        line-height: 30px;
    }

    .hehku-specs__table {
        font-size: 14px;
        line-height: 20px;
    }

    .hehku-specs__table th,
    .hehku-specs__table td {
        padding: 10px 12px;
    }

    .hehku-specs__table tbody th {
        min-width: 160px;
    }

    .hehku-specs__name {
        font-size: 16px;
        line-height: 22px;
    }

    .hehku-specs__image {
        width: 52px;
        height: 96px;
        margin-bottom: 8px;
    }
}