/* DevWordPress — Responsivo (todos os @media aqui)
   Breakpoints: 1024 / 768 / 480. Layout IDE: editor+preview empilham,
   nav vira drawer, pipelines voltam a coluna. */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
}

@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; gap: 1.4rem; }
    .preview-window { margin-top: 0; max-width: 640px; }
    .editor-body { min-height: 0; }
    .code-flow h1 { font-size: 2.7rem; }
    .plugins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .changelog-list { grid-template-columns: 1fr; gap: 1.6rem; }
    .changelog-list::before {
        top: 8px; bottom: 8px; left: 6px; right: auto;
        width: 2px; height: auto;
        background: linear-gradient(180deg, var(--sky), var(--wp));
    }
    .log-node { top: 4px; }
    .nav { gap: 1rem; }
    .header-cta { display: none; }
}

@media (max-width: 768px) {
    .menu-toggle { display: flex; }
    .titlebar { flex-wrap: wrap; row-gap: .8rem; }
    .nav {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 70;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: min(300px, 84vw);
        height: 100vh;
        padding: 4.4rem 1.5rem 1.5rem;
        background: var(--panel-deep);
        border-left: 1px solid var(--line);
        box-shadow: -16px 0 40px rgba(0, 0, 0, .55);
        transform: translateX(100%);
        transition: transform .3s ease;
        margin-right: 0;
    }
    .nav.open { transform: translateX(0); }
    .nav a {
        padding: .9rem .3rem;
        border-bottom: 1px dashed var(--line-soft);
        font-size: .78rem;
    }
    .statusbar { gap: 1rem; }
    .statusbar span:nth-child(2), .statusbar span:nth-child(3) { display: none; }

    .about-grid { grid-template-columns: 1fr; padding: 1.8rem 1.4rem; gap: 2rem; }
    .about-photo { transform: none; max-width: 460px; }
    .plugins-grid { grid-template-columns: 1fr; }
    .code-grid { grid-template-columns: 1fr; }
    .tab-panels { padding: 1.6rem 1.4rem; }
    .tabs { flex-wrap: wrap; }
    .voices-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; gap: 2.2rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    h2 { font-size: 1.9rem; }
}

@media (max-width: 480px) {
    .gutter { display: none; }
    .editor-body { grid-template-columns: 1fr; }
    .code-flow { padding: 1.5rem 1.3rem 1.8rem; }
    .code-flow h1 { font-size: 2.15rem; }
    .hero { padding-top: 2.6rem; padding-bottom: 4rem; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .btn { width: 100%; justify-content: center; }
    .hero-badges { grid-template-columns: 1fr; }
    .tab { font-size: .64rem; padding: .7em 1em; }
    .code-block code { font-size: .78rem; }
    .terminal-body { padding: 1.3rem 1.2rem 1.5rem; }
    .footer-bottom { flex-direction: column; gap: .3rem; }
    section { padding-block: 4rem; }
}