/**
 * SitesByHugo - Responsive Styles
 * Mobile-first breakpoint adjustments
 */

/* ===== Tablet (1024px) ===== */
@media (max-width: 1024px) {
    .container {
        padding: 0 var(--space-6);
    }
    
    /* Navigation */
    .nav__links {
        display: none;
    }
    
    .nav__toggle {
        display: flex;
    }
    
    .nav__actions .btn--secondary {
        display: none;
    }
    
    .nav__actions .btn--primary {
        display: none;
    }
    
    /* Mobile Menu */
    .nav__menu {
        display: flex;
        position: fixed;
        top: var(--space-3);
        right: -100%;
        width: 85%;
        max-width: 360px;
        height: calc(100vh - var(--space-6));
        height: calc(100dvh - var(--space-6));
        background: rgba(15, 15, 20, 0.65);
        backdrop-filter: blur(40px) saturate(200%);
        -webkit-backdrop-filter: blur(40px) saturate(200%);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-right: none;
        border-radius: var(--radius-3xl) 0 0 var(--radius-3xl);
        padding: var(--space-6);
        padding-top: var(--space-20);
        flex-direction: column;
        gap: var(--space-2);
        transition: right var(--duration-300) var(--ease-out);
        z-index: calc(var(--z-nav) + 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 
            -20px 0 60px rgba(0, 0, 0, 0.5),
            inset 1px 0 0 rgba(255, 255, 255, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    
    .nav__menu.open {
        right: 0;
    }
    
    .nav__menu .nav__link {
        font-size: var(--text-base);
        font-weight: var(--font-medium);
        padding: var(--space-4) var(--space-4);
        border-radius: var(--radius-lg);
        border-bottom: none;
        transition: background var(--duration-150) var(--ease-out);
    }
    
    .nav__menu .nav__link:hover,
    .nav__menu .nav__link:active {
        background: var(--color-gray-800);
    }
    
    .nav__menu .btn {
        margin-top: auto;
        width: 100%;
    }
    
    .nav__overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        transition: all var(--duration-300) var(--ease-out);
        z-index: var(--z-nav);
    }
    
    .nav__overlay.open {
        opacity: 1;
        visibility: visible;
    }
    
    /* Hero - Tablet */
    .hero__title {
        font-size: var(--text-6xl);
    }
    
    .hero__subtitle {
        font-size: var(--text-lg);
        padding: 0 var(--space-4);
    }
    
    .hero__stats {
        gap: var(--space-8);
    }
    
    /* Hero glows - reduce on tablet */
    .hero__glow {
        width: 500px;
        height: 500px;
        opacity: 0.3;
    }
    
    /* Services */
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
    
    /* Process */
    .process__steps {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
    }
    
    /* Hide the connector line in 2x2 grid - it doesn't make sense to connect only 2 items */
    .process__steps::before {
        display: none;
    }
    
    /* Testimonials */
    .testimonials__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
    
    /* About */
    .about__content {
        gap: var(--space-10);
    }
    
    .about__glow--1 {
        width: 350px;
        height: 350px;
        opacity: 0.15;
    }
    
    .about__glow--2 {
        width: 280px;
        height: 280px;
        opacity: 0.1;
    }
    
    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .footer__columns-row {
        gap: var(--space-6);
    }
    
    .footer__brand {
        max-width: 100%;
    }
}

/* ===== Mobile (640px) ===== */
@media (max-width: 640px) {
    .container {
        padding: 0 var(--space-5);
    }
    
    .section {
        padding: var(--space-12) 0;
    }
    
    .section--lg {
        padding: var(--space-16) 0;
    }
    
    /* Typography */
    h1 {
        font-size: var(--text-3xl);
    }
    
    h2 {
        font-size: var(--text-2xl);
    }
    
    /* Buttons - DON'T make full width globally, only in specific contexts */
    .btn--lg {
        padding: var(--space-4) var(--space-6);
        font-size: var(--text-sm);
    }
    
    /* Navigation - Mobile */
    .nav {
        padding: var(--space-3) 0;
    }
    
    .nav--scrolled {
        padding: var(--space-2) 0;
    }
    
    .logo {
        font-size: var(--text-lg);
    }
    
    .logo__mark {
        width: 32px;
        height: 32px;
    }
    
    .logo__mark svg {
        width: 16px;
        height: 16px;
    }
    
    .nav__toggle span {
        width: 22px;
    }
    
    /* Hero - Mobile: fill viewport, content centered as one block */
    .hero {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 6rem 0 2rem;
    }
    
    .hero__content {
        padding: 0;
        margin-top: 4rem; /* Explicitly shifts content down away from nav */
    }
    
    .hero__glow {
        width: 300px;
        height: 300px;
        opacity: 0.25;
        filter: blur(80px);
    }
    
    .hero__glow--1 {
        top: -100px;
        right: -100px;
    }
    
    .hero__glow--2 {
        bottom: -100px;
        left: -100px;
    }
    
    .hero__glow--3 {
        display: none;
    }
    
    .hero__grid {
        opacity: 0.15;
        background-size: 40px 40px;
    }
    
    .hero__badge {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-5);
        margin-bottom: var(--space-8);
    }
    
    .badge {
        font-size: 0.9rem;
        padding: var(--space-2.5) var(--space-6);
    }
    
    .hero__title {
        font-size: clamp(3.25rem, 14vw, 4.75rem);
        margin-bottom: var(--space-6);
        line-height: 1.05;
        letter-spacing: -0.04em;
    }
    
    .hero__title br {
        display: none;
    }
    
    .hero__subtitle {
        font-size: var(--text-lg);
        margin-bottom: var(--space-10);
        padding: 0;
        line-height: 1.5;
        max-width: 100%;
        opacity: 0.9;
    }
    
    .hero__actions {
        flex-direction: column;
        gap: var(--space-4);
        width: 100%;
        margin-bottom: var(--space-10);
    }
    
    .hero__actions .btn {
        width: 100%;
        font-size: var(--text-base);
        padding: var(--space-5) var(--space-6);
    }
    
    .hero__stats {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-8);
        padding-top: var(--space-8);
        border-top-color: rgba(255, 255, 255, 0.1);
    }
    
    .stat {
        flex: 0 0 auto;
        min-width: 90px;
    }
    
    .stat__number {
        font-size: var(--text-4xl);
        font-weight: var(--font-extrabold);
        margin-bottom: var(--space-1.5);
    }
    
    .stat__label {
        font-size: 0.85rem;
        letter-spacing: 0.05em;
        font-weight: var(--font-semibold);
    }
    
    /* Services - Mobile */
    .services::before {
        width: 300px;
        height: 300px;
        filter: blur(80px);
        opacity: 0.2;
        top: -100px;
        left: -80px;
    }
    
    .services::after {
        width: 250px;
        height: 250px;
        filter: blur(80px);
        opacity: 0.15;
        bottom: -80px;
        right: -80px;
    }
    
    .services__bg {
        opacity: 0.15;
        background-size: 40px 40px;
    }
    
    .services__glow {
        width: 200px;
        height: 200px;
        filter: blur(60px);
        opacity: 0.1;
    }
    
    .services__header {
        margin-bottom: var(--space-10);
    }
    
    .services__label,
    .portfolio__label,
    .process__label,
    .testimonials__label {
        font-size: 0.7rem;
        margin-bottom: var(--space-2);
    }
    
    .services__title {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-3);
    }
    
    .services__subtitle {
        font-size: var(--text-base);
        line-height: 1.5;
    }
    
    .services__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    /* Cards - Mobile */
    .card {
        padding: var(--space-5);
        border-radius: var(--radius-xl);
    }
    
    .card__icon {
        width: 48px;
        height: 48px;
        margin-bottom: var(--space-4);
        border-radius: var(--radius-lg);
    }
    
    .card__icon svg {
        width: 24px;
        height: 24px;
    }
    
    .card__title {
        font-size: var(--text-lg);
        margin-bottom: var(--space-2);
    }
    
    .card__description {
        font-size: var(--text-sm);
        line-height: 1.5;
    }
    
    /* Process - Mobile */
    .process__header {
        margin-bottom: var(--space-10);
    }
    
    .process__steps {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        position: relative;
        /* Padding to make room for the line */
        padding-left: 0;
    }
    
    /* Vertical line connector for mobile - connects circle centers */
    .process__steps::before {
        content: '';
        display: block;
        position: absolute;
        /* Position at center of the circles (40px wide, starting at left edge of grid) */
        left: 20px; /* center of 40px circle */
        top: 20px; /* center of first 40px circle (circle top is at 0) */
        width: 2px;
        /* Height from first circle center to last circle center */
        /* Total height - top offset - bottom offset (from last circle center to bottom) */
        /* Bottom offset = last step content below circle center */
        /* Since step has title (~24px) + desc (~42px) below circle, and grid-row:span 2 aligns them */
        /* Approximate: step height is ~65px, circle center is at 20px, so from bottom: ~45px */
        height: calc(100% - 20px - 45px);
        background: linear-gradient(to bottom, var(--color-primary-600), var(--color-accent-500), var(--color-secondary-500));
        border-radius: var(--radius-full);
        transform-origin: top;
        z-index: -1;
        /* Animation - line grows from top to bottom */
        transform: scaleY(0);
        transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
    }
    
    /* Animate the line when revealed */
    .process__steps.revealed::before {
        transform: scaleY(1);
    }
    
    .process__step {
        text-align: left;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: var(--space-1) var(--space-4);
        position: relative;
        z-index: 1;
    }
    
    .process__number {
        width: 40px;
        height: 40px;
        font-size: var(--text-sm);
        margin: 0;
        grid-row: span 2;
        align-self: start;
        position: relative;
        background: linear-gradient(135deg, rgba(18, 18, 27, 0.95) 0%, rgba(24, 24, 36, 0.95) 100%);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .process__step-title {
        font-size: var(--text-base);
        margin: 0;
        align-self: end;
    }
    
    .process__step-desc {
        font-size: var(--text-sm);
        line-height: 1.5;
        margin: 0;
    }
    
    /* Portfolio - Mobile */
    .portfolio__header {
        margin-bottom: var(--space-10);
    }
    
    .portfolio__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .portfolio__item {
        aspect-ratio: 16 / 10;
        border-radius: var(--radius-xl);
    }
    
    .portfolio__overlay {
        padding: var(--space-5);
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
    }
    
    .portfolio__name {
        font-size: var(--text-lg);
        margin-bottom: var(--space-1);
    }
    
    .portfolio__desc {
        font-size: var(--text-xs);
    }
    
    /* Testimonials - Mobile */
    .testimonials__header {
        margin-bottom: var(--space-10);
    }
    
    .testimonials::before {
        width: 300px;
        height: 300px;
        filter: blur(100px);
        opacity: 0.1;
    }
    
    .testimonials__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .testimonial {
        padding: var(--space-5);
        border-radius: var(--radius-xl);
    }
    
    .testimonial__stars {
        gap: 2px;
        margin-bottom: var(--space-3);
    }
    
    .testimonial__stars svg {
        width: 14px;
        height: 14px;
    }
    
    .testimonial__text {
        font-size: var(--text-sm);
        line-height: 1.6;
        margin-bottom: var(--space-5);
    }
    
    .testimonial__author {
        gap: var(--space-3);
    }
    
    .testimonial__avatar {
        width: 40px;
        height: 40px;
        font-size: var(--text-sm);
    }
    
    .testimonial__name {
        font-size: var(--text-sm);
    }
    
    .testimonial__role {
        font-size: var(--text-xs);
    }
    
    /* About - Mobile */
    .about__header {
        margin-bottom: var(--space-8);
        text-align: center;
    }
    
    .about__content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .about__image-wrapper {
        max-width: 280px;
        margin: 0 auto;
    }
    
    .about__image-frame {
        border-radius: var(--radius-2xl);
    }
    
    .about__image-badge .badge {
        font-size: 0.7rem;
    }

    .about__text {
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--radius-2xl);
        padding: var(--space-6);
        box-shadow: var(--shadow-xl);
    }

    /* Fix reveal animations expanding mobile width */
    .reveal--left, .reveal--right {
        transform: translateY(20px);
    }

    .reveal--left.revealed, .reveal--right.revealed {
        transform: translateY(0);
    }
    
    .about__name {
        font-size: var(--text-2xl);
        text-align: center;
        margin-bottom: var(--space-4);
    }
    
    .about__bio {
        font-size: var(--text-sm);
        line-height: 1.6;
        text-align: center;
        margin-bottom: var(--space-4);
    }
    
    .about__bio:last-of-type {
        margin-bottom: var(--space-6);
    }
    
    .about__highlights {
        justify-content: center;
        gap: var(--space-2);
        margin-top: var(--space-2);
    }
    
    .about__tag {
        font-size: 0.65rem;
        padding: var(--space-1.5) var(--space-3);
        background: rgba(255, 255, 255, 0.05);
    }
    
    .about__glow--1 {
        width: 250px;
        height: 250px;
        filter: blur(80px);
        opacity: 0.12;
    }
    
    .about__glow--2 {
        width: 200px;
        height: 200px;
        filter: blur(80px);
        opacity: 0.1;
    }
    
    .about__bg {
        opacity: 0.12;
        background-size: 40px 40px;
    }
    
    /* CTA - Mobile */
    .cta {
        padding: var(--space-8) 0;
    }
    
    .cta__inner {
        padding: var(--space-12) var(--space-6);
        border-radius: var(--radius-2xl);
        margin: 0;
        width: 100%;
        position: relative;
        /* Add a subtle inner glow effect */
        box-shadow: 
            inset 0 1px 0 rgba(255, 255, 255, 0.15),
            0 20px 40px -10px rgba(124, 58, 237, 0.3);
    }
    
    .cta__inner::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--radius-2xl);
        background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
        pointer-events: none;
    }
    
    .cta__title {
        font-size: var(--text-2xl);
        line-height: 1.2;
        margin-bottom: var(--space-4);
        position: relative;
        z-index: 1;
    }
    
    .cta__text {
        font-size: var(--text-base);
        margin-bottom: var(--space-8);
        line-height: 1.6;
        opacity: 0.9;
        position: relative;
        z-index: 1;
    }
    
    .cta__btn {
        width: 100%;
        padding: var(--space-4) var(--space-6);
        font-size: var(--text-base);
        position: relative;
        z-index: 1;
    }
    
    /* Footer - Mobile */
    .footer {
        padding: var(--space-10) 0 var(--space-6);
    }
    
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .footer__brand {
        grid-column: span 1;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .footer__brand .logo {
        margin-bottom: var(--space-3);
    }
    
    .footer__desc {
        text-align: center;
        max-width: 280px;
        margin-bottom: var(--space-4);
    }
    
    .footer__social {
        justify-content: center;
    }
    
    /* Footer columns side by side on mobile */
    .footer__columns-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8) var(--space-4);
    }
    
    .footer__column {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer__column:last-child {
        grid-column: span 2;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: var(--space-6);
        margin-top: var(--space-2);
    }
    
    .footer__column:last-child .footer__links {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }
    
    .footer__title {
        margin-bottom: var(--space-4);
        font-size: 0.8rem;
        letter-spacing: 0.1em;
    }
    
    .footer__links {
        align-items: center;
        gap: var(--space-2);
    }
    
    .footer__link {
        padding: var(--space-1) 0;
        font-size: var(--text-sm);
    }
    
    .footer__bottom {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
        padding-top: var(--space-6);
    }
    
    .footer__copyright {
        font-size: var(--text-xs);
    }
    
    .footer__legal {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-4);
    }
    
    .footer__legal a {
        font-size: var(--text-xs);
    }
}

