/* =========================================================
   NATURLIVE — RECIPE PAGE
========================================================= */

.recipe-page {
    overflow: hidden;
}

.recipe-container {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        1240px
    );

    margin: 0 auto;
}


/* =========================================================
   BREADCRUMBS
========================================================= */

.recipe-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    padding: 24px 0 10px;

    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.5;

    color: var(--color-text-secondary);
}

.recipe-breadcrumbs a {
    color: var(--color-text-secondary);
    text-decoration: none;

    transition:
        color var(--transition-fast);
}

.recipe-breadcrumbs a:hover {
    color: var(--color-green);
}

.recipe-breadcrumbs > span:not(.recipe-breadcrumb-current) {
    color: var(--color-text-light);
}

.recipe-breadcrumb-current {
    color: var(--color-green);
}


/* =========================================================
   HERO
========================================================= */

.recipe-hero {
    padding: 45px 0 100px;
}

.recipe-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 45%)
        minmax(0, 55%);

    min-height: 540px;
}


/* IMAGE */

.recipe-hero-image {
    position: relative;

    min-height: 540px;

    overflow: hidden;

    background: var(--color-bg-soft);

    border-radius: var(--radius-sm);
}

.recipe-hero-image img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 540px;

    object-fit: cover;
}

.recipe-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
    min-height: 540px;

    background:
        linear-gradient(
            135deg,
            var(--color-bg-soft),
            var(--color-bg-green)
        );

    color: var(--color-green);

    font-family: var(--font-heading);
    font-size: 42px;
}


/* HERO CONTENT */

.recipe-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 60px 7% 60px 9%;
}

.recipe-eyebrow,
.recipe-section-eyebrow {
    margin-bottom: 18px;

    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;

    line-height: 1.4;

    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: var(--color-green);
}

.recipe-title {
    max-width: 650px;

    margin: 0;

    font-family: var(--font-heading);
    font-size: clamp(48px, 5vw, 64px);
    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.025em;

    color: var(--color-text);
}

.recipe-short-description {
    max-width: 500px;

    margin: 30px 0 0;

    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.7;

    color: var(--color-text-secondary);
}


/* =========================================================
   RECIPE META
========================================================= */

.recipe-meta {
    display: flex;
    align-items: stretch;

    width: fit-content;

    margin-top: 42px;
}

.recipe-meta-item {
    display: flex;
    flex-direction: column;

    gap: 5px;

    min-width: 100px;
}

.recipe-meta-label {
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.4;

    color: var(--color-text-light);
}

.recipe-meta-item strong {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;

    color: var(--color-green);
}

.recipe-meta-divider {
    width: 1px;

    margin: 0 24px;

    background: var(--color-border);
}


/* =========================================================
   GENERIC SECTIONS
========================================================= */

.recipe-section {
    padding: var(--section-space) 0;
}

.recipe-section-header {
    margin-bottom: 48px;
}

.recipe-section-header h2,
.recipe-narrow-content h2,
.recipe-info-card h2,
.recipe-usage-content h2 {
    margin: 0;

    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: 500;

    line-height: var(--lh-heading);

    letter-spacing: -0.015em;

    color: var(--color-text);
}

.recipe-section-header p {
    max-width: 650px;

    margin: 16px 0 0;

    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;

    color: var(--color-text-secondary);
}

.recipe-narrow-content {
    width: 100%;
    max-width: 800px;

    margin-right: auto;
    margin-left: auto;
}


/* =========================================================
   INTRO
========================================================= */

.recipe-intro {
    padding-top: 20px;
    padding-bottom: 110px;
}

.recipe-intro .recipe-narrow-content {
    text-align: center;
}

.recipe-intro .recipe-section-eyebrow {
    margin-bottom: 14px;
}

.recipe-main-content {
    margin-top: 32px;

    text-align: left;

    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.8;

    color: var(--color-text);
}

.recipe-main-content > * {
    max-width: 800px;
}

.recipe-main-content p {
    margin: 0 0 22px;
}

.recipe-main-content p:last-child {
    margin-bottom: 0;
}

.recipe-main-content h2,
.recipe-main-content h3 {
    margin-top: 42px;
    margin-bottom: 18px;

    font-family: var(--font-heading);
    font-weight: 500;
}

.recipe-main-content h2 {
    font-size: 34px;
}

.recipe-main-content h3 {
    font-size: 26px;
}

