/*
==========================================================================

 Project     : Signature Spreads and Treats by Di
 File        : home-responsive.css
 Version     : 1.0.0
 Author      : JB
 Purpose     : Home Page

===========================================================================
*/

/* BRAND PROMISE */

/* Tablets */

@media (max-width: 991.98px) {

    .home-page .home-brand-promise {
        padding:
            var(--space-4xl)
            0;
    }

    .home-brand-promise-header {
        max-width: 740px;
    }

    .home-brand-promise-grid {
        grid-template-columns: 1fr;
        max-width: 720px;
        margin-inline: auto;
    }

    .home-brand-promise-item {
        grid-template-columns: 52px 1fr;
        padding:
            var(--space-xl)
            var(--space-lg);
    }

    .home-brand-promise-item + .home-brand-promise-item {
        border-top: 1px solid rgba(220, 201, 170, 0.85);
        border-left: 0;
    }
}

/* Mobile */

@media (max-width: 575.98px) {

    .home-page .home-brand-promise {
        padding:
            var(--space-3xl)
            0
            var(--space-4xl);
    }

    .home-brand-promise-header {
        margin-bottom: var(--space-2xl);
    }

    .home-brand-promise-eyebrow {
        gap: var(--space-sm);
    }

    .home-brand-promise-eyebrow span {
        width: 22px;
    }

    .home-brand-promise-eyebrow p {
        max-width: 225px;
        font-size: 0.64rem;
        line-height: 1.55;
        letter-spacing: 0.12em;
    }

    .home-brand-promise-title {
        font-size: clamp(2.4rem, 11vw, 3.4rem);
    }

    .home-brand-promise-description {
        font-size: 1rem;
        line-height: 1.7;
    }

    .home-brand-promise-flourish {
        gap: var(--space-md);
        width: min(100%, 310px);
    }

    .home-brand-promise-flourish svg {
        width: 60px;
    }

    .home-brand-promise-item {
        grid-template-columns: 38px 1fr;
        gap: var(--space-md);
        padding:
            var(--space-xl)
            0;
    }

    .home-brand-promise-number {
        font-size: 0.82rem;
    }

    .home-brand-promise-item h3 {
        font-size: 1.55rem;
    }

    .home-brand-promise-item p {
        font-size: 0.92rem;
    }
}

/* FRESH FROM THE KITCHEN */

/* Tablets */

@media (max-width: 991.98px) {

    .home-creations-header {
        grid-template-columns: 1fr;
        max-width: 760px;
    }

    .home-creations-intro {
        max-width: 620px;
    }

    .home-creations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:
            var(--space-3xl)
            var(--space-xl);
    }

    .home-creation:last-child {
        grid-column: 1 / -1;
        width: min(100%, calc(50% - (var(--space-xl) / 2)));
        margin-inline: auto;
    }
}

/* Mobile */

@media (max-width: 575.98px) {

    .home-page .home-creations {
        padding:
            var(--space-3xl)
            0
            var(--space-4xl);
    }

    .home-creations-header {
        margin-bottom: var(--space-2xl);
    }

    .home-creations-heading h2 {
        font-size: clamp(2.5rem, 11vw, 3.5rem);
    }

    .home-creations-intro .btn-ghost-custom {
        display: none;
    }

    .home-creations-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }

    .home-creation:last-child {
        grid-column: auto;
        width: 100%;
    }

    .home-creation-image {
        aspect-ratio: 4 / 4.3;
    }

    .home-creation-content h3 {
        font-size: 1.8rem;
    }

    .home-creation-content > p:not(.home-creation-category) {
        font-size: 0.94rem;
    }

    .home-creations-cta {
        display: flex;
    }
}

/* CUSTOM ORDERS SECTION */

/* Small Laptops */

@media (max-width: 1199.98px) {

    .home-custom-orders-layout {
        grid-template-columns:
            minmax(0, 0.85fr)
            minmax(400px, 1.15fr);
        gap: var(--space-3xl);
    }

    .home-custom-orders-media img {
        width: 55%;
    }

    .home-custom-orders-stamp {
        width: 120px;
        height: 120px;
    }
}

/* Tablets */

