/* ==================================================
   Radio Index v2 – UX + SEO polish
   Applies ONLY to /radio/ (page-radio-index)
   Location: /css/extras/radio-index-v2.css
================================================== */

.page-radio-index .radio-hero-sub {
  margin: 0 0 10px;
  color: #e7eaf2;
  font-size: 1.02rem;
  line-height: 1.55;
}

.page-radio-index .radio-hero-sub strong {
  color: #ffffff;
}

/* Hero actions: make secondary buttons consistent */
.page-radio-index .radio-hero-actions .btn-secondary {
  background: #151923;
  border: 1px solid rgba(255,255,255,.10);
}

.page-radio-index .radio-hero-actions a:focus-visible,
.page-radio-index .hub-items a:focus-visible,
.page-radio-index .hub-flag:focus-visible,
.page-radio-index .hub-more:focus-visible {
  outline: 2px solid rgba(255,51,85,.75);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Hub items: nicer interactions without changing existing CSS files */
.page-radio-index .hub-items a {
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.page-radio-index .hub-items a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  border-color: rgba(255,51,85,.28);
}

/* Flags: add subtle ring + hover lift */
.page-radio-index .hub-flag {
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 20px rgba(0,0,0,.30);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.page-radio-index .hub-flag:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.40);
  border-color: rgba(255,51,85,.28);
}

/* Hub "more" link: clearer affordance */
.page-radio-index .hub-more {
  text-decoration: none;
  color: rgba(255,255,255,.82);
  transition: color .12s ease;
}

.page-radio-index .hub-more:hover {
  color: #ff3355;
}

/* SEO section: better readability + list styling */
.page-radio-index .radio-seo-long h3 {
  margin: 18px 0 10px;
  font-size: 1.08rem;
  font-weight: 750;
  color: #ffffff;
}

.page-radio-index .radio-seo-points {
  margin: 14px 0 18px;
  padding-left: 18px;
}

.page-radio-index .radio-seo-points li {
  margin-bottom: 8px;
  color: #d3d9e6;
  line-height: 1.6;
}

/* Mobile: flags labels under flags take too much space */
@media (max-width: 768px) {
  .page-radio-index .hub-items.flags {
    gap: 12px;
  }

  .page-radio-index .hub-flag {
    width: 64px;
    height: 48px;
  }

  .page-radio-index .hub-flag span {
    display: none;
  }
}