/* ═══════════════════════════════════════════════════════════════════════
   STUFF CURIOUS — RECIPE EDITS PATCH
   Load AFTER recipes.css so these rules win.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Featured image: match .recipe-body width exactly ───────────────────
   .recipe-body uses: max-width: var(--max-w); padding: ... var(--gutter);
   The old .recipe-hero-image nested a .site-wrap inside AND added its own
   vertical padding of 2.5rem, creating the extra space. We now align the
   image container to the same content box as .recipe-body.               */
.recipe-hero-image {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--gutter);          /* horizontal gutter only — no wide side space */
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: 0;                  /* recipe-body already has top padding */
}
.recipe-hero-image img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: var(--radius);
    filter: grayscale(20%);
    transition: filter 0.3s;
}
.recipe-hero-image img:hover { filter: grayscale(0%); }

/* ─── Recipe stats: now 3 boxes (Prep / Cook / Serves) ───────────────────
   With the Total box removed, each box should share space evenly.        */
.recipe-stats {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
}
.recipe-stat {
    flex: 1 1 0;
    min-width: 0;                      /* allow shrink without overflow */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    border-right: 1px solid var(--border-light);
    text-align: center;
    gap: 0.2rem;
    background: var(--bg-card);
}
.recipe-stat:last-child { border-right: none; }
.recipe-stat__value {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--text-primary);
    line-height: 1.15;
    word-break: break-word;           /* wrap long values like "2.5 hours" cleanly */
}

/* ─── MOBILE: keep the 3 stat boxes readable, never overflow ─────────── */
@media (max-width: 560px) {
    .recipe-stats {
        /* 3 across still fits on phones once Total is gone, but tighten padding */
    }
    .recipe-stat {
        padding: 0.9rem 0.5rem;
    }
    .recipe-stat__icon {
        width: 16px;
        height: 16px;
    }
    .recipe-stat__label {
        font-size: 0.55rem;
    }
    .recipe-stat__value {
        font-size: 0.9rem;
    }
    .recipe-hero-image {
        margin-top: 1.25rem;
    }
    .recipe-hero-image img {
        max-height: 300px;
    }
}

/* Extra-small phones: stack stats 3-up but allow value to wrap to 2 lines */
@media (max-width: 380px) {
    .recipe-stat {
        padding: 0.8rem 0.35rem;
    }
    .recipe-stat__value {
        font-size: 0.82rem;
    }
}