/* Fügt sich in das Herzjuwel-Theme ein (nutzt vorhandene hj-album Karten) */

/*
  Standard-Seiten-Template kann den Content-Wrapper weiß hinterlegen.
  Für die Voting-Seite entfernen wir das gezielt, damit der Farbverlauf sauber durchläuft.
*/
.hjv-has-voting .entry-content,
.hjv-has-voting .site-main .entry-content,
.hjv-has-voting .content-area,
.hjv-has-voting .site-content{
  background: transparent !important;
}

.hjv-has-voting .entry-content{ padding-top: 0 !important; }

.hjv-has-voting .hjv-root{ margin-top: 0 !important; }

/* Intro-Card nicht doppelt verschachteln: wenn das Template bereits eine "Karte" um den Content legt,
   nehmen wir dem Intro die extra Rahmen/Fläche, lassen aber Typografie + Abstand bestehen. */
.hjv-has-voting .hjv-intro{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.hjv-has-voting .hjv-intro p{
  line-height: 1.6;
}

.hjv-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

@media (max-width: 640px){
  .hjv-grid{ grid-template-columns: 1fr; }
}

.hjv-card{ position: relative; }

.hjv-card{
  display: flex;
  flex-direction: column;
}

.hjv-card .hjv-title{
  margin: 0 0 .85rem;
  font-size: clamp(1.1rem, 1rem + .45vw, 1.8rem);
  line-height: 1.14;
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
}

.hjv-card .hjv-title-main{
  display: block;
}

.hjv-card .hjv-title-note{
  display: block;
  margin-top: .3rem;
  font-size: .68em;
  line-height: 1.2;
  opacity: .92;
}

.hjv-actions{ margin-top: auto; padding-top: .75rem; }

.hjv-vote-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width: 320px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 2px solid rgba(214, 198, 165, 0.85);
  background: rgba(214, 198, 165, 0.95);
  color: #20131c;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.hjv-vote-btn:hover{ filter: brightness(1.03); }

.hjv-vote-btn:disabled{
  opacity: .78;
  cursor: default;
}

.hjv-status{
  margin: .6rem 0 0;
  min-height: 1.2em;
  opacity: .92;
}

.hjv-status[data-state="error"]{ opacity: 1; }

.hjv-note{ opacity: .85; }


/* Hintergrund-Player unsichtbar (Design bleibt sauber) */
#hj-player{ display:none !important; }

/* Play-Button sitzt optisch über der Abstimmung */
.hjv-card .hj-play{ margin-top: 12px; }

/* Falls das Theme den hj-play Button nicht auf volle Breite setzt: hier lesbar & gut klickbar machen */
.hjv-play-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:320px;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .02em;
}

/* Play-Button (eigenständig gestylt, um Konflikte mit Theme-JS zu vermeiden) */
.hjv-play-btn{
  border: 2px solid rgba(214, 198, 165, 0.85);
  background: rgba(35, 22, 30, 0.35);
  color: rgba(255,255,255,0.92);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  margin-top: 12px;
}
.hjv-play-btn:hover{ filter: brightness(1.05); }