/* PyLoHerb — Hành trình cùng PyLo */

.pylo-journey {
    --journey-ink: var(--section-title-color, var(--primary, #1a3d2e));
    --journey-mute: var(--section-desc-color, #434843);
    --journey-serif: var(--site-font-family, "Playfair Display", Georgia, serif);
    --journey-sans: var(--site-font-family, "Public Sans", system-ui, sans-serif);
    background: #fff;
}

.pylo-journey__section {
    padding: var(--pylo-space-lg, clamp(24px, 2vw, 32px)) 0;
    background: var(--section-bg, #fff);
}

.pylo-journey__title {
    margin: 0 0 var(--pylo-space-sm, 20px);
    font-family: var(--journey-serif);
    font-size: var(--pylo-fs-h2, clamp(1.45rem, 2.8vw, 1.85rem));
    font-weight: 700;
    line-height: var(--pylo-lh-tight, 1.25);
    color: var(--journey-ink);
    text-align: center;
}

/* ── Intro: title LEFT | quote+desc RIGHT (mockup) ── */
.pylo-journey .pylo-journey__intro-head {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: var(--pylo-space-lg, clamp(24px, 2vw, 32px));
    margin-bottom: var(--pylo-space-lg, clamp(24px, 2vw, 32px));
    width: 100%;
}

.pylo-journey .pylo-journey__intro-head > .pylo-journey__title {
    flex: 0 0 40% !important;
    width: 40% !important;
    max-width: 40% !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: var(--pylo-fs-h1, clamp(1.75rem, 3.5vw, 2.35rem)) !important;
    line-height: 1.2 !important;
    color: var(--section-title-color, #fff) !important;
}

.pylo-journey .pylo-journey__intro-copy {
    flex: 1 1 60% !important;
    width: 60% !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: left !important;
}

.pylo-journey .pylo-journey__intro-copy .pylo-journey__quote,
.pylo-journey .pylo-journey__intro-copy .pylo-journey__desc,
.pylo-journey .pylo-journey__intro-copy .pylo-cms-richtext {
    text-align: left !important;
    color: var(--section-desc-color, #fff) !important;
}

.pylo-journey__quote {
    margin: 0 0 14px;
    font-family: var(--journey-serif);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    color: var(--journey-mute);
    text-align: left;
}

.pylo-journey__desc {
    margin: 0;
    font-family: var(--journey-sans);
    font-size: var(--pylo-section-desc-size, 15px);
    line-height: var(--pylo-section-desc-lh, 1.7);
    color: var(--journey-mute);
    text-align: left;
}

.pylo-journey__intro-copy .pylo-cms-richtext.pylo-journey__desc {
    font-family: var(--journey-sans);
    font-size: var(--pylo-section-desc-size, 15px);
    line-height: var(--pylo-section-desc-lh, 1.7);
}

.pylo-journey__desc p,
.pylo-journey__intro-copy .pylo-cms-richtext p {
    margin: 0 0 var(--pylo-section-desc-gap, 1em);
    font-size: inherit;
    line-height: inherit;
}

.pylo-journey__desc p:last-child,
.pylo-journey__intro-copy .pylo-cms-richtext p:last-child {
    margin-bottom: 0;
}

.pylo-journey__desc em,
.pylo-journey__desc i {
    font-style: italic;
    font-weight: 700;
}

/* Captions under intro photos stay dark on the tan band */
.pylo-journey__intro .pylo-journey__card-cap {
    color: #3d2e24;
}

.pylo-journey__intro .pylo-journey__card-cap span {
    color: #3d2e24;
}

.pylo-journey__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 22px);
}

.pylo-journey__card {
    margin: 0;
}

.pylo-journey__card-media {
    border-radius: 4px;
    overflow: hidden;
    background: #eee9e0;
}

.pylo-journey__card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.pylo-journey__card-cap {
    margin: 14px 0 0;
    font-family: var(--journey-sans);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--journey-ink);
    text-align: center;
}

.pylo-journey__card-cap span {
    display: block;
    font-weight: 600;
}

/* ── Process: tall phone mockups ── */
.pylo-journey__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 3vw, 32px);
    align-items: start;
    margin: 36px 0 28px;
}

.pylo-journey__step {
    text-align: center;
}

.pylo-journey__step-media {
    width: min(100%, 400px);
    margin: 0 auto 16px;
    border-radius: 28px;
    overflow: hidden;
    background: #f3f0ea;
    box-shadow: 0 18px 44px rgba(26, 61, 46, 0.14);
}

.pylo-journey__step-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    display: block;
}

