/* =========================================================
   CROWN THEORY
   Ingredients Page Styles
   ========================================================= */


/* =========================================================
   1. INGREDIENT HERO
   ========================================================= */

.ingredients-hero {
    padding: 64px 0 88px;

    background-color: #F7F4EB;
}

.ingredients-hero-grid {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    align-items: center;

    gap: 64px;
}

.ingredients-hero-content {
    max-width: 580px;
}

.ingredients-hero-content h1 {
    margin-bottom: 24px;

    color: #3D2314;

    font-size: 56px;
    line-height: 1.08;
}

.ingredients-hero-content p {
    margin-bottom: 32px;

    color: #6C625B;

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


/* =========================================================
   2. HERO IMAGE
   ========================================================= */

.ingredients-hero-image {
    height: 620px;

    border-radius: 24px;

    overflow: hidden;
}

.ingredients-hero-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   3. INGREDIENT PHILOSOPHY
   ========================================================= */

.ingredient-philosophy-section {
    padding: 80px 0;

    background-color: #6B7F63;
}

.ingredient-philosophy-grid {
    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 72px;

    align-items: start;
}

.ingredient-philosophy-heading .eyebrow {
    color: #F3E3CC;
}

.ingredient-philosophy-heading h2 {
    color: #FFFFFF;

    font-size: 44px;
}

.ingredient-philosophy-copy p {
    margin-bottom: 20px;

    color: #F7F4EB;

    font-size: 17px;
    line-height: 1.8;
}


/* =========================================================
   4. SECTION HEADING
   ========================================================= */

.ingredient-section-heading {
    max-width: 720px;

    margin-bottom: 48px;
}

.ingredient-section-heading h2 {
    margin-bottom: 16px;

    color: #3D2314;

    font-size: 44px;
}

.ingredient-section-heading p {
    max-width: 600px;

    color: #6C625B;

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

.centered-ingredient-heading {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.centered-ingredient-heading p {
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   5. INGREDIENT LIBRARY
   ========================================================= */

.ingredient-library-section {
    background-color: #FCFAF5;
}

.ingredient-library-grid {
    display: grid;

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

    gap: 24px;
}


/* =========================================================
   6. INGREDIENT CARD
   ========================================================= */

.ingredient-library-card {
    background-color: #F7F4EB;

    border: 1px solid #DDD6C8;
    border-radius: 16px;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.ingredient-library-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 8px 24px rgba(61, 35, 20, 0.09);
}

.ingredient-library-image {
    height: 280px;

    background-color: #EEE9DE;

    overflow: hidden;
}

.ingredient-library-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.25s ease;
}

.ingredient-library-card:hover .ingredient-library-image img {
    transform: scale(1.03);
}


/* =========================================================
   7. CARD CONTENT
   ========================================================= */

.ingredient-library-content {
    padding: 24px;
}

.ingredient-number {
    display: block;

    margin-bottom: 16px;

    color: #D9A05B;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.ingredient-library-content h3 {
    margin-bottom: 12px;

    color: #3D2314;

    font-size: 25px;
}

.ingredient-library-content p {
    margin-bottom: 20px;

    color: #6C625B;

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   8. BENEFIT TAGS
   ========================================================= */

.ingredient-benefit-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}

.ingredient-benefit-tags span {
    padding: 6px 10px;

    background-color: #E7ECE3;
    color: #3D2314;

    border-radius: 18px;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 10px;
    font-weight: 600;
}


/* =========================================================
   9. ROUTINE SECTION
   ========================================================= */

.ingredient-routine-section {
    padding: 96px 0;

    background-color: #F7F4EB;
}

.ingredient-routine-grid {
    display: grid;

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

    gap: 24px;
}

.ingredient-routine-card {
    padding: 32px;

    background-color: #FFFFFF;

    border: 1px solid #DDD6C8;
    border-radius: 16px;
}

.ingredient-step {
    display: inline-block;

    margin-bottom: 24px;

    padding: 7px 12px;

    background-color: #D9A05B;
    color: #3D2314;

    border-radius: 20px;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
}

.ingredient-routine-card h3 {
    margin-bottom: 14px;

    color: #3D2314;

    font-size: 28px;
}

.ingredient-routine-card > p {
    margin-bottom: 20px;

    color: #6C625B;

    font-size: 14px;
    line-height: 1.7;
}

.ingredient-routine-card strong {
    display: block;

    margin-bottom: 10px;

    color: #3D2314;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
}

.ingredient-routine-card ul {
    margin-bottom: 24px;
}

.ingredient-routine-card li {
    position: relative;

    margin-bottom: 8px;
    padding-left: 20px;

    color: #6C625B;

    font-size: 13px;
}

.ingredient-routine-card li::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: #6B7F63;

    font-weight: 700;
}


/* =========================================================
   10. PRIORITY SECTION
   ========================================================= */

.ingredient-priority-section {
    padding: 96px 0;

    background-color: #E7ECE3;
}

.ingredient-priority-grid {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    align-items: center;

    gap: 72px;
}

.ingredient-priority-content {
    max-width: 540px;
}

.ingredient-priority-content h2 {
    margin-bottom: 22px;

    color: #3D2314;

    font-size: 44px;
}

.ingredient-priority-content p {
    margin-bottom: 18px;

    color: #5F665A;

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

.ingredient-priority-content .button {
    margin-top: 12px;
}


/* =========================================================
   11. PRIORITY LIST
   ========================================================= */

.ingredient-priority-list {
    display: flex;

    flex-direction: column;

    gap: 14px;
}

.priority-item {
    padding: 20px;

    display: flex;

    align-items: flex-start;

    gap: 20px;

    background-color: #F7F4EB;

    border: 1px solid #CAD4C5;
    border-radius: 14px;
}

.priority-number {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background-color: #6B7F63;
    color: #FFFFFF;

    border-radius: 50%;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.priority-item h3 {
    margin-bottom: 5px;

    color: #3D2314;

    font-size: 20px;
}

.priority-item p {
    color: #6C625B;

    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   12. EDUCATION SECTION
   ========================================================= */

.ingredient-education-section {
    padding: 88px 0;

    background-color: #3D2314;
}

.ingredient-education-content {
    max-width: 850px;

    text-align: center;
}

.ingredient-education-section .eyebrow {
    color: #D9A05B;
}

.ingredient-education-section h2 {
    margin-bottom: 20px;

    color: #F7F4EB;

    font-size: 46px;
    line-height: 1.2;
}

.ingredient-education-section p {
    max-width: 700px;

    margin: 0 auto 30px;

    color: #D8CCC3;

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


/* =========================================================
   13. SHOP CTA
   ========================================================= */

.ingredient-shop-section {
    padding: 80px 0;

    background-color: #FCFAF5;
}

.ingredient-shop-grid {
    display: grid;

    grid-template-columns: 1fr 0.8fr;

    align-items: center;

    gap: 72px;
}

.ingredient-shop-grid h2 {
    max-width: 620px;

    color: #3D2314;

    font-size: 42px;
}

.ingredient-shop-action p {
    margin-bottom: 24px;

    color: #6C625B;

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


/* =========================================================
   14. TABLET
   ========================================================= */

@media screen and (max-width: 1100px) {

    .ingredients-hero-grid,
    .ingredient-priority-grid {
        gap: 40px;
    }

    .ingredient-library-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ingredients-hero-content h1 {
        font-size: 48px;
    }

}


/* =========================================================
   15. SMALL TABLET
   ========================================================= */

@media screen and (max-width: 850px) {

    .ingredients-hero-grid,
    .ingredient-philosophy-grid,
    .ingredient-priority-grid,
    .ingredient-shop-grid {
        grid-template-columns: 1fr;
    }

    .ingredients-hero-content,
    .ingredient-priority-content {
        max-width: 100%;
    }

    .ingredients-hero-image {
        height: 520px;
    }

    .ingredient-philosophy-grid {
        gap: 24px;
    }

    .ingredient-routine-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   16. MOBILE
   ========================================================= */

@media screen and (max-width: 650px) {

    .ingredients-hero {
        padding: 48px 0 64px;
    }

    .ingredients-hero-content h1 {
        font-size: 39px;
    }

    .ingredients-hero-content p {
        font-size: 16px;
    }

    .ingredients-hero-image {
        height: 420px;
    }

    .ingredient-philosophy-section,
    .ingredient-routine-section,
    .ingredient-priority-section {
        padding: 72px 0;
    }

    .ingredient-philosophy-heading h2,
    .ingredient-section-heading h2,
    .ingredient-priority-content h2 {
        font-size: 36px;
    }

    .ingredient-library-grid {
        grid-template-columns: 1fr;
    }

    .ingredient-library-image {
        height: 340px;
    }

    .ingredient-education-section {
        padding: 64px 0;
    }

    .ingredient-education-section h2 {
        font-size: 36px;
    }

    .ingredient-shop-section {
        padding: 64px 0;
    }

    .ingredient-shop-grid {
        gap: 30px;
    }

    .ingredient-shop-grid h2 {
        font-size: 35px;
    }

}


/* =========================================================
   17. SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 420px) {

    .ingredients-hero-content h1 {
        font-size: 34px;
    }

    .ingredients-hero-image {
        height: 360px;
    }

    .ingredient-library-image {
        height: 300px;
    }

    .ingredient-library-content,
    .ingredient-routine-card {
        padding: 22px;
    }

    .priority-item {
        gap: 14px;
    }

    .ingredient-education-section h2 {
        font-size: 32px;
    }

}