/* ===== Tipografia Croogla (adicione seu arquivo em /fonts) ===== */
:root{
  --hero-maxw: 1040px;
  --hero-text-shadow: 0 14px 40px rgba(0,0,0,.45);
  --rail-gap: 18px;
  --rail-size: 58px;
  --rail-border: rgba(255,255,255,.55);
  --rail-fill: rgba(255,255,255,.12);
  --rail-hover: rgba(255,255,255,.22);
}
*{ box-sizing: border-box; }
html, body{ height: 100%; background: #0c0d10; }
body{
  margin: 0;
  color: #fff;
  font-family: "Sofadi One", system-ui;
  font-weight: 300;
  font-style: normal;
  font-size: 24px;
  
}
.sofadi-one-regular {
  font-family: "Sour Gummy", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* ===== HERO ===== */
.hero-giih{
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: start;
  padding-top: clamp(24px, 4vh, 40px);
  padding-bottom: clamp(28px, 6vh, 56px);
  text-shadow: var(--hero-text-shadow);
}
.title-line {
  position: relative;
  display: inline-block;
  padding: 0 12px;
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 800;
}

.title-line::before {
  content: "";
  position: absolute;
  top: 50%;                  /* meio vertical do h1 */
  right: 100%;               /* termina no início do h1 */
  width: 100vw;              /* ocupa até a borda esquerda da tela */
  height: 4px;
  background: rgba(255, 255, 255, 0.75);
  transform: translateY(-50%);
}
/* Fundo (a mesma imagem do layout) */
.hero-bg{
  position: absolute; inset: 0;
  background: url("../img/festa.png") center/cover no-repeat;
  z-index: -2;
}
.hero-overlay{
  position: absolute; inset: 0;
  /* glow colorido + escurecimento para legibilidade, como no mock */
  background:
    radial-gradient(1200px 500px at 70% 20%, rgba(255,255,255,.06), rgba(0,0,0,.55)),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.68));
  z-index: -1;
}

/* Marca no topo */
.brand-overline{
  letter-spacing: .08em;
  font-weight: 800;
  font-size: clamp(16px, 1.7vw, 26px);
  text-transform: uppercase;
  text-shadow: var(--hero-text-shadow);
}

/* Título grande em duas linhas */
.hero-title{
  margin: clamp(12px, 2vh, 20px) 0 12px;
  max-width: min(var(--hero-maxw), 100%);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -0.01em;
  font-size: clamp(36px, 6.4vw, 72px);
}
.hero-title span{ display: inline-block; }

/* Parágrafo principal */
.hero-lead{
  max-width: 820px;
  font-size: clamp(16px, 1.45vw, 22px);
  line-height: 1.65;
  margin-top: clamp(12px, 2vh, 18px);
  color: rgba(255,255,255,.95);
}
.hero-text{
  position: absolute;
  left: clamp(12px, 3vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--rail-gap);
  z-index: 5;
}
/* ===== Barra de ícones à direita ===== */
.social-rail{
  position: absolute;
  right: clamp(12px, 3vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--rail-gap);
  z-index: 5;
}
.btn-social{
  width: var(--rail-size); height: var(--rail-size);
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(236, 4, 201, 0.25);
  background: #63d7d7;
  backdrop-filter: blur(6px) saturate(120%);
  color: #0c0d10; text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(236, 4, 201, 0.25);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.btn-social i{ font-size: 1.4rem; line-height: 0; }
.btn-social:hover{
  background: rgba(236, 4, 201, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.45), inset 0 0 0 1px rgba(236, 4, 201, 0.25);
}

.music{
  background: linear-gradient(180deg,rgba(115, 42, 155, 0.52) 0%, rgba(13, 12, 12, 1) 100%);
  min-height: 100vh;
}
.genre{
  background-color: #ccc;
  min-width: 95%;
  border-radius: 10px;
  min-height: 90vh;
}
.portfolio{
  color:#63d7d7;
}
.about{
  background: linear-gradient(90deg,rgba(115, 42, 155, 0.38) 0%, rgba(13, 12, 12, 1) 100%);
}
.giih{
  min-height: 80vh;
  margin-top: auto;
}
.about-me{
  color: #ee09b5;
}
.footer{
  background: url("../img/mesasom.png") center/cover no-repeat;
}
.emailgiih{
  background-color: #63d7d7;
  color: #ee09b5;
  font-weight: 600;
  padding: 0 1rem;
}
.card.music-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100%; /* todos terão mesma altura */
}

