/*
* ========================================
* Creative Agency - Responsive Styles
* Desktop, Laptop, Tablet, Mobile
* ========================================
*/

/* ========================================
   BREAKPOINTS
   - Desktop: > 1200px
   - Laptop: 992px - 1199px
   - Tablet: 768px - 991px
   - Mobile: < 768px
   - Small Mobile: < 480px
======================================== */

/* ========================================
   LARGE DESKTOP (1400px+)
======================================== */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
    
    .hero-visual {
        max-width: 800px;
    }
}

/* ========================================
   LAPTOP / SMALL DESKTOP (992px - 1199px)
======================================== */
@media (max-width: 1199px) {
    :root {
        --container-padding: 2rem;
    }

    /* Grid Adjustments */
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-5 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .grid-6 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Hero */
    .hero-content {
        max-width: 700px;
    }
    
    .hero-visual {
        width: 45%;
    }

    /* Services */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Portfolio */
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .portfolio-item.wide {
        grid-column: span 1;
    }

    /* Process */
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2xl);
    }
    
    .process-grid::before {
        display: none;
    }

    /* Team */
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Blog */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer */
    .footer-top {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: var(--space-2xl);
    }

    /* Masonry */
    .masonry-grid {
        columns: 2;
    }

    /* Content Grid */
    .content-grid {
        grid-template-columns: 1fr 300px;
        gap: var(--space-2xl);
    }
}

/* ========================================
   TABLET (768px - 991px)
======================================== */
@media (max-width: 991px) {
    :root {
        --space-section: 5rem;
    }

    /* Navigation */
    .nav-menu {
        display: none;
    }
    
    .menu-toggle {
        display: block;
    }
    
    .header-actions .btn {
        display: none;
    }

    /* Hero */
    .hero {
        text-align: center;
        padding-top: 120px;
    }
    
    .hero-content {
        max-width: 100%;
    }
    
    .hero-description {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .hero-visual {
        display: none;
    }
    
    .hero-stats {
        justify-content: center;
    }

    /* Grid */
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-5, .grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* About */
    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }
    
    .about-image {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .about-content {
        text-align: center;
    }
    
    .about-features {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Counters */
    .counters {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Services */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Portfolio */
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .portfolio-item.tall {
        grid-row: span 1;
        aspect-ratio: 4/3;
    }

    /* Process */
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Team */
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Blog */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }
    
    .contact-info {
        position: static;
    }
    
    .contact-details {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
    
    .map-section {
        height: 350px;
    }

    /* Content Grid */
    .content-grid {
        grid-template-columns: 1fr;
    }
    
    .sidebar {
        position: static;
    }

    /* Blog Layout */
    .blog-layout {
        grid-template-columns: 1fr;
    }
    
    .blog-posts {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .blog-card-large {
        grid-column: span 2;
        grid-template-columns: 1fr;
    }
    
    .blog-card-large .blog-card-image {
        min-height: 250px;
    }
    
    .blog-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xl);
    }
    
    .sidebar-newsletter {
        grid-column: span 2;
    }
    
    .pagination {
        grid-column: span 2;
    }

    /* Blog Details / Article */
    .article-layout {
        grid-template-columns: 1fr;
    }
    
    .article-layout .blog-sidebar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xl);
    }
    
    .article-meta {
        gap: var(--space-lg);
    }
    
    .post-navigation {
        grid-template-columns: 1fr;
    }
    
    .post-nav-link.next {
        text-align: left;
    }
    
    .post-nav-link.next .post-nav-label {
        justify-content: flex-start;
    }

    /* Portfolio Details */
    .project-info {
        grid-template-columns: 1fr;
    }
    
    .project-details-card {
        position: static;
        order: -1;
    }
    
    .challenge-solution {
        grid-template-columns: 1fr;
    }
    
    .project-navigation {
        grid-template-columns: 1fr;
    }
    
    .project-nav-item.next {
        text-align: left;
    }
    
    .grid-span-2 {
        grid-column: span 1;
    }

    /* Footer */
    .footer-top {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2xl);
    }
    
    .footer-brand {
        grid-column: span 2;
    }
}