.recipe-main-content ul,
.recipe-main-content ol {
    padding-left: 24px;
    margin-bottom: 24px;
}

.recipe-main-content li {
    margin-bottom: 8px;
}


/* =========================================================
   INGREDIENTS
========================================================= */

.recipe-ingredients-section {
    background: var(--color-bg-soft);
}

.recipe-phases {
    max-width: 920px;
}

.recipe-phase {
    margin-bottom: 48px;
}

.recipe-phase:last-child {
    margin-bottom: 0;
}

.recipe-phase-title {
    margin: 0 0 18px;

    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 500;

    line-height: 1.2;

    color: var(--color-text);
}

.recipe-ingredient-list {
    background: var(--color-white);

    border: 1px solid var(--color-border);
}

.recipe-ingredient-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 60px;

    padding: 13px 22px;

    border-bottom: 1px solid var(--color-border);
}

.recipe-ingredient-row:last-child {
    border-bottom: 0;
}

.recipe-ingredient-name {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;

    color: var(--color-text);

    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;

    transition:
        color var(--transition-fast),
        text-decoration-color var(--transition-fast);
}

.recipe-ingredient-name:hover {
    color: var(--color-green);

    text-decoration-color: var(--color-green);
}

.recipe-ingredient-amount {
    flex-shrink: 0;

    margin-left: 30px;

    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;

    color: var(--color-text);
}


/* =========================================================
   TOOLS
========================================================= */

.recipe-tools-section {
    background: var(--color-white);
}

.recipe-tools-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.recipe-tool-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-height: 145px;

    padding: 25px;

    background: var(--color-white);

    border: 1px solid var(--color-border);

    transition:
        border-color var(--transition),
        transform var(--transition);
}

.recipe-tool-card:hover {
    border-color: var(--color-green);

    transform: translateY(-2px);
}

.recipe-tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    margin-bottom: 24px;

    color: var(--color-green);
}

.recipe-tool-icon svg {
    width: 27px;
    height: 27px;
}

.recipe-tool-card > span {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;

    color: var(--color-text);
}


/* =========================================================
   PREPARATION
========================================================= */

.recipe-preparation-section {
    padding-top: 100px;
}

.recipe-steps {
    position: relative;

    max-width: 980px;
}

.recipe-steps::before {
    content: "";

    position: absolute;

    top: 22px;
    bottom: 22px;
    left: 37px;

    width: 1px;

    background: var(--color-border);
}

.recipe-step {
    position: relative;

    display: grid;

    grid-template-columns: 76px minmax(0, 1fr);

    column-gap: 32px;

    padding: 0 0 65px;
}

.recipe-step:last-child {
    padding-bottom: 0;
}

.recipe-step-number {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding-top: 3px;

    background: var(--color-white);

    font-family: var(--font-heading);
    font-size: 46px;
    font-weight: 500;

    line-height: 1;

    color: var(--color-green);
}

.recipe-step-content {
    max-width: 720px;
}

.recipe-step-content h3 {
    margin: 0 0 13px;

    font-family: var(--font-heading);
    font-size: 29px;
    font-weight: 500;

    line-height: 1.2;

    color: var(--color-text);
}

.recipe-step-content p {
    margin: 0;

    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;

    color: var(--color-text-secondary);
}

.recipe-step-with-image {
    grid-template-columns:
        76px
        minmax(0, 1fr)
        minmax(240px, 320px);

    column-gap: 30px;
}

.recipe-step-image {
    align-self: start;
}

.recipe-step-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 220px;

    background: var(--color-bg-soft);

    border-radius: var(--radius-sm);

    color: var(--color-text-light);

    font-family: var(--font-body);
    font-size: 12px;
}


/* =========================================================
   USAGE
========================================================= */

.recipe-usage-section {
    padding-top: 80px;
}

.recipe-usage-box {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(300px, 0.7fr);

    gap: 70px;

    padding: 65px 70px;

    background: var(--color-bg-green);
}

.recipe-usage-content p {
    max-width: 650px;

    margin: 25px 0 0;

    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;

    color: var(--color-text);
}

.recipe-usage-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 24px;
}

.recipe-usage-meta-item {
    display: flex;
    flex-direction: column;

    gap: 4px;

    padding-bottom: 20px;

    border-bottom: 1px solid rgba(82, 107, 91, 0.2);
}

