/* ==========================================================================
   Trilogy Global Staffing - Responsive Styles
   Desktop-first breakpoints: 1024px / 768px / 480px
   ========================================================================== */


/* ==========================================================================
   Tablet (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {

    /* -- Navigation -------------------------------------------------------- */
    .nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    /* Mobile nav dropdown when header has .nav-open */
    .site-header.nav-open .nav-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background-color: var(--white);
        box-shadow: var(--shadow-lg);
        padding: var(--space-sm) 0;
        z-index: 999;
        gap: 0;
    }

    .site-header.nav-open .nav-links li {
        width: 100%;
    }

    .site-header.nav-open .nav-links a {
        display: block;
        width: 100%;
        padding: var(--space-md) var(--container-padding);
        border-bottom: 1px solid var(--gray-100);
    }

    .site-header.nav-open .nav-links a:hover {
        background-color: var(--gray-50);
        border-bottom-color: var(--gray-100);
    }

    /* -- Hero -------------------------------------------------------------- */
    .hero {
        min-height: 340px;
    }

    .hero-centered {
        min-height: 400px;
    }

    .hero-title {
        font-size: 2.25rem;
    }

    .hero-content {
        padding: var(--space-3xl) 0;
    }

    /* -- Process Ribbon ---------------------------------------------------- */
    .process-ribbon {
        margin-top: 0;
        border-radius: 0;
        box-shadow: var(--shadow-md);
    }

    /* -- Industry Strip ---------------------------------------------------- */
    .industry-strip {
        flex-wrap: wrap;
        gap: var(--space-md);
    }

    .industry-strip-item {
        padding: var(--space-sm) var(--space-lg);
    }

    .industry-strip-item:not(:last-child) {
        border-right: none;
    }

    /* -- Typography -------------------------------------------------------- */
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.875rem; }

    .section-title {
        font-size: 1.875rem;
    }

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

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

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

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

    .contact-form {
        max-width: 100%;
    }

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

    /* -- Section spacing --------------------------------------------------- */
    .section {
        padding: var(--space-3xl) 0;
    }
}


/* ==========================================================================
   Mobile Large (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {

    /* -- Hero -------------------------------------------------------------- */
    .hero {
        min-height: 280px;
    }

    .hero-centered {
        min-height: 320px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-content {
        padding: var(--space-2xl) 0;
    }

    /* -- Typography -------------------------------------------------------- */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    .section-title {
        font-size: 1.5rem;
        margin-bottom: var(--space-xl);
    }

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

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

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

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

    /* -- Process steps ----------------------------------------------------- */
    .process-steps {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .process-step:not(:last-child)::after {
        display: none;
    }

    .process-step {
        padding: var(--space-md);
    }

    /* -- Process Ribbon (mobile) ------------------------------------------- */
    .process-ribbon {
        padding: var(--space-md);
    }

    .process-ribbon .process-steps {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .process-ribbon .process-step {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        text-align: left;
        padding: var(--space-sm);
    }

    .process-ribbon .process-step .icon-circle {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    .process-ribbon .process-step .icon-circle img,
    .process-ribbon .process-step .icon-circle svg {
        width: 22px;
        height: 22px;
    }

    /* -- Industry Strip (mobile) ------------------------------------------- */
    .industry-strip {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .industry-strip-item {
        justify-content: flex-start;
        padding: var(--space-md) var(--space-lg);
        border-right: none !important;
        border-bottom: 1px solid var(--gray-200);
    }

    .industry-strip-item:last-child {
        border-bottom: none;
    }

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

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

    .footer-legal {
        justify-content: center;
    }

    /* -- Footer CTA -------------------------------------------------------- */
    .footer-cta h2 {
        font-size: 1.5rem;
    }

    /* -- Section spacing --------------------------------------------------- */
    .section {
        padding: var(--space-2xl) 0;
    }

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

    /* -- Buttons ----------------------------------------------------------- */
    .btn-lg {
        padding: 0.875rem 1.75rem;
        font-size: 1rem;
    }
}


/* ==========================================================================
   Mobile (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {

    /* -- Hero -------------------------------------------------------------- */
    .hero {
        min-height: 240px;
    }

    .hero-centered {
        min-height: 280px;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .hero-subtitle {
        font-size: 0.9375rem;
    }

    .hero-actions {
        flex-direction: column;
    }

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

    /* -- Typography -------------------------------------------------------- */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.375rem; }

    .section-title {
        font-size: 1.375rem;
    }

    /* -- Grids ------------------------------------------------------------- */
    .grid-5 {
        grid-template-columns: 1fr;
    }

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

    /* -- Contact form toggle ----------------------------------------------- */
    .form-toggle {
        flex-direction: column;
    }

    .form-toggle label {
        border-bottom: 1px solid var(--gray-300);
    }

    .form-toggle label:last-of-type {
        border-bottom: none;
    }

    /* -- Container padding ------------------------------------------------- */
    .container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
}