/* =========================================================
   CHATNEX — RESPONSIVE SYSTEM
   File: css/responsive.css

   Purpose:
   - Global responsive behavior
   - Header and navigation responsiveness
   - Shared layout responsiveness
   - Grid responsiveness
   - Typography scaling
   - Buttons and form responsiveness
   - Mobile / tablet / desktop support

   IMPORTANT:
   - Global visual styling belongs in main.css.
   - Page-specific responsive styling belongs in
     css/components/*.css.
   - This file must not contain template-data logic.
========================================================= */


/* =========================================================
   1. LARGE DESKTOP
   1440px+
========================================================= */

@media (min-width: 1440px) {

    .container {
        max-width: var(--container-width);
    }

    .container-wide {
        max-width: var(--container-wide);
    }

    /* Global sections */

    .section {
        padding-top: calc(var(--section-padding) + 10px);
        padding-bottom: calc(var(--section-padding) + 10px);
    }

    /* Shared grids */

    .templates-grid,
    .products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .features-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .testimonials-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Shared content width */

    .hero-content {
        max-width: 720px;
    }

    .section-header {
        max-width: 850px;
    }

    /* Shared template preview */

    .template-preview {
        min-height: 260px;
    }
}


/* =========================================================
   2. DESKTOP
   1200px — 1439px
========================================================= */

