/* ==========================================================
   RESPONSIVE.CSS
   Fradesign Global
   ========================================================== */

/* ==========================================================
   LARGE DESKTOPS
   ========================================================== */

@media (min-width: 1440px) {

    .container {
        width: min(1320px, calc(100% - 64px));
    }

    .hero {
        padding-top: 160px;
        padding-bottom: 140px;
    }

    .hero h1 {
        font-size: 4.5rem;
    }

}

/* ==========================================================
   LAPTOPS
   ========================================================== */

@media (max-width: 1200px) {

    :root {
        --container-width: 1080px;
        --section-padding: 88px;
    }

    .hero .container {
        gap: var(--space-3xl);
    }

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

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

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

}

/* ==========================================================
   TABLETS LANDSCAPE
   ========================================================== */

@media (max-width: 1024px) {

    :root {
        --section-padding: 80px;
    }

    .container,
    .container-sm,
    .container-lg {
        width: calc(100% - 40px);
    }

    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content {
        max-width: 760px;
        margin-inline: auto;
    }

    .hero-ctas,
    .trust-line {
        justify-content: center;
    }

    .hero-visual {
        order: -1;
    }

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

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

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

    .step {
        padding: 0;
        border-left: 0;
    }

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

}

/* ==========================================================
   TABLETS PORTRAIT
   ========================================================== */

@media (max-width: 768px) {

    :root {
        --section-padding: 72px;
    }

    body {
        font-size: 0.98rem;
    }

    h1 {
        font-size: clamp(2.5rem, 8vw, 3.5rem);
    }

    h2 {
        font-size: clamp(2rem, 6vw, 2.6rem);
    }

    .container,
    .container-sm,
    .container-lg {
        width: calc(100% - 32px);
    }

    .site-header .container {
        min-height: 70px;
    }

    .nav ul,
    .nav-actions {
        display: none;
    }

    .burger {
        display: flex;
    }

    .hero {
        padding-top: 100px;
        padding-bottom: 72px;
    }

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

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

    .trust-line {
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
    }

    .tools-strip .container {
        align-items: flex-start;
        flex-direction: column;
    }

    .services-grid,
    .who-grid,
    .why-grid,
    .case-grid {
        grid-template-columns: 1fr;
    }

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

    .form-row {
        grid-template-columns: 1fr;
    }

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

    .contact-ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-ctas .btn {
        width: 100%;
    }

    .site-footer .container,
    .footer-legal {
        flex-direction: column;
        align-items: flex-start;
    }

}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 560px) {

    :root {
        --section-padding: 60px;
    }

    .container,
    .container-sm,
    .container-lg {
        width: calc(100% - 24px);
    }

    .hero {
        padding-top: 88px;
        padding-bottom: 60px;
    }

    .hero h1 {
        font-size: clamp(2.25rem, 10vw, 3rem);
    }

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

    .trust-grid,
    .work-grid,
    .steps {
        grid-template-columns: 1fr;
    }

    .section-head {
        margin-bottom: var(--space-2xl);
    }

    .avail {
        padding: var(--space-2xl) var(--space-lg);
        border-radius: var(--radius-lg);
    }

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

    .avail .sub {
        font-size: var(--font-size-md);
    }

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

    .faq-item summary {
        padding: var(--space-md);
        font-size: var(--font-size-md);
    }

    .faq-answer {
        padding:
            0
            var(--space-md)
            var(--space-md);
    }

    .footer-links,
    .footer-social,
    .footer-language {
        width: 100%;
    }

}

/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 400px) {

    .container,
    .container-sm,
    .container-lg {
        width: calc(100% - 20px);
    }

    .btn,
    .btn-lg,
    .btn-cta {
        padding-left: 18px;
        padding-right: 18px;
    }

    .mobile-menu {
        width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

    .tool-chips {
        gap: var(--space-xs);
    }

    .tool-chips span {
        font-size: var(--font-size-xs);
    }

}

/* ==========================================================
   PRINT
   ========================================================== */

@media print {

    .site-header,
    .mobile-menu,
    .mobile-overlay,
    .hero-ctas,
    .contact-ctas,
    .site-footer {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    section {
        padding: 24px 0;
    }

    .card,
    .service-card,
    .work-item,
    .case-card,
    .avail,
    .contact {
        box-shadow: none !important;
        break-inside: avoid;
    }

}