/* ==================================================
   PlanetRadio.ro — Radio Card Modern v2 (FINAL)
   ================================================== */

/* Grid container — used on index.php, radio.php, radio-tara.php,
   radio-limba.php, gen.php, radio/international/country.php
   (<section class="stations-grid"><div class="container grid">).
   Previously only defined in components-dark-v1.css/ui-dark-modern-v1.css,
   which were deleted as "dead" without checking this specific rule. */
.stations-grid .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.2rem;
}

.radio-card {
  position: relative;
  background: #0f111a;
  border: 1px solid #1e2130;
  border-radius: 16px;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 260px;
}

/* ================= BADGES ================= */

.badge {
  position: absolute;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(0,0,0,0.65);
  color: #ffffff;
  z-index: 5;
}

.badge-country {
  left: 10px;
}

.badge-country img {
  width: 18px;
  height: 12px;
  border-radius: 2px;
}

.badge-genre {
  right: 10px;
  background: rgba(225, 6, 0, 0.85);
}

/* ================= LOGO ================= */

.card-logo {
  margin-top: 22px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-logo img {
  max-height: 72px;
  max-width: 90%;
  object-fit: contain;
}

/* ================= TITLE ================= */

.station-name {
  font-size: 0.95rem;
  text-align: center;
  margin: 0;
}

.station-name a {
  color: #ffffff;
  text-decoration: none;
}

.station-name a:hover {
  text-decoration: underline;
}

/* ================= FOOTER ================= */

.card-footer {
  margin-top: auto;
  width: 100%;
  display: grid;
  /* minmax(0, 1fr), not plain 1fr: grid tracks default to a min size of
     "auto" (the content's intrinsic/unwrapped width), so a 4+ digit
     listener count ("LIVE 5.762") could force this left track wider
     than its fair share and overlap the play button in the middle
     track. minmax(0, ...) lets it actually shrink to fit. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

/* counter stanga */
.listen-counter {
  font-size: 0.7rem;
  color: #9aa0c3;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 0;
}

/* PLAY central
   (consolidated 2026-07-25 from 3 previously-separate, overlapping files:
   cards-play-v1.css "SAFE VERSION", cards-play-v2.css "ACTIVE STATE FIX",
   cards-play-active.css - each redefined this button at a different point
   in time without removing the previous one, resolved only by alphabetical
   filename load order. is-playing is toggled on the parent .radio-card
   element, never on .btn-play-card itself - see js/script.js markActiveCard) */
.btn-play-card {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1f222d;
  border: none;
  color: #ffffff;
  font-size: 1.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.radio-card:not(.is-playing) .btn-play-card:hover {
  background: #2a2e3d;
  transform: scale(1.05);
}

/* activ - cand statia canta */
.radio-card.is-playing .btn-play-card {
  background: #e10600;
  box-shadow: 0 0 0 6px rgba(225, 6, 0, 0.25);
}

/* stream marcat ca posibil indisponibil (stream_ok=false) */
.btn-play-card-warn:not(.is-playing) {
  border: 1px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}

/* LIKE dreapta
   (consolidated 2026-07-25 from 2 previously-separate files: cards-like.css
   "FINAL FIX" - unicode heart via ::before, and cards-like-active.css - a
   background-image heart on a .heart child span. Both applied at once to
   the same button (partials/radio-card.php renders <span class="heart">
   inside .btn-like, so the ::before heart rendered as a second, overlapping
   icon). cards-like-active.css also checked class `.liked`, but JS
   (script.js / favorites.js) only ever toggles `.is-liked` - the liked
   state never actually reached the heart icon itself. Kept only the
   span-based icon, matching real markup, fixed the class name. */
.btn-like {
  justify-self: end;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1f222d;
  border: 1px solid #2a2e3d;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
}

.btn-like:hover {
  border-color: #e10600;
}

.btn-like.is-liked {
  background: #e10600;
  border-color: #e10600;
}

.btn-like .heart {
  width: 18px;
  height: 18px;
  display: inline-block;
  background: url("/image/icons/heart.svg") center/contain no-repeat;
  opacity: .55;
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}

.btn-like.is-liked .heart {
  opacity: 1;
  transform: scale(1.1);
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, .35));
}

/* ================= RESPONSIVE ================= */

@media (max-width: 768px) {
  .card-footer {
    gap: 14px;
  }

  .btn-play-card {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .btn-like {
    width: 44px;
    height: 44px;
  }

  .listen-counter {
    min-width: 44px;
    text-align: center;
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  .radio-card {
    min-height: 240px;
    padding: 16px 14px;
  }
}