/* Casa Jardim Design — responsive.css (Revista de Jardim)
   Breakpoints 1024 / 768 / 480. Todo @media vive aqui. */

/* ================= 1024 ================= */
@media (max-width: 1024px) {
    .hero { gap: 2rem; }

    .hero-arch img { height: 380px; }

    .about-grid { grid-template-columns: minmax(240px, 340px) 1fr; gap: 2rem; }

    .line-card { grid-template-columns: 200px 1fr; }

    .projects-text { column-count: 1; column-rule: 0; }

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

    .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
}

/* ================= 768 ================= */
@media (max-width: 768px) {
    .site-header { position: sticky; text-align: left; }

    .header-edition { justify-content: space-between; }

    .brand { padding: .8rem 0 .4rem; }

    .menu-toggle { display: flex; }

    .mast-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--paper);
        border-top: 3px double var(--sand);
        border-bottom: 1px solid var(--line);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        max-width: none;
        padding: .6rem clamp(1rem, 3vw, 2rem) 1rem;
        box-shadow: 0 18px 30px rgba(62, 44, 34, .12);
    }

    .mast-nav.open { display: flex; }

    .mast-nav a { width: 100%; padding: .7rem 0; border-bottom: 1px dashed var(--line); font-size: 1rem; }
    .mast-nav a:last-of-type { border-bottom: 0; }
    .mast-nav a::after { display: none; }

    .nav-leaf { display: none; }

    .hero { grid-template-columns: 1fr; padding-top: 2.4rem; }

    .hero-arch img { height: 320px; }

    .hang-tag { top: auto; bottom: -22px; right: 50%; transform: translateX(50%) rotate(0deg); }
    .hang-tag:hover { transform: translateX(50%) translateY(-2px); }
    .hang-tag::before { display: none; }

    .about-grid { grid-template-columns: 1fr; }

    .about-photo img { height: 300px; }

    .line-card,
    .line-card:nth-child(even) { grid-template-columns: 1fr; }

    .line-card:nth-child(even) .card-media { order: 0; }
    .line-card:nth-child(even) .card-body { order: 0; text-align: left; }
    .line-card:nth-child(even) .card-body ul { direction: ltr; }
    .line-card:nth-child(even) .card-tag { margin-left: 0; }
    .line-card:nth-child(even) .card-body p { margin-left: 0; }

    .card-media img { height: 220px; }

    .projects-grid { grid-template-columns: 1fr; }

    .guide-controls { flex-direction: column; align-items: stretch; }
    .guide-controls select { width: 100%; }

    .voices-grid { grid-template-columns: 1fr; }

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

    .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ================= 480 ================= */
@media (max-width: 480px) {
    h1 { font-size: 2.15rem; }
    h2 { font-size: 1.7rem; }

    .header-edition { font-size: .62rem; letter-spacing: .1em; }

    .brand-name { font-size: 1.45rem; }

    .hero-arch { padding: 9px; }
    .hero-arch img { height: 250px; }

    .hang-tag { width: 78%; text-align: center; padding: .8rem 1rem .8rem 2rem; }

    .hero-actions { flex-direction: column; align-items: flex-start; gap: .9rem; }

    .card-media img { height: 170px; }

    .project-photo img { height: 210px; }

    .tabs { gap: .5rem; }
    .tab { font-size: .85rem; padding: .6rem 1.1rem .6rem 1.7rem; }
    .tab::before { left: .55rem; }

    .estufa-head { padding: .9rem 1.1rem; }

    .sun-guide > *:not(.estufa-head) { padding-left: 1.1rem; padding-right: 1.1rem; }
    .guide-controls { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }

    .voice { padding: 1.9rem 1.1rem 1.2rem; }

    .contact-card { padding: 2.1rem 1.2rem 1.5rem; }

    .whatsapp-float { right: 1rem; bottom: 1rem; padding: .5rem .95rem .5rem .5rem; }
    .wa-label { display: none; }
    .whatsapp-float::after { content: "WhatsApp"; }
}