/* ═══════════════════════════════════════════════════════════════
   SITE-WIDE RESPONSIVE — Public pages audit
   Breakpoints: 360 · 375 · 390 · 393 · 412 · 430 · 768 · 1024 · 1280+
   ═══════════════════════════════════════════════════════════════ */

:root {
    --fab-size: 56px;
    --fab-clearance: calc(var(--fab-size) + var(--space-6) + env(safe-area-inset-bottom, 0px));
    --fab-stack-offset: 0px;
    --fab-stack-gap: 12px;
}

/* WhatsApp FAB stacks above visible sticky CTA (offset set by home.js) */
html.has-sticky-cta .sit-whatsapp {
    bottom: calc(var(--fab-stack-offset, 0px) + var(--space-4) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 769px) {
    html.has-sticky-cta .sit-whatsapp {
        bottom: calc(var(--fab-stack-offset, 0px) + var(--space-6));
    }
}

/* ─── Stacking — decorative layers never above navigation ─── */
#main-content {
    position: relative;
    z-index: var(--z-hero);
}

.sit-page-hero,
.sit-section {
    isolation: isolate;
}

.sit-section--glow {
    overflow: hidden;
}

.sit-page-hero__bg,
.sit-page-hero__grid {
    z-index: var(--z-hero-glow);
    clip-path: inset(var(--nav-height) 0 0 0);
}

.sit-page-hero .sit-container {
    z-index: var(--z-hero-content);
}

/* Prevent 3D / transformed decor from painting above chrome */
.sit-hero,
.sit-hero__visual,
.sit-hero__media,
.sit-hero-product,
.sit-device-mockup,
.sit-about-visual {
    isolation: isolate;
}

.sit-hero__bg,
.sit-hero__grid,
.sit-hero__orb,
.sit-hero__beam,
.sit-hero-product__glow,
.sit-page-hero__bg,
.sit-page-hero__grid {
    clip-path: inset(var(--nav-height) 0 0 0);
}

/* Long strings / URLs must not cause horizontal scroll */
p, li, h1, h2, h3, h4, td, th, .sit-footer__brand p {
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

/* Prevent horizontal scroll from media and long strings */
img,
video,
svg,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

.sit-container,
.sit-container--wide {
    width: 100%;
    max-width: 100%;
}

/* ─── CTAs — full width on narrow viewports ─── */
@media (max-width: 768px) {
    :root {
        --fab-size: 52px;
        --fab-clearance: calc(var(--fab-size) + var(--space-5) + env(safe-area-inset-bottom, 0px));
    }

    .sit-container,
    .sit-container--wide {
        padding-left: max(var(--space-5), env(safe-area-inset-left, 0px));
        padding-right: max(var(--space-5), env(safe-area-inset-right, 0px));
    }

    .sit-section {
        padding-left: 0;
        padding-right: 0;
    }

    .sit-page-hero {
        padding-top: calc(var(--nav-height) + var(--space-8));
    }

    /* ─── Mobile navigation — page hidden behind drawer ─── */
    body.no-scroll .sit-whatsapp {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* ─── Ready Software cards — text first, scaled mockups ─── */
    .sit-ready-card {
        overflow: hidden;
    }

    .sit-ready-card__body {
        order: 1;
        padding: var(--space-5) var(--space-5) var(--space-3);
    }

    .sit-ready-card__visual {
        order: 2;
        padding: var(--space-3) var(--space-5) var(--space-5);
        margin-bottom: 0;
        overflow: hidden;
        max-width: 100%;
    }

    .sit-ready-card__visual .sit-device-mockup {
        max-width: min(72vw, 200px);
        margin-inline: auto;
        overflow: hidden;
        contain: paint;
    }

    .sit-ready-card:hover .sit-device-mockup__frame {
        transform: none;
    }

    .sit-device-mockup__glow {
        inset: 4% 10% 0;
        opacity: 0.35;
    }

    .sit-device-mockup--phone .sit-device-mockup__frame {
        max-width: min(58vw, 140px);
    }

    .sit-device-mockup--phone .sit-device-mockup__screen {
        max-height: 200px;
    }

    .sit-device-mockup--phone.sit-device-mockup--portrait .sit-device-mockup__frame {
        max-width: min(62vw, 150px);
    }

    .sit-device-mockup--phone.sit-device-mockup--portrait .sit-device-mockup__screen {
        max-height: 220px;
    }

    .sit-device-mockup--tablet .sit-device-mockup__frame {
        max-width: min(80vw, 220px);
    }

    .sit-device-mockup {
        overflow: hidden;
        contain: paint;
    }

    /* ─── CTA + FAB clearance ─── */
    .sit-cta-final {
        margin-bottom: calc(var(--space-12) + var(--fab-clearance));
    }

    .sit-cta-final__content {
        padding-bottom: var(--space-10);
    }

    .sit-section-cta,
    .sit-section-cta--row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding-bottom: var(--fab-clearance);
    }

    .sit-section-cta .sit-btn,
    .sit-section-cta--row .sit-btn {
        width: 100%;
        justify-content: center;
    }

    .sit-footer {
        padding-bottom: calc(var(--space-10) + var(--fab-clearance));
    }

    .sit-whatsapp {
        bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
        right: max(var(--space-4), env(safe-area-inset-right, 0px));
        width: var(--fab-size);
        height: var(--fab-size);
    }

    /* ─── Single-column card layouts ─── */
    .sit-about-brand {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-6);
    }

    .sit-about-brand__text {
        min-width: 0;
        width: 100%;
    }

    .sit-tech-grid {
        grid-template-columns: 1fr;
    }

    .sit-case-featured {
        min-height: auto;
    }

    .sit-cta-final__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .sit-cta-final__actions .sit-btn {
        width: 100%;
        justify-content: center;
    }

    .sit-bento__cta-inner .sit-btn {
        width: 100%;
        justify-content: center;
    }

    .sit-footer__grid {
        grid-template-columns: 1fr;
    }

    .sit-page-grid--auto {
        grid-template-columns: 1fr;
    }

    .sit-tech-grid {
        grid-template-columns: 1fr;
    }

    .sit-case-featured {
        min-height: auto;
    }

    .sit-case-card:hover {
        transform: translateY(-4px);
    }

    .sit-device-mockup--phone {
        max-height: none;
    }

    .sit-founder-strip__copy {
        min-width: 0;
    }

    .sit-cta-founder {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }

    .sit-cta-founder__text {
        text-align: center;
    }

    .sit-team-grid .sit-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 1024px) {
    .sit-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .sit-process {
        grid-template-columns: 1fr;
    }
}

