/**
 * Radio front page styles.
 * Loaded by the radio-core plugin only on is_front_page().
 * Dark theme (#0f0f0f / #181818), accent #1ed760.
 */

/* ---------- HERO ---------- */
.elementor-element-hero1 .e-con-inner { text-align: center; }
.elementor-element-hero1 .elementor-heading-title { line-height: 1.15; margin: 0; text-wrap: balance; }

/* ---------- CHANNELS: one row ---------- */
.elementor-element-channels1 > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 2rem !important;
}
.elementor-element-ch_main,
.elementor-element-ch_hiphop {
    flex: 0 1 340px !important;
    max-width: 380px;
    background: #181818 !important;
    border: 1px solid #282828;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    transition: transform .2s, box-shadow .2s;
}
.elementor-element-ch_main:hover,
.elementor-element-ch_hiphop:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(30,215,96,.15);
}
.elementor-element-ch_main .elementor-widget-image img,
.elementor-element-ch_hiphop .elementor-widget-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    margin: 0 auto;
}

/* ---------- JOIN THE PARTY ---------- */
.elementor-element-join1 .e-con-inner { text-align: center; }

/* ---------- BLOG (shortcode output) ---------- */
.rp-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 1.75rem;
}
.rp-blog-card {
    display: flex;
    flex-direction: column;
    background: #181818;
    border: 1px solid #282828;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .2s, border-color .2s;
}
.rp-blog-card:hover { transform: translateY(-3px); border-color: #1ed760; }
.rp-blog-thumb { display: block; }
.rp-blog-thumb img { width: 100%; height: 190px; object-fit: cover; display: block; }
.rp-blog-body { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem 1.2rem 1.3rem; flex: 1 1 auto; }
.rp-blog-date { font-size: .75rem; color: #8a8a8a; }
.rp-blog-title { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.rp-blog-title a { color: #fff; text-decoration: none; }
.rp-blog-title a:hover { color: #1ed760; }
.rp-blog-excerpt { margin: 0; color: #b3b3b3; font-size: .9rem; line-height: 1.6; }
.rp-blog-more { margin-top: auto; color: #1ed760; font-weight: 600; font-size: .9rem; text-decoration: none; }
.rp-blog-empty { color: #b3b3b3; text-align: center; }

/* ---------- TEAM ---------- */
.elementor-element-team1_grid > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 1.75rem !important;
}
.elementor-element-t_shrek,
.elementor-element-t_puss,
.elementor-element-t_carlson,
.elementor-element-t_cheb {
    flex: 0 1 250px !important;
    max-width: 280px;
    background: #181818 !important;
    border: 1px solid #282828;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    text-align: center;
    transition: transform .2s, border-color .2s;
}
.elementor-element-t_shrek:hover,
.elementor-element-t_puss:hover,
.elementor-element-t_carlson:hover,
.elementor-element-t_cheb:hover {
    transform: translateY(-4px);
    border-color: #1ed760;
}
.elementor-element-t_shrek .elementor-widget-image img,
.elementor-element-t_puss .elementor-widget-image img,
.elementor-element-t_carlson .elementor-widget-image img,
.elementor-element-t_cheb .elementor-widget-image img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto .75rem;
    border: 3px solid #282828;
}

/* ---------- FOOTER ---------- */
.elementor-element-footer1 a { color: #b3b3b3; text-decoration: none; }
.elementor-element-footer1 a:hover { color: #1ed760; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    .rp-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .elementor-element-hero1 .elementor-heading-title { font-size: 30px !important; }
    .elementor-element-ch_main,
    .elementor-element-ch_hiphop { flex: 1 1 100% !important; max-width: 100%; }
    .rp-blog-grid { grid-template-columns: 1fr; }
    .elementor-element-t_shrek,
    .elementor-element-t_puss,
    .elementor-element-t_carlson,
    .elementor-element-t_cheb { flex: 1 1 100% !important; max-width: 100%; }
}