/* =========================================================
   WebSteveLHL
   Responsive Styles
   ========================================================= */


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 1024px) {

    :root {
        --section-space: 110px;
    }


    /* Homepage Hero */

    .hero-inner {
        grid-template-columns: 1fr 0.7fr;
        gap: 50px;
    }

    .hero h1 {
        font-size: clamp(3.6rem, 7vw, 5.5rem);
    }


    /* Services */

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

    .service-card,
    .service-card:first-child {
        min-height: auto;

        border-right: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        border-left: 1px solid var(--color-border);
    }

    .service-number {
        margin-bottom: 50px;
    }


    /* About */

    .about-grid {
        gap: 60px;
    }

    .service-detail {
        grid-template-columns: 50px 0.8fr 1.2fr;

        gap: 40px;
    }

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

    .process-item {
        border-bottom: 1px solid #333;
    }

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

    .about-capability {
        border-bottom: 1px solid #333;
    }

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

    .positioning-intro {
        grid-column: 1 / -1;

        min-height: auto;

        padding: 20px 0;

        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .positioning-item {
        border-bottom: 1px solid var(--color-border);
    }

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

    .approach-step {
        border-bottom: 1px solid var(--color-border);
    }

}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 768px) {

    :root {
        --container-padding: 20px;
        --section-space: 85px;
    }


    /* =====================================================
       Typography
       ===================================================== */

    h1 {
        font-size: clamp(3rem, 14vw, 4.8rem);
    }

    h2 {
        font-size: clamp(2.5rem, 11vw, 3.8rem);
    }

    .section-heading {
        margin-bottom: 50px;
    }


    /* =====================================================
       Header
       ===================================================== */

    .header-inner {
        height: 72px;
    }

    .mobile-menu-toggle {
        position: relative;
        z-index: 102;

        display: block;
    }

    .primary-navigation {
        position: fixed;
        z-index: 101;

        padding: 100px var(--container-padding) 50px;

        inset: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        visibility: hidden;
        opacity: 0;

        background: var(--color-bg);

        transition:
            opacity var(--transition),
            visibility var(--transition);
    }

    .primary-navigation.is-open {
        visibility: visible;
        opacity: 1;
    }

    .primary-menu {
        flex-direction: column;

        gap: 28px;

        text-align: center;
    }

    .primary-menu a {
        font-size: 2rem;
        font-weight: 600;

        letter-spacing: -0.04em;
    }

    .site-logo {
        gap: 9px;
    
        font-size: 1rem;
    }
    
    .site-logo-icon {
        width: 32px;
        height: 32px;
    }
    
    .primary-menu {
        width: 100%;
    
        gap: 0;
    
        text-align: left;
    }
    
    .primary-menu li {
        width: 100%;
    
        border-bottom: 1px solid var(--color-border);
    }
    
    .primary-menu li:first-child {
        border-top: 1px solid var(--color-border);
    }
    
    .primary-menu a {
        display: flex;
        align-items: center;
        justify-content: space-between;
    
        width: 100%;
    
        padding: 20px 0;
    
        font-size: clamp(1.8rem, 9vw, 2.5rem);
        font-weight: 600;
    
        letter-spacing: -0.04em;
    }
    
    .primary-menu a::after {
        display: none;
    }
    
    
    /* Don't use desktop Contact button style on mobile */
    
    .primary-menu > li:last-child > a {
        padding: 20px 0;
    
        color: var(--color-dark);
    
        border: 0;
    
        background: transparent;
    }
    
    .primary-menu > li:last-child > a:hover,
    .primary-menu > li:last-child.current-menu-item > a {
        color: var(--color-accent);
    
        background: transparent;
    }


    /* Burger -> X */

    .mobile-menu-toggle.is-active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

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

    .mobile-menu-toggle.is-active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }


    /* =====================================================
       Homepage Hero
       ===================================================== */

    .hero {
        min-height: auto;

        padding: 80px 0 100px;
    }

    .hero-inner {
        grid-template-columns: 1fr;

        gap: 65px;
    }

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

    .hero-visual {
        justify-content: flex-start;
    }

    .code-window {
        max-width: 100%;

        transform: none;
    }


    /* =====================================================
       Services
       ===================================================== */

    .service-card {
        padding: 38px 28px;
    }


    /* =====================================================
       Homepage Portfolio
       ===================================================== */

    .portfolio-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .project-content h3 {
        font-size: 1.5rem;
    }


    /* =====================================================
       About
       ===================================================== */

    .about-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .about-lead {
        font-size: 1.4rem;
    }


    /* =====================================================
       Single Project
       ===================================================== */

    .project-hero {
        padding: 60px 0;
    }

    .project-back {
        margin-bottom: 50px;
    }

    .project-hero-grid,
    .project-content-grid,
    .project-stack-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .project-hero h1 {
        font-size: clamp(3rem, 14vw, 4.8rem);
    }

    .project-intro {
        font-size: 1.1rem;
    }

    .project-featured-image {
        aspect-ratio: 4 / 3;
    }

    .project-stack-text {
        font-size: 1.25rem;
    }


    /* Project Screens */

    .project-device-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .project-screen-mobile {
        width: min(70%, 300px);
    }


    /* Project Detail Gallery */

    .project-details-gallery {
        padding-bottom: 85px;
    }

    .project-details-grid {
        grid-template-columns: 1fr;
    }

    /* Project Navigation */

    .project-navigation-grid {
        grid-template-columns: 1fr;
    }

    .project-nav-item {
        min-height: auto;

        padding: 40px 0;
    }

    .project-nav-previous {
        padding-right: 0;

        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .project-nav-next {
        padding-left: 0;

        text-align: left;
    }

    .project-nav-next strong {
        margin-left: 0;
    }

    .project-nav-label {
        margin-bottom: 25px;
    }

    .project-nav-empty {
        display: none;
    }


    /* =====================================================
       Projects Archive
       ===================================================== */

    .work-archive-hero {
        padding: 70px 0 80px;
    }

    .work-archive-hero h1 {
        font-size: clamp(3.2rem, 14vw, 5rem);
    }

    .work-archive-intro {
        font-size: 1.05rem;
    }

    .work-archive {
        padding-bottom: 90px;
    }

    .work-item-link {
        padding: 40px 0;
    }

    .work-item-content {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .work-item h2 {
        font-size: clamp(2.2rem, 10vw, 3.2rem);
    }

    .work-image {
        order: -1;
    }


    /* =====================================================
    Footer
    ===================================================== */

    .site-footer {
        padding: 70px 0 25px;
    }

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

        gap: 65px;

        padding-bottom: 65px;
    }

    .footer-logo {
        margin-bottom: 35px;
    }

    .footer-logo-icon {
        width: 34px;
        height: 34px;
    }

    .footer-tagline {
        font-size: clamp(2rem, 10vw, 3rem);
    }

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

        gap: 35px;
    }

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

        gap: 25px;

        padding: 45px 0;
    }

    .footer-cta-link {
        width: 100%;

        justify-content: space-between;

        font-size: clamp(2.5rem, 13vw, 4rem);
    }

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

        gap: 20px;
    }

    .footer-meta,
    .footer-legal {
        align-items: flex-start;
        flex-direction: column;

        gap: 8px;
    }

    /* =====================================================
   Services Page
   ===================================================== */

    .services-page-hero {
        padding: 70px 0 90px;
    }

    .services-page-hero h1 {
        font-size: clamp(3.2rem, 14vw, 5rem);
    }

    .services-page-intro {
        font-size: 1.05rem;
    }


    /* Service list */

    .service-detail {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 60px 0;
    }

    .service-detail-number {
        padding: 0;
    }

    .service-detail-title h2 {
        font-size: clamp(2.5rem, 11vw, 3.8rem);
    }

    .service-detail-lead {
        font-size: 1.2rem;
    }


    /* Process */

    .process-heading {
        grid-template-columns: 1fr;

        gap: 30px;

        margin-bottom: 60px;
    }

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

    .process-item {
        min-height: auto;

        padding: 35px 25px;

        border-right: 1px solid #333;
        border-bottom: 1px solid #333;
        border-left: 1px solid #333;
    }

    .process-item span {
        margin-bottom: 45px;
    }


    /* Existing Website */

    .existing-site-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    /* CTA */

    .services-cta {
        padding: 85px 0;
    }

    .services-cta h2 {
        font-size: clamp(3rem, 13vw, 4.8rem);
    }

    /* =====================================================
   Contact Page
   ===================================================== */

    .contact-hero {
        padding: 70px 0 90px;
    }

    .contact-hero h1 {
        font-size: clamp(3.2rem, 14vw, 5rem);
    }

    .contact-intro {
        font-size: 1.05rem;
    }

    .contact-main {
        padding: 70px 0 90px;
    }

    .contact-grid {
        grid-template-columns: 1fr;

        gap: 70px;
    }

    .contact-form-wrapper {
        max-width: none;
    }

    .contact-form-heading {
        margin-bottom: 40px;
    }

    .contact-expectation {
        padding: 85px 0;
    }

    .contact-expectation-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .contact-step {
        grid-template-columns: 35px 1fr;

        gap: 20px;
    }

    /* =====================================================
   About Page
   ===================================================== */

    .about-page-hero {
        padding: 70px 0 90px;
    }

    .about-page-hero h1 {
        margin-bottom: 60px;

        font-size: clamp(3.2rem, 14vw, 5rem);
    }

    .about-page-intro-grid,
    .about-philosophy-grid,
    .about-development-heading,
    .about-stack-grid,
    .about-direct-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .about-page-intro-grid > div:first-child {
        display: none;
    }

    .about-page-lead {
        font-size: 1.3rem;
    }


    /* Capabilities */

    .about-development-heading {
        margin-bottom: 60px;
    }

    .about-capability-grid {
        grid-template-columns: 1fr;
    }

    .about-capability {
        min-height: auto;

        padding: 35px 25px;

        border-right: 1px solid #333;
        border-bottom: 1px solid #333;
        border-left: 1px solid #333;
    }

    .about-capability > span {
        margin-bottom: 45px;
    }


    /* Technology */

    .stack-row {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    /* CTA */

    .about-cta {
        padding: 85px 0;
    }

    .about-cta h2 {
        font-size: clamp(3rem, 13vw, 4.8rem);
    }

    /* Homepage refinement */

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

    .positioning-item {
        min-height: 100px;

        padding: 22px 0;

        border-right: 0;
    }

    .portfolio-heading,
    .home-approach-heading {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .home-approach-heading {
        margin-bottom: 55px;
    }

    .home-approach-flow {
        grid-template-columns: 1fr;
    }

    .approach-step {
        min-height: auto;

        padding: 30px 20px;

        border-left: 1px solid var(--color-border);
    }

    .approach-step > span {
        margin-bottom: 40px;
    }

    /* =====================================================
    Blog Page
    ===================================================== */
    .blog-hero {
        padding: 110px 0 80px;
    }

    .blog-index-header {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 50px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .blog-pagination {
        margin-top: 65px;
    }

    /* =========================================================
   ARTICLE
   ========================================================= */
   .article-header {
        padding: 110px 0 60px;
    }

    .article-featured {
        margin-bottom: 65px;
    }

    .article-body {
        padding-bottom: 80px;
    }

    .article-content {
        font-size: 1rem;
        line-height: 1.8;
    }

    .article-help {
        padding: 45px 28px;
    }
}


/* ---------------------------------------------------------
   Small Mobile
   --------------------------------------------------------- */

@media (max-width: 480px) {

    /* Footer */

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

        gap: 45px;
    }

    /* Homepage Hero */

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

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

    .code-window pre {
        padding: 28px 22px;
    }

    .code-window code {
        font-size: 0.78rem;
    }


    /* Single Project */

    .project-screen-mobile {
        width: min(85%, 280px);
    }
}