/*
 * ngpops-product-rows.css - shared single-product row grammar (task 1233).
 *
 * ONE layout for WooCommerce variation attribute rows (theme override
 * woocommerce/single-product/add-to-cart/variable.php) and YC field engine
 * rows (modules/product-fields/engine.php). Woo look kept: bold label column
 * on the left, control column on the right. No tables: div grid rows, so
 * below 768px the grid collapses to one column and the label stacks above
 * the control. Enqueued from engine.php on is_product() only.
 *
 * Row markup contract (both producers emit exactly this shape):
 *   <div class="ngpops-prow">
 *     <label class="ngpops-prow-label" ...>Label</label>
 *     <div class="ngpops-prow-control"> select | input | textarea </div>
 *   </div>
 *
 * NAMING: the admin card grammar in ngpops-ui.css uses .ngpops-row; this
 * front-end grammar uses .ngpops-prow (product row) so the two names never
 * collide, even though they also never load together (admin vs is_product()).
 */

/* The row: fixed label column (~30%, matches the old th.label share), control
   column fills the rest. */
.ngpops-prow {
    display: grid;
    grid-template-columns: 30% minmax(0, 1fr);
    column-gap: 1em;
    align-items: start;
    margin: 0 0 16px;
}

/* Label column: the Woo th.label look (core woocommerce.css gave th/td
   line-height 2em and label font-weight 700; font size inherits the theme). */
.ngpops-prow-label,
.ngpops-prow .ngpops-prow-label label {
    font-weight: 700;
    text-align: left;
    line-height: 1.4em;
    margin: 0;
    text-wrap: balance;
}

/* Required star (was inline style color:#a00 in the engine markup). */
.ngpops-prow-label .required {
    color: #a00;
}

/* Control column. */
.ngpops-prow-control {
    min-width: 0;
}

/* Every control fills the control column. The .woocommerce prefix chain
   outweighs core's ".woocommerce div.product form.cart .variations select"
   (min-width 75%, margin-right 1em); the bare selectors cover engine rows
   rendered outside .variations. */
.woocommerce div.product form.cart .ngpops-prow-control select,
.ngpops-prow-control select,
.ngpops-prow-control input[type="text"],
.ngpops-prow-control textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* Engine text inputs and textareas keep their old padding. */
.ngpops-prow-control input[type="text"],
.ngpops-prow-control textarea {
    padding: 10px;
}

/* Locked display field (type=school): visibly disabled and grey. Replaces the
   inline styles the engine used to put on the disabled School input. */
.ngpops-prow-control .ngpops-input-locked,
.ngpops-prow-control input[disabled] {
    background: #f3f4f6;
    color: #374151;
    cursor: not-allowed;
}

/* Woo's Clear link now sits under the full-width select in the last row. */
.ngpops-prow-control .reset_variations {
    display: inline-block;
    margin-top: 4px;
}

/* Mobile: one column, label above the control. */
@media (max-width: 767.98px) {
    .ngpops-prow {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }

    .ngpops-prow-label,
    .ngpops-prow .ngpops-prow-label label {
        line-height: 1.4;
    }
}