.recipe-usage-meta-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.recipe-usage-meta-item span {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: var(--color-text-secondary);
}

.recipe-usage-meta-item strong {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 500;

    color: var(--color-green-dark);
}


/* =========================================================
   INFO
========================================================= */

.recipe-info-section {
    padding-top: 50px;
}

.recipe-info-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.recipe-info-card {
    min-height: 310px;

    padding: 40px;

    background: var(--color-white);

    border: 1px solid var(--color-border);
}

.recipe-info-card h2 {
    font-size: 31px;
}

.recipe-info-card p {
    max-width: 500px;

    margin: 18px 0 25px;

    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.75;

    color: var(--color-text-secondary);
}

.recipe-info-eyebrow {
    margin-bottom: 13px;

    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: var(--color-green);
}

.recipe-info-value {
    display: inline-block;

    font-family: var(--font-heading);
    font-size: 23px;

    color: var(--color-green-dark);
}

.recipe-info-card-safety {
    display: grid;

    grid-template-columns: 42px minmax(0, 1fr);

    gap: 20px;

    background: #F5F1EA;

    border-color: transparent;
}

.recipe-info-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border: 1px solid var(--color-green);

    border-radius: 50%;

    font-family: var(--font-body);
    font-size: 15px;

    color: var(--color-green);
}


/* =========================================================
   SUBSTITUTION
========================================================= */

.recipe-substitution-section {
    padding-top: 90px;
}

.recipe-section-description {
    max-width: 700px;

    margin: 20px 0 0;

    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;

    color: var(--color-text-secondary);
}

.recipe-substitution {
    display: grid;

    grid-template-columns:
        minmax(200px, 1fr)
        60px
        minmax(200px, 1fr);

    align-items: center;

    max-width: 800px;

    margin-top: 50px;
    margin-right: auto;
    margin-left: auto;

    padding: 35px;

    border: 1px solid var(--color-border);
}

.recipe-substitution-label {
    margin-bottom: 8px;

    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: var(--color-text-light);
}

.recipe-substitution-item a {
    font-family: var(--font-heading);
    font-size: 28px;

    color: var(--color-text);

    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 5px;

    transition:
        color var(--transition-fast),
        text-decoration-color var(--transition-fast);
}

.recipe-substitution-item a:hover {
    color: var(--color-green);

    text-decoration-color: var(--color-green);
}

.recipe-substitution-arrow {
    text-align: center;

    font-family: var(--font-heading);
    font-size: 28px;

    color: var(--color-green);
}

.recipe-substitution-note {
    grid-column: 1 / -1;

    margin: 25px 0 0;
    padding-top: 20px;

    border-top: 1px solid var(--color-border);

    font-family: var(--font-body);
    font-size: 13px;

    color: var(--color-text-secondary);
}


/* =========================================================
   FAQ
========================================================= */

.recipe-faq-section {
    padding-top: 100px;
}

.recipe-faq {
    margin-top: 45px;

    border-top: 1px solid var(--color-border);
}

.recipe-faq-item {
    border-bottom: 1px solid var(--color-border);
}

.recipe-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 23px 0;

    background: transparent;
    border: 0;

    text-align: left;

    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;

    line-height: 1.5;

    color: var(--color-text);

    cursor: pointer;
}

.recipe-faq-question:hover {
    color: var(--color-green);
}

.recipe-faq-question:focus-visible {
    outline: 2px solid var(--color-green);
    outline-offset: 4px;
}

.recipe-faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 28px;
    height: 28px;

    margin-left: 20px;

    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 300;

    color: var(--color-green);

    transition:
        transform var(--transition);
}

.recipe-faq-item.is-open .recipe-faq-icon {
    transform: rotate(45deg);
}

.recipe-faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows 280ms ease;
}

.recipe-faq-item.is-open .recipe-faq-answer {
    grid-template-rows: 1fr;
}

.recipe-faq-answer > div {
    overflow: hidden;
}

.recipe-faq-answer p {
    max-width: 680px;

    margin: 0;
    padding: 0 55px 25px 0;

    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;

    color: var(--color-text-secondary);
}


/* =========================================================
   RELATED RECIPES
========================================================= */

.recipe-related-section {
    padding-top: 110px;

    background: var(--color-bg-soft);
}

.recipe-related-section .recipe-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;
}

