/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.ingredients-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.recipe-card {
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
    will-change: transform, background-color;
    background-color: #fff;
}
.recipe-card:hover,
.recipe-card:focus-within {
    transform: translateY(-2px) scale(1.02);
    background-color: #f8f9fa; /* светло-серый */
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
}

.recipe-img {
    transition: transform .2s ease;
}
.recipe-card:hover .recipe-img,
.recipe-card:focus-within .recipe-img {
    transform: scale(1.01);
}

.recipe-mini-modal {
    position: absolute;
    z-index: 1055;
    max-width: 420px;
    width: max-content;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .75rem;
    box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.12);
    padding: .75rem .9rem;
    pointer-events: none; /* чтобы не мешать ховеру карточки */
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
}

.recipe-mini-modal.show {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .recipe-card, .recipe-img, .recipe-mini-modal {
        transition: none;
    }
}