/* ========================================
   MOBILE (< 768px)
======================================== */
@media (max-width: 767px) {
    :root {
        --container-padding: 1.25rem;
        --space-section: 4rem;
    }

    /* Typography */
    h1 { font-size: clamp(2.5rem, 8vw, 4rem); }
    h2 { font-size: clamp(2rem, 6vw, 3rem); }
    h3 { font-size: clamp(1.5rem, 4vw, 2rem); }

    /* Header */
    .header {
        padding: var(--space-md) 0;
    }
    
    .logo {
        font-size: var(--fs-lg);
    }
    
    .logo-icon {
        width: 36px;
        height: 36px;
    }

    /* Hero */
    .hero {
        min-height: auto;
        padding: 140px 0 80px;
    }
    
    .hero-label {
        margin-bottom: var(--space-lg);
    }
    
    .hero-title {
        margin-bottom: var(--space-lg);
    }
    
    .hero-description {
        font-size: var(--fs-base);
        margin-bottom: var(--space-xl);
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
    }
    
    .hero-stats {
        flex-wrap: wrap;
        gap: var(--space-md);
        padding: var(--space-lg);
    }
    
    .hero-stat {
        flex: 1 1 40%;
        min-width: 120px;
    }
    
    .hero-stat-divider {
        display: none;
    }
    
    .hero-stat-number {
        font-size: var(--fs-3xl);
    }
    
    .scroll-indicator {
        display: none;
    }

    /* Section */
    .section-header {
        margin-bottom: var(--space-3xl);
    }
    
    .section-header h2 {
        margin-bottom: var(--space-md);
    }

    /* Grid */
    .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 {
        grid-template-columns: 1fr;
    }

    /* About */
    .about-features {
        grid-template-columns: 1fr;
    }
    
    .about-experience {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: var(--space-lg);
        display: inline-block;
    }
    
    .about-image-float {
        width: 120px;
        height: 120px;
        bottom: -15px;
        right: -15px;
    }

    /* Counters */
    .counters {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
    }
    
    .counter-item {
        padding: var(--space-lg);
    }
    
    .counter-number {
        font-size: var(--fs-2xl);
    }

    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .service-card {
        padding: var(--space-xl);
    }
    
    .service-number {
        font-size: var(--fs-3xl);
    }

    /* Portfolio */
    .portfolio-filters {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: var(--space-sm);
        margin-bottom: var(--space-2xl);
        -webkit-overflow-scrolling: touch;
    }
    
    .portfolio-filters::-webkit-scrollbar {
        display: none;
    }
    
    .filter-btn {
        white-space: nowrap;
    }
    
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    /* Process */
    .process-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .process-number {
        width: 80px;
        height: 80px;
        font-size: var(--fs-xl);
    }

    /* Team */
    .team-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    /* Blog */
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .blog-layout {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .blog-posts {
        grid-template-columns: 1fr;
    }
    
    .blog-card-large {
        grid-column: span 1;
        grid-template-columns: 1fr;
    }
    
    .blog-card-large .blog-card-image {
        min-height: 200px;
    }
    
    .blog-card-large h3 {
        font-size: var(--fs-xl);
    }
    
    .blog-card-content {
        padding: var(--space-lg);
    }
    
    .blog-sidebar {
        grid-template-columns: 1fr;
    }
    
    .sidebar-newsletter {
        grid-column: span 1;
    }
    
    .pagination {
        grid-column: span 1;
        flex-wrap: wrap;
    }
    
    .pagination-number:nth-child(n+5):not(:last-of-type) {
        display: none;
    }

    /* Blog Details / Article */
    .article-header {
        padding: calc(80px + var(--space-2xl)) 0 var(--space-xl);
    }
    
    .article-header h1 {
        font-size: var(--fs-2xl);
    }
    
    .article-meta {
        flex-direction: column;
        gap: var(--space-md);
    }
    
    .article-info {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .article-layout {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .article-layout .blog-sidebar {
        grid-template-columns: 1fr;
    }
    
    .article-content .lead {
        font-size: var(--fs-lg);
    }
    
    .article-content h2 {
        font-size: var(--fs-xl);
    }
    
    .article-content blockquote {
        padding: var(--space-lg);
    }
    
    .article-content blockquote p {
        font-size: var(--fs-base);
    }
    
    .article-tags {
        justify-content: center;
    }
    
    .article-share {
        flex-direction: column;
        align-items: center;
    }
    
    .author-bio {
        flex-direction: column;
        text-align: center;
        padding: var(--space-xl);
    }
    
    .author-bio > img {
        margin: 0 auto;
    }
    
    .author-social {
        justify-content: center;
    }
    
    .post-navigation {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .post-nav-link {
        padding: var(--space-lg);
    }
    
    .post-nav-link.next {
        text-align: left;
    }
    
    .post-nav-link.next .post-nav-label {
        justify-content: flex-start;
    }
    
    /* Comments */
    .comment {
        flex-direction: column;
        gap: var(--space-md);
    }
    
    .comment > img {
        width: 40px;
        height: 40px;
    }
    
    .comment-content {
        padding: var(--space-lg);
    }
    
    .comment-reply-item {
        margin-left: 0;
        padding-left: var(--space-md);
    }
    
    .comment-form {
        padding: var(--space-lg);
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }

    /* CTA */
    .cta-content h2 {
        font-size: var(--fs-2xl);
    }

    /* Footer */
    .footer {
        padding-top: var(--space-4xl);
    }
    
    .footer-top {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .footer-brand {
        grid-column: span 1;
        text-align: center;
    }
    
    .footer-brand p {
        max-width: 100%;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-column {
        text-align: center;
    }
    
    .footer-links a:hover {
        padding-left: 0;
    }
    
    .footer-contact-item {
        justify-content: center;
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: var(--space-lg);
        text-align: center;
    }
    
    .footer-legal {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-md);
    }

    /* Page Header */
    .page-header {
        padding: calc(100px + var(--space-3xl)) 0 var(--space-3xl);
    }

    /* Contact */
    .contact-form {
        padding: var(--space-xl);
    }
    
    .contact-form h3 {
        font-size: var(--fs-xl);
    }
    
    .contact-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .contact-details {
        grid-template-columns: 1fr;
    }
    
    .contact-item {
        padding: var(--space-md);
    }
    
    .contact-item:hover {
        transform: none;
    }
    
    .contact-icon {
        width: 48px;
        height: 48px;
    }
    
    .contact-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .social-links {
        justify-content: center;
    }
    
    .map-section {
        height: 280px;
    }
    
    .map-pin {
        width: 50px;
        height: 50px;
    }
    
    .map-pin svg {
        width: 22px;
        height: 22px;
    }
    
    .faq-question {
        padding: var(--space-lg);
    }
    
    .faq-question h4 {
        font-size: var(--fs-sm);
    }
    
    .faq-answer {
        padding: 0 var(--space-lg) var(--space-lg);
    }

    /* Sidebar */
    .sidebar-widget {
        padding: var(--space-lg);
    }

    /* Masonry */
    .masonry-grid {
        columns: 1;
    }

    /* Testimonials */
    .testimonial-text {
        font-size: var(--fs-lg);
    }
    
    .testimonial-author {
        flex-direction: column;
        text-align: center;
    }

    /* Buttons */
    .btn {
        padding: var(--space-md) var(--space-lg);
    }
    
    .btn-lg {
        padding: var(--space-md) var(--space-xl);
    }

    /* Cards */
    .card-body {
        padding: var(--space-lg);
    }

    /* Back to top */
    .back-to-top {
        width: 44px;
        height: 44px;
        bottom: 20px;
        right: 20px;
    }

    /* Portfolio Details */
    .project-hero {
        border-radius: var(--radius-lg);
    }
    
    .project-details-card {
        padding: var(--space-xl);
    }
    
    .project-gallery .gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .gallery-item.full-width {
        grid-column: span 1;
    }
    
    .challenge-box,
    .solution-box {
        padding: var(--space-xl);
    }
    
    .project-testimonial {
        padding: var(--space-xl);
    }
    
    .project-testimonial::before {
        font-size: 5rem;
        top: var(--space-sm);
        left: var(--space-lg);
    }
    
    .project-nav-item {
        padding: var(--space-lg);
    }
    
    .project-nav-arrow {
        display: none;
    }
    
    .project-results .counter-number {
        font-size: var(--fs-3xl);
    }

    /* Custom cursor - hide on mobile */
    .cursor, .cursor-follower {
        display: none !important;
    }
}

/* ========================================
   SMALL MOBILE (< 480px)
======================================== */
@media (max-width: 479px) {
    :root {
        --container-padding: 1rem;
    }

    /* Counters */
    .counters {
        grid-template-columns: 1fr;
    }

    /* About Image */
    .about-image-float {
        display: none;
    }

    /* Hero Stats */
    .hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
        padding: var(--space-md);
    }
    
    .hero-stat {
        padding: var(--space-sm);
    }
    
    .hero-stat-number {
        font-size: var(--fs-2xl);
    }
    
    .hero-stat-label {
        font-size: var(--fs-xs);
        white-space: normal;
    }

    /* Contact */
    .contact-item {
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
    }
    
    .contact-icon {
        margin: 0 auto;
    }

    /* Swiper Navigation */
    .swiper-button-prev,
    .swiper-button-next {
        display: none !important;
    }
}

/* ========================================
   LANDSCAPE PHONE
======================================== */
@media (max-width: 767px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 100px 0 60px;
    }
    
    .hero-stats {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .hero-stat-divider {
        display: none;
    }
}

/* ========================================
   HIGH DPI / RETINA DISPLAYS
======================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Add high-res image rules if needed */
}

/* ========================================
   TOUCH DEVICES
======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Touch-specific styles */
    
    /* Show hover states permanently */
    .portfolio-overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(26, 26, 46, 0.7), transparent);
    }
    
    .portfolio-category,
    .portfolio-title,
    .portfolio-link {
        transform: none;
        opacity: 1;
    }
    
    .team-social {
        position: static;
        transform: none;
        opacity: 1;
        justify-content: center;
        margin-top: var(--space-md);
    }
    
    /* Disable hover animations */
    .service-card:hover,
    .card:hover,
    .blog-card:hover,
    .hover-lift:hover {
        transform: none;
    }
}