.recipe-section-link {
    flex-shrink: 0;

    padding-bottom: 5px;

    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;

    color: var(--color-green);

    text-decoration: none;

    transition:
        color var(--transition-fast);
}

.recipe-section-link:hover {
    color: var(--color-green-dark);
}

.recipe-related-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}

.recipe-related-card {
    min-width: 0;
}

.recipe-related-card > a {
    display: block;

    color: inherit;

    text-decoration: none;
}

.recipe-related-image {
    overflow: hidden;

    aspect-ratio: 4 / 3;

    background: var(--color-white);
}

.recipe-related-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background: var(--color-bg-green);

    font-family: var(--font-heading);
    font-size: 30px;

    color: var(--color-green);
}

.recipe-related-content {
    padding-top: 20px;
}

.recipe-card-category {
    margin-bottom: 8px;

    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: var(--color-green);
}

.recipe-related-content h3 {
    max-width: 400px;

    margin: 0 0 10px;

    font-family: var(--font-heading);
    font-size: 27px;
    font-weight: 500;

    line-height: 1.1;

    color: var(--color-text);

    transition:
        color var(--transition-fast);
}

.recipe-related-card:hover h3 {
    color: var(--color-green);
}

.recipe-related-content > span {
    font-family: var(--font-body);
    font-size: 12px;

    color: var(--color-text-secondary);
}


/* =========================================================
   LINKED INGREDIENTS
========================================================= */

.recipe-linked-ingredients {
    padding-top: 105px;
}

.recipe-linked-ingredients-list {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 15px;

    margin-top: 40px;
}

.recipe-linked-ingredient {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 15px;

    border: 1px solid var(--color-border);

    color: inherit;

    text-decoration: none;

    transition:
        border-color var(--transition),
        transform var(--transition);
}

.recipe-linked-ingredient:hover {
    border-color: var(--color-green);

    transform: translateY(-2px);
}

.recipe-linked-ingredient-image {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 58px;
    height: 58px;

    background: var(--color-bg-soft);

    border-radius: 50%;

    font-family: var(--font-heading);
    font-size: 18px;

    color: var(--color-green);
}

.recipe-linked-ingredient strong {
    display: block;

    margin-bottom: 3px;

    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;

    color: var(--color-text);
}

.recipe-linked-ingredient span {
    display: block;

    font-family: var(--font-body);
    font-size: 11px;

    color: var(--color-text-secondary);
}


/* =========================================================
   FINAL CTA
========================================================= */

.recipe-final-cta {
    padding: 110px 0;
}

.recipe-final-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;

    padding: 65px 70px;

    background: var(--color-bg-soft);
}

.recipe-final-cta h2 {
    margin: 0;

    font-family: var(--font-heading);
    font-size: 42px;
    font-weight: 500;

    line-height: 1.05;

    color: var(--color-text);
}

.recipe-final-cta p {
    max-width: 550px;

    margin: 15px 0 0;

    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;

    color: var(--color-text-secondary);
}

.recipe-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    flex-shrink: 0;

    min-height: 48px;

    padding: 12px 22px;

    border: 1px solid var(--color-green);

    color: var(--color-green);

    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background var(--transition),
        color var(--transition);
}

