/* =============================================================
   FILE: assets/css/responsive.css
   PURPOSE: Responsive / media queries for Edphics website.
            Adjusts layout at three breakpoints:
              - Tablet  : max-width 1024px
              - Mobile  : max-width 768px
              - XS      : max-width 480px
   ALWAYS loaded AFTER style.css so it overrides correctly.
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   TABLET BREAKPOINT  (≤ 1024px)
   Two-column hero shrinks; cards wrap; footer condenses.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    /* --- Layout adjustments --- */
    .container { padding-inline: 28px; }
    :root { --section-gap: 80px; }

    /* --- Navbar: hide desktop links, show hamburger --- */
    .navbar-links { display: none; }        /* Hide horizontal links     */
    .hamburger    { display: flex; }        /* Show hamburger button     */

    /* Hide CTA in nav on tablet (still in mobile nav drawer) */
    .navbar-right .btn { display: none; }

    /* --- Hero: stack into single column --- */
    .hero-container {
        grid-template-columns: 1fr;
        gap: 48px;
        text-align: center;
        padding-block: 60px;
    }

    .hero-content { order: 2; } /* Text below visual on tablet */
    .hero-visual  { order: 1;
                    max-width: 400px;
                    margin-inline: auto; }

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

    /* --- Services slider: 2 cards visible --- */
    .service-card { flex: 0 0 calc((100% - 24px) / 2); } /* 2 cards, 1 gap */

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

    .portfolio-item--wide  { grid-column: span 2; }
    .portfolio-item--large { grid-row: span 1; }

    /* --- Process steps: wrap to 2 rows --- */
    .process-steps { flex-wrap: wrap; justify-content: center; gap: 24px; }
    .process-connector { display: none; } /* Hide connectors on wrap */
    .process-step { max-width: 220px; }

    /* --- Footer: 2 columns --- */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    /* Brand col spans full row */
    .footer-grid > *:first-child { grid-column: span 2; }
}


/* ─────────────────────────────────────────────────────────────
   MOBILE BREAKPOINT  (≤ 768px)
   Single-column layout; full hamburger nav; simplified sections.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* --- Base adjustments --- */
    :root {
        --section-gap: 64px;
        --nav-height: 64px;
    }

    .container { padding-inline: 20px; }

    /* --- Custom cursor: hide on touch devices --- */
    .cursor-dot, .cursor-ring { display: none; }
    body { cursor: auto; }
    a, button, input, textarea, select, label { cursor: auto; }

/* Target the main container from your PHP file........................ */
.navbar-inner {
    display: flex;
    align-items: center;    /* This is the key to vertical centering */
    justify-content: space-between;
    height: 80px;           /* Set this to whatever your navbar height is */
}

/* Target the anchor tag around your logo */
.navbar-logo {
    display: flex;
    align-items: center;
    height: 100%;           /* Makes the logo area fill the bar height */
}

/* Target the span you created */
.logo {
    display: inline-flex;
    align-items: center;    /* Centers the image and the dot together */
    line-height: 0;         /* Removes extra "text space" at the bottom */
}

           

    .logo-name {
        font-size: 0.95rem;
        letter-spacing: 0.02em;
    }

    /* --- Hero section --- */
    .hero-container {
        padding-block: 48px;
        gap: 40px;
    }

    .hero-title { font-size: clamp(2rem, 8vw, 2.8rem); }

    .hero-sub {
        font-size: 0.95rem;
        max-width: 100%;
    }

    /* Stat strip: smaller numbers */
    .hero-stats { gap: 20px; }
    .stat-num   { font-size: 1.5rem; }

    /* Hide decorative floating badges on small screens */
    .float-badge { display: none;
     }

       /* Hide 3D orbs (performance on low-end devices) */
    .orb { opacity: 0; }

    /* --- Logos marquee: faster & smaller cards --- */
    .logo-item { min-width: 120px; padding: 10px 16px; }
    .logo-text { font-size: 0.8rem; }

    /* --- Services slider: 1 card at a time --- */
    .services-section .container { overflow: hidden; }
    .services-slider-wrapper { overflow: hidden; width: 100%; }
    .services-slider { gap: 16px; }
    .service-card {
        flex: 0 0 85% !important; /* JS will override with exact px */
        min-width: 0;
    }

    .slider-btn--prev { left: -12px; }
    .slider-btn--next { right: -12px; }

    /* --- Section headers --- */
    .section-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
    .section-sub   { font-size: 0.95rem; }
    .section-header { margin-bottom: 40px; }

    /* --- Portfolio grid: single column --- */
    .portfolio-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
    }

    .portfolio-item--large { grid-row: span 1; }
    .portfolio-item--wide  { grid-column: span 1; }

    /* Portfolio overlay: always visible on mobile (no hover) */
    .portfolio-overlay {
        opacity: 1;
        transform: translateY(0);
        background: linear-gradient(0deg, rgba(11,15,20,0.9) 0%, transparent 50%);
    }

    /* --- Process: single column stack --- */
    .process-steps {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .process-step { max-width: 100%; width: 100%; padding: 28px 24px; }

    /* --- CTA section --- */
    .cta-title { font-size: clamp(1.5rem, 6vw, 2rem); }
    .cta-sub   { font-size: 0.95rem; }
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    /* --- Footer: single column --- */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-grid > *:first-child { grid-column: span 1; }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* --- CTA buttons: full width on mobile --- */
    .btn-lg {
        width: 100%;
        justify-content: center;
    }

}


/* ─────────────────────────────────────────────────────────────
   EXTRA SMALL  (≤ 480px)
   Very small phones – tighten further.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

    .hero-title { font-size: clamp(1.8rem, 9vw, 2.4rem); }
    .hero-cta   { flex-direction: column; width: 100%; }
    .hero-cta .btn { width: 100%; justify-content: center; }

    .hero-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .stat-divider { display: none; }

    /* Loader text smaller */
    .loader-text { font-size: 1.8rem; }

    /* Section tag and title */
    .section-tag   { font-size: 0.65rem; }
    .section-title { font-size: 1.5rem; }

    /* Service card full width */
    .service-card {
        flex: 0 0 92% !important;
        min-width: 0;
    }

    /* Footer social links wrap */
    .footer-social { flex-wrap: wrap; gap: 8px; }

    /* Bottom nav legal links stack */
    .footer-legal {
        flex-direction: column;
        gap: 8px;
    }

    /* Scroll hint hidden on tiny screens */
    .scroll-hint { display: none; }

}


/* ─────────────────────────────────────────────────────────────
   PRINT STYLES
   Clean up animations and backgrounds for print.
   ───────────────────────────────────────────────────────────── */
@media print {
    .navbar, .page-loader, .cursor-dot, .cursor-ring,
    .scroll-progress, .hamburger, .mobile-nav,
    .cta-section, .hero-bg, .orb { display: none !important; }

    body { background: #fff; color: #000; }
    .hero, .services-section, .portfolio-section,
    .process-section, .footer { background: #fff; }

    * { animation: none !important; transition: none !important; }
}


/* ─────────────────────────────────────────────────────────────
   ACCESSIBILITY: Respect reduced-motion preference
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    /* Stop all animations */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Keep scroll reveal elements visible without animation */
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    .logos-track { animation: none; }
    .orb         { animation: none; }
    .float-badge { animation: none; }
}