/* ==========================================================
   Purified LLC — Responsive System
   File: responsive.css
   Purpose: Desktop, tablet and mobile refinements
   ========================================================== */

/* ------------------------------
   Large Tablets / Small Laptops
------------------------------ */

@media (max-width: 1180px) {
    .container {
        width: calc(100% - 48px);
    }

    .navigation ul {
        gap: var(--space-4);
    }

    .header-cta {
        padding-inline: var(--space-5);
    }

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

/* ------------------------------
   Tablets
------------------------------ */

@media (max-width: 980px) {
    .container {
        width: calc(100% - 40px);
    }

    .top-bar-inner {
        min-height: auto;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
        padding-block: var(--space-2);
    }

    .top-bar-inner > div {
        justify-content: center;
    }

    .header-container {
        min-height: 74px;
    }

    .navigation,
    .header-cta {
        display: none;
    }

    .navigation.is-open {
        display: block;
    }

    .mobile-menu-button {
        display: flex;
    }

    .hero-container {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-block: var(--space-12);
        text-align: center;
    }

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

    .hero-description {
        margin-inline: auto;
    }

    .hero-checks,
    .hero-buttons {
        justify-content: center;
    }

    .hero-image img {
        min-height: 440px;
        border-radius: var(--radius-2xl);
    }

    .features {
        margin-top: 0;
        padding-top: var(--space-8);
    }

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

    .feature-card:nth-child(3)::after {
        display: none;
    }

    .services-grid,
    .pricing-grid,
    .eco-container,
    .service-area-grid,
    .contact-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

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

    .price-card.featured {
        transform: none;
    }

    .price-card.featured:hover {
        transform: translateY(-6px);
    }

    .eco-container > div:last-child {
        max-width: none;
    }

    .service-area-grid {
        gap: var(--space-8);
    }
}

/* ------------------------------
   Mobile Landscape / Large Phones
------------------------------ */

@media (max-width: 760px) {
    .section {
        padding-block: var(--section-padding);
    }

    .hero {
        background: var(--color-white);
    }

    .hero-container {
        gap: var(--space-8);
        padding-block: var(--space-10);
    }

    .hero-checks {
        justify-content: flex-start;
        text-align: left;
    }

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

    .hero-trust {
        width: 100%;
        justify-content: center;
        flex-direction: column;
        gap: var(--space-2);
    }

    .hero-image img {
        min-height: 360px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .feature-card {
        min-height: 118px;
        border-bottom: 1px solid var(--color-border);
    }

    .feature-card::after {
        display: none;
    }

    .feature-card:last-child {
        border-bottom: none;
    }

    .equipment-inner {
        flex-direction: column;
        text-align: center;
        padding-block: var(--space-8);
    }

    .equipment-inner img {
        width: min(100%, 360px);
        height: 150px;
    }

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

    .contact-grid > div:first-child,
    .contact-form {
        padding: var(--space-6);
    }
}

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

@media (max-width: 640px) {
    .container {
        width: calc(100% - 28px);
    }

    .top-bar {
        font-size: 0.78rem;
    }

    .top-bar-inner {
        gap: var(--space-2);
    }

    .top-bar-inner > div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2);
    }

    .top-bar a,
    .top-bar span {
        margin: 0;
    }

    .brand-mark {
        width: 44px;
        height: 44px;
        font-size: 1.5rem;
        border-radius: 11px;
    }

    .brand-text strong {
        font-size: 1.42rem;
    }

    .brand-text small {
        display: none;
    }

    .header-container {
        min-height: 68px;
    }

    .navigation {
        left: 14px;
        right: 14px;
    }

    .hero-tag {
        font-size: 0.72rem;
    }

    .hero h1 {
        font-size: var(--font-size-hero);
    }

    .hero-description {
        font-size: var(--font-size-base);
    }

    .hero-image img {
        min-height: 300px;
        border-radius: var(--radius-xl);
    }

    .primary-button,
    .secondary-button,
    button.primary-button {
        width: 100%;
        min-height: 54px;
    }

    .service-card img {
        height: 215px;
    }

    .service-card > div,
    .price-card,
    .contact-form,
    .contact-grid > div:first-child {
        padding: var(--space-6);
    }

    .eco-container img,
    .service-area-grid img {
        min-height: 280px;
        border-radius: var(--radius-xl);
    }

    .footer {
        text-align: center;
    }
}

/* ------------------------------
   Small Phones
------------------------------ */

@media (max-width: 420px) {
    .container {
        width: calc(100% - 24px);
    }

    .hero-checks span {
        width: 100%;
        justify-content: center;
    }

    .hero-image img {
        min-height: 260px;
    }

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

    .equipment-inner img {
        height: 120px;
    }
}