/*==================================================
Light Penetration Section
Base Layout
==================================================*/

.light-penetration{

    position:relative;

    overflow:hidden;

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


}



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

.light-content{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}


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

.light-content h2{

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

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

    font-size:clamp(1.8rem,3vw,3rem);

    line-height:1.3;

    letter-spacing:-.025em;

    color:var(--text);

    text-align: center;

}



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

.light-content 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);

}


/*==================================================
PENETRATION POINTS
==================================================*/

.penetration-points{

    margin-top:var(--space-lg);

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}


/*==================================================
PENETRATION ITEM
==================================================*/

.penetration-item{

    display:flex;

    gap:1.25rem;

    align-items:flex-start;

}




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

.penetration-item h3{

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

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

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

    margin-bottom:.5rem;

    color:var(--text);

}


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

.penetration-item p{

    margin:0;

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

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

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

    line-height:1.75;

    color:var(--text-light);

}


/* ================================
   Penetration Points
================================ */

.penetration-points {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* کارت */

.penetration-item {
    width: 100%;
    min-height: 190px;

    display: flex;
    align-items: center;

    padding: 18px;

    background: #ffffff;
    border: 1px solid #e5ebe8;
    border-radius: 20px;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.05);

    direction: rtl;

    box-sizing: border-box;
}


/* =================================
   تصویر - همیشه سمت راست
================================= */

.penetration-item-img {
    order: 1;

    width: 180px;
    height: 180px;
    min-width: 180px;

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

    background: #f5f7f6;

    border: 1px solid #dfe7e3;
    border-radius: 15px;

    overflow: hidden;

    box-sizing: border-box;
}


/* خود تصویر */

.penetration-item-img img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}

/* =================================
   شماره‌گذاری بصری روی تصویر
================================= */

.penetration-item-img {
    position: relative;
}

.penetration-index {
    position: absolute;
    top: 10px;
    right: 10px;

    width: 32px;
    height: 32px;

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

    background: var(--primary, #1a7a63);
    color: #fff;

    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-heading);

    border-radius: 50%;

    box-shadow: 0 3px 8px rgba(0,0,0,.15);

    z-index: 2;
}

/* =================================
   برچسب کوچک بالای عنوان
================================= */

.penetration-tag {
    display: inline-block;

    margin-bottom: 8px;

    padding: 4px 12px;

    background: rgba(26,122,99,.08);
    color: var(--primary, #1a7a63);

    font-size: 12px;
    font-weight: 600;

    border-radius: 20px;
}

/* =================================
   نوار تفکیک رنگی سمت راست کارت
================================= */

.penetration-item {
    position: relative;
    border-right: 3px solid var(--primary, #1a7a63);
    border-radius: 20px 4px 4px 20px;
}

@media (max-width: 550px) {
    .penetration-item {
        border-right: none;
        border-top: 3px solid var(--primary, #1a7a63);
        border-radius: 4px 4px 20px 20px;
    }

    .penetration-index {
        top: 10px;
        right: 10px;
    }
}

/* =================================
   متن - سمت چپ تصویر
================================= */

.penetration-item > div:not(.penetration-item-img) {
    order: 2;

    flex: 1;

    padding: 10px 30px;

    text-align: right;
    direction: rtl;

    box-sizing: border-box;
}


.penetration-item h3 {
    margin: 0 0 12px;

    color: #263b35;

    font-size: 20px;
    font-weight: 700;

    line-height: 1.7;
}


.penetration-item p {
    margin: 0;

    color: #687570;

    font-size: 15px;

    line-height: 2;
}


/* =================================
   Hover
================================= */

.penetration-item {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.penetration-item:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.08);
}


/* =================================
   Tablet
================================= */

@media (max-width: 768px) {

    .penetration-item {
        min-height: 160px;
        padding: 14px;
    }

    .penetration-item-img {
        width: 150px;
        height: 150px;
        min-width: 150px;
    }

    .penetration-item > div:not(.penetration-item-img) {
        padding: 10px 20px;
    }

    .penetration-item h3 {
        font-size: 18px;
    }

    .penetration-item p {
        font-size: 14px;
    }
}


/* =================================
   Mobile
================================= */

@media (max-width: 550px) {

    .penetration-item {
        flex-direction: column;
        align-items: stretch;
    }

    .penetration-item-img {
        order: 1;

        width: 100%;
        height: 200px;
        min-width: 100%;
    }

    .penetration-item > div:not(.penetration-item-img) {
        order: 2;

        padding: 18px 5px 5px;
    }

    .penetration-item h3 {
        font-size: 17px;
    }

    .penetration-item p {
        font-size: 14px;
        line-height: 1.9;
    }
}


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

@media(max-width:992px){

    .light-grid{

        grid-template-columns:1fr;

    }

    .light-visual{

        order:-1;

        max-width:576px;

        margin-inline:auto;

    }

    .light-content{

        text-align:center;

        align-items:center;

    }

    .penetration-item{

        text-align:start;

    }

}


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

@media(max-width:768px){

    .light-penetration{

        padding-block:90px;

    }

    .light-grid{

        gap:60px;

    }

}


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

@media(max-width:576px){

    .light-content h2{

        font-size:1.85rem;

        line-height:1.35;

    }

    .light-content p{

        font-size:.95rem;

    }

    .penetration-item{

        gap:1rem;

    }

    .penetration-item .icon{

        width:38px;

        height:38px;

        font-size:.85rem;

    }

    .penetration-item h3{

        font-size:1rem;

    }

    .penetration-item p{

        font-size:.88rem;

    }

}


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

@media(max-width:380px){

    .light-content h2{

        font-size:1.65rem;

    }

    .penetration-item p{

        font-size:.85rem;

    }

}


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

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

    .light-penetration *,
    .light-penetration *::before,
    .light-penetration *::after{

        transition:none !important;

        animation:none !important;

    }

}