/* ============================================
   PROMTZA.COM - Responsive Styles
   ============================================ */

/* ============================================
   TABLET (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .container {
        padding: 0 20px;
    }

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

    .hero-content {
        max-width: 100%;
        order: 1;
    }

    .hero-visual {
        order: 0;
    }

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

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

    .cube-container {
        width: 280px;
        height: 280px;
    }

    .cube {
        width: 160px;
        height: 160px;
        margin: -80px;
    }

    .cube-face {
        width: 160px;
        height: 160px;
    }

    .cube-face.front {
        transform: translateZ(80px);
    }

    .cube-face.back {
        transform: rotateY(180deg) translateZ(80px);
    }

    .cube-face.right {
        transform: rotateY(90deg) translateZ(80px);
    }

    .cube-face.left {
        transform: rotateY(-90deg) translateZ(80px);
    }

    .cube-face.top {
        transform: rotateX(90deg) translateZ(80px);
    }

    .cube-face.bottom {
        transform: rotateX(-90deg) translateZ(80px);
    }

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

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

    .nav-menu {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* Mobile menu open */
    .nav-menu.mobile-open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--header-bg);
        backdrop-filter: blur(20px);
        padding: 16px;
        border-top: 1px solid var(--border-color);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        gap: 4px;
        max-height: 80vh;
        overflow-y: auto;
    }

    .nav-menu.mobile-open .nav-link {
        padding: 12px 16px;
        border-radius: 10px;
    }
}

/* ============================================
   MOBILE (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    .container {
        padding: 0 16px;
    }

    .hero-section {
        padding: 100px 0 60px;
        min-height: auto;
    }

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

    .hero-desc {
        font-size: 1rem;
    }

    .hero-actions {
        flex-direction: column;
        gap: 12px;
    }

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

    .hero-stats {
        gap: 20px;
    }

    .hero-stat-number {
        font-size: 1.5rem;
    }

    .section {
        padding: 60px 0;
    }

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

    .tools-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
    }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

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

    .stat-card {
        padding: 24px 16px;
    }

    .stat-number {
        font-size: 2rem;
    }

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

    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }

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

    .tool-interface {
        padding: 20px;
    }

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

    .related-tools-grid {
        grid-template-columns: 1fr;
    }

    .breadcrumb {
        font-size: 0.8rem;
    }

    .search-container {
        padding: 0 16px;
    }

    .search-input {
        font-size: 1rem;
        padding: 14px 50px 14px 44px;
    }

    .scroll-top {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
    }

    .file-upload-area {
        padding: 24px;
    }
}

/* ============================================
   SMALL MOBILE (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    .hero-title {
        font-size: 1.7rem;
    }

    .hero-badge {
        font-size: 0.75rem;
    }

    .hero-stats {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

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

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

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

    .tool-card {
        padding: 20px;
    }

    .category-card {
        padding: 20px;
    }

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

    .btn-lg {
        padding: 14px 24px;
    }

    .cube-container {
        width: 220px;
        height: 220px;
    }

    .cube {
        width: 120px;
        height: 120px;
        margin: -60px;
    }

    .cube-face {
        width: 120px;
        height: 120px;
        font-size: 1.8rem;
    }

    .cube-face.front {
        transform: translateZ(60px);
    }

    .cube-face.back {
        transform: rotateY(180deg) translateZ(60px);
    }

    .cube-face.right {
        transform: rotateY(90deg) translateZ(60px);
    }

    .cube-face.left {
        transform: rotateY(-90deg) translateZ(60px);
    }

    .cube-face.top {
        transform: rotateX(90deg) translateZ(60px);
    }

    .cube-face.bottom {
        transform: rotateX(-90deg) translateZ(60px);
    }

    .newsletter-input-group {
        flex-direction: column;
    }
}

/* ============================================
   LARGE SCREENS (min-width: 1440px)
   ============================================ */
@media (min-width: 1440px) {
    .container {
        max-width: 1320px;
    }

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

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

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {

    .site-header,
    .site-footer,
    .scroll-top,
    .search-overlay,
    .loader-wrapper,
    .hero-visual,
    .mobile-menu-toggle,
    .header-actions,
    .footer-social,
    .footer-newsletter,
    .ad-container {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    .hero-section {
        min-height: auto;
        padding: 20px 0;
    }

    .hero-title {
        -webkit-text-fill-color: black !important;
        color: black !important;
    }

    a {
        text-decoration: underline;
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (hover: none) {

    .tool-card:hover,
    .category-card:hover,
    .hover-lift:hover {
        transform: none;
    }

    .tool-card:active,
    .category-card:active {
        transform: scale(0.98);
    }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */
@media (prefers-contrast: high) {
    body {
        --border-color: #000;
    }

    .tool-card,
    .category-card {
        border-width: 2px;
    }
}

/* ============================================
   DARK MODE PREFERENCE (System)
   ============================================ */
@media (prefers-color-scheme: dark) {
    body:not([data-theme]) {
        --bg-primary: #0f172a;
        --bg-secondary: #1e293b;
        --bg-tertiary: #334155;
        --text-primary: #f1f5f9;
        --text-secondary: #cbd5e1;
        --text-tertiary: #64748b;
        --border-color: #334155;
    }
}