@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

* {
  box-sizing: border-box; /* Garante que padding e border não aumentem o tamanho total do elemento */
}

:root {
  --bg-color: #fffcef;
  --primary-color: #60514a;
  --secondary-color: #fff8d8;
  --tertiary-color: #000000;

  --brand-color-1: #ffc80066;
  --brand-color-2: #be6600a4;
  --accent-color: var(--primary-color);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0; /* Remove a margem padrão do body */
  background: var(--bg-color); /* Define a cor de fundo usando uma variável */
  color: var(
    --tertiary-color
  ); /* Define a cor do texto padrão usando uma variável */
  font-family: "Roboto Mono", monospace;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ESTILIZAÇÃO DO HEADER DA PÁGINA */
header {
  height: 4.5rem; /* seu tamanho preferido */
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo à esquerda, busca à direita */
  padding: 0 2rem; /* espaço das bordas */
  background: var(--primary-color);
  overflow: hidden; /* evita transbordamento da logo */
  gap: 1rem;
}

/* link textual no header, discreto e consistente com a paleta */
.header-link {
  color: var(--secondary-color);
  text-decoration: none;
  font-weight: 700;
  margin-right: 0.75rem;
  padding: 0.3rem 0.6rem;
  border-radius: 0.5rem;
}
.header-link:hover {
  text-decoration: underline;
}

.logo {
  display: block;
  width: auto; /* mantém proporção */
  height: 200%; /* aumenta a imagem para cortar a metade inferior */
  max-height: none;
  object-fit: cover; /* preenche sem distorcer */
  object-position: bottom center; /* mostra só a parte superior */
  flex: 0 0 auto; /* não deixa a imagem empurrar/esticar o header */
  transform: translateY(25%);
  cursor: pointer;
  padding-left: 40px;
}

.barra-de-pesquisa {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-color); /* a barra envolve input+botão */
  border-radius: 2rem;
  padding: 0.25rem; /* espaço interno ao redor */
  max-width: 30rem;
  width: clamp(18rem, 35%, 40rem); /* ocupa parte direita sem gambiarras */

  transition: box-shadow 300ms ease, transform 200ms ease;
  will-change: box-shadow, transform;
}

.barra-de-pesquisa input {
  background: transparent;
  border: none;
  outline: none;
  height: 2.4rem;
  line-height: 2.4rem;
  padding: 0 0.75rem;
  font-family: inherit;
  font-size: 14px;
  color: var(--tertiary-color);
  flex: 1;
  min-width: 0;
}
.barra-de-pesquisa input::placeholder {
  color: var(--tertiary-color);
  opacity: 0.6;
  font-size: 12px;
}
.barra-de-pesquisa:focus-within {
  box-shadow: 0 0 5px var(--tertiary-color);
}

.barra-de-pesquisa button {
  margin: 0;
  padding: 0.5rem;
  border-radius: 2rem;
  border: none;
  cursor: pointer;
  background-color: var(--primary-color);
  color: var(--bg-color);
}
.barra-de-pesquisa button:hover {
  background-color: var(
    --primary-color
  ); /* Muda a cor de fundo ao passar o mouse */
  color: var(--bg-color); /* Muda a cor do texto ao passar o mouse */
  box-shadow: 0 0 0 0.1rem var(--primary-color); /* Adiciona uma sombra de caixa */
}
.barra-de-pesquisa button:active {
  transform: scale(0.98); /* Efeito de clique (diminui o tamanho) */
}





/* ESTILIZAÇÃO DO MAIN*/
main {
  flex: 1;
  max-width: 80rem;
  margin: 2rem auto 0;
  padding: 0 2rem; /* passe a ter o mesmo padding lateral do header */
  box-sizing: border-box;
  height: auto; /* remove a altura fixa que causa scroll estranho */
  overflow-x: hidden; /* previne overflow horizontal acidental */
}

.welcome-section {
  justify-content: space-between;
  display: flex;
  margin-bottom: 2rem;
  gap: 10%;
}
.welcome-text {
  justify-content: space-between;
  text-align: justify;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  color: var(--tertiary-color);
  width: 50%;
}
.welcome-section svg {
  width: 30%;
  height: auto;
  margin-left: 2rem;
  fill: var(--primary-color);
}





/* ESTILIZAÇÃO DOS BANNERS */
.grid-banners {
  display: grid;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card-banner {
  height: 300px; /* Altura fixa que você pediu */
  background-color: var(--primary-color); /* Cor de fundo se a imagem falhar */
  border-radius: 20px;
  overflow: hidden; /* Se a imagem for maior, corta as bordas */
  position: relative; /* Necessário se for colocar texto por cima depois */
  z-index: 0;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-banner h3 {
  position: absolute;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 5px;
  font-size: 50px;
  text-align: center;
  z-index: 2;
}
.card-banner img {
  width: 100%;
  height: 100%; /* Força a imagem a ter a altura do cartão */
  object-fit: cover; /* O PULO DO GATO */
}
.card-banner:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.card-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #ffc80066;
  z-index: 1;
  transition: background-color 0.3s ease;
}
.card-banner:hover::after {
  background-color: rgba(255, 200, 0, 0);
}





/* ESTILIZAÇÃO DOS CARDS */
.card-container {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(240px, 1fr)
  ); /* 3 colunas mais largas */
  gap: 1.5rem;
  justify-items: stretch;
  align-items: start;
  padding: 1.5rem 0; /* só padding vertical, horizontal já vem do main */
}