.card.music-card img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  flex-shrink: 0;
}
.music-cover {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: .25rem;
  display: block;          /* evita “desnível” de linha inline */
  flex: 0 0 auto;
}
.music-meta {
  flex: 1 1 auto;
  min-width: 0;            /* para permitir quebra natural dentro do container */
}
.music-title,
.music-desc {
  white-space: normal;
  overflow-wrap: anywhere; /* evita palavras longas estourarem o card */
  word-break: break-word;
  margin: 0 0 .2rem 0;
}
.card.music-card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* empurra o player para baixo */
}
.player-wrap{
  width: 100%;
  display: flex;
  justify-content: center;
}
/* Força largura suficiente para evitar o “mini player” do iOS */
.audio-ui{
  display: block;
  width: 100%;
  max-width: 520px;   /* limite superior para não ficar gigante */
  min-width: 280px;   /* **ponto-chave**: evita controle compacto no iOS */
  margin: 8px auto 0;
}
/* ===== Responsividade ===== */
@media (max-width: 992px){
  .social-rail{
    right: 40px;
    top: auto; bottom: 18px;
    transform: none;
    flex-direction: row;
  }
  .btn-social{ width: 50px; height: 50px; }
}
@media (max-width: 768px){
  /* Card mais estreito e centralizado no mobile */
  .card.music-card{
    flex-direction: column;   /* capa em cima, texto e player abaixo */
    align-items: center;
    text-align: center;
    max-width: 90vw;          /* reduz a largura do card */
    margin: 0 auto 16px;      /* centraliza e dá respiro vertical */
  }

  .card.music-card img{
    width: 180px;
    height: 180px;
    margin-top: .5rem;
  }

  .card.music-card .card-body{
    align-items: center;      /* centraliza títulos e descrição */
    padding: 12px 16px;
  }

  .player-wrap{
    justify-content: center;
  }

  /* No mobile, deixe o áudio acompanhar a largura do card,
     mas com mínimo para manter os controles completos */
  .audio-ui{
    width: 95%;
    max-width: 440px;
    min-width: 280px;
  }
}
@media (max-width: 576px){
  .hero-title{ font-size: clamp(34px, 9vw, 60px); }
  .hero-lead{ font-size: clamp(15px, 4vw, 18px); }
  /* Card mais estreito e centralizado no mobile */
  .card.music-card{
    flex-direction: column;   /* capa em cima, texto e player abaixo */
    align-items: center;
    text-align: center;
    max-width: 90vw;          /* reduz a largura do card */
    margin: 0 auto 16px;      /* centraliza e dá respiro vertical */
  }

  .card.music-card img{
    width: 180px;
    height: 180px;
    margin-top: .5rem;
  }

  .card.music-card .card-body{
    align-items: center;      /* centraliza títulos e descrição */
    padding: 12px 16px;
  }

  .player-wrap{
    justify-content: center;
  }

  /* No mobile, deixe o áudio acompanhar a largura do card,
     mas com mínimo para manter os controles completos */
  .audio-ui{
    width: 95%;
    max-width: 440px;
    min-width: 280px;
  }
}
@media (max-width: 360px){
  .audio-ui{
    min-width: 260px;
  }
  .card.music-card{
    max-width: 90vw;
    margin: 0 12px;
  }
}