/* ===== Very Small Screens (380px) ===== */
@media (max-width: 380px) {
    .container {
        padding: 0 var(--space-4);
    }
    
    /* Hero - Extra Small */
    .hero {
        padding: var(--space-20) 0 var(--space-8);
    }
    
    .hero__title {
        font-size: clamp(2.5rem, 12vw, 3.25rem);
        margin-bottom: var(--space-4);
    }
    
    .hero__subtitle {
        font-size: var(--text-base);
        margin-bottom: var(--space-8);
    }
    
    .hero__actions {
        margin-bottom: var(--space-8);
    }
    
    .hero__stats {
        gap: var(--space-5);
    }
    
    .stat__number {
        font-size: var(--text-3xl);
    }
    
    .stat__label {
        font-size: 0.75rem;
    }

    /* Cards - Extra Small */
    .card {
        padding: var(--space-4);
    }
    
    .card__icon {
        width: 44px;
        height: 44px;
    }
    
    .card__icon svg {
        width: 22px;
        height: 22px;
    }
    
    .card__title {
        font-size: var(--text-base);
    }
    
    /* Process - Extra Small */
    .process__steps::before {
        left: 18px; /* center of 36px circle */
        top: 18px; /* center of first 36px circle */
        /* Adjusted for smaller circle (36px instead of 40px) and proportionally smaller content */
        height: calc(100% - 18px - 40px);
    }
    
    .process__number {
        width: 36px;
        height: 36px;
        font-size: var(--text-xs);
    }
    
    /* CTA - Extra Small */
    .cta__inner {
        padding: var(--space-8) var(--space-4);
    }
    
    .cta__title {
        font-size: var(--text-lg);
    }
    
    /* Buttons */
    .btn--lg {
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-sm);
    }
}
/* Removed duplicated/outside block anchor */

