/* ============================================================
Project : Compro Doodle
Module  : Component
File    : product-feature.css
Version : 1.0.0
Author  : Doodle IT Development
============================================================ */

/* ============================================================
BASE - FULL WIDTH BANNER SECTION
============================================================ */

.product-feature{

    width:100%;

    padding-top:var(--section-space-md);
    padding-bottom:var(--space-32);

}

.product-feature--pink{

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            var(--color-primary-light) 100%
        );

}

.product-feature--cream{

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            var(--color-accent-gold-light) 100%
        );

}

.product-feature-inner{

    display:flex;

    flex-direction:column;

    align-items:center;

    max-width:var(--container-md);

    margin:0 auto;

    padding-inline:var(--space-24);

    gap:var(--space-24);

    text-align:center;

}

.product-feature-title{

    margin:0;

    color:var(--color-text);

    font-size:var(--font-3xl);

    font-weight:var(--font-bold);

    line-height:var(--line-tight);

}

.product-feature-subtitle{

    max-width:480px;

    margin:0;

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

    font-size:var(--font-md);

    font-weight:var(--font-regular);

    line-height:var(--line-normal);

}

.product-feature-actions{

    display:flex;

    align-items:center;

    gap:var(--space-16);

}

.product-feature-image{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    max-width:420px;

}

.product-feature-image img{

    width:100%;

    height:auto;

    object-fit:contain;

}

/* ============================================================
GRID - TWO COLUMN CARD VARIANT
============================================================ */

.product-feature-grid{

    display:grid;

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

    max-width:var(--container-lg);

    margin:0 auto;

    padding-inline:var(--space-24);

    padding-top:var(--section-space-sm);

    padding-bottom:var(--space-24);

    gap:var(--space-24);

}

.product-feature-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:var(--space-40) var(--space-24);

    border-radius:var(--radius-2xl);

    gap:var(--space-16);

    text-align:center;

}

.product-feature-card--gray{

    background:var(--color-surface-alt);

}

.product-feature-card--white{

    background:var(--color-surface);

    border:
        var(--border-width-thin)
        solid
        var(--color-border);

}

.product-feature-card--pink{

    background:var(--color-primary-light);

}

.product-feature-card-title{

    margin:0;

    color:var(--color-text);

    font-size:var(--font-xl);

    font-weight:var(--font-bold);

    line-height:var(--line-tight);

}

.product-feature-card-subtitle{

    margin:0;

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

    font-size:var(--font-sm);

    line-height:var(--line-normal);

}

.product-feature-card-actions{

    display:flex;

    align-items:center;

    gap:var(--space-12);

}

.product-feature-card-image{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    max-width:200px;

}

.product-feature-card-image img{

    width:100%;

    height:auto;

    object-fit:contain;

}

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

@media (max-width:767px){

    .product-feature{

        padding-top:var(--section-space-sm);
        padding-bottom:var(--space-24);

    }

    .product-feature-inner{

        padding-inline:var(--space-16);

        gap:var(--space-16);

    }

    .product-feature-title{

        font-size:var(--font-2xl);

    }

    .product-feature-subtitle{

        font-size:var(--font-sm);

    }

    .product-feature-image{

        max-width:280px;

    }

    .product-feature-grid{

        grid-template-columns:1fr;

        padding-inline:var(--space-16);

        padding-block:var(--section-space-xs);

        gap:var(--space-16);

    }

    .product-feature-card{

        padding:var(--space-32) var(--space-16);

    }

    .product-feature-card-image{

        max-width:160px;

    }

}

/* ============================================================
ADJACENT GRID SPACING FIX
============================================================ */

.product-feature-grid + .product-feature-grid{

    padding-top:0;

}

/* ============================================================
ADJACENT SECTION SPACING FIX
============================================================ */

.product-feature + .product-feature{

    padding-top:0;

}

.product-feature + .product-feature-grid{

    padding-top:0;

}

/* ============================================================
HERO TO FIRST SECTION SPACING FIX
============================================================ */

.home-hero + .product-feature{

    padding-top:var(--space-40);

}