/*
 * Recipes page — ingredient results grid.
 * Loaded only on pages containing [mes_ingredient_results].
 * All selectors scoped under mes-. No !important. Nothing touching Astra.
 */

/* ── Results grid ────────────────────────────────────────────────────────── */

.mes-grid {
    display: grid;
    grid-template-columns: 1fr;   /* phone: 1 column */
    gap: 20px;
    margin: 0;
    padding: 0;
}

@media ( min-width: 600px ) {
    .mes-grid {
        grid-template-columns: repeat( 2, 1fr );  /* tablet: 2 columns */
    }
}

@media ( min-width: 960px ) {
    .mes-grid {
        grid-template-columns: repeat( 3, 1fr );  /* desktop: 3 columns */
    }
}

/* ── Recipe card ─────────────────────────────────────────────────────────── */

.mes-card {
    background: #fff;
    border: 1px solid #E9E4DC;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba( 51, 49, 58, 0.06 );
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.mes-card:hover {
    box-shadow: 0 6px 20px rgba( 51, 49, 58, 0.12 );
    transform: translateY( -2px );
}

.mes-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Image box: 3:1 ratio (panoramic banner images, 900×300 source).
   object-fit: cover so any source dimensions fill the box cleanly. */
.mes-card__img-wrap {
    position: relative;
    aspect-ratio: 3 / 1;
    overflow: hidden;
    background: #F0EDE8;  /* fallback while image loads, and for no-image state */
}

.mes-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Cost-per-serving pill ───────────────────────────────────────────────── */

.mes-card__cost {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #6FA548;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

/* ── Featured badge (image overlay, opposite corner from the cost pill) ───── */

.mes-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

/* ── Card title ──────────────────────────────────────────────────────────── */

.mes-card__title {
    margin: 0;
    padding: 12px 14px 14px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    color: #33313A;
    text-align: center;
}

/* ── Above-grid message ──────────────────────────────────────────────────── */

.mes-results-message {
    margin: 0 0 16px;
    font-size: 14px;
    color: #33313A;
    line-height: 1.5;
}

.mes-ingredient-link {
    color: #4E7A2F;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mes-no-results {
    color: #77737F;
    font-size: 15px;
    margin: 24px 0;
}

.mes-cost-disclaimer {
    margin: 0 0 16px;
    font-size: 12.5px;
    font-style: italic;
    color: #77737F;
    line-height: 1.5;
}

/* ── Single-recipe cost meta item (Step D part 2) ───────────────────────────
   Renders as a native WPRM meta item beside Servings, text-only -- no
   bespoke color, background, or icon on purpose; typography/size/color come
   from WPRM's own .wprm-recipe-details / .wprm-block-text-normal classes
   (the recipe's configured template styling), same as every other
   icon-less meta item (Servings, Prep Time, Course). */

.mes-recipe-cost-disclaimer {
    margin: 4px 0 12px;
}