/* =========================================================
   AISEL GALLERY
   RESPONSIVE DESIGN
   Mobile • Tablet • Desktop
========================================================= */


/* =========================================================
   LARGE DESKTOP
   1400px+
========================================================= */

@media (min-width: 1400px) {

    .header-container,
    .hero-section,
    .categories-section,
    .products-section,
    .about-section,
    .contact-section {

        max-width: 1320px;
    }

    .categories-grid {

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

        gap: 28px;
    }

    .category-card {

        min-height: 350px;
    }

}


/* =========================================================
   DESKTOP
   1100px - 1399px
========================================================= */

@media (max-width: 1399px) {

    .hero-section {

        min-height: 520px;

        padding: 60px;
    }

    .categories-grid {

        gap: 20px;
    }

}


/* =========================================================
   TABLET LANDSCAPE
   900px - 1099px
========================================================= */

@media (max-width: 1099px) {

    .header-container {

        height: 75px;
    }

    .hero-section {

        min-height: 500px;

        padding: 50px;
    }

    .hero-content {

        max-width: 560px;
    }

    .hero-content h1 {

        font-size:
            clamp(2rem, 5vw, 3.5rem);
    }

    .categories-grid {

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

        gap: 18px;
    }

    .category-card {

        min-height: 300px;
    }

    .about-section {

        padding: 55px;

        min-height: 360px;
    }

}


/* =========================================================
   TABLET
   768px - 899px
========================================================= */

@media (max-width: 899px) {

    .header-container {

        width:
            calc(100% - 30px);
    }

    .hero-section {

        width:
            calc(100% - 30px);

        margin-top: 25px;

        min-height: 460px;

        padding: 45px;

        border-radius: 25px;
    }

    .categories-section,
    .products-section,
    .contact-section {

        width:
            calc(100% - 30px);

        margin-top: 80px;
    }

    .about-section {

        width:
            calc(100% - 30px);

        margin-top: 80px;

        padding: 50px;

        border-radius: 25px;
    }

}


/* =========================================================
   MOBILE LANDSCAPE
   600px - 767px
========================================================= */

@media (max-width: 767px) {

    body {

        padding-bottom: 85px;
    }


    /* HEADER */

    .header-container {

        height: 68px;

        width:
            calc(100% - 24px);
    }

    .brand-en {

        font-size: 1.25rem;

        letter-spacing: 4px;
    }

    .brand-fa {

        font-size: 0.62rem;
    }

    .menu-button,
    .icon-button {

        width: 41px;
        height: 41px;
    }


    /* HERO */

    .hero-section {

        min-height: 440px;

        width:
            calc(100% - 24px);

        padding: 35px 25px;

        margin-top: 18px;

        align-items: flex-end;

        border-radius: 22px;
    }

    .hero-content {

        max-width: 100%;
    }

    .hero-label {

        font-size: 0.68rem;

        padding: 6px 13px;
    }

    .hero-content h1 {

        margin-top: 15px;

        font-size:
            clamp(2rem, 9vw, 3rem);
    }

    .hero-content p {

        font-size: 0.82rem;

        line-height: 2;

        max-width: 100%;
    }

    .hero-button {

        margin-top: 22px;

        padding: 11px 19px;

        font-size: 0.82rem;
    }

    .gold-circle {

        width: 220px;
        height: 220px;

        left: -60px;

        top: -50px;
    }

    .silver-circle {

        width: 150px;
        height: 150px;

        left: 10px;

        bottom: -80px;
    }

    .pink-circle {

        width: 280px;
        height: 280px;

        right: -130px;

        top: 80px;
    }


    /* SECTION HEADINGS */

    .categories-section,
    .products-section,
    .contact-section {

        width:
            calc(100% - 24px);

        margin-top: 65px;
    }

    .section-heading {

        margin-bottom: 25px;
    }

    .section-heading h2 {

        font-size: 1.55rem;
    }

    .section-heading p {

        font-size: 0.78rem;
    }

    .section-heading-row {

        align-items: center;
    }

    .section-heading-row h2 {

        font-size: 1.35rem;
    }

    .section-heading-row > a {

        font-size: 0.72rem;

        padding: 6px 9px;
    }


    /* CATEGORIES */

    .categories-grid {

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

        gap: 12px;
    }

    .category-card {

        min-height: 245px;

        border-radius: 17px;
    }

    .category-number {

        top: 12px;
        left: 12px;

        font-size: 0.68rem;
    }

    .category-image::before {

        width: 145px;
        height: 145px;

        box-shadow:
            0 0 0 18px rgba(255,255,255,0.10),
            0 0 0 36px rgba(255,255,255,0.06);
    }

    .category-image span {

        font-size: 1.25rem;
    }

    .category-info {

        padding: 16px 14px;
    }

    .category-info h3 {

        font-size: 0.86rem;
    }

    .category-info span {

        font-size: 0.62rem;
    }


    /* PRODUCTS */

    .products-slider {

        gap: 12px;

        padding:
            5px 2px 18px;

        scroll-snap-type:
            x mandatory;
    }

    .empty-products {

        min-height: 180px;

        border-radius: 17px;
    }

    .empty-products h3 {

        font-size: 0.95rem;
    }

    .empty-products p {

        max-width: 260px;

        font-size: 0.72rem;
    }


    /* ABOUT */

    .about-section {

        width:
            calc(100% - 24px);

        min-height: 390px;

        margin-top: 70px;

        padding: 35px 25px;

        border-radius: 22px;
    }

    .about-content {

        max-width: 100%;
    }

    .about-content h2 {

        font-size:
            clamp(1.7rem, 8vw, 2.3rem);
    }

    .about-content p {

        font-size: 0.8rem;

        line-height: 2;
    }

    .about-section::after {

        font-size: 5rem;

        bottom: -15px;

        letter-spacing: 7px;
    }


    /* CONTACT */

    .contact-section {

        padding-bottom: 40px;
    }

    .contact-button {

        font-size: 0.8rem;

        padding: 11px 20px;
    }


    /* FOOTER */

    .site-footer {

        padding:
            40px 15px 110px;
    }

    .footer-brand strong {

        font-size: 1.65rem;
    }

    .footer-links {

        gap: 15px;
    }


    /* BOTTOM NAV */

    .bottom-navigation {

        bottom: 10px;

        width:
            calc(100% - 18px);

        padding: 6px;

        border-radius: 20px;
    }

    .bottom-nav-item {

        min-height: 52px;

        border-radius: 15px;

        font-size: 0.57rem;
    }

    .bottom-icon {

        font-size: 1rem;
    }

}