/* ─── Forms — iOS zoom prevention ─── */
@media (max-width: 768px) {
    .sit-page-form__group input,
    .sit-page-form__group textarea,
    .sit-page-form__group select {
        font-size: 16px;
    }

    .sit-page-form .sit-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ─── Page hero tightening ─── */
@media (max-width: 480px) {
    .sit-page-hero {
        padding-top: calc(var(--nav-height) + var(--space-8));
        padding-bottom: var(--space-10);
    }

    .sit-page-card {
        padding: var(--space-6);
    }
}

@media (max-width: 390px) {
    .sit-container,
    .sit-container--wide {
        padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
        padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
    }
}

@media (max-width: 360px) {
    .sit-page-hero__desc {
        font-size: var(--text-sm);
    }

    .sit-footer {
        padding-top: var(--space-12);
    }

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

/* ─── About page — multi-button CTA ─── */
@media (max-width: 480px) {
    .page-inner .sit-cta-final__actions {
        gap: var(--space-3);
    }
}

/* ─── Portfolio filter bar ─── */
@media (max-width: 480px) {
    .sit-filter-bar {
        flex-wrap: wrap;
        gap: var(--space-2);
        justify-content: flex-start;
    }

    .sit-filter-btn {
        font-size: var(--text-xs);
        padding: var(--space-2) var(--space-3);
    }
}

/* ─── Thank you / error pages ─── */
@media (max-width: 480px) {
    .sit-thank-you__actions,
    .sit-error__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sit-thank-you__actions .sit-btn,
    .sit-error__actions .sit-btn {
        width: 100%;
    }
}

/* ─── WhatsApp FAB — safe area on notched phones (legacy narrow rule) ─── */
@media (max-width: 480px) {
    .sit-whatsapp {
        bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
        right: max(var(--space-4), env(safe-area-inset-right, 0px));
        width: var(--fab-size);
        height: var(--fab-size);
    }
}

/* ─── Wide desktop — comfortable max reading width ─── */
@media (min-width: 1920px) {
    .sit-container {
        max-width: var(--container-max);
    }

    .sit-container--wide {
        max-width: var(--container-wide);
    }
}