.pylo-journey__step-title {
    margin: 0;
    font-family: var(--journey-sans);
    font-size: 15px;
    font-weight: 700;
    color: var(--journey-ink);
}

.pylo-journey .pylo-journey__process-desc {
    margin: 0 !important;
    max-width: none;
    font-family: var(--journey-sans);
    font-size: var(--pylo-section-desc-size, 15px);
    line-height: 1.55;
    color: var(--journey-mute);
    text-align: left !important;
    white-space: normal;
}

.pylo-journey .pylo-journey__process-desc p {
    margin: 0 0 0.55em;
    font-size: inherit;
    line-height: inherit;
    text-align: inherit;
}

.pylo-journey .pylo-journey__process-desc p:last-child {
    margin-bottom: 0;
}

/* ── Products ── */
.pylo-journey__products-desc {
    margin: 0 auto 8px;
    max-width: 720px;
    font-family: var(--journey-sans);
    font-size: var(--pylo-section-desc-size, 15px);
    line-height: var(--pylo-section-desc-lh, 1.7);
    color: var(--journey-mute);
    text-align: center;
}

.pylo-journey__products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 28px;
}

.pylo-journey__products-grid .pyloherb-product-card {
    width: 100%;
    max-width: none;
}

.pylo-journey__more-wrap {
    margin-top: 32px;
    text-align: center;
}

.pylo-journey__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 36px;
    border-radius: 8px;
    background: var(--secondary-base, #9a7b4f);
    border: 1px solid var(--secondary-base, #9a7b4f);
    color: #fff;
    font-family: var(--journey-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.pylo-journey__more:hover {
    background: var(--hov-secondary-base, #7d6340);
    border-color: var(--hov-secondary-base, #7d6340);
    color: #fff;
    text-decoration: none;
}

/* Left mô tả → desktop justify; products-desc stays centered */
@media (min-width: 768px) {
    .pylo-journey .pylo-journey__intro-copy .pylo-journey__desc,
    .pylo-journey .pylo-journey__intro-copy .pylo-cms-richtext,
    .pylo-journey .pylo-journey__intro-copy .pylo-cms-richtext p,
    .pylo-journey .pylo-journey__process-desc,
    .pylo-journey .pylo-journey__process-desc p {
        text-align: justify !important;
        text-justify: inter-word;
    }
}

@media (max-width: 991.98px) {
    .pylo-journey__cards,
    .pylo-journey__steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pylo-journey__step-media {
        width: 100%;
        border-radius: 18px;
    }

    .pylo-journey__products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Only stack intro on small phones — keep 2-col like mockup on tablet+ */
@media (max-width: 767.98px) {
    .pylo-journey .pylo-journey__intro-head {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 18px;
    }

    .pylo-journey .pylo-journey__intro-head > .pylo-journey__title,
    .pylo-journey .pylo-journey__intro-copy {
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
    }

    .pylo-journey .pylo-journey__intro-head > .pylo-journey__title {
        text-align: left !important;
    }
}

@media (max-width: 575.98px) {
    .pylo-journey__cards,
    .pylo-journey__steps {
        grid-template-columns: 1fr;
    }

    .pylo-journey__products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .pylo-journey__step-media {
        width: min(100%, 280px);
    }
}