/* =====================================================================
   BANNER — faixa full-bleed com foto de fundo e frase centralizada
   ---------------------------------------------------------------------
   PhotoBG.png é 1920x290 (proporção 6.62:1). A faixa usa altura em rem
   para não ficar desproporcional em telas muito largas; a imagem cobre
   com `cover` e recorta pelas laterais.
   ===================================================================== */

.banner {
  --banner-h: 13.5rem;      /* 216px @1440 */

  display: grid;
  place-items: center;
  min-height: var(--banner-h);
  padding-block: 3rem;
  padding-inline: var(--container-pad);
  background-color: var(--c-green-dark);
  background-image: url("../img/PhotoBG.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* A faixa troca de texto entre desktop e mobile — são frases diferentes */
.banner__text--mobile { display: none; }

/* a tira de folhagem só existe no mobile */
.banner__strip { display: none; }

.banner__title {
  max-width: 40rem;
  font-size: 1.25rem;       /* 20px @1440 */
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: var(--c-white);
}

/* =====================================================================
   MOBILE — tira de folhagem no topo e verde chapado com o texto abaixo
   (frame de 430px)
   ---------------------------------------------------------------------
   bart-zimny.png (976x67) entra só como tira, na proporção em que foi
   feita, e o miolo passa a ser cor sólida — sem foto de fundo.
   ===================================================================== */
@media (max-width: 768px) {
  .banner {
    --banner-h: 0;

    display: block;
    padding: 0 0 3rem;
    background-color: var(--c-green-forest);
    background-image: none;
  }

  .banner__strip {
    display: block;
    height: 2rem;                /* 32px @430 */
    background-image: url("../img/bart-zimny.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .banner__text--desktop { display: none; }
  .banner__text--mobile { display: inline; }

  .banner__title {
    max-width: none;
    padding: 3rem var(--container-pad) 0;
    font-size: 1.5rem;           /* 24px @430 */
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-wrap: wrap;             /* as quebras vêm dos <br>, não do balance */
  }
}