/* =============================================
   RESPONSIVE.CSS — Kaikki mediatyylit
   ============================================= */

@media (max-width: 768px) {
    header { flex-direction: column; text-align: center; }
    .ehdotus-linkki { margin: 10px 0; }
    .vinkit-dropdown { margin-left: 0; width: 100%; }
    .vinkit-nappi { width: 100%; }
    .haku-wrapper { width: 100%; }
    .hakukentta { width: 100%; box-sizing: border-box; }
    .recipeLayout { flex-direction: column-reverse; }
    .recipeImage { height: 250px; }
    .ylivuoto-box {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0;
        opacity: 1;
        transform: none;
        pointer-events: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, opacity 0.3s ease;
    }
    .ylivuoto-box.auki { pointer-events: auto; max-height: 600px; opacity: 1; }
    .kauppalista-nappi span:first-of-type { display: none; }
    .kauppalista-header { flex-direction: column; align-items: flex-start; }
    .kauppalista-body { max-height: 55vh; }
}

@media (max-width: 600px) {
    .input-ryhma { flex-direction: column; gap: 15px; }
}