/* Scoped interactions for the five food principles on the TTC pages. */
#yogic-approach-food .principle-card.approach-slide.is-disclosure-ready {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    align-self: start;
    box-sizing: border-box;
    padding: 14px 18px !important;
    background: #EDE8DF !important;
    border: 1px solid rgba(196, 154, 53, .22) !important;
    border-radius: 13px !important;
    box-shadow: 0 8px 24px rgba(35, 29, 20, .035) !important;
    cursor: pointer;
    text-align: left;
}

#yogic-approach-food .principle-card.approach-slide.is-disclosure-ready .principle-num {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin: 2px 0 0;
    line-height: 1.25;
}

#yogic-approach-food .principle-card.approach-slide.is-disclosure-ready .principle-title {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    margin: 0;
    padding-right: 24px;
    line-height: 1.25;
}

#yogic-approach-food .principle-card.approach-slide.is-disclosure-ready .principle-desc {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
}

#yogic-approach-food .principle-card.approach-slide.is-disclosure-ready:focus-visible {
    outline: 2px solid var(--gold, #C49A35);
    outline-offset: 5px;
}

#yogic-approach-food .principle-card.is-disclosure-ready .principle-desc {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    transform: translateY(-5px);
    visibility: hidden;
    pointer-events: none;
    transition: max-height 560ms cubic-bezier(.22, .61, .36, 1), opacity 320ms ease, margin 420ms ease, transform 420ms ease, visibility 0s linear 560ms;
}

#yogic-approach-food .principle-card.is-disclosure-ready.is-open .principle-desc {
    max-height: var(--principle-description-height, 280px);
    opacity: 1;
    margin-top: 9px;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

#yogic-approach-food .principle-card.approach-slide.is-disclosure-ready::after {
    content: "";
    position: absolute;
    top: 21px;
    right: 15px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--gold, #C49A35);
    border-bottom: 1.5px solid var(--gold, #C49A35);
    transform: rotate(45deg);
    transition: transform 420ms cubic-bezier(.22, .61, .36, 1);
}

#yogic-approach-food .principle-card.approach-slide.is-open::after {
    transform: rotate(225deg);
}

#yogic-approach-food .food-dot:focus-visible {
    outline: 2px solid var(--gold, #C49A35);
    outline-offset: 3px;
}

#yogic-approach-food .food-dot {
    appearance: none;
    display: block;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
}

#yogic-approach-food .principle-card.approach-slide.is-disclosure-ready:hover {
    border-color: rgba(196, 154, 53, 0.45) !important;
    box-shadow: 0 10px 28px rgba(35, 29, 20, 0.06) !important;
}

/* ========================================================
   Direction 1: Editorial Split Layout for #yogic-approach-food
   ======================================================== */
#yogic-approach-food .food-approach-split {
    width: 100%;
}

@media (min-width: 992px) {
    #yogic-approach-food .food-approach-split {
        display: grid;
        grid-template-columns: minmax(320px, 440px) minmax(0, 1fr);
        column-gap: 56px;
        align-items: start;
    }

    #yogic-approach-food .food-approach-intro-col {
        text-align: left;
        position: sticky;
        top: 110px;
        margin: 0;
        max-width: none;
    }

    #yogic-approach-food .food-approach-intro-col .approach-main-title {
        margin-bottom: 18px;
    }

    #yogic-approach-food .food-approach-intro-col .approach-intro-text p {
        margin-bottom: 14px;
    }

    #yogic-approach-food .food-approach-intro-col .approach-lead-in {
        margin-top: 18px;
        margin-bottom: 0;
    }

    #yogic-approach-food .food-approach-cards-col {
        min-width: 0;
        width: 100%;
    }

    #yogic-approach-food .principles-grid.approach-carousel-track {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #yogic-approach-food .principle-card.approach-slide {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        grid-column: auto !important;
        align-self: stretch !important;
    }

    #yogic-approach-food .principle-card-wide {
        grid-column: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    #yogic-approach-food .food-carousel-controls {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #yogic-approach-food .food-approach-split {
        display: block;
    }

    #yogic-approach-food .food-approach-intro-col {
        text-align: center;
        max-width: 720px;
        margin: 0 auto 32px;
    }

    #yogic-approach-food .food-approach-cards-col {
        max-width: 620px;
        margin: 0 auto;
        width: 100%;
    }

    #yogic-approach-food .principles-grid.approach-carousel-track {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #yogic-approach-food .principle-card.approach-slide {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        grid-column: auto !important;
        align-self: stretch !important;
    }

    #yogic-approach-food .principle-card-wide {
        grid-column: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    #yogic-approach-food .food-carousel-controls {
        display: none !important;
    }
}

@media (max-width: 767px) {
    #yogic-approach-food .food-approach-split {
        display: block;
    }

    #yogic-approach-food .food-approach-intro-col {
        text-align: center;
        margin: 0 auto 24px;
    }

    #yogic-approach-food .principle-card.approach-slide.is-disclosure-ready::after {
        top: 21px;
        right: 16px;
    }

    #yogic-approach-food .principle-card.approach-slide.is-disclosure-ready {
        padding: 15px 17px !important;
    }

}

@media (prefers-reduced-motion: reduce) {
    #yogic-approach-food .principle-card.is-disclosure-ready .principle-desc,
    #yogic-approach-food .principle-card.approach-slide.is-disclosure-ready::after {
        transition-duration: 320ms, 240ms, 280ms, 280ms, 0s !important;
        transition-delay: 0s, 0s, 0s, 0s, 320ms !important;
    }
}

/* On each TTC page, keep the food section heading, image, and paragraph in
   that reading order for tablet and mobile layouts. Desktop remains two-column. */
#food-yogic-nutrition .food-intro-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "heading image" "body image";
    align-items: center;
}

#food-yogic-nutrition .food-intro-text-col {
    grid-area: heading;
    min-width: 0;
}

#food-yogic-nutrition .food-intro-media-col {
    grid-area: image;
    align-self: center;
    min-width: 0;
}

#food-yogic-nutrition .food-intro-lead {
    grid-area: body;
    min-width: 0;
}

@media (max-width: 1024px) {
    #food-yogic-nutrition .food-intro-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        grid-template-areas: "heading" "image" "body";
        gap: 24px;
    }

    #food-yogic-nutrition .food-intro-media-col {
        width: 100%;
    }
}

/* ========================================================
   Full-Width Food Information Accordion: Compact Spacing
   ======================================================== */
#food-info-accordion.ttc200-food-accordion,
.ttc200-food-accordion {
    padding: 16px 0 20px !important;
}

#food-info-accordion .food-accordion-header {
    padding: 18px 0 !important;
}

@media (max-width: 767px) {
    #food-info-accordion.ttc200-food-accordion,
    .ttc200-food-accordion {
        padding: 14px 0 18px !important;
    }

    #food-info-accordion .food-accordion-header {
        padding: 15px 0 !important;
    }
}