/*==========================================================
    PRODUCTS PREVIEW SECTION
    این فایل فقط استایل اختصاصی این بخش را دارد و باید بعد از
    variables.css، responsive.css و فایل دکمه‌های پروژه (برای
    .link-button) فراخوانی شود. کلاس‌های .section-eyebrow/.dot
    مشترک با benefits.css هستند و اینجا دوباره تعریف نشده‌اند.
==========================================================*/

.products-preview{
    position:relative;
    padding-block:var(--section-space);
    background:var(--background);
}

/* هدر بخش را از benefits.css به ارث می‌برد (.section-header,
   .section-eyebrow) — فقط فاصله‌ی پایین اینجا هماهنگ می‌شود */
.products-preview .section-header{
    margin-bottom:clamp(40px,5vw,64px);
}

/* Grid
   جهت گرید عمداً ltr شده تا صرف‌نظر از dir کلی سایت، کارت
   featured (NeuRay Pro) همیشه فیزیکاً سمت چپ قرار بگیرد؛
   جهت متن داخل هر کارت دوباره rtl می‌شود تا خوانش فارسی حفظ شود. */
.products-grid{
    display:grid;
    direction:ltr;
    grid-template-columns:1.4fr 1fr;
    grid-template-rows:repeat(2,1fr);
    gap:clamp(14px,1.6vw,18px);
    list-style:none;
    align-items:stretch;
}

.product-card--featured{
    grid-column:1;
    grid-row:1 / span 2;
}
.product-card--compact{
    grid-column:2;
}
.product-card--compact:nth-of-type(2){ grid-row:1; }
.product-card--compact:nth-of-type(3){ grid-row:2; }

/* Card — همان زبان بصری «پلاک مشخصات فنی» بقیه‌ی سایت */
.product-card{
    direction:rtl;
    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--background);
    border:1px solid var(--border);
    border-top:3px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.product-card:not(.product-card--featured):hover{
    border-top-color:var(--accent-strong);
    box-shadow:var(--shadow-md);
    transform:translateY(-6px);
}

/* کادر رنگی مورب (نیمی آبی، نیمی زرد) مخصوص کارت featured
   با تکنیک دو-لایه بک‌گراند (padding-box/border-box) تا برخلاف
   border-image به border-radius کارت هم پایبند بماند. */
.product-card--featured{
    border:3px solid transparent;
    border-top:3px solid transparent;
    background:
        linear-gradient(var(--background),var(--background)) padding-box,
        linear-gradient(135deg,var(--border-blue) 0 50%,var(--border-yellow) 50% 100%) border-box;
}
.product-card--featured:hover{
    box-shadow:var(--shadow-md);
    transform:translateY(-6px);
}

/* عکس محصول — عرض کامل کارت و مربعی (ارتفاع = عرض)؛
   object-fit:cover باعث می‌شود تصاویر با ابعاد دیگر crop شوند
   و شکل مربع حفظ شود. */
.product-card__media{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    background:var(--surface-alt);
    border-bottom:1px solid var(--border);
    overflow:hidden;
}
.product-card__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    padding:0;
}

/* تصویر NeuRay Pro: دیگر مربع نیست، ارتفاعش دو سوم حالت مربعی
   قبلی است (نسبت عرض به ارتفاع ۳ به ۲) و مازاد تصویر crop می‌شود */
.product-card--featured .product-card__media{
    aspect-ratio:3/2;
}

/* کارت‌های کوچک: تصویر کنار متن، عرض ثابت و مناسب (نه خیلی کوچک)
   و ارتفاعش دقیقاً برابر ارتفاع کارت (align-items:stretch در ردیف) */
.product-card--compact{
    flex-direction:row;
    align-items:stretch;
}
.product-card--compact .product-card__media{
    width:38%;
    flex:0 0 38%;
    aspect-ratio:auto;
    border-bottom:none;
    border-inline-end:1px solid var(--border);
}

.product-card__body{
    position:relative;
    display:flex;
    flex-direction:column;
    flex:1;
    min-width:0;
    padding:10px 16px;
}
.product-card--featured .product-card__body{
    justify-content:center;
}

.product-card__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
}

.product-card__badge{
    display:inline-block;
    font-family:var(--font-body);
    font-size:.78rem;
    font-weight:600;
    padding:5px 12px;
    border-radius:var(--radius-round);
}
.product-card__badge--clinic{ background:rgba(var(--primary-rgb),.10); color:var(--primary); }
.product-card__badge--portable{ background:rgba(var(--secondary-rgb),.10); color:var(--secondary); }
.product-card__badge--home{ background:rgba(var(--accent-strong-rgb),.10); color:var(--accent-strong); }

.product-card__code{
    font-family:var(--font-mono);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.06em;
    color:var(--text-muted);
}

.product-card h3{
    font-family:var(--font-heading);
    font-size:1.15rem;
    font-weight:var(--heading-weight);
    color:var(--text);
    margin-bottom:3px;
}
.product-card--featured h3{
    font-size:1.5rem;
}

.product-card__tagline{
    font-family:var(--font-body);
    font-size:.84rem;
    font-weight:600;
    color:var(--secondary);
    margin-bottom:8px;
}
.product-card--featured .product-card__tagline{
    font-size:.92rem;
    margin-bottom:10px;
}

.product-card__desc{
    font-family:var(--font-body);
    font-size:.86rem;
    color:var(--text-light);
    line-height:1.7;
    margin-bottom:8px;
}
.product-card--featured .product-card__desc{
    font-size:.92rem;
}

/* Link */
.product-card__link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:auto;
    padding-top:2px;
    font-family:var(--font-heading);
    font-weight:600;
    font-size:.85rem;
    color:var(--primary);
    text-decoration:none;
}
.product-card__link svg{ width:16px; height:16px; transition:var(--transition); }
.product-card__link:hover svg{ transform:translateX(-4px); }

.products-action{
    margin-top:clamp(40px,6vw,64px);
    text-align:center;
}

/*==========================================================
 Responsive
==========================================================*/
@media (max-width:768px){
    .products-preview{ padding-block:var(--space-section-md); }
    .products-grid{
        grid-template-columns:1fr;
        grid-template-rows:none;
        direction:rtl;
    }
    .product-card--featured,
    .product-card--compact{
        grid-column:1;
        grid-row:auto;
    }
}

@media (max-width:576px){
    .products-preview{ padding-block:var(--space-section-sm); }
    .product-card__top{ flex-wrap:wrap; gap:8px; }
}