/* =========================================================
   Acuaria — Responsive overrides
   Mobile-first: base styles already cover mobile.
   Breakpoints: 640 / 768 / 1024 / 1280
   ========================================================= */

/* ---------- Tablet small (max 1024px) ---------- */
@media (max-width: 1023px) {
    .hero__container {
        grid-template-columns: 1fr;
        gap: var(--space-12);
        text-align: center;
    }

    .hero__content {
        align-items: center;
    }

    .hero__badge {
        align-self: center;
    }

    .hero__lead {
        max-width: 600px;
        margin: 0 auto;
    }

    .hero__trust {
        justify-content: center;
    }

    .hero__visual {
        order: -1;
        margin-bottom: var(--space-4);
    }

    .hero__phone {
        width: 260px;
    }

    .hero__phone-frame {
        width: 260px;
        height: 540px;
    }

    .hero__visual {
        min-height: 560px;
    }

    .hero__card--ai { left: 2%; top: 2%; }
    .hero__card--species { right: 2%; top: 22%; }
    .hero__card--alert { left: 5%; bottom: 10%; }
    .hero__badge-float--compat { right: 2%; }
    .hero__badge-float--tank { right: 5%; }

    .parameters__container {
        grid-template-columns: 1fr;
        gap: var(--space-12);
        text-align: center;
    }

    .parameters__content {
        align-items: center;
    }

    .parameters__pills {
        justify-content: center;
    }

    .parameters__stats {
        justify-content: center;
    }

    .ai-hero__grid-cards {
        grid-template-columns: 1fr;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: var(--space-12);
    }

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

    .ai-action__grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
    }

    .ai-hero__cta {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .ai-hero__cta-buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .ai-hero__cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
}

/* ---------- Tablet (max 768px) ---------- */
@media (max-width: 767px) {
    .features__grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
    }

    .pricing__grid {
        grid-template-columns: 1fr;
        gap: var(--space-10);
        max-width: 420px;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    /* Hide floating cards on small mobile for cleaner look */
    .hero__card,
    .hero__badge-float,
    .hero__sparkle {
        display: none;
    }

    .hero__visual {
        min-height: auto;
    }

    .download__trust {
        flex-direction: column;
        gap: var(--space-3);
        align-items: center;
    }

    /* Comparison table → card layout */
    .comparison__table,
    .comparison__table thead,
    .comparison__table tbody,
    .comparison__table tr,
    .comparison__table th,
    .comparison__table td {
        display: block;
        width: 100%;
    }

    .comparison__table thead {
        display: none;
    }

    .comparison__row {
        margin-bottom: var(--space-4);
        border: 1px solid var(--color-border-light);
        border-radius: var(--radius-lg);
        padding: var(--space-5);
        background: var(--color-white);
    }

    .comparison__row--hero {
        border-color: rgba(27, 184, 160, 0.4);
        background: linear-gradient(135deg, rgba(27, 184, 160, 0.05), rgba(72, 217, 196, 0.03));
    }

    .comparison__row--hero th::before {
        display: none;
    }

    .comparison__row th {
        padding: 0 0 var(--space-4) 0;
        border-bottom: 1px solid var(--color-border-light);
        margin-bottom: var(--space-4);
    }

    .comparison__featureSub {
        margin-left: 0 !important;
    }

    .comparison__cell {
        padding: var(--space-3) 0;
        border: none !important;
        background: transparent !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        text-align: left;
    }

    .comparison__cell::before {
        content: attr(data-label);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-muted);
    }

    .comparison__cell--yes::before {
        color: var(--color-teal);
    }

    .comparison__note {
        margin: 0;
        margin-left: auto;
        margin-right: var(--space-2);
    }
}

/* ---------- Small mobile (max 480px) ---------- */
@media (max-width: 479px) {
    :root {
        --container-padding-x: 1rem;
        --section-padding-y: 4rem;
    }

    .hero {
        padding-top: calc(var(--header-height) + var(--space-10));
        padding-bottom: var(--space-24);
    }

    .hero__phone,
    .hero__phone-frame,
    .parameters__phone-frame {
        width: 240px;
    }

    .hero__phone-frame,
    .parameters__phone-frame {
        height: 500px;
    }

    .hero__ctas {
        flex-direction: column;
        width: 100%;
    }

    .hero__ctas .btn {
        width: 100%;
    }

    .hero__title {
        font-size: clamp(2rem, 10vw, 2.75rem);
    }

    .ai-hero__title,
    .download__title {
        font-size: clamp(1.875rem, 8vw, 2.5rem);
    }

    .section-title {
        font-size: clamp(1.75rem, 7vw, 2.25rem);
    }

    .feature-card,
    .pricing-card {
        padding: var(--space-6) var(--space-5);
    }

    .pricing-card__amount {
        font-size: 2.5rem;
    }

    .download__badges {
        flex-direction: column;
        align-items: stretch;
        max-width: 260px;
        margin-left: auto;
        margin-right: auto;
    }

    .store-badge {
        min-width: auto;
        width: 100%;
        justify-content: center;
    }

    .site-header__cta {
        display: none;
    }

    .site-nav__list {
        gap: var(--space-5);
    }
}

/* ---------- Tablet (max 640px) — fine-tune features/ai ---------- */
@media (max-width: 639px) {
    .ai-card__inner {
        padding: var(--space-6) var(--space-5);
    }

    .ai-card__title {
        font-size: 1.375rem;
    }

    .ai-hero__cta {
        padding: var(--space-6) var(--space-5);
    }

    .chat-card {
        padding: var(--space-5);
    }

    .faq__question {
        padding: var(--space-4) var(--space-5);
        font-size: var(--font-size-body);
    }

    .faq__answer {
        padding: 0 var(--space-5) var(--space-5);
    }
}

/* ---------- Tablet landscape fine-tuning ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
    .features__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}