/**
 * ==========================================================
 * Pet Wellness 360
 * Petandim — Hero
 * ==========================================================
 */


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

.pw-petandim-hero{
    position:relative;
    overflow:hidden;

    padding:clamp(4rem,7vw,7rem) 0;

    background:
            linear-gradient(
                    135deg,
                    #F7FAF5 0%,
                    #FFFFFF 52%,
                    #F2F4F7 100%
            );
}


.pw-petandim-hero__container{
    width:min(
            calc(100% - 32px),
            var(--pw-container)
    );

    margin-inline:auto;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(360px,.9fr);

    align-items:center;

    gap:clamp(2rem,5vw,5rem);
}


/* ==========================================================
   CONTENT
   ========================================================== */

.pw-petandim-hero__content{
    max-width:680px;
}


.pw-petandim-hero__eyebrow{
    display:inline-flex;

    align-items:center;

    gap:.5rem;

    margin:0 0 1rem;

    color:var(--pw-green);

    font-family:var(--pw-font-heading);

    font-size:.78rem;
    font-weight:800;

    letter-spacing:.08em;
    text-transform:uppercase;
}


.pw-petandim-hero__eyebrow::before{
    content:"";

    width:28px;
    height:2px;

    background:var(--pw-green);

    border-radius:999px;
}


.pw-petandim-hero__title{
    max-width:650px;

    margin:0;

    color:var(--pw-navy);

    font-family:var(--pw-font-heading);

    font-size:
            clamp(
                    2.8rem,
                    5vw,
                    5rem
            );

    font-weight:800;

    line-height:1.02;

    letter-spacing:-.045em;
}


.pw-petandim-hero__title strong{
    color:var(--pw-green);

    font-weight:800;
}


.pw-petandim-hero__lead{
    max-width:610px;

    margin:1.5rem 0 0;

    color:var(--pw-navy);

    font-family:var(--pw-font-body);

    font-size:
            clamp(
                    1.05rem,
                    1.5vw,
                    1.25rem
            );

    font-weight:500;

    line-height:1.55;
}


.pw-petandim-hero__description{
    max-width:590px;

    margin:1rem 0 0;

    color:var(--pw-text);

    font-family:var(--pw-font-body);

    font-size:.95rem;

    line-height:1.7;
}


/* ==========================================================
   ACTIONS
   ========================================================== */

.pw-petandim-hero__actions{
    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:.75rem;

    margin-top:2rem;
}


.pw-petandim-hero__button{
    display:inline-flex;

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

    min-height:48px;

    padding:.75rem 1.35rem;

    border-radius:999px;

    font-family:var(--pw-font-heading);

    font-size:.78rem;
    font-weight:700;

    line-height:1;

    text-decoration:none;

    transition:
            transform var(--pw-transition-fast),
            box-shadow var(--pw-transition-fast),
            background-color var(--pw-transition-fast);
}


.pw-petandim-hero__button--primary{
    background:var(--pw-green);

    color:var(--pw-white);

    box-shadow:
            0 10px 24px rgba(76,175,80,.18);
}


.pw-petandim-hero__button--primary:hover,
.pw-petandim-hero__button--primary:focus-visible{
    background:#3E9E46;

    color:var(--pw-white);

    transform:translateY(-2px);

    box-shadow:
            0 14px 30px rgba(76,175,80,.24);
}


.pw-petandim-hero__button--secondary{
    background:transparent;

    color:var(--pw-navy);

    border:1px solid var(--pw-navy);
}


.pw-petandim-hero__button--secondary:hover,
.pw-petandim-hero__button--secondary:focus-visible{
    background:var(--pw-navy);

    color:var(--pw-white);

    transform:translateY(-2px);
}


/* ==========================================================
   SUPPORT
   ========================================================== */

.pw-petandim-hero__support{
    display:flex;

    align-items:center;

    gap:.65rem;

    margin:1.5rem 0 0;

    color:var(--pw-navy);

    font-family:var(--pw-font-body);

    font-size:.78rem;
    font-weight:600;
}


.pw-petandim-hero__support-icon{
    display:inline-flex;

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

    width:32px;
    height:32px;

    flex:0 0 32px;

    border-radius:50%;

    background:rgba(76,175,80,.12);

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


.pw-petandim-hero__support-icon svg{
    width:17px;
    height:17px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* ==========================================================
   MEDIA
   ========================================================== */

.pw-petandim-hero__media{
    position:relative;

    display:flex;

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

    min-height:430px;

    border-radius:28px;

    overflow:hidden;

    background:#F2F4F7;

    box-shadow:
            0 24px 60px rgba(13,44,84,.12);
}


.pw-petandim-hero__media::before{
    content:"";

    position:absolute;

    width:360px;
    height:360px;

    right:-100px;
    top:-100px;

    border-radius:50%;

    background:
            rgba(168,208,141,.35);
}


.pw-petandim-hero__media::after{
    content:"";

    position:absolute;

    width:420px;
    height:240px;

    left:-150px;
    bottom:-110px;

    border-radius:50%;

    background:
            rgba(30,90,166,.12);
}


.pw-petandim-hero__image{
    position:relative;

    z-index:1;

    display:block;

    width:100%;
    height:100%;

    min-height:430px;

    object-fit:cover;

    object-position:center;

    mix-blend-mode:multiply;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:900px){

    .pw-petandim-hero{
        padding:
                clamp(3rem,8vw,5rem)
                0
                4rem;
    }


    .pw-petandim-hero__container{
        grid-template-columns:1fr;

        gap:2.25rem;
    }


    .pw-petandim-hero__content{
        max-width:none;
    }


    .pw-petandim-hero__media{
        min-height:360px;

        border-radius:24px;
    }


    .pw-petandim-hero__image{
        min-height:360px;
    }

}


@media (max-width:600px){

    .pw-petandim-hero{
        padding-top:2.75rem;
    }


    .pw-petandim-hero__title{
        font-size:
                clamp(
                        2.35rem,
                        11vw,
                        3.4rem
                );
    }


    .pw-petandim-hero__lead{
        font-size:1rem;
    }


    .pw-petandim-hero__actions{
        align-items:stretch;

        flex-direction:column;
    }


    .pw-petandim-hero__button{
        width:100%;
    }


    .pw-petandim-hero__media{
        min-height:300px;

        border-radius:20px;
    }


    .pw-petandim-hero__image{
        min-height:300px;
    }

}