/* =============================================================
   Abyss Commerce — responsive.css
   Breakpoints: 1200px, 1024px, 860px, 640px, 400px
   ============================================================= */

@media (max-width: 1200px) {
    :root {
        --space-2xl: 100px;
        --space-xl: 64px;
    }

    .presentation__inner,
    .about__inner,
    .contact__inner,
    .project {
        gap: var(--space-lg);
    }
}

@media (max-width: 1024px) {
    :root {
        --space-2xl: 88px;
        --container-padding: 22px;
    }

    /* A partir daqui o projeto passa a ocupar uma coluna só, e a prévia herda
       toda a largura do container. */
    .preview__screen {
        --preview-scale: 0.68;
    }

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

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

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

    .timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg) var(--space-md);
    }

    .presentation__inner,
    .about__inner,
    .contact__inner {
        grid-template-columns: 1fr;
    }

    /* Em coluna única o card não precisa da largura inteira do container */
    .founder-card {
        max-width: 460px;
    }

    .hero__content {
        max-width: 620px;
    }

    /* As órbitas são círculos maiores que a viewport: em telas estreitas elas
       deixam de compor com o hero e viram curvas cruzando o conteúdo. Abaixo do
       desktop, o horizonte é o único arco do fundo. */
    .site-backdrop__orbits {
        display: none;
    }

    .section__header--split {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        align-items: start;
    }

    .project {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    /* Coluna única: a moldura volta a ter proporção própria */
    .project__media > .preview {
        min-height: 0;
    }

    .project__media > .preview .preview__screen {
        flex: none;
        aspect-ratio: var(--preview-ratio, 1.6);
    }

    /* No mobile a ordem é sempre imagem e depois informações */
    .project--reversed .project__media {
        order: 0;
    }
}

/* Ponto em que a navegação passa para o menu mobile */
@media (max-width: 860px) {
    .site-nav,
    .site-header__cta {
        display: none;
    }

    .menu-toggle {
        display: grid;
    }

    .mobile-menu {
        display: block;
        min-height: calc(100svh - var(--header-height));
        max-height: calc(100svh - var(--header-height));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: rgba(5, 5, 6, 0.99);
    }

    .mobile-menu[hidden] {
        display: none;
    }

    .preview__screen {
        --preview-scale: 0.55;
    }

    .site-header.is-menu-open {
        background: rgba(5, 5, 6, 0.92);
        border-bottom-color: var(--border-color);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }
}

@media (max-width: 640px) {
    :root {
        --space-2xl: 72px;
        --space-xl: 52px;
        --space-lg: 36px;
        --container-padding: 20px;
        --radius-lg: 18px;
    }

    body {
        font-size: 15.5px;
    }

    .hero {
        padding-block: calc(var(--header-height) + var(--space-lg)) calc(var(--space-2xl) + 16px);
    }

    .hero__actions {
        gap: 10px;
    }

    .hero__actions .btn {
        flex: 1 1 100%;
    }

    /* No smartphone o fundo fica só com a rede de partículas: sem o arco do
       horizonte, sem o brilho que o acompanha e sem o halo violeta da base. */
    .site-backdrop__horizon {
        display: none;
    }

    .site-backdrop__gradient {
        background:
            radial-gradient(52% 48% at 78% 38%, rgba(84, 74, 190, 0.1), transparent 70%),
            radial-gradient(120% 100% at 50% -8%, #08080f 0%, #050509 48%, #020204 100%);
    }

    .site-backdrop__veil {
        background:
            linear-gradient(180deg, rgba(2, 2, 4, 0.7) 0%, rgba(2, 2, 4, 0.3) 46%, rgba(2, 2, 4, 0) 70%),
            radial-gradient(95% 65% at 50% 50%, transparent 55%, rgba(2, 2, 4, 0.5) 100%);
    }

    .grid--services,
    .grid--benefits,
    .tech-list,
    .timeline {
        grid-template-columns: 1fr;
    }

    .timeline__item {
        padding-top: var(--space-md);
    }

    .card,
    .contact__panel {
        padding: var(--space-md);
    }

    /* O card do fundador ocupa a largura toda e mantém o rosto enquadrado */
    .founder-card__frame {
        aspect-ratio: 4 / 4.6;
    }

    .founder-card__photo img {
        object-position: 56% 10%;
    }

    .founder-card__info {
        right: var(--space-sm);
        bottom: var(--space-sm);
        left: var(--space-sm);
    }

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

    .preview__mock {
        width: 100%;
    }

    /* Coluna única e estreita: a mesma renderização virtual, mais reduzida */
    .preview__screen {
        --preview-scale: 0.24;
    }

    .project__meta {
        flex-wrap: wrap;
    }

    .project__category {
        padding-left: 0;
    }

    .project__category::before {
        display: none;
    }

    .project__tech li {
        font-size: 0.75rem;
    }

    .contact__title {
        max-width: none;
    }

    .contact__actions .btn {
        width: 100%;
    }

    .contact-form__grid {
        grid-template-columns: 1fr;
    }

    .contact-form__field--full {
        grid-column: auto;
    }

    .site-footer__inner {
        flex-direction: column;
        gap: var(--space-md);
    }

    .site-footer__nav ul {
        gap: var(--space-sm) var(--space-md);
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

@media (max-width: 400px) {
    .brand__text {
        font-size: 0.8125rem;
        letter-spacing: 0.1em;
    }
}

/* Telas muito largas */
@media (min-width: 1600px) {
    :root {
        --container-width: 1280px;
    }
}