/**
 * recipe-utensils CSS
 * Component-specific styles only (uses global utility classes)
 */

/* Container - uses: bg-brand-50 rounded-2xl p-8 */
.recipe-utensils {
    margin-bottom: var(--spacing-8);
}

/* Heading */
.recipe-utensils h2 {
    margin: 0 0 var(--spacing-5);
}

/* Section Image */
.recipe-utensils .sec_image {
    display: flex;
    justify-content: center;
}

.recipe-utensils .sec_image img {
    height: auto;
    object-fit: cover;
    margin: var(--spacing-5) 0;
}

/* Utensil List */
.recipe-utensils .ingredients-list {
    display: grid;
    gap: var(--spacing-3);
}

/* Utensil Item */
.recipe-utensils .ingredient_li_item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--color-brand-100);
}

.recipe-utensils .ingredient_li_item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Mark Icon */
.recipe-utensils .ingredient-mark-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

.recipe-utensils .ingredient-mark-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

/* Utensil Description */
.recipe-utensils .ingredient_li_item .desc {
    /* No flex-grow - button stays inline after text on desktop */
}

/* Kaufen Button - inline after text, not right-aligned */
.recipe-utensils .ingredient_li_item .btn {
    margin-left: var(--spacing-3);
    flex-shrink: 0;
}

/* Ensure hover text color is white (per global button CSS) */
.recipe-utensils .ingredient_li_item .btn-primary:hover {
    color: var(--color-primary-foreground);
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .recipe-utensils {
        padding: var(--spacing-4);
    }
}