/*==================================================
        RESPONSIVE — کاشی نیکان
        Breakpoints: 1200 / 992 / 768 / 576
==================================================*/

/*==================================================
            ≤ 1200px  (small desktop / large tablet)
==================================================*/

@media (max-width:1200px){

    .hero__title{ font-size:52px; }

    .categories__grid{ grid-template-columns:repeat(2,1fr); }

    .products__grid{ grid-template-columns:repeat(2,1fr); }

    .projects__grid{ grid-template-columns:repeat(2,1fr); }

    .banner__wrapper{ padding:44px; gap:40px; }

    .stats__grid{ grid-template-columns:repeat(2,1fr); }

    .stat-item{ border-inline-end:none; border-bottom:1px solid var(--border); }

}

/*==================================================
            ≤ 992px  (tablet)
==================================================*/

@media (max-width:992px){

    section{ padding:80px 0; }

    /* Navigation collapses into the mobile menu */

    .header__nav{ display:none; }

    .header__toggle{ display:flex; }

    .header__cta{ display:none; }

    .hero{ min-height:auto; padding-top:150px; padding-bottom:100px; }

    .hero__wrapper{ min-height:auto; grid-template-columns:1fr; }

    .hero__title{ font-size:44px; }

    .hero__meta{ gap:24px; flex-wrap:wrap; }

    .hero__scroll{ display:none; }

    .section-head__title{ font-size:30px; }

    .section-head--split{ align-items:flex-start; }

    .about__wrapper{ grid-template-columns:1fr; gap:56px; }

    .about__media-main{ height:360px; }

    .about__media-badge{ left:16px; bottom:-24px; }

    .about__features{ grid-template-columns:1fr; }

    .banner__wrapper{ grid-template-columns:1fr; }

    .banner__stats{

        padding-inline-start:0;

        border-inline-start:none;

        padding-top:28px;

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

        flex-direction:row;

        flex-wrap:wrap;

    }

    .footer__top{ grid-template-columns:1fr 1fr; }

    .footer__col--about{ grid-column:1 / -1; }

}

/*==================================================
            ≤ 768px  (large mobile)
==================================================*/

@media (max-width:768px){

    section{ padding:64px 0; }

    .hero__title{ font-size:36px; }

    .hero__text{ font-size:16px; }

    .hero__buttons{ flex-wrap:wrap; }

    .hero__buttons .btn{ width:100%; }

    .categories__grid{ grid-template-columns:1fr; }

    .products__grid{ grid-template-columns:1fr; }

    .products__tabs{ width:100%; overflow-x:auto; }

    .section-head--split{ flex-direction:column; align-items:flex-start; gap:20px; }

    .projects__grid{ grid-template-columns:1fr; }

    .stats__grid{ grid-template-columns:1fr 1fr; }

    .cta__title{ font-size:26px; }

    .cta__buttons{ flex-direction:column; }

    .cta__buttons .btn{ width:100%; }

    .footer__top{ grid-template-columns:1fr; }

    .footer__bottom{ flex-direction:column; gap:10px; text-align:center; }

}

/*==================================================
            ≤ 576px  (small mobile)
==================================================*/

@media (max-width:576px){

    .container{ width:92%; }

    .header{ height:76px; }

    .header__wrapper{ height:76px; }

    .header__logo img{ height:56px; }

    .hero{ padding-top:120px; }

    .hero__subtitle{ font-size:13px; letter-spacing:2px; }

    .hero__title{ font-size:30px; }

    .hero__meta{ gap:18px; }

    .hero__meta-item strong{ font-size:22px; }

    .section-head__title{ font-size:24px; }

    .category-card{ padding:28px 22px; }

    .banner__wrapper{ padding:28px; border-radius:20px; }

    .banner__title{ font-size:26px; }

    .stats__grid{ grid-template-columns:1fr 1fr; gap:0; }

    .stat-item{ padding:22px 10px; }

    .stat-item__number{ font-size:32px; }

    .about__media-main{ height:260px; }

    .about__media-badge{

        position:static;

        margin-top:16px;

        max-width:none;

    }

    .cta__wrapper{ padding:44px 22px; }

    .back-to-top{ left:18px; bottom:18px; width:44px; height:44px; }

    .mobile-menu{ width:280px; }

}

/*==================================================
  Nikan 1.3 — hero spacing and mobile logo refinement
==================================================*/
@media (min-width:993px){
    .hero{ align-items:flex-start; }
    .hero__wrapper{
        min-height:100svh;
        align-items:start;
        padding-top:clamp(124px,14vh,154px);
    }
}

@media (max-width:992px){
    .hero{
        min-height:100svh;
        padding:100px 0 40px;
        align-items:center;
    }
    .hero__wrapper{
        min-height:calc(100svh - 140px);
        align-items:center;
    }
    .hero__meta{
        margin-top:30px;
        padding-top:20px;
    }
}

@media (max-width:768px){
    .hero{
        min-height:100svh;
        padding:88px 0 28px;
    }
    .hero__wrapper{
        min-height:calc(100svh - 116px);
    }
    .hero__meta{
        margin-top:24px;
        padding-top:16px;
    }
}

@media (max-width:576px){
    .header .header__logo img{
        height:64px;
        max-width:145px;
    }
    .header.header--scrolled .header__logo img{
        height:57px;
        max-width:132px;
    }
    .hero{
        padding-top:82px;
        padding-bottom:22px;
    }
    .hero__wrapper{
        min-height:calc(100svh - 104px);
    }
}

@media (max-width:420px){
    .header .header__logo img{
        height:60px;
        max-width:136px;
    }
    .header.header--scrolled .header__logo img{
        height:54px;
        max-width:124px;
    }
}

@media (max-width:360px){
    .header .header__logo img{
        height:56px;
        max-width:126px;
    }
    .header.header--scrolled .header__logo img{
        height:51px;
        max-width:116px;
    }
}