/* =========================================================
   SMALL MOBILE
   400px - 599px
========================================================= */

@media (max-width: 599px) {

    .header-actions {

        gap: 6px;
    }

    .menu-button,
    .icon-button {

        width: 39px;
        height: 39px;
    }

    .brand-en {

        font-size: 1.1rem;

        letter-spacing: 3px;
    }

    .hero-section {

        min-height: 410px;

        padding:
            30px 20px;
    }

    .hero-content h1 {

        font-size:
            clamp(1.8rem, 10vw, 2.5rem);
    }

    .hero-content p {

        font-size: 0.76rem;
    }

    .hero-button {

        font-size: 0.76rem;

        padding:
            10px 17px;
    }

    .categories-grid {

        gap: 10px;
    }

    .category-card {

        min-height: 220px;
    }

    .category-image::before {

        width: 120px;
        height: 120px;
    }

    .category-image span {

        font-size: 1.05rem;
    }

    .category-info {

        padding: 13px 11px;
    }

    .category-info h3 {

        font-size: 0.76rem;
    }

    .category-info span {

        font-size: 0.56rem;
    }

    .section-heading-row {

        gap: 10px;
    }

    .section-heading-row h2 {

        font-size: 1.15rem;
    }

    .section-heading-row > a {

        white-space: nowrap;

        font-size: 0.64rem;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   360px and below
========================================================= */

@media (max-width: 399px) {

    .header-container {

        width:
            calc(100% - 18px);
    }

    .brand-en {

        font-size: 1rem;

        letter-spacing: 2px;
    }

    .brand-fa {

        font-size: 0.55rem;
    }

    .menu-button,
    .icon-button {

        width: 36px;
        height: 36px;
    }

    .hero-section {

        width:
            calc(100% - 18px);

        min-height: 390px;

        padding:
            25px 17px;

        border-radius: 18px;
    }

    .categories-section,
    .products-section,
    .contact-section {

        width:
            calc(100% - 18px);
    }

    .categories-grid {

        gap: 8px;
    }

    .category-card {

        min-height: 205px;

        border-radius: 14px;
    }

    .category-number {

        font-size: 0.58rem;

        top: 9px;
        left: 9px;
    }

    .category-image::before {

        width: 105px;
        height: 105px;
    }

    .category-image span {

        font-size: 0.9rem;
    }

    .category-info {

        padding: 11px 9px;
    }

    .category-info h3 {

        font-size: 0.68rem;
    }

    .category-info span {

        display: none;
    }

    .bottom-navigation {

        width:
            calc(100% - 10px);

        bottom: 6px;

        padding: 4px;

        border-radius: 17px;
    }

    .bottom-nav-item {

        min-height: 48px;

        border-radius: 13px;

        font-size: 0.5rem;
    }

    .bottom-icon {

        font-size: 0.9rem;
    }

}


/* =========================================================
   LANDSCAPE MOBILE
========================================================= */

@media (max-height: 500px)
and (orientation: landscape) {

    .hero-section {

        min-height: 360px;
    }

    .hero-content h1 {

        font-size: 2rem;
    }

    .hero-content p {

        max-width: 500px;
    }

    .bottom-navigation {

        bottom: 5px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
    }

}


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