/* Mobile-first: breakpoints adicionam e reorganizam, nunca só "empilham". */

/* ===== Tablet — 768px ===== */
@media (min-width: 768px) {
    .music__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .music-card--cta {
        display: none;
    }

    .gallery-masonry {
        grid-template-columns: repeat(3, 1fr);
    }

    .form-grid,
    .booking__form .form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .form-field--honeypot,
    .form-field:has(#field-mensagem) {
        grid-column: 1 / -1;
    }

    .about__media {
        grid-template-columns: 1.4fr 1fr;
        align-items: end;
        gap: var(--space-4);
    }

    .about__figure--secondary {
        display: block;
        aspect-ratio: 3 / 4;
    }

    .hero__content {
        padding-inline: var(--container-padding);
    }
}

/* ===== Tablet — 768px (footer) ===== */
@media (min-width: 640px) {
    .site-footer__grid {
        grid-template-columns: 1.2fr 1fr 1fr 1fr;
        gap: var(--space-5);
    }
}

/* ===== Notebook / Desktop — 1024px ===== */
@media (min-width: 1024px) {
    .nav-desktop {
        display: flex;
    }

    .social-icons {
        display: flex;
    }

    .menu-toggle {
        display: none;
    }

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

    /* Hero: composição editorial em duas colunas, foto ocupando a lateral */
    .hero {
        flex-direction: row;
        min-height: 100svh;
    }

    .hero__media {
        order: 2;
        width: 52%;
        height: 100svh;
        min-height: 100svh;
        flex-shrink: 0;
    }

    .hero__media::after {
        background: linear-gradient(90deg, var(--rafa-black) 2%, rgba(13, 13, 15, 0) 30%);
    }

    .hero__content {
        order: 1;
        width: 48%;
        margin-top: 0;
        justify-content: center;
        padding-inline: var(--container-padding);
        padding-block: 0;
    }

    .hero__title {
        font-size: var(--fs-display-xl);
    }

    /* Sobre: grid editorial, retrato secundário sobreposto tipo pôster */
    .about__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-9);
        align-items: start;
    }

    .about__media {
        position: relative;
    }

    .about__figure--secondary {
        position: absolute;
        right: -8%;
        bottom: -10%;
        width: 55%;
        box-shadow: var(--shadow-md);
        border-color: var(--rafa-border-strong);
    }

    .music__grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .music__amago {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .agenda__header {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
    }

    .gallery-masonry {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-flow: dense;
    }

    .gallery-masonry__item--tall {
        grid-row: span 2;
        aspect-ratio: auto;
    }

    .booking__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-9);
        align-items: start;
    }

    .booking__form .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===== Desktop grande — 1440px ===== */
@media (min-width: 1440px) {
    .hero__content {
        padding-inline: calc(var(--container-padding) + 1rem);
    }
}

/* ===== Telas muito pequenas — 375px e abaixo ===== */
@media (max-width: 374px) {
    .hero__title {
        font-size: clamp(2.5rem, 14vw, 3.5rem);
    }

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