/* ========================================
   PRINT STYLES
======================================== */
@media print {
    /* Hide non-essential elements */
    .header,
    .footer,
    .back-to-top,
    .cursor,
    .cursor-follower,
    .scroll-progress,
    .page-loader {
        display: none !important;
    }
    
    /* Reset backgrounds */
    body {
        background: white !important;
        color: black !important;
    }
    
    /* Remove shadows and animations */
    * {
        box-shadow: none !important;
        animation: none !important;
        transition: none !important;
    }
    
    /* Ensure text is readable */
    a {
        text-decoration: underline;
    }
    
    /* Break pages appropriately */
    .section {
        page-break-inside: avoid;
    }
}

/* ========================================
   ACCESSIBILITY
======================================== */

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --border-color: currentColor;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .hero-shape,
    .scroll-indicator-line::after,
    .clients-track,
    .marquee-content {
        animation: none !important;
    }
}

/* Dark Mode System Preference (when no manual toggle) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #0d0d1a;
        --bg-secondary: #13132a;
        --bg-tertiary: #1a1a3e;
        --bg-card: #1a1a3e;
        --text-primary: #f8f9fa;
        --text-secondary: #adb5bd;
        --text-muted: #6c757d;
        --border-color: rgba(255, 255, 255, 0.08);
    }
}