/* -------------------------------------------------- */
/* 440Music Radio Station Layout                      */
/* -------------------------------------------------- */

.radio-main {
     display: flex;
     justify-content: center;
     padding: 10px;
     /* outer spacing */
     box-sizing: border-box;
}

.radio-card {
     max-width: 800px;
     width: 100%;
     background: #111;
     color: #ffffff;
     padding: 10px;
     /* inner spacing */
     border-radius: 8px;
     box-sizing: border-box;
}

/* Now Playing */
.radio-now-playing {
     margin-bottom: 10px;
}

.radio-now-playing h3 {
     margin-bottom: 8px;
}

/* Two-column section */
.radio-columns {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
}

/* Left: Recent Tracks */
.radio-recent {
     flex: 1 1 50%;
     min-width: 260px;

}

.radio-recent h4 {
     margin-bottom: 8px;
}

.radio-recent-list {
     max-height: auto;
     overflow-y: auto;
     padding: 5px;
     background: #000;
     border: 1px solid #333;
     border-radius: 4px;
}

/* Right: Ads + Form */
.radio-side {
     flex: 1 1 35%;
     min-width: 260px;
}

.radio-ad {
     text-align: center;
     margin-bottom: 10px;
}

/* Request Form */
.radio-request h4 {
     margin-bottom: 10px;
}

.radio-request form div {
     margin-bottom: 10px;
}

/* -------------------------------------------------- */
/* Recent Tracks visibility fix                        */
/* -------------------------------------------------- */

.radio-recent-wrapper {
     margin-top: 10px;
     color: #ffffff;
     overflow: visible;
     /* 🔑 prevents clipping */
}

.radio-recent-wrapper .cc_recenttracks_list {
     display: block;
     min-height: 50px;
     /* ensures it renders */
}

/* Mobile refinement */
@media (max-width: 600px) {
     .radio-card {
          padding: 5px;
     }
}

/* -------------------------------------------------- */
/* Radio Dashboard Grid – 50 / 50 Layout               */
/* -------------------------------------------------- */

#radio-dashboard-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
     align-items: start;
     /* 🔑 THIS fixes top alignment */
}

/* Stack on mobile */
@media (max-width: 768px) {
     #radio-dashboard-grid {
          grid-template-columns: 1fr;
     }
}

.radio-layout {
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 10px;
     max-width: 1200px;
     margin: 0 auto;
     padding: 10px;
}


.radio-aside {
     align-self: start;
}

@media (max-width: 900px) {
     .radio-layout {
          grid-template-columns: 1fr;
     }
}