/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

/* ============================================================
   P3. 材质揭秘 (Sweet Ingredients) — 左右交替图文布局
   排版照搬产品功能模块，色系为甜美风格
   ============================================================ */
.sweet-ingredients-module .sweet-section-icon {
    background: linear-gradient(135deg, var(--macaron-pink), var(--macaron-hot-pink));
}

.sweet-ingredients-module {
    background: transparent;
    position: relative;
    margin-bottom: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.sweet-ingredients-content {
    padding: 12px var(--macaron-padding-x) 22.5px;
}

/* 列表容器 - 纵向排列 */
.sweet-ingredients-list {
    display: flex;
    flex-direction: column;
    gap: calc(48px * var(--scale-factor, 1));
    padding: 0;
}

/* 单行 - 左右图文 */
.ingredient-row {
    display: flex;
    align-items: center;
    gap: calc(20px * var(--scale-factor, 1));
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    border: none;
    transition: none;
}

.ingredient-row:hover {
    transform: none;
    box-shadow: none;
}

.ingredient-row.align-left {
    flex-direction: row;
}

.ingredient-row.align-right {
    flex-direction: row-reverse;
}

.ingredient-row.align-right .ingredient-content {
    text-align: right;
}

.ingredient-row.align-right .ingredient-tags {
    justify-content: flex-end;
}

/* 图片区域 */
.ingredient-image {
    flex: 3 0 30%;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: calc(18px * var(--scale-factor, 1));
    overflow: hidden;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid rgba(244, 143, 177, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(244, 143, 177, 0.1);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ingredient-row:hover .ingredient-image {
    transform: translateY(-4px) scale(1.02);
}

.ingredient-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ingredient-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(248, 187, 208, 0.15), rgba(200, 230, 201, 0.15));
}

.ingredient-image-placeholder .placeholder-text {
    font-size: calc(14px * var(--scale-factor, 1));
    color: var(--macaron-hot-pink);
    opacity: 0.5;
    font-family: var(--normal-font);
}

/* 文字内容区 */
.ingredient-content {
    flex: 7 0 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(6px * var(--scale-factor, 1));
    text-align: left;
}

/* 序号 */
.ingredient-step {
    font-size: calc(17px * var(--scale-factor, 1));
    font-weight: 100;
    color: var(--macaron-hot-pink);
    letter-spacing: 1.5px;
    font-family: var(--normal-font) !important;
    opacity: 0.7;
}

/* 成分名称 */
.ingredient-name {
    font-size: calc(24px * var(--scale-factor, 1));
    font-weight: 100;
    color: var(--macaron-text);
    font-family: var(--bold-font), sans-serif !important;
    letter-spacing: 1px;
    line-height: 1.3;
}

/* 功效描述 */
.ingredient-desc {
    font-size: calc(20px * var(--scale-factor, 1));
    color: var(--macaron-text-light);
    line-height: 1.7;
    margin: 0;
    font-weight: 100;
    font-family: var(--normal-font);
}

/* 标签 */
.ingredient-tags {
    display: flex;
    flex-wrap: wrap;
    gap: calc(6px * var(--scale-factor, 1));
    margin-top: calc(4px * var(--scale-factor, 1));
}

.ingredient-tag-badge {
    font-size: calc(16px * var(--scale-factor, 1));
    color: var(--macaron-hot-pink);
    background: rgba(248, 187, 208, 0.18);
    padding: calc(3px * var(--scale-factor, 1)) calc(8px * var(--scale-factor, 1)) calc(5px * var(--scale-factor, 1));
    border-radius: 5px;
    border: 1px solid rgba(244, 143, 177, 0.25);
    font-weight: 200;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    letter-spacing: 0;
    box-sizing: border-box;
    white-space: nowrap;
}

@media (max-width: 500px) {
    .ingredient-row {
        flex-direction: column !important;
        gap: calc(12px * var(--scale-factor, 1));
    }
    .ingredient-image {
        flex: none;
        width: 100%;
        aspect-ratio: 16 / 9;
    }
    .ingredient-content {
        text-align: left !important;
    }
    .ingredient-tags {
        justify-content: flex-start !important;
    }
}