/* Understanding Ayurveda styles ("Understanding Ayurveda.pdf").
   Shared: page-hero, balance-cta-section (assets/css/custom.css). */

body.page-template-understanding-ayurveda-page {
    --ua-navy: #131a2b;
    --ua-text: #5c5c5c;
    --ua-gold: #c58b5f;
    --ua-green: #3f6a37;
    --ua-sage: #6b8047;
    --ua-rust: #b55a2a;
    --ua-sky: #3d8bb5;
}

/* ---- Shared bits ---- */
.ua-title {
    margin: 0 0 22px;
    color: var(--ua-navy);
    font-family: var(--font-secondary);
    font-size: var(--fs-h2);
    font-weight: 600;
    line-height: 1.12;
}
.ua-heading {
    max-width: 860px;
    margin: 0 auto 44px;
    text-align: center;
}
.ua-heading p,
.ua-sub {
    margin: 0 0 14px;
    color: var(--ua-text);
    font-size: var(--fs-body);
    line-height: 1.65;
}

/* Lotus between two short gold rules, above centred headings. */
.ua-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}
/* Small uppercase label above a section title, as on the other pages */
.ua-kicker {
    display: block;
    margin: 0 0 12px;
    color: #454b52;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.ua-ornament + .ua-kicker {
    margin-top: -8px;
}
.ua-ornament::before,
.ua-ornament::after {
    content: '';
    width: 62px;
    height: 1px;
    background: var(--ua-gold);
}
.ua-ornament svg {
    width: 44px;
    height: 44px;
    fill: none;
    stroke: var(--ua-rust);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Every inline icon is a stroked line drawing. */
.ua-aim__icon svg,
.ua-venn svg,
.ua-dosha__icon svg,
.ua-step__icon svg,
.ua-panel__icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Breadcrumb over the hero photo: light links. */
.page-template-understanding-ayurveda-page .breadcrumb-nav--on-image a,
.page-template-understanding-ayurveda-page .breadcrumb-nav--on-image li {
    color: rgb(255 255 255 / 92%);
}
.page-template-understanding-ayurveda-page .breadcrumb-nav--on-image a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Faint leaf sprays in the section corners (as in the mockup). */
.ua-intro,
.ua-purpose,
.ua-nourish {
    position: relative;
    isolation: isolate;
}
.ua-intro::before,
.ua-purpose::before,
.ua-nourish::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-repeat: no-repeat;
    opacity: .35;
    pointer-events: none;
}
.ua-intro::before {
    background-image: url('../assets/images/lef-background-left.webp');
    background-position: left 30px;
    background-size: 200px auto;
}
.ua-purpose::before {
    background-image: url('../assets/images/lef-background-right.webp');
    background-position: right top;
    background-size: 240px auto;
}
.ua-nourish::before {
    background-image: url('../assets/images/lef-background-left.webp'), url('../assets/images/lef-background-right.webp');
    background-position: left 30px, right 30px;
    background-size: 190px auto;
}

/* ---- Understanding Life in Its Wholeness ---- */
.ua-intro {
    padding: 70px 0 64px;
    overflow: hidden;
    background: #fefdf9;
    text-align: center;
}
.ua-intro p {
    max-width: 960px;
    margin: 0 auto 16px;
    color: var(--ua-text);
    font-size: var(--fs-lead);
    line-height: 1.6;
}

/* ---- To Preserve Health. To Restore Balance. ---- */
.ua-purpose {
    padding: 64px 0 80px;
    background: #f6f4e8;
}
.ua-shloka {
    display: inline-block;
    margin: 4px 0 18px;
    padding: 14px 64px;
    border-left: 4px solid var(--ua-sage);
    border-radius: 4px;
    background: #e6eadb;
}
.ua-shloka p {
    margin: 0;
    color: var(--ua-navy);
    font-family: var(--font-secondary);
    font-size: var(--fs-h4);
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;
}
.ua-purpose__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
}
.ua-aim {
    --tint: #e2e6cc;
    --tone: var(--ua-green);
    position: relative;
    display: flex;
    min-height: 400px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--tint);
    box-shadow: 0 8px 26px rgb(60 50 30 / 8%);
}
.ua-aim--restore {
    --tint: #f5ddc8;
    --tone: var(--ua-rust);
}
.ua-aim__image {
    position: absolute;
    top: 0;
    right: 0;
    width: 52%;
    height: 100%;
    object-fit: cover;
}
/* Fade the photo into the card colour, as in the mockup. */
.ua-aim::after {
    content: '';
    position: absolute;
    inset: 0 0 0 auto;
    width: 52%;
    background: linear-gradient(90deg, var(--tint) 0%, rgb(255 255 255 / 0%) 45%);
    pointer-events: none;
}
.ua-aim__body {
    position: relative;
    z-index: 1;
    width: 52%;
    padding: 20px 34px 34px;
}
.ua-aim__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 98px;
    height: 98px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tone) 18%, var(--tint));
    color: var(--tone);
}
.ua-aim__icon svg {
    width: 52px;
    height: 52px;
}
.ua-aim h3 {
    margin: 0 0 14px;
    color: var(--ua-navy);
    font-family: var(--font-secondary);
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.12;
}
.ua-aim p {
    margin: 0;
    color: var(--ua-text);
    font-size: var(--fs-small);
    line-height: 1.65;
}
.ua-aim__body::after {
    content: '';
    display: block;
    width: 62px;
    height: 2px;
    margin-top: 24px;
    background: var(--tone);
}

