/* =============================================================
   SmartLink Page Styles
   ============================================================= */
:root {
  --smartlink-max-width: 400px;
  --smartlink-bg: var(--black, #000);
  --smartlink-surface: var(--grey, #ccc);
  --smartlink-accent: var(--grey, #f00);
  --smartlink-radius: 0px;
  --smartlink-gap: 0;
}

.smartlink-page {
  min-height: 100dvh;
  padding: 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--smartlink-bg);
  color: var(--white, #fff);
  background-color: var(--black); /* Cor de fundo caso a imagem não carregue */
  background-image: url("../images/bgreal_Texture Asset 2_grey.svg");
  background-size: 250%; /* Zoom na textura */
  background-position: center center; /* Centraliza a imagem */
  background-repeat: no-repeat; /* Evita que a imagem se repita */
}

/* Overrides para permitir scroll no viewport nesta página específica */
html.smartlink-enabled,
body.smartlink-enabled {
  overflow-y: auto !important;
  height: auto !important;
}

/* Quando estiver nesta página, o contêiner pode crescer e a rolagem será no viewport */
.smartlink-page {
  justify-content: flex-start;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Quando o conteúdo couber na viewport, centraliza verticalmente o card */
.smartlink-page.is-centered {
  justify-content: center;
}

.smartlink-card {
  width: 100%;
  max-width: var(--smartlink-max-width);
  display: flex;
  flex-direction: column;
  gap: var(--smartlink-gap);
  border: 1px solid var(--black);
  /* Não usa scroll interno; deixa a página rolar quando necessário */
  max-height: none;
  overflow: visible;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Smartlink hero */
.smartlink-hero {
  text-decoration: none;
  display: block;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}
.artist-photo {
  position: absolute;
  inset: 0; /* cobre todo o container */
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-origin: center center;
  z-index: 1; /* atrás do nome */
}
.release-cover {
  width: 100%;
  display: block;
  object-fit: contain;
  border-radius: var(--smartlink-radius);
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-origin: center center;
  z-index: 1;
}
.artist-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* fica na base do container */
  font-size: 20pt;
  text-align: center;
  color: var(--black);
  background: var(--grey);
  margin: 0;
  padding: 10px;
  transition: var(--transition);
  z-index: 2; /* acima da imagem */
  cursor: pointer;
}
.release-info {
  position: relative;
  background: var(--black);
  margin: 0;
  padding: 10px;
  cursor: pointer;
  transition: var(--transition);
  z-index: 2;
  text-align: center;
  color: var(--white);
  border-bottom: solid 1px var(--white);
}
.release-info .release-name {
  margin: 0;
  cursor: pointer;
}
.release-info .release-artist-name {
  font-size: 15pt;
  margin: 10px 0 0;
  cursor: pointer;
}

/* Fallback para garantir que o container mantenha proporção 1:1 mesmo
   se 'aspect-ratio' for sobrescrito por algum reset. O pseudo-elemento
   cria um espaçador que força altura igual à largura. */
.smartlink-hero::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%; /* 1:1 */
}
/* Quando há capa de lançamento, o hero não precisa do espaçador 1:1 */
.smartlink-hero:has(.release-cover)::before {
  display: none;
}
.smartlink-hero:has(.release-cover) {
  position: relative;
}

/* Featured agora é o primeiro item da lista; destaque no texto */
.links-list > .link-item:first-child .link-title {
  font-weight: 700;
}

/* Links list */
.links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.link-row {
  background: var(--black);
  color: var(--white);
  text-decoration: none;
  display: flex;
  /* permite que a thumb estique do topo ao fundo do item */
  align-items: stretch;
  gap: 0.75rem;
  position: relative;
  transition: var(--transition);
  border-bottom: 1px solid var(--grey);
  min-height: 65px; /* garante altura consistente */
  padding-left: 10px; /* padding horizontal apenas para respirar */
  padding-right: 0; /* sem espaçamento à direita para a thumb ficar colada */
}
.links-list .link-item:last-child .link-row {
  border-bottom: none; /* Remove a borda apenas do último item da lista */
}
@media (hover: hover) {
  .link-row:hover {
    background: var(--white);
    color: var(--black);
    cursor: pointer;
  }
}
.link-thumb {
  width: 65px;
  aspect-ratio: 1/1;
  object-fit: cover;
  flex-shrink: 0;
  order: 2; /* coloca a thumb no fim (direita) */
  /* ocupa toda a altura do item */
  height: 100%;
  align-self: stretch;
  border: none; /* sem bordas ao redor da thumb */
  margin-left: auto; /* empurra a thumb para a extremidade direita */
}

/* Se não houver thumb, reserva o espaço para manter alinhamento */
.link-row .link-thumb {
  display: inline-block;
  width: 65px;
  height: 100%;
}

.link-row .link-thumb[alt=""] {
  visibility: hidden; /* mantém o espaço sem mostrar imagem vazia */
}
.link-title {
  font-size: clamp(0.95rem, 2.6vw, 1.15rem);
  order: 1;
  flex: 1; /* ocupa o espaço disponível antes da thumb */
  display: flex;
  align-items: center; /* centraliza verticalmente o texto mesmo com a thumb esticada */
}

/* Mantém padrão igual para todos os itens, inclusive o primeiro (destaque) */

.empty {
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
  opacity: 0.7;
}
.wordmark-logo-smartlink {
  background: var(--grey);
  padding: 10px;
  transition: var(--transition);
  width: 100%;
  height: 100%;
}
.smartlink-label-signature {
  display: block;
  text-align: center;
  margin-top: 20px;
}
.smartlink-label-signature:hover {
  opacity: 0.85;
}
.smartlink-label-signature img {
  width: 70px;
  height: auto;
  margin-top: 40px;
  background-color: var(--black);
}

/* Hover: quando passar o mouse sobre o hero, altera o fundo do nome */
@media (hover: hover) {
  .smartlink-hero:hover .artist-name {
    background: var(--white);
    color: var(--black);
  }
  .smartlink-hero:hover .artist-photo {
    transform: scale(1.02); /* zoom por trás do nome */
  }
  .smartlink-hero:hover .release-info {
    background: var(--white);
    color: var(--black);
  }
  .smartlink-hero:hover .release-cover {
    transform: scale(1.02);
  }

  /* Hover no wordmark (imagem ou link) */
  .wordmark-logo-smartlink:hover,
  a:hover > .wordmark-logo-smartlink {
    background: var(--white);
    cursor: pointer;
    color: var(--black);
  }
}

/* Footer adjustments so the base footer doesn't conflict visually */
.smartlink-page + footer,
footer.copyright-footer {
  background: transparent;
}

@media (max-width: 768px) {
  .smartlink-page {
    background-size: 540%;
  }
}