/* ===== Viewport Height Responsiveness ===== */

/* Short screens: 700px-900px tall (e.g. landscape phones, short laptops) */
@media (max-height: 900px) {
    .hero {
        padding-top: var(--space-16);
        padding-bottom: var(--space-8);
    }

    .hero__badge {
        gap: var(--space-3);
        margin-bottom: var(--space-5);
    }

    .hero__title {
        margin-bottom: var(--space-4);
    }

    .hero__subtitle {
        margin-bottom: var(--space-6);
    }

    .hero__actions {
        margin-bottom: var(--space-8);
    }

    .hero__stats {
        padding-top: var(--space-6);
        gap: var(--space-10);
    }
}

/* Very short screens: below 750px tall (landscape small phones) */
@media (max-height: 750px) {
    .hero {
        padding-top: var(--space-14);
        padding-bottom: var(--space-6);
    }

    .hero__badge {
        gap: var(--space-2);
        margin-bottom: var(--space-4);
    }

    .badge {
        font-size: 0.75rem;
        padding: var(--space-1) var(--space-4);
    }

    .hero__title {
        font-size: clamp(2.5rem, 6vw, 3.5rem);
        margin-bottom: var(--space-3);
    }

    .hero__subtitle {
        font-size: var(--text-sm);
        margin-bottom: var(--space-5);
    }

    .hero__actions {
        gap: var(--space-2);
        margin-bottom: var(--space-6);
    }

    .hero__actions .btn {
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-sm);
    }

    .hero__stats {
        padding-top: var(--space-4);
        gap: var(--space-8);
    }

    .stat__number {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-1);
    }

    .stat__label {
        font-size: 0.65rem;
    }
}

