/* M Recipe Card styles - fresh design */
.mrc-card{
    --radius: var(--mrc-radius,18px);
    --surface: var(--mrc-surface,#fff);
    --text: var(--mrc-text,#1f2937);
    --accent: var(--mrc-accent,#55c1aa);
    --accentText: var(--mrc-accent-text,#0f3a34);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, #0000);
    overflow: hidden;
    box-shadow:
        0 1px 1px rgba(0,0,0,.03),
        0 10px 25px rgba(0,0,0,.06);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}
.mrc-card .mrc-hero{
    display:flex;
    gap:24px;
    padding:24px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, #fff) 0%, #fff 100%);
    align-items:center;
}
.mrc-card .mrc-thumb{ margin-left:auto; }
.mrc-card .mrc-img{ border-radius:999px; width:140px; height:140px; object-fit:cover; border:4px solid var(--accent); box-shadow: 0 6px 16px rgba(0,0,0,.15)}
.mrc-title{ font-size: clamp(22px, 3vw, 32px); margin:0; color: var(--accentText); }
.mrc-sub{ margin:.4rem 0 0; opacity:.8 }
.mrc-servings{ background: var(--accent); color: #fff; padding:6px 10px; display:inline-flex; align-items:center; gap:8px; border-radius: 999px; font-weight:600; margin-top:10px }

.mrc-actions{ display:flex; gap:10px; padding:0 20px 12px; }
.mrc-btn{ border:1px solid color-mix(in srgb, var(--accent) 35%, #0000); background:#fff; padding:8px 10px; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.mrc-btn:hover{ background: color-mix(in srgb, var(--accent) 8%, #fff); }

.mrc-body{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; padding: 10px 24px 20px; }
.mrc-body h3{ margin:.5rem 0 8px; color: var(--accentText); }
.mrc-list{ margin:0; padding-left:18px }
.mrc-steps{ margin:0; padding-left:18px }
.mrc-notes{ padding:0 24px 20px }
.mrc-notes h3{ margin:.5rem 0 8px; color: var(--accentText); }
.mrc-cookmode{ display:flex; align-items:center; gap:10px; padding: 0 24px 20px; border-top:1px dashed color-mix(in srgb, var(--accent) 40%, #0000); }
.mrc-toggle{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.mrc-toggle .mrc-toggle-ui{ width:44px; height:26px; background:#ddd; border-radius:999px; position:relative; display:inline-block; vertical-align:middle; }
.mrc-toggle input{ display:none; }
.mrc-toggle .mrc-toggle-ui::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:.2s }
.mrc-toggle input:checked + .mrc-toggle-ui{ background:var(--accent); }
.mrc-toggle input:checked + .mrc-toggle-ui::after{ transform: translateX(18px); }

.mrc-social{ background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 22%, #fff), color-mix(in srgb, var(--accent) 22%, #fff) 14px, color-mix(in srgb, var(--accent) 18%, #0000) 14px, color-mix(in srgb, var(--accent) 18%, #0000) 28px); padding: 18px 24px; }
.mrc-social-inner{ background:#fff; border:1px solid color-mix(in srgb, var(--accent) 25%, #0000); border-radius:14px; padding:14px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mrc-social-title{ font-weight:800; letter-spacing:.02em; color:var(--accentText) }
.mrc-social-actions{ display:flex; align-items:center; gap:14px }
.mrc-ig{ opacity:.8 }
.mrc-pin{ border:1px solid color-mix(in srgb, var(--accent) 35%, #0000); padding:8px 10px; border-radius:999px; text-decoration:none; }

@media (max-width: 720px){
    .mrc-card .mrc-hero{ flex-direction:column; text-align:center }
    .mrc-body{ grid-template-columns: 1fr; }
}
