/**
 * PATCH CSS RESPONSIVO - MJC MUSIC
 * Correções críticas para problemas de layout
 * Aplicado em: 2026-09-01
 *
 * PROBLEMAS CORRIGIDOS:
 * 1. .banner_home com width: 100vw causando overflow horizontal
 * 2. .retangulo7 e .retangulo8 com margins negativas excessivas
 * 3. Widths fixos em pixels não responsivos
 */

/* ========================================
   PROBLEMA 1: BANNER HOME - 100VW OVERFLOW
   ======================================== */

body {
    overflow-x: hidden;
}

.banner_home {
    width: 100% !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    overflow: hidden;
}

/* ========================================
   PROBLEMA 2: RETÂNGULOS COM MARGINS NEGATIVAS
   ======================================== */

/* Container wrapper para os retângulos */
.retangulos_container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Retângulo 7 - Corrigido */
.retangulo7 {
    width: 100%;
    max-width: 450px;
    height: 412px;
    background: #344247;
    display: flex;
    flex-wrap: wrap;
    margin: 2rem auto;
    padding: 1rem;
    box-sizing: border-box;
    position: relative;
}

/* Retângulo 8 - Corrigido */
.retangulo8 {
    width: 100%;
    max-width: 450px;
    height: 200px;
    background: #344247;
    display: flex;
    flex-wrap: wrap;
    margin: 2rem auto;
    padding: 1rem;
    box-sizing: border-box;
    position: relative;
}

/* Todos os retângulos com padrão responsivo */
.retangulo1, .retangulo2, .retangulo3,
.retangulo4, .retangulo5, .retangulo6 {
    width: 100%;
    max-width: 450px;
    height: auto;
    background: #344247;
    display: flex;
    flex-wrap: wrap;
    margin: 1rem auto;
    padding: 1rem;
    box-sizing: border-box;
    position: relative;
}

/* ========================================
   PROBLEMA 3: MEDIA QUERIES - RESPONSIVE
   ======================================== */

/* Ultra-wide screens (2560px+) */
@media only screen and (min-width: 2560px) {
    .banner_home {
        height: 87vh;
        background-size: cover;
        background-position: center;
    }

    .retangulo1, .retangulo2, .retangulo3,
    .retangulo4, .retangulo5, .retangulo6,
    .retangulo7, .retangulo8 {
        max-width: 550px;
    }
}

/* Large desktop (1920px - 2559px) */
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
    .banner_home {
        height: 87vh;
        background-size: cover;
        background-position: center;
    }

    .retangulo1, .retangulo2, .retangulo3,
    .retangulo4, .retangulo5, .retangulo6,
    .retangulo7, .retangulo8 {
        max-width: 500px;
    }
}

/* Desktop (1440px - 1919px) */
@media only screen and (min-width: 1440px) and (max-width: 1919px) {
    .banner_home {
        height: 85vh;
    }

    .retangulo1, .retangulo2, .retangulo3,
    .retangulo4, .retangulo5, .retangulo6,
    .retangulo7, .retangulo8 {
        max-width: 450px;
    }
}

/* Tablet landscape (1024px - 1439px) */
@media only screen and (min-width: 1024px) and (max-width: 1439px) {
    .banner_home {
        height: 60vh;
    }

    .retangulo1, .retangulo2, .retangulo3,
    .retangulo4, .retangulo5, .retangulo6,
    .retangulo7, .retangulo8 {
        max-width: 90%;
        max-width: clamp(300px, 90vw, 400px);
    }
}

/* Tablet portrait (768px - 1023px) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .banner_home {
        height: 55vh;
    }

    .retangulo1, .retangulo2, .retangulo3,
    .retangulo4, .retangulo5, .retangulo6,
    .retangulo7, .retangulo8 {
        max-width: 85vw;
        max-width: clamp(280px, 85vw, 380px);
    }
}

/* Mobile landscape (480px - 767px) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .banner_home {
        height: 50vh;
    }

    .retangulo1, .retangulo2, .retangulo3,
    .retangulo4, .retangulo5, .retangulo6,
    .retangulo7, .retangulo8 {
        max-width: 90vw;
        max-width: clamp(250px, 90vw, 350px);
    }
}

/* Mobile portrait (320px - 479px) */
@media only screen and (max-width: 479px) {
    .banner_home {
        height: 45vh;
    }

    .retangulo1, .retangulo2, .retangulo3,
    .retangulo4, .retangulo5, .retangulo6,
    .retangulo7, .retangulo8 {
        width: 95vw;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ========================================
   OVERRIDE PARA TEXTO DENTRO RETÂNGULOS
   ======================================== */

.retangulo1, .retangulo2, .retangulo3,
.retangulo4, .retangulo5, .retangulo6,
.retangulo7, .retangulo8 {
    align-content: flex-start;
}

.texto-retangulo7,
.texto-retangulo8 {
    width: 100%;
    word-wrap: break-word;
}

.descricao7,
.descricao8,
.ano-7,
.ano-8 {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

/* ========================================
   FIXES ADICIONAIS - EVITAR OVERFLOW
   ======================================== */

/* Garante que imagens não ultrapassem o container */
.retangulo1 img, .retangulo2 img, .retangulo3 img,
.retangulo4 img, .retangulo5 img, .retangulo6 img,
.retangulo7 img, .retangulo8 img {
    max-width: 100%;
    height: auto;
}

/* Assegura que divs internas não causem overflow */
.retangulo1 > div, .retangulo2 > div, .retangulo3 > div,
.retangulo4 > div, .retangulo5 > div, .retangulo6 > div,
.retangulo7 > div, .retangulo8 > div {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}