/* Extremely short: below 600px tall (landscape tiny phones / unusual viewports) */
@media (max-height: 600px) {
    .hero {
        min-height: unset;
        padding-top: calc(var(--space-12) + 44px);
        padding-bottom: var(--space-6);
    }

    .hero__badge {
        gap: var(--space-1);
        margin-bottom: var(--space-3);
    }

    .badge {
        font-size: 0.7rem;
        padding: var(--space-1) var(--space-3);
    }

    .hero__title {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
        margin-bottom: var(--space-2);
        line-height: 1.1;
    }

    .hero__subtitle {
        font-size: var(--text-xs);
        margin-bottom: var(--space-4);
        line-height: 1.4;
    }

    .hero__actions {
        gap: var(--space-2);
        margin-bottom: var(--space-4);
    }

    .hero__actions .btn {
        padding: var(--space-2) var(--space-5);
        font-size: var(--text-xs);
    }

    .hero__stats {
        padding-top: var(--space-3);
        gap: var(--space-6);
    }

    .stat__number {
        font-size: var(--text-xl);
        margin-bottom: 2px;
    }

    .stat__label {
        font-size: 0.6rem;
    }
}

/* ===== Large Screens (1440px+) ===== */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
    
    .services__grid {
        gap: var(--space-8);
    }
    
    .portfolio__grid {
        gap: var(--space-10);
    }
}

/* ===== Hover-capable devices ===== */
@media (hover: hover) {
    .portfolio__overlay {
        opacity: 0;
    }
    
    .portfolio__item:hover .portfolio__overlay {
        opacity: 1;
    }
}

/* ===== Touch devices - always show overlay ===== */
@media (hover: none) {
    .portfolio__overlay {
        opacity: 1;
    }
    
    /* Hide cursor glow on touch devices */
    .cursor-glow {
        display: none !important;
    }
    
    /* Disable hover transforms on touch */
    .card:hover {
        transform: none;
    }
    
    .process__step:hover .process__number {
        transform: none;
    }
}

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

/* ===== Print Styles ===== */
@media print {
    .nav,
    .footer,
    .cta {
        display: none;
    }
    
    .hero {
        min-height: auto;
        padding: var(--space-8) 0;
    }
    
    * {
        background: white !important;
        color: black !important;
    }
}