@media (max-width: 991.98px) {

    .home-page .home-custom-orders {
        min-height: auto;
        padding:
            0
            0
            var(--space-4xl);
    }

    .home-custom-orders-layout {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: var(--space-2xl);
    }

    .home-custom-orders-media {
        position: relative;
        width: 100%;
        height: 520px;
        margin-bottom: var(--space-2xl);
    }

    .home-custom-orders-media img {
        width: 100%;
        height: 100%;
        object-position: center;
    }

    .home-custom-orders-blend {
        background:
            linear-gradient(
                180deg,
                transparent 0%,
                rgba(248, 244, 238, 0.15) 58%,
                var(--color-background) 100%
            );
    }

    .home-custom-orders-visual {
        display: none;
    }

    .home-custom-orders-content {
        max-width: 760px;
        margin-inline: auto;
    }
}

/* Mobile */

@media (max-width: 575.98px) {

    .home-page .home-custom-orders {
        padding-bottom: var(--space-3xl);
    }

    .home-custom-orders-media {
        height: 360px;
        margin-bottom: var(--space-xl);
    }

    .home-custom-orders-content h2 {
        font-size: clamp(2.5rem, 11vw, 3.5rem);
    }

    .home-custom-orders-description {
        font-size: 0.96rem;
        line-height: 1.7;
    }

    .home-custom-orders-option {
        grid-template-columns: 34px 1fr;
        gap: var(--space-sm);
    }

    .home-custom-orders-option h3 {
        font-size: 1.5rem;
    }

    .home-custom-orders-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .home-custom-orders-actions .btn-custom {
        width: 100%;
    }

    .home-custom-orders-actions .btn-ghost-custom {
        width: auto;
        align-self: center;
    }
}

/* Small Mobile */

@media (max-width: 374.98px) {

    .home-custom-orders-media {
        height: 310px;
    }
}

/* ABOUT DI SECTION */

/* Small Laptops */

@media (max-width: 1199.98px) {

    .home-about-di-layout {
        grid-template-columns:
            minmax(340px, 0.95fr)
            minmax(410px, 1.05fr);
        gap: var(--space-3xl);
    }

    .home-about-di-note {
        right: 0;
    }
}

/* Tablets */

@media (max-width: 991.98px) {

    .home-about-di-layout {
        grid-template-columns: 1fr;
        max-width: 780px;
        margin-inline: auto;
    }

    .home-about-di-content {
        max-width: 680px;
    }

    .home-about-di-visual {
        width: min(100%, 650px);
        margin-inline: auto;
    }

    .home-about-di-photo {
        transform: rotate(1deg);
    }

    .home-about-di-note {
        right: -2%;
    }
}

/* Mobile */

@media (max-width: 575.98px) {

    .home-page .home-about-di {
        padding:
            var(--space-3xl)
            0
            var(--space-4xl);
    }

    .home-about-di-layout {
        gap: var(--space-2xl);
    }

    .home-about-di-eyebrow {
        justify-content: center;
    }

    .home-about-di-content {
        text-align: center;
    }

    .home-about-di-content h2 {
        font-size: clamp(2.7rem, 13vw, 3.9rem);
    }

    .home-about-di-content h2 em {
        font-size: clamp(2.75rem, 13vw, 4rem);
    }

    .home-about-di-flourish {
        margin-inline: auto;
    }

    .home-about-di-story {
        margin-inline: auto;
        text-align: left;
    }

    .home-about-di-signature {
        align-items: center;
    }

    .home-about-di-visual {
        padding:
            var(--space-sm)
            0
            6.5rem;
    }

    .home-about-di-photo {
        border-width: 7px;
        transform: none;
    }

    .home-about-di-photo img {
        aspect-ratio: 4 / 5.3;
    }

    .home-about-di-note {
        right: 50%;
        bottom: 0;
        width: min(270px, 84%);
        transform:
            translateX(50%)
            rotate(-2deg);
    }

    .home-about-di-leaf-top {
        right: -15%;
    }

    .home-about-di-leaf-bottom {
        left: -18%;
    }
}

/* Small Mobile */

@media (max-width: 374.98px) {

    .home-about-di-note {
        padding:
            var(--space-md)
            var(--space-lg);
    }

    .home-about-di-note p {
        font-size: 1rem;
    }
}