/* =========================================================
 * Luxe Minimal - Brand Story (brand.css)
 * YES Exosome 品牌故事頁專屬樣式
 * ========================================================= */

/* ---------- 頁面底色：品牌頁改純白（覆蓋 --surface #faf8f7） ---------- */
.lm-body
{
    --surface: #ffffff;
    --coral: #d98a7a;
}

/* ---------- Hero ---------- */
.brand-hero
{
    background: var(--surface);
}

.brand-hero-img
{
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.brand-hero-img img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand-hero-intro
{
    max-width: 720px;
    margin: 0 auto;
    padding: 56px 24px 8px;
    text-align: center;
}

@media (min-width: 768px)
{
    .brand-hero-intro
    {
        padding: 80px 24px 8px;
    }
}

.brand-hero-intro h1
{
    font-family: var(--font-serif);
    font-size: 34px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    letter-spacing: 0.04em;
    margin: 0 0 18px;
}

@media (min-width: 768px)
{
    .brand-hero-intro h1
    {
        font-size: 46px;
    }
}

.brand-hero-intro p
{
    color: var(--ink-light);
    font-size: 17px;
    line-height: 1.9;
    margin: 0;
}

@media (min-width: 768px)
{
    .brand-hero-intro p
    {
        font-size: 22px;
    }
}

/* ---------- Alternating Image / Text Sections ---------- */
.brand-section
{
    padding: 56px 0;
}

@media (min-width: 768px)
{
    .brand-section
    {
        padding: 80px 0;
    }
}

.brand-grid
{
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: center;
}

@media (min-width: 768px)
{
    .brand-grid
    {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }

    .brand-grid.is-reverse .brand-figure
    {
        order: -1;
    }
}

.brand-figure
{
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--surface-warm);
}

.brand-figure img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Text Block ---------- */
.brand-text h2
{
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin: 0 0 28px;
}

@media (min-width: 768px)
{
    .brand-text h2
    {
        font-size: 38px;
    }
}

@media (min-width: 1024px)
{
    .brand-text h2
    {
        font-size: 42px;
    }
}

.brand-text p
{
    color: var(--ink-light);
    font-size: 17px;
    line-height: 1.95;
    margin: 0 0 18px;
}

@media (min-width: 768px)
{
    .brand-text p
    {
        font-size: 22px;
    }
}

.brand-text p:last-child
{
    margin-bottom: 0;
}

.brand-text strong
{
    color: var(--ink);
    font-weight: 600;
}

/* ---------- 標題列含 Logo（栯蘋果段） ---------- */
.brand-title-row
{
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 28px;
}

.brand-title-row .lm-eyebrow
{
    margin: 0 0 6px;
}

.brand-title-row h2
{
    margin: 0;
}

.brand-logo
{
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

@media (min-width: 768px)
{
    .brand-logo
    {
        width: 100px;
        height: 100px;
    }
}

/* ---------- Full-width Banner ---------- */
.brand-banner
{
    width: 100%;
}

.brand-banner img
{
    width: 100%;
    height: auto;
}

/* ---------- Four Commitments ---------- */
.brand-values
{
    background: #ffffff;
    padding: 64px 24px;
}

@media (min-width: 768px)
{
    .brand-values
    {
        padding: 96px 24px;
    }
}

.brand-values-inner
{
    max-width: 760px;
    margin: 0 auto;
}

.brand-values-head
{
    text-align: center;
    margin: 0 0 48px;
}

.brand-values-head h2
{
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 8px 0 0;
}

@media (min-width: 768px)
{
    .brand-values-head h2
    {
        font-size: 36px;
    }
}

.brand-value
{
    padding: 28px 0;
    border-top: 1px solid var(--brand-lighter);
}

.brand-value:first-of-type
{
    border-top: none;
}

.brand-value h3
{
    font-size: 19px;
    font-weight: 600;
    color: var(--coral);
    letter-spacing: 0.02em;
    margin: 0 0 12px;
}

@media (min-width: 768px)
{
    .brand-value h3
    {
        font-size: 21px;
    }
}

.brand-value p
{
    color: var(--ink-light);
    font-size: 14px;
    line-height: 1.9;
    margin: 0;
}

@media (min-width: 768px)
{
    .brand-value p
    {
        font-size: 15px;
    }
}

/* ---------- CTA ---------- */
.brand-cta
{
    background: var(--surface);
    padding: 72px 24px;
    border-top: 1px solid var(--brand-lighter);
}

@media (min-width: 768px)
{
    .brand-cta
    {
        padding: 104px 24px;
    }
}

.brand-cta-inner
{
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.brand-cta-inner h2
{
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin: 12px 0 20px;
}

@media (min-width: 768px)
{
    .brand-cta-inner h2
    {
        font-size: 44px;
    }
}

.brand-cta-inner > p
{
    color: var(--ink-light);
    font-size: 15px;
    line-height: 1.8;
    max-width: 540px;
    margin: 0 auto 36px;
}

.brand-cta-buttons
{
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

@media (min-width: 640px)
{
    .brand-cta-buttons
    {
        flex-direction: row;
    }
}

/* ---------- 中文字型：思源宋體（Noto Serif TC，貼近設計稿明體） ---------- */
.brand-hero-intro h1,
.brand-text h2,
.brand-values-head h2,
.brand-cta-inner h2
{
    font-family: 'Cormorant', 'Noto Serif TC', 'Songti TC', serif;
    font-weight: 600;
}

.brand-hero-intro p,
.brand-text p,
.brand-cta-inner > p
{
    font-family: 'Noto Serif TC', 'Songti TC', serif;
}

/* ---------- 桌機強制斷行（對齊設計稿），手機自然換行 ---------- */
.pc-br
{
    display: none;
}

@media (min-width: 1280px)
{
    .pc-br
    {
        display: inline;
    }
}

/* ---------- Scroll Fade-in ---------- */
.fade-in
{
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.visible
{
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce)
{
    .fade-in
    {
        opacity: 1;
        transform: none;
        transition: none;
    }
}