.card-album {
  width: 100%;
  max-width: 600px; /* controla o tamanho máximo do card */
  max-height: 580px;
  margin: 0 auto; /* centraliza cada card na sua coluna */
  background-color: var(--primary-color);
  color: var(--secondary-color);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 8px 22px rgba(96, 81, 74, 0.08);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.card-album img {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  flex: 0 0 auto;
  box-shadow: inset 0 -6px 18px rgba(0, 0, 0, 0.03);
}

.card-album h2, h4 {
  margin: 0;
  font-size: 1.05rem;
  text-align: center;
  color: var(--secondary-color);
  line-height: 1.1;
}

.card-album p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--secondary-color);
  text-align: justify; /* aqui: justificado */
  hyphens: auto;
}

.album-descricao {
  max-height: 7.5rem;            /* ajuste conforme preferir */
  overflow: auto;               /* permite scroll interno */
  padding-right: 0.4rem;        /* espaço para a barra sem quebrar layout */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  box-shadow: inset 0 -18px 20px -14px rgba(0,0,0,0.10); /* indicação sutil de conteúdo extra */
  border-radius: 6px;
  transition: box-shadow 220ms ease;
  scrollbar-width: thin;                         /* Firefox */
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.album-descricao:hover {
  box-shadow: inset 0 -28px 28px -18px rgba(0,0,0,0.12);
}
.album-descricao::-webkit-scrollbar {
  width: 8px;
}
.album-descricao::-webkit-scrollbar-track {
  background: transparent;
}
.album-descricao::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.album-descricao::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.18);
}

/* ícones de ação compactos na base */
.card-album .actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
}
.card-album:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(96, 81, 74, 0.14);
}

.card-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.icon-brand {
  color: var(--brand-color-1);
  width: 20px;
  height: auto;
  transition: color 0.3s ease, scale 0.3s ease, box-shadow 0.3s ease;
}
.icon-brand:hover {
  color: #ffffff;
  scale: 1.2;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}





/* ESTILIZAÇÃO DA SEÇÃO DE RECOMENDAÇÃO ALEATÓRIA */
.apresentacao-destaque{
  text-align: center;
  font-size: 1rem;
  color: var(--tertiary-color);
  margin-top: 2rem;
}
.destaque-semana {
  background-color: #1a1a1a; /* Fundo escuro para destacar */
  color: white;
  padding: 4rem 2rem;
  margin-top: 3rem;
}

.destaque-conteudo {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center; /* Alinha verticalmente */
  gap: 3rem;
}
.destaque-conteudo .material-symbols-outlined{
  cursor: pointer;
  font-size: 2.5rem;
  margin-top: -30%;
  border-radius: 50%;
  border: 5px solid;
  border-color: #1a1a1a;
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.destaque-conteudo .material-symbols-outlined:hover{
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1); /* Brilho sutil */;
  transform: rotate(30deg);
}

.destaque-imagem img {
  width: 300px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1); /* Brilho sutil */
  transform: rotate(3deg); /* Charminho visual (torta) */
  cursor: pointer;
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.destaque-imagem:hover img {
  transform: rotate(0deg) scale(1.03); /* Animação ao passar o mouse */
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}

/* botão "Ouvir Agora" na recomendação da semana */
.btn-destaque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffc800 0%, #be6600 100%);
  color: var(--tertiary-color);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 120ms ease;
}

/* estados */
.btn-destaque:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
  filter: brightness(0.98);
}
.btn-destaque:active {
  transform: translateY(-1px) scale(0.99);
}
.btn-destaque:focus {
  outline: none;
  box-shadow: 0 0 0 6px rgba(255, 200, 0, 0.14);
  border-radius: 999px;
}

/* posicionamento leve e destaque dentro do bloco de texto */
.destaque-texto .btn-destaque {
  margin-top: 0.8rem;
}





/* ESTILIZAÇÃO PARA O FOOTER DA PÁGINA */
.footer {
  position: static;
  width: 100%;
  color: var(--tertiary-color);
  background-color: var(--brand-color-2);
  padding: 15px 20px;
  border-top: 1px solid #3c4043;
  font-size: 0.8rem;
}

.footer-location {
  margin-bottom: 10px; /* Margem inferior */
}