@media (max-width: 1439px) {

    .container {
        max-width: 1140px;
    }

    .container-wide {
        max-width: 1200px;
    }

    /* Header */

    .nav-links {
        gap: 20px;
    }

    .header-actions {
        gap: 9px;
    }

    /* Hero */

    .hero-title {
        font-size: clamp(3rem, 5vw, 4.5rem);
    }

    /* Template / product grids */

    .templates-grid,
    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* =========================================================
   3. LAPTOP / SMALL DESKTOP
   992px — 1199px
========================================================= */

@media (max-width: 1199px) {

    .container {
        max-width: 960px;
    }

    .container-wide {
        max-width: 1000px;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .site-header {
        padding-left: 20px;
        padding-right: 20px;
    }

    .nav-links {
        gap: 16px;
    }

    .nav-links > li > .nav-link {
        font-size: 0.9rem;
    }

    .header-actions {
        gap: 8px;
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero-section {
        min-height: 590px;
    }

    .hero-title {
        font-size: clamp(2.8rem, 5vw, 4rem);
    }

    .hero-description {
        max-width: 600px;
    }


    /* -----------------------------------------------------
       SHARED GRIDS
    ----------------------------------------------------- */

    .templates-grid,
    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
    }

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

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

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


    /* -----------------------------------------------------
       CATEGORY GRID
    ----------------------------------------------------- */

    .category-grid,
    .categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .footer-grid {
        grid-template-columns:
            1.5fr
            repeat(2, minmax(0, 1fr));
        gap: 32px;
    }
}


/* =========================================================
   4. TABLET
   768px — 991px
========================================================= */

@media (max-width: 991px) {

    html {
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
    }

    .container {
        width: min(100% - 40px, 720px);
    }

    .container-wide {
        width: min(100% - 40px, 760px);
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .site-header {
        padding: 12px 20px;
    }

    .top-header-container {
        min-height: 64px;
    }

    .brand-logo {
        font-size: 1.12rem;
    }

    .logo-icon {
        width: 48px;
        height: 48px;
    }

    /* Mobile menu button */

    .mobile-menu-btn {
        display: inline-flex;
    }

    /* Main navigation */

    .nav-links {
        position: absolute;

        top: calc(100% + 10px);
        left: 20px;
        right: 20px;

        display: none;

        flex-direction: column;
        align-items: stretch;

        gap: 4px;

        padding: 12px;

        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);

        background: var(--bg-card);

        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);

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

        z-index: 1000;
    }

    .nav-links.mobile-active {
        display: flex;
    }

    .nav-links > li {
        width: 100%;
    }

    .nav-links .nav-link {
        width: 100%;
        padding: 12px 14px;

        border-radius: var(--radius-md);
    }

    .nav-links .nav-link:hover,
    .nav-links .nav-link.active {
        background: var(--bg-card-hover);
    }


    /* -----------------------------------------------------
       TEMPLATE DROPDOWN
    ----------------------------------------------------- */

    .nav-dropdown {
        width: 100%;
    }

    .nav-dropdown > .nav-link {
        width: 100%;
    }

    .dropdown-menu {
        position: static;

        width: 100%;

        margin-top: 4px;

        display: none;

        opacity: 1;
        visibility: visible;
        transform: none;

        border: 0;
        border-radius: var(--radius-md);

        background: transparent;

        box-shadow: none;
    }

    .nav-dropdown.open .dropdown-menu {
        display: block;
    }

    .dropdown-menu a {
        width: 100%;
    }


    /* -----------------------------------------------------
       HEADER ACTIONS
    ----------------------------------------------------- */

    .header-actions {
        margin-left: auto;
    }

    .header-actions .browse-btn {
        display: none;
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero-section {
        min-height: auto;
        padding-top: 80px;
        padding-bottom: 90px;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .hero-content {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-title {
        max-width: 760px;

        margin-left: auto;
        margin-right: auto;

        font-size: clamp(2.7rem, 7vw, 4rem);
    }

    .hero-description {
        max-width: 650px;

        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-pills {
        justify-content: center;
    }

    .hero-visual {
        width: min(100%, 700px);
        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       HERO STATS
    ----------------------------------------------------- */

    .hero-stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-stat {
        min-width: 130px;
    }


    /* -----------------------------------------------------
       SHARED GRIDS
    ----------------------------------------------------- */

    .templates-grid,
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .testimonials-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .category-grid,
    .categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }


    /* -----------------------------------------------------
       TEMPLATE FILTERS
    ----------------------------------------------------- */

    .template-toolbar,
    .templates-toolbar {
        flex-wrap: wrap;
        gap: 14px;
    }

    .template-filters,
    .product-filters {
        overflow-x: auto;

        flex-wrap: nowrap;
        justify-content: flex-start;

        padding-bottom: 5px;

        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .template-filters::-webkit-scrollbar,
    .product-filters::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }


    /* -----------------------------------------------------
       SEARCH / SORT
    ----------------------------------------------------- */

    .template-search,
    .search-box {
        width: 100%;
    }

    .template-sort,
    .sort-select {
        min-width: 180px;
    }


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .cta-content {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }

    .cta-actions {
        justify-content: center;
    }


    /* -----------------------------------------------------
       FAQ
    ----------------------------------------------------- */

    .faq-container {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   5. MOBILE
   576px — 767px
========================================================= */

@media (max-width: 767px) {

    .container {
        width: min(100% - 32px, 540px);
    }

    .container-wide {
        width: min(100% - 32px, 560px);
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .site-header {
        padding: 10px 16px;
    }

    .top-header-container {
        min-height: 58px;
    }

    .brand-logo {
        font-size: 1.05rem;
    }

    .logo-icon {
        width: 44px;
        height: 44px;
    }

    .mobile-menu-btn,
    .theme-toggle {
        width: 42px;
        height: 42px;
    }

    .nav-links {
        left: 16px;
        right: 16px;
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero-section {
        padding-top: 65px;
        padding-bottom: 70px;
    }

    .hero-container {
        gap: 42px;
    }

    .hero-title {
        font-size: clamp(2.3rem, 10vw, 3.2rem);
        line-height: 1.08;
    }

    .hero-description {
        font-size: 1rem;
        line-height: 1.7;
    }

    .hero-actions {
        width: 100%;

        flex-direction: column;

        gap: 12px;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-pills {
        gap: 8px;
    }


    /* -----------------------------------------------------
       HERO STATS
    ----------------------------------------------------- */

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 14px;
    }

    .hero-stat {
        min-width: 0;
    }


    /* -----------------------------------------------------
       SECTION HEADERS
    ----------------------------------------------------- */

    .section-header {
        margin-bottom: 34px;
    }

    .section-title {
        font-size: clamp(2rem, 8vw, 2.6rem);
    }

    .section-description {
        font-size: 0.95rem;
    }


    /* -----------------------------------------------------
       SHARED GRIDS
    ----------------------------------------------------- */

    .templates-grid,
    .products-grid,
    .features-grid,
    .testimonials-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .category-grid,
    .categories-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }


    /* -----------------------------------------------------
       TEMPLATE CARDS
    ----------------------------------------------------- */

    .template-card,
    .product-card {
        width: 100%;
    }


    /* -----------------------------------------------------
       TEMPLATE TOOLBAR
    ----------------------------------------------------- */

    .template-toolbar,
    .templates-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .template-toolbar > *,
    .templates-toolbar > * {
        width: 100%;
    }


    /* -----------------------------------------------------
       FILTERS
    ----------------------------------------------------- */

    .template-filters,
    .product-filters {
        margin-bottom: 26px;
        padding-bottom: 6px;
    }

    .filter-btn {
        padding: 9px 14px;
        font-size: 0.82rem;
    }


    /* -----------------------------------------------------
       SEARCH / SORT
    ----------------------------------------------------- */

    .template-sort,
    .sort-select {
        width: 100%;
        min-width: 0;
    }


    /* -----------------------------------------------------
       PRICING
    ----------------------------------------------------- */

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


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .cta-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .cta-title {
        font-size: clamp(2rem, 8vw, 2.6rem);
    }

    .cta-actions {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }

    .cta-actions .btn {
        width: 100%;
    }


    /* -----------------------------------------------------
       FAQ
    ----------------------------------------------------- */

    .faq-item {
        padding: 18px 0;
    }

    .faq-question {
        gap: 14px;
        font-size: 0.95rem;
    }

    .faq-answer {
        font-size: 0.9rem;
        line-height: 1.7;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;

        gap: 12px;

        text-align: left;
    }
}


/* =========================================================
   6. SMALL MOBILE
   480px — 575px
========================================================= */

@media (max-width: 575px) {

    .container {
        width: calc(100% - 28px);
    }

    .container-wide {
        width: calc(100% - 28px);
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .brand-logo span {
        display: none;
    }

    .logo-icon {
        width: 42px;
        height: 42px;
    }

    .header-actions {
        gap: 7px;
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero-section {
        padding-top: 55px;
        padding-bottom: 60px;
    }

    .hero-title {
        font-size: clamp(2.1rem, 11vw, 2.8rem);
    }

    .hero-description {
        font-size: 0.92rem;
    }

    .hero-pills {
        flex-direction: column;
        align-items: center;
    }

    .hero-pill {
        width: max-content;
    }


    /* -----------------------------------------------------
       HERO VISUAL
    ----------------------------------------------------- */

    .hero-visual {
        width: 100%;
    }

    .website-preview,
    .app-preview {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       HERO STATS
    ----------------------------------------------------- */

    .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .hero-stat {
        padding: 15px 8px;
    }

    .hero-stat-value {
        font-size: 1.35rem;
    }

    .hero-stat-label {
        font-size: 0.7rem;
    }


    /* -----------------------------------------------------
       SECTION HEADERS
    ----------------------------------------------------- */

    .section-title {
        font-size: 2rem;
    }

    .section-label {
        font-size: 0.72rem;
    }


    /* -----------------------------------------------------
       CARDS
    ----------------------------------------------------- */

    .feature-card,
    .pricing-card,
    .testimonial-card {
        padding: 22px;
    }


    /* -----------------------------------------------------
       BUTTONS
    ----------------------------------------------------- */

    .btn {
        min-height: 46px;
        padding: 11px 18px;

        font-size: 0.88rem;
    }
}


/* =========================================================
   7. VERY SMALL MOBILE
   Below 480px
========================================================= */

@media (max-width: 479px) {

    .container,
    .container-wide {
        width: calc(100% - 24px);
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .site-header {
        padding-left: 12px;
        padding-right: 12px;
    }

    .top-header-container {
        min-height: 54px;
    }

    .logo-icon {
        width: 40px;
        height: 40px;
    }

    .theme-toggle,
    .mobile-menu-btn {
        width: 38px;
        height: 38px;
    }

    .nav-links {
        left: 12px;
        right: 12px;
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero-section {
        padding-top: 48px;
        padding-bottom: 55px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 0.88rem;
    }

    .hero-stats {
        grid-template-columns: 1fr;
    }

    .hero-stat {
        padding: 13px;
    }


    /* -----------------------------------------------------
       HERO VISUAL
    ----------------------------------------------------- */

    .hero-visual {
        transform: scale(0.94);
        transform-origin: center top;

        margin-bottom: -20px;
    }


    /* -----------------------------------------------------
       SECTIONS
    ----------------------------------------------------- */

    .section-title {
        font-size: 1.8rem;
    }

    .section-description {
        font-size: 0.88rem;
    }


    /* -----------------------------------------------------
       FILTERS
    ----------------------------------------------------- */

    .template-filters,
    .product-filters {
        gap: 7px;
    }

    .filter-btn {
        padding: 8px 12px;
        font-size: 0.76rem;
    }


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .cta-title {
        font-size: 1.9rem;
    }

    .cta-description {
        font-size: 0.88rem;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .footer-bottom {
        font-size: 0.75rem;
    }
}


/* =========================================================
   8. LANDSCAPE MOBILE
========================================================= */

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

    .hero-section {
        min-height: auto;

        padding-top: 45px;
        padding-bottom: 55px;
    }

    .hero-container {
        gap: 35px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-description {
        max-width: 650px;
    }

    .hero-visual {
        max-height: 380px;
        overflow: hidden;
    }
}


/* =========================================================
   9. ACCESSIBILITY — REDUCED MOTION
========================================================= */

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

    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   10. TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .nav-link,
    .dropdown-menu a,
    .btn,
    .filter-btn,
    .category-card,
    .feature-card,
    .product-card,
    .template-card {
        -webkit-tap-highlight-color: transparent;
    }

    /*
       Remove hover transforms on touch devices.
       Component-specific hover effects are intentionally
       neutralized here when possible.
    */

    .category-card:hover,
    .feature-card:hover,
    .product-card:hover,
    .template-card:hover {
        transform: none;
    }
}


/* =========================================================
   11. SAFE AREA SUPPORT
   Modern mobile devices
========================================================= */

@supports (padding: max(0px)) {

    .site-header {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .footer {
        padding-bottom: max(
            24px,
            env(safe-area-inset-bottom)
        );
    }
}


/* =========================================================
   12. PRINT
========================================================= */

@media print {

    html,
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .site-header,
    .mobile-menu-btn,
    .theme-toggle,
    .header-actions,
    .hero-actions,
    .cta-section,
    .back-to-top,
    .footer {
        display: none !important;
    }

    .container,
    .container-wide {
        width: 100%;
        max-width: 100%;
    }

    a {
        color: #000000 !important;
        text-decoration: underline;
    }

    .section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .template-card,
    .product-card,
    .feature-card,
    .pricing-card,
    .testimonial-card {
        break-inside: avoid;
    }
}


/* =========================================================
   END OF CHATNEX RESPONSIVE SYSTEM
========================================================= */