/* ============================================================================
   DeviceHub - Responsive Styles
   Mobile-first responsive breakpoints
   ============================================================================ */

/* === Breakpoints ===
   Mobile: < 640px (default)
   Tablet: 640px - 1023px
   Desktop: >= 1024px
   Large Desktop: >= 1280px
*/

/* === Mobile Styles (< 640px) === */
@media (max-width: 639px) {
    :root {
        --container-padding: var(--space-lg);
        --font-size-6xl: 2.5rem;    /* Reduced from 3.75rem */
        --font-size-5xl: 2rem;      /* Reduced from 3rem */
        --font-size-4xl: 1.75rem;   /* Reduced from 2.25rem */
        --font-size-3xl: 1.5rem;    /* Reduced from 1.875rem */
    }

    section {
        padding: var(--space-3xl) 0;
    }

    /* Header */
    .header__content {
        padding: var(--space-md) 0;
    }

    .header__logo .logo {
        height: 32px;
    }

    .nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: var(--color-white);
        box-shadow: var(--shadow-lg);
        transition: right var(--transition-normal);
        z-index: 1001;
        padding: var(--space-4xl) var(--space-xl);
    }

    .nav.is-active {
        right: 0;
    }

    .nav__list {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .header__menu-toggle {
        display: flex;
        z-index: 1002;
    }

    .header__menu-toggle.is-active .menu-toggle__bar:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .header__menu-toggle.is-active .menu-toggle__bar:nth-child(2) {
        opacity: 0;
    }

    .header__menu-toggle.is-active .menu-toggle__bar:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    /* Hero */
    .hero {
        padding-top: calc(60px + var(--space-3xl));
        padding-bottom: var(--space-3xl);
    }

    .hero__split {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .hero__image {
        order: -1;
        padding: var(--space-lg);
    }

    .hero__image-graphic {
        max-width: 400px;
    }

    .hero__content {
        text-align: center;
    }

    .hero__title {
        font-size: var(--font-size-4xl);
    }

    .hero__subtitle {
        font-size: var(--font-size-base);
        margin-left: auto;
        margin-right: auto;
    }

    .hero__stats {
        flex-wrap: wrap;
        gap: var(--space-xl);
        justify-content: center;
    }

    .stat {
        flex: 1 1 calc(50% - var(--space-xl));
        min-width: 120px;
    }

    .stat__value {
        font-size: var(--font-size-2xl);
    }

    .hero__cta {
        flex-direction: column;
        gap: var(--space-md);
        justify-content: center;
    }

    .hero__cta .btn {
        width: 100%;
    }

    .hero__focus-cards {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    /* Focus Areas */
    .focus-area {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .focus-area--right {
        direction: ltr;
    }

    .focus-area__visual {
        order: -1;
    }

    .technical-diagram {
        min-height: 200px;
        padding: var(--space-lg);
    }

    .diagram__node {
        font-size: var(--font-size-xs);
        padding: var(--space-sm) var(--space-md);
    }

    /* Expertise */
    .expertise__content {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .tech-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    /* Projects */
    .projects__grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .project-card__metrics {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* Contact */
    .contact__content {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .contact__info {
        order: 2;
    }

    .contact__form-wrapper {
        order: 1;
    }

    .contact-form {
        padding: var(--space-lg);
    }

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

    .footer__links {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .footer__bottom {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }
}

/* === Tablet Styles (640px - 1023px) === */
@media (min-width: 640px) and (max-width: 1023px) {
    :root {
        --container-padding: var(--space-xl);
        --font-size-6xl: 3rem;
        --font-size-5xl: 2.5rem;
        --font-size-4xl: 2rem;
    }

    section {
        padding: var(--space-4xl) 0;
    }

    /* Header */
    .nav__list {
        gap: var(--space-xl);
    }

    /* Hero */
    .hero__focus-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }

    .hero__focus-cards .focus-card:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }

    .hero__stats {
        gap: var(--space-2xl);
    }

    /* Focus Areas */
    .focus-area {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }

    /* Expertise */
    .expertise__content {
        grid-template-columns: 1fr 2fr;
        gap: var(--space-2xl);
    }

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

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

    /* Contact */
    .contact__content {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    /* Footer */
    .footer__content {
        grid-template-columns: 1fr 2fr;
    }
}

/* === Desktop Styles (>= 1024px) === */
@media (min-width: 1024px) {
    /* Contact splits properly */
    .contact__content {
        grid-template-columns: 1fr 1fr;
    }
}

/* === Large Desktop (>= 1280px) === */
@media (min-width: 1280px) {
    :root {
        --container-max-width: 1280px;
    }

    .hero__title {
        font-size: 4rem;
    }
}

/* === Touch Device Optimizations === */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .btn:hover {
        transform: none;
    }

    .focus-card:hover {
        transform: none;
    }

    .project-card:hover {
        transform: none;
    }

    /* Increase tap targets */
    .nav__link,
    .btn,
    .social-link,
    .footer__link {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* === Print Styles === */
@media print {
    .header,
    .hero__cta,
    .contact-form,
    .footer,
    .header__menu-toggle {
        display: none;
    }

    body {
        font-size: 12pt;
    }

    section {
        page-break-inside: avoid;
        padding: 1cm 0;
    }

    .hero {
        padding-top: 0;
    }

    a {
        text-decoration: underline;
    }

    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* === High Contrast Mode === */
@media (prefers-contrast: high) {
    :root {
        --color-gray-600: #000000;
        --color-gray-700: #000000;
    }

    .btn--primary {
        border-width: 3px;
    }

    .focus-card,
    .project-card {
        border-width: 2px;
    }
}

/* === Dark Mode Support (Optional) === */
@media (prefers-color-scheme: dark) {
    /* Uncomment to enable dark mode
    :root {
        --color-gray-900: #ffffff;
        --color-gray-700: #e5e5e5;
        --color-gray-600: #d0d0d0;
        --color-gray-500: #a0a0a0;
        --color-white: #1a1a1a;
        --color-gray-50: #2d2d2d;
        --color-gray-100: #3a3a3a;
    }

    body {
        background-color: var(--color-gray-900);
        color: var(--color-gray-100);
    }
    */
}

/* === Landscape Orientation on Mobile === */
@media (max-width: 926px) and (orientation: landscape) {
    .hero {
        padding-top: calc(60px + var(--space-2xl));
        padding-bottom: var(--space-2xl);
    }

    .hero__stats {
        gap: var(--space-lg);
    }

    section {
        padding: var(--space-2xl) 0;
    }
}

/* === Extra Small Devices (<= 375px) === */
@media (max-width: 375px) {
    :root {
        --font-size-6xl: 2rem;
        --font-size-5xl: 1.75rem;
        --font-size-4xl: 1.5rem;
        --container-padding: var(--space-md);
    }

    .hero__focus-cards,
    .focus-area,
    .tech-grid,
    .projects__grid {
        gap: var(--space-md);
    }

    .stat {
        flex: 1 1 100%;
    }

    .hero__stats {
        gap: var(--space-md);
    }

    .focus-card,
    .project-card {
        padding: var(--space-lg);
    }
}

/* === iPad Pro and Larger Tablets === */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero__focus-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero__focus-cards .focus-card:last-child {
        grid-column: auto;
        max-width: 100%;
    }

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

/* === Wide Screens (>= 1536px) === */
@media (min-width: 1536px) {
    :root {
        --container-max-width: 1440px;
    }

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

    .hero__focus-cards {
        gap: var(--space-2xl);
    }
}

/* === Utilities for Responsive Images === */
img {
    height: auto;
}

picture {
    display: block;
}

/* === Responsive Container Queries (Future-proof) === */
@supports (container-type: inline-size) {
    .project-card {
        container-type: inline-size;
    }

    @container (min-width: 400px) {
        .project-card__metrics {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}