.footer-links {
  list-style: none; /* Remove os marcadores da lista */
  display: flex; /* Habilita o layout flexbox */
  flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
  justify-content: center; /* Centraliza os itens horizontalmente */
  gap: 15px; /* Espaçamento entre os links */
}

.footer-links a {
  color: var(--tertiary-color); /* Cor do link */
  text-decoration: none; /* Remove o sublinhado */
  transition: color 0.2s; /* Transição suave para a cor */
}
.footer-links a:hover {
  color: var(--secondary-color);
}





/* ESTILIZAÇÃO RESPONSIVA */
/* ==========================================================================
   RESPONSIVIDADE (Copie e cole no final do arquivo CSS)
   ========================================================================== */

@media (max-width: 768px) {

  /* --- 1. HEADER (Layout App: Logo + Botão em cima, Busca embaixo) --- */
  header {
    height: auto; /* Altura flexível */
    flex-wrap: wrap; /* Permite quebrar linha */
    padding: 1rem;
    gap: 0.8rem;
    align-items: center;
  }

  /* Logo menor e alinhada */
  .logo {
    height: 2.5rem; /* Tamanho bom para mobile */
    transform: none;
    padding-left: 0;
    width: auto;
    flex: 0 0 auto;
  }

  /* Transformando o Link em um Botão Bonito "Cápsula" */
  .header-link {
    display: inline-block;
    background-color: var(--brand-color-2); /* Cor de destaque */
    color: var(--bg-color);
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    border-radius: 50px; /* Formato pílula */
    margin-right: 0;
    margin-left: auto; /* Empurra para a direita total */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    white-space: nowrap;
  }

  /* Barra de pesquisa ocupa 100% da linha de baixo */
  .barra-de-pesquisa {
    width: 100%;
    max-width: none;
    order: 3; /* Força ela a ser o último elemento (linha de baixo) */
    margin-top: 5px;
  }

  /* --- 2. SEÇÃO DE BOAS-VINDAS --- */
  main {
    padding: 0 1rem;
  }

  .welcome-section {
    flex-direction: column-reverse; /* SVG em cima, texto embaixo */
    gap: 1.5rem;
    align-items: center;
    text-align: center;
    margin-top: 1rem;
  }

  .welcome-text {
    width: 100%;
    font-size: 0.95rem;
    text-align: center; /* Centraliza texto de boas vindas */
  }

  .welcome-section svg {
    width: 50%;
    margin: 0;
  }

  /* --- 3. BANNERS (Um embaixo do outro + Achatados) --- */
  .grid-banners {
    grid-template-columns: 1fr; /* 1 Coluna */
    gap: 12px;
    padding: 10px 0;
  }

  .card-banner {
    height: 90px; /* Bem achatado para economizar tela */
    border-radius: 12px;
  }

  .card-banner h3 {
    font-size: 1.4rem;
    letter-spacing: 1px;
  }
  
  /* Ajuste no hover mobile (remove efeito de crescer que atrapalha touch) */
  .card-banner:hover {
    transform: none;
  }

  /* --- 4. CARDS DE RESULTADO (2 Colunas + Legível) --- */
  .card-container {
    grid-template-columns: 1fr 1fr; /* 2 Colunas */
    gap: 10px;
  }

  .card-album {
    padding: 0.8rem 0.5rem;
    border-radius: 10px;
    max-height: none; /* Remove altura máxima para caber conteúdo */
  }

  .card-album h2 {
    font-size: 0.85rem; /* Título menor */
    min-height: 2.5em; /* Altura mínima para alinhar títulos de 2 linhas */
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card-album h4 {
    font-size: 0.75rem;
    margin-bottom: 5px;
  }

  .card-album p, .album-ano, .album-genero {
    font-size: 0.7rem;
    text-align: center; /* Centraliza detalhes */
  }

  /* ESCONDER A DESCRIÇÃO NO MOBILE (Crucial para layout de 2 colunas funcionar) */
  .album-descricao {
    display: none; 
  }

  /* Ajuste dos botões de link */
  .card-links {
    margin-top: auto; /* Empurra botões para o final do card */
    gap: 0.5rem;
  }
  
  .icon-brand {
    width: 18px; /* Ícones menores */
  }

  /* --- 5. DESTAQUE DA SEMANA (Refresh no canto) --- */
  .destaque-semana {
    padding: 3rem 1.5rem;
    margin-top: 2rem;
    position: relative; /* Pai relativo */
    text-align: center;
  }

  .destaque-conteudo {
    flex-direction: column-reverse;
    gap: 2rem;
  }

  .destaque-imagem img {
    width: 180px; /* Capa menor */
    transform: none;
  }

  /* Ícone de Refresh Absoluto no Canto */
  .destaque-conteudo .material-symbols-outlined {
    position: absolute;
    top: 15px;
    right: 15px;
    margin: 0;
    font-size: 2rem;
    background: #1a1a1a;
    z-index: 10;
    border: none;
  }

  /* Footer */
  .footer-links {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
}