.recipe-button:hover {
    background: var(--color-green);

    color: var(--color-white);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .recipe-hero-grid {
        grid-template-columns:
            minmax(0, 48%)
            minmax(0, 52%);
    }

    .recipe-hero-content {
        padding: 45px;
    }

    .recipe-title {
        font-size: 50px;
    }

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

    .recipe-step-with-image {
        grid-template-columns:
            76px
            minmax(0, 1fr);
    }

    .recipe-step-with-image .recipe-step-image {
        grid-column: 2;

        margin-top: 25px;
    }

    .recipe-usage-box {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .recipe-usage-meta {
        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .recipe-usage-meta-item {
        padding-right: 20px;

        border-right: 1px solid rgba(82, 107, 91, 0.2);
        border-bottom: 0;
    }

    .recipe-usage-meta-item:last-child {
        border-right: 0;
    }

    .recipe-linked-ingredients-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .recipe-container {
        width: calc(100% - 40px);
    }

    .recipe-breadcrumbs {
        padding-top: 18px;

        font-size: 11px;

        gap: 7px;
    }

    .recipe-hero {
        padding: 25px 0 70px;
    }

    .recipe-hero-grid {
        display: flex;
        flex-direction: column;
    }

    .recipe-hero-image,
    .recipe-image-placeholder {
        min-height: 0;

        aspect-ratio: 4 / 5;
    }

    .recipe-hero-image img {
        min-height: 0;
    }

    .recipe-hero-content {
        padding: 38px 0 0;
    }

    .recipe-eyebrow,
    .recipe-section-eyebrow {
        margin-bottom: 13px;

        font-size: 10px;
    }

    .recipe-title {
        font-size: 44px;
        line-height: 0.98;
    }

    .recipe-short-description {
        margin-top: 22px;

        font-size: 16px;
    }

    .recipe-meta {
        width: 100%;

        margin-top: 30px;
    }

    .recipe-meta-item {
        min-width: 0;
        flex: 1;
    }

    .recipe-meta-divider {
        margin: 0 15px;
    }

    .recipe-section {
        padding: 75px 0;
    }

    .recipe-intro {
        padding-top: 10px;
        padding-bottom: 75px;
    }

    .recipe-section-header h2,
    .recipe-narrow-content h2,
    .recipe-info-card h2,
    .recipe-usage-content h2 {
        font-size: 36px;
    }

    .recipe-main-content {
        margin-top: 25px;

        font-size: 16px;
        line-height: 1.75;
    }

    .recipe-phase {
        margin-bottom: 35px;
    }

    .recipe-phase-title {
        font-size: 25px;
    }

    .recipe-ingredient-row {
        min-height: 56px;

        padding: 12px 16px;
    }

    .recipe-ingredient-name,
    .recipe-ingredient-amount {
        font-size: 14px;
    }

    .recipe-tools-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .recipe-tool-card {
        min-height: 125px;

        padding: 20px;
    }

    .recipe-tool-icon {
        margin-bottom: 18px;
    }

    .recipe-steps::before {
        left: 27px;
    }

    .recipe-step {
        grid-template-columns:
            56px
            minmax(0, 1fr);

        column-gap: 15px;

        padding-bottom: 50px;
    }

    .recipe-step-number {
        font-size: 36px;
    }

    .recipe-step-content h3 {
        font-size: 25px;
    }

    .recipe-step-content p {
        font-size: 15px;
    }

    .recipe-step-with-image {
        grid-template-columns:
            56px
            minmax(0, 1fr);
    }

    .recipe-step-with-image .recipe-step-image {
        grid-column: 2;

        margin-top: 20px;
    }

    .recipe-usage-box {
        gap: 35px;

        padding: 38px 25px;
    }

    .recipe-usage-meta {
        display: flex;

        gap: 18px;
    }

    .recipe-usage-meta-item {
        padding-right: 0;
        padding-bottom: 18px;

        border-right: 0;
        border-bottom: 1px solid rgba(82, 107, 91, 0.2);
    }

    .recipe-usage-meta-item:last-child {
        padding-bottom: 0;

        border-bottom: 0;
    }

    .recipe-info-grid {
        grid-template-columns: 1fr;
    }

    .recipe-info-card {
        min-height: 0;

        padding: 30px;
    }

    .recipe-substitution {
        grid-template-columns:
            1fr 45px 1fr;

        padding: 25px 20px;
    }

    .recipe-substitution-item a {
        font-size: 23px;
    }

    .recipe-related-section .recipe-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .recipe-related-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .recipe-related-content h3 {
        font-size: 26px;
    }

    .recipe-linked-ingredients-list {
        grid-template-columns: 1fr;
    }

    .recipe-final-cta {
        padding: 75px 0;
    }

    .recipe-final-cta-inner {
        align-items: flex-start;
        flex-direction: column;

        padding: 40px 25px;
    }

    .recipe-final-cta h2 {
        font-size: 36px;
    }

    .recipe-button {
        width: 100%;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .recipe-title {
        font-size: 40px;
    }

    .recipe-meta-divider {
        margin: 0 10px;
    }

    .recipe-meta-label {
        font-size: 10px;
    }

    .recipe-meta-item strong {
        font-size: 13px;
    }

    .recipe-tools-grid {
        grid-template-columns: 1fr;
    }

    .recipe-substitution {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .recipe-substitution-arrow {
        transform: rotate(90deg);

        text-align: left;
    }

    .recipe-substitution-note {
        grid-column: auto;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .recipe-page *,
    .recipe-page *::before,
    .recipe-page *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}