/* ==================================================
   RADIO INDEX PAGE – PlanetRadio.ro
   Applies ONLY to /radio/
================================================== */

.page-radio-index {
  padding-bottom: 48px;
}

/* ===============================
   HERO
=============================== */
.page-radio-index .radio-hero {
  max-width: 920px;
  margin: 0 auto 48px;
  text-align: center;
}

.page-radio-index .radio-hero h1 {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: #ffffff;
}

.page-radio-index .radio-hero p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #cfd5e1;
  margin-bottom: 22px;
}

.page-radio-index .radio-hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.page-radio-index .radio-hero-actions a {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.page-radio-index .btn-primary {
  background: linear-gradient(135deg, #ff3355, #ff1744);
  color: #fff;
}

.page-radio-index .btn-secondary {
  background: #151923;
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
}

.page-radio-index .radio-hero-actions a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

/* ===============================
   HUB GRID
=============================== */
.page-radio-index .radio-hub {
  margin-bottom: 52px;
}

.page-radio-index .radio-hub h2 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 26px;
}

.page-radio-index .hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.page-radio-index .hub-card {
  display: block;
  padding: 20px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, #141822, #0f1218);
  border: 1px solid rgba(255,255,255,.06);
  text-decoration: none;
  color: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}

.page-radio-index .hub-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
}

.page-radio-index .hub-icon {
  display: inline-block;
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.page-radio-index .hub-card strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.page-radio-index .hub-card p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #b8c0d1;
  margin: 0;
}

/* ===============================
   BENEFITS
=============================== */
.page-radio-index .radio-benefits {
  max-width: 820px;
  margin: 0 auto 52px;
}

.page-radio-index .radio-benefits h2 {
  font-size: 1.45rem;
  margin-bottom: 18px;
}

.page-radio-index .radio-benefits ul {
  padding-left: 18px;
}

.page-radio-index .radio-benefits li {
  margin-bottom: 10px;
  color: #d3d9e6;
  line-height: 1.6;
}

/* ===============================
   INTERNAL LINKS
=============================== */
.page-radio-index .radio-internal-links {
  max-width: 820px;
  margin: 0 auto 52px;
}

.page-radio-index .radio-internal-links h2 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.page-radio-index .radio-internal-links p {
  color: #cfd5e1;
  line-height: 1.7;
}

.page-radio-index .radio-internal-links a {
  color: #ff3355;
  text-decoration: none;
}

.page-radio-index .radio-internal-links a:hover {
  text-decoration: underline;
}

/* ===============================
   SEO LONG TEXT
=============================== */
.page-radio-index .radio-seo-long {
  max-width: 880px;
  margin: 0 auto;
}

.page-radio-index .radio-seo-long h2 {
  font-size: 1.45rem;
  margin-bottom: 16px;
}

.page-radio-index .radio-seo-long p {
  margin-bottom: 16px;
  line-height: 1.75;
  color: #cbd2e0;
  font-size: 0.98rem;
}

/* ===============================
   MOBILE
=============================== */
@media (max-width: 768px) {
  .page-radio-index .radio-hero h1 {
    font-size: 1.8rem;
  }

  .page-radio-index .radio-hero p {
    font-size: 1rem;
  }

  .page-radio-index .hub-grid {
    grid-template-columns: 1fr;
  }
}
.page-radio-index .hub-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  margin-bottom: 12px;
  background: #0f1116;
  border: 1px solid rgba(255,255,255,.15);
}

/* steag RO ca exemplu */
.page-radio-index .hub-icon.flag.ro {
  background-image: url('/image/flags/ro.svg');
  background-size: cover;
  background-position: center;
}

/* limbi */
.page-radio-index .hub-icon.lang {
  color: #00e0ff;
}

/* genuri */
.page-radio-index .hub-icon.genre {
  color: #ff6b6b;
}

/* international disabled */
.page-radio-index .hub-disabled {
  opacity: .55;
  cursor: not-allowed;
}