/*==================================================
PBM Mechanism Section
Base Layout
==================================================*/

.pbm-mechanism-section{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    padding-block:clamp(90px,10vw,160px);


}


/*==================================================
Container
==================================================*/

.pbm-mechanism-section .container{

    width:min(var(--container-md), calc(100% - 48px));

    margin-inline:auto;

}


/*==================================================
Section Header
==================================================*/

.pbm-mechanism-header{

    max-width:768px;

    margin-inline:auto;

    text-align:center;

    margin-bottom:clamp(60px,7vw,100px);

}


/*----------------------------------*/

.pbm-mechanism-header h2{

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

    font-size:var(--hero-title-size);

    line-height:1.15;

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

    color:var(--text);

    letter-spacing:-.03em;

}


/*----------------------------------*/

.pbm-mechanism-header h2 span{

    display:block;

    color:var(--primary);

}


/*==================================================
INTRO — TEXT + VISUAL
(short, height-matched two-column block)
==================================================*/

.pbm-mechanism-intro{

    display:grid;

    grid-template-columns:

        minmax(320px,1fr)

        minmax(280px,380px);

    align-items:center;

    gap:clamp(40px,6vw,90px);

    margin-bottom:clamp(60px,7vw,100px);

}


/*==================================================
INTRO TEXT
==================================================*/
.pbm-mechanism-header h2{
margin: 0 0 1.6rem;

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

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

    font-size: var(--h2-title-size);

    line-height: 1.2;

    letter-spacing: -.03em;

    color: var(--text);

}

.pbm-mechanism-text{

    display:flex;

    flex-direction:column;

    gap:1.25rem;
    

}



/*----------------------------------*/

.pbm-mechanism-text p{

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

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

    font-size:var(--hero-desc-size);

    line-height:1.95;

    color:var(--text-light);

    margin-bottom: 1px;

}


/*----------------------------------*/

.pbm-mechanism-text p strong{

    color:var(--primary);

    font-weight:700;

}


/*==================================================
INTRO VISUAL
==================================================*/
.pbm-mechanism-visual{
    display:flex;
    flex-direction:column;
    gap:1.2rem;
}

.mechanism-infographic-wrapper{
    width:100%;
    height:100%;
    display:flex;

    border-radius:16px;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
    overflow:hidden; /* برای اطمینان از گرد بودن گوشه‌ها حتی اگه محتوا بیرون بزنه */
}

.mechanism-infographic-wrapper img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:12px;
}





/*==================================================
IMAGE NOTE
==================================================*/

.mechanism-image-note{

    width:100%;

    padding:clamp(1rem,1.6vw,1.4rem);

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

    background:var(--glass-bg);

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

    backdrop-filter:blur(var(--blur-md));

}


/*----------------------------------*/

.mechanism-image-note strong{

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

    display:flex;

    align-items:center;

    gap:.6rem;

    color:var(--primary);

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

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

    margin-bottom:.6rem;

}


/*----------------------------------*/

.mechanism-image-note strong::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary);

}


/*----------------------------------*/

.mechanism-image-note p{

    margin:0;

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

    color:var(--text-light);

    font-size:.85rem;

    line-height:1.75;

}


/*==================================================
MECHANISM GRID
(full-width, below the intro block)
==================================================*/

.pbm-mechanism-list{

    list-style:none;

    margin:0;

    padding:0;

    display:grid;

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

    gap:1.1rem;

}


/*==================================================
MECHANISM ITEM
==================================================*/

.pbm-mechanism-item{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    gap:1rem;

    padding:1.3rem 1.4rem;

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

    background:linear-gradient(
        180deg, var(--surface-faint), var(--surface-soft));

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

    backdrop-filter:blur(var(--blur-md));

    transition:var(--transition);

}


/*----------------------------------*/

.pbm-mechanism-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg, rgba(var(--accent-rgb),.08), transparent 45%);

    opacity:0;

    transition:.45s;

}


/*----------------------------------*/

.pbm-mechanism-item:hover{

    transform:translateY(-4px);

    border-color:rgba(var(--primary-rgb),.35);

    box-shadow:var(--shadow-md);

}


/*----------------------------------*/

.pbm-mechanism-item:hover::before{

    opacity:1;

}


/*==================================================
MECHANISM ICON
==================================================*/

.mechanism-icon{

    flex:none;

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:var(--primary);

    background:rgba(var(--accent-strong-rgb),.08);

}

.mechanism-icon svg{
    width:100%;
    height:100%;
}


/*----------------------------------*/

.mechanism-icon svg path{

    stroke:var(--primary);

}


/*==================================================
MECHANISM TEXT
==================================================*/

.mechanism-text{

    position:relative;

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

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

    font-weight:600;

    line-height:1.55;

    color:var(--text);

}


/*==================================================
NOTE / CLOSING LINE
==================================================*/

.pbm-mechanism-note{

    position:relative;

    margin-top:clamp(30px,4vw,50px);

    padding-inline-start:1.3rem;

    max-width:768px;

    margin-inline:auto;

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

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

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

    line-height:1.85;

    color:var(--text-muted);

    font-style:italic;

    text-align:center;

}


/*----------------------------------*/

.pbm-mechanism-note::before{

    content:"";

    position:absolute;

    inset-inline-start:calc(50% - 3px);

    top:-.9rem;

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--primary);

}


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

@media(min-width:1400px){

    .pbm-mechanism-section .container{

        width:min(1280px, calc(100% - 120px));

    }

}


/*----------------------------------*/

@media(min-width:992px) and (max-width:1200px){

    .pbm-mechanism-intro{

        grid-template-columns:

            minmax(280px,1fr)

            minmax(260px,340px);

        gap:50px;

    }

}


/*----------------------------------*/

@media(max-width:992px){

    .pbm-mechanism-intro{

        grid-template-columns:1fr;

        gap:40px;

    }

    .pbm-mechanism-visual{

        order:-1;

        max-width:380px;

        margin-inline:auto;

    }

    .pbm-mechanism-list{

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

    }

}


/*----------------------------------*/

@media(max-width:768px){

    .pbm-mechanism-section{

        padding-block:90px;

    }

    .pbm-mechanism-header{

        margin-bottom:60px;

    }

    .pbm-mechanism-intro{

        margin-bottom:50px;

    }

    .pbm-mechanism-item{

        padding:1.1rem 1.2rem;

    }
}


/*----------------------------------*/

@media(max-width:576px){

    .pbm-mechanism-section .container{

        width:min(100% - 28px,100%);

    }

    .pbm-mechanism-header h2{

        font-size:1.85rem;

        line-height:1.25;

    }

    .pbm-mechanism-text p{

        font-size:.95rem;

    }

    .pbm-mechanism-list{

        grid-template-columns:1fr;

    }

    .mechanism-icon{

        width:40px;

        height:40px;

    }

    .mechanism-icon img{

        width:18px;

        height:18px;

    }

    .mechanism-text{

        font-size:.88rem;

    }

    .pbm-mechanism-note{

        font-size:.9rem;

    }

}


/*==================================================
ACCESSIBILITY
Reduced Motion
==================================================*/

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

    .pbm-mechanism-section *,
    .pbm-mechanism-section *::before,
    .pbm-mechanism-section *::after{

        transition:none !important;

        animation:none !important;

    }

}