/* ---- Your Individual Constitution ---- */
.ua-constitution {
    padding: 90px 0;
    background: #fff;
}
.ua-constitution__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1180px;
}
.ua-constitution__content p {
    margin: 0 0 12px;
    color: var(--ua-text);
    font-size: var(--fs-body);
    line-height: 1.6;
}
.ua-venn {
    position: relative;
    width: min(390px, 100%);
    aspect-ratio: 1 / .92;
    margin: 0 auto;
}
.ua-venn__circle {
    --c: #d5edf7;
    --ink: var(--ua-sky);
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 56%;
    aspect-ratio: 1;
    border: 2px solid color-mix(in srgb, var(--ink) 25%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--c) 78%, transparent);
    color: var(--ink);
    font-family: var(--font-secondary);
    font-size: var(--fs-h4);
    font-weight: 700;
    mix-blend-mode: multiply;
}
.ua-venn__circle svg {
    width: 54px;
    height: 54px;
}
.ua-venn__circle--vata {
    top: 0;
    left: 22%;
    padding-bottom: 12%;
}
.ua-venn__circle--pitta {
    --c: #fddec1;
    --ink: #c0561c;
    bottom: 0;
    left: 0;
    padding-right: 6%;
}
.ua-venn__circle--kapha {
    --c: #dde7c5;
    --ink: #2b5a22;
    right: 0;
    bottom: 0;
    padding-left: 6%;
}

/* ---- Vata. Pitta. Kapha. ---- */
.ua-doshas {
    padding: 80px 0 70px;
    background: #fcf5eb;
}
.ua-doshas .ua-heading {
    margin-bottom: 48px;
}
.ua-doshas__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1150px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.ua-dosha {
    --c: #d5edf7;
    --ink: var(--ua-sky);
    padding: 0 24px;
    text-align: center;
}
.ua-dosha + .ua-dosha {
    border-left: 1px solid #e4d9c8;
}
.ua-dosha--pitta {
    --c: #fddec1;
    --ink: #c0561c;
}
.ua-dosha--kapha {
    --c: #dde7c5;
    --ink: #2b5a22;
}
.ua-dosha__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--c);
    color: var(--ink);
}
.ua-dosha__icon svg {
    width: 46px;
    height: 46px;
}
.ua-dosha h3 {
    margin: 0 0 6px;
    color: var(--ua-navy);
    font-family: var(--font-secondary);
    font-size: var(--fs-h4);
    font-weight: 700;
}
.ua-dosha p {
    margin: 0;
    color: var(--ua-text);
    font-size: var(--fs-small);
    line-height: 1.55;
}
.ua-doshas__note {
    margin: 64px auto 0;
    color: var(--ua-text);
    font-size: var(--fs-small);
    line-height: 1.6;
    text-align: center;
}

/* ---- Your Nature. Your Present Balance. ---- */
.ua-nature {
    padding: 64px 0;
    background: #f6f6ee;
}
.ua-nature__row {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 64px;
    align-items: center;
}
.ua-nature__figure img {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    margin: 0 auto;
}
.ua-nature__content p {
    margin: 0 0 22px;
    color: var(--ua-text);
    font-size: var(--fs-lead);
    line-height: 1.6;
}

/* ---- The Power of Digestion & Transformation ---- */
.ua-agni {
    padding: 70px 0 40px;
    background: #fff;
}
.ua-agni__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.ua-agni__content p {
    margin: 0 0 18px;
    color: var(--ua-text);
    font-size: var(--fs-body);
    line-height: 1.7;
}
.ua-agni__figure img {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 0 auto;
}

/* ---- Nourishment. Elimination. Vitality. ---- */
.ua-tissues {
    padding: 50px 0;
    background: #faf9f4;
}
.ua-tissues__row {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 64px;
    align-items: center;
}
.ua-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ua-step {
    --c: #f4dec7;
    --ink: #822a0b;
    position: relative;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 30px;
    padding-bottom: 26px;
}
.ua-step:last-child {
    padding-bottom: 0;
}
/* Connector line between the icon circles. */
.ua-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 104px;
    bottom: 6px;
    left: 47px;
    width: 1px;
    background: #d9cfbf;
}
.ua-step--mala {
    --c: #e7ead5;
    --ink: #1f4f1b;
}
.ua-step--ojas {
    --c: #fae3ba;
    --ink: #885414;
}
.ua-step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--c);
    color: var(--ink);
}
.ua-step__icon svg {
    width: 50px;
    height: 50px;
}
.ua-step__body {
    padding-left: 30px;
    border-left: 1px solid #ddd3c4;
}
.ua-step h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-secondary);
    font-size: var(--fs-h4);
    font-weight: 700;
}
.ua-step__label {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
    font-size: var(--fs-body);
}
.ua-step p {
    margin: 0;
    color: var(--ua-text);
    font-size: var(--fs-small);
    line-height: 1.6;
}
.ua-tissues__content p {
    margin: 0 0 18px;
    color: var(--ua-text);
    font-size: var(--fs-body);
    line-height: 1.7;
}

/* ---- Ama / Daily & Seasonal Rhythms ---- */
.ua-panels {
    padding: 48px 0;
    background: #fff;
}
.ua-panels__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.ua-panel {
    --bg: #324029;
    position: relative;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 36px;
    align-items: center;
    padding: 44px 40px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--bg);
    color: #fff;
}
.ua-panel--brown {
    --bg: #713c1c;
}
.ua-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgb(255 255 255 / 14%);
    color: #f1dfb8;
}
.ua-panel__icon svg {
    width: 96px;
    height: 96px;
    stroke-width: 1.4;
}
.ua-panel__body {
    padding-left: 36px;
    border-left: 1px solid rgb(255 255 255 / 25%);
}
.ua-panel__title {
    margin: 0 0 18px;
    color: #fff;
    font-family: var(--font-secondary);
    font-size: var(--fs-h3);
    font-weight: 500;
    line-height: 1.15;
}
.ua-panel p {
    margin: 0 0 16px;
    color: rgb(255 255 255 / 90%);
    font-size: var(--fs-small);
    line-height: 1.65;
}
.ua-panel p:last-child {
    margin-bottom: 0;
}

/* ---- Food as Part of Wellbeing ---- */
.ua-nourish {
    padding-top: 56px;
    background: linear-gradient(#faf3e8, #f6ecdf);
    text-align: center;
}
.ua-nourish p {
    max-width: 1020px;
    margin: 0 auto 12px;
    color: var(--ua-text);
    font-size: var(--fs-body);
    line-height: 1.6;
}
.ua-nourish__image {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 10px;
}

/* ---- Responsive ---- */
@media (max-width: 1199.98px) {
    .ua-panel {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 36px 32px;
    }
    .ua-panel__icon {
        width: 120px;
        height: 120px;
    }
    .ua-panel__icon svg {
        width: 64px;
        height: 64px;
    }
    .ua-panel__body {
        padding-left: 0;
        border-left: 0;
    }
}
@media (max-width: 991.98px) {
    .ua-purpose__row,
    .ua-panels__row,
    .ua-constitution__row,
    .ua-nature__row,
    .ua-agni__row,
    .ua-tissues__row {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .ua-constitution,
    .ua-doshas,
    .ua-nature,
    .ua-agni {
        padding: 60px 0;
    }
    .ua-tissues__content {
        order: -1;
    }
    .ua-shloka {
        padding: 14px 28px;
    }
}
@media (max-width: 767.98px) {
    .ua-intro::before,
    .ua-purpose::before,
    .ua-nourish::before {
        background-size: 110px auto;
    }
    .ua-doshas__row {
        grid-template-columns: 1fr;
        gap: 34px;
    }
    .ua-dosha + .ua-dosha {
        padding-top: 34px;
        border-top: 1px solid #e4d9c8;
        border-left: 0;
    }
    .ua-doshas__note {
        margin-top: 44px;
    }
    .ua-nourish__image {
        height: 160px;
        object-fit: cover;
    }
}
@media (max-width: 575.98px) {
    .ua-aim {
        min-height: 0;
        flex-direction: column;
    }
    .ua-aim__image,
    .ua-aim::after {
        position: static;
        width: 100%;
        height: 220px;
    }
    .ua-aim::after {
        display: none;
    }
    .ua-aim__body {
        width: 100%;
        padding: 26px 24px 30px;
    }
    .ua-aim__icon {
        width: 76px;
        height: 76px;
    }
    .ua-step {
        grid-template-columns: 72px 1fr;
        gap: 18px;
    }
    .ua-step__icon {
        width: 72px;
        height: 72px;
    }
    .ua-step__icon svg {
        width: 38px;
        height: 38px;
    }
    .ua-step:not(:last-child)::before {
        top: 80px;
        left: 35px;
    }
    .ua-step__body {
        padding-left: 18px;
    }
}