/* =============================================
 *  JR Single Post + Single Product — Modern Layout
 * ============================================= */

/* ═══════════════════════════════
 *  SINGLE POST
 * ═══════════════════════════════ */

/* Breadcrumb */
.jr-sp-breadcrumb { font-size: 13px; color: #888; margin-bottom: 20px; }
.jr-sp-breadcrumb a { color: #888 !important; }
.jr-sp-breadcrumb a:hover { color: var(--jr-accent) !important; }
.jr-sp-bc-sep { margin: 0 8px; color: #ccc; }

/* Layout: Main + Sidebar */
.jr-sp-layout { display: flex; gap: 40px; }
.jr-sp-layout--sidebar .jr-sp-main { flex: 1; min-width: 0; }
.jr-sp-layout--sidebar .jr-sp-sidebar { width: 320px; flex-shrink: 0; }

/* Badge */
.jr-sp-badge { display: inline-block; padding: 4px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background: #E94560; color: #fff !important; border-radius: 3px; margin-bottom: 12px; }

/* Title */
.jr-sp-title { font-size: 32px; font-weight: 800; color: #1a1a2e; line-height: 1.25; margin: 0 0 12px; }

/* Meta */
.jr-sp-meta { font-size: 13px; color: #888; margin-bottom: 20px; display: flex; gap: 16px; }

/* Featured image */
.jr-sp-featured-img { margin-bottom: 24px; border-radius: 8px; overflow: hidden; }
.jr-sp-featured-img img { width: 100%; height: auto; display: block; }
.jr-sp-caption { font-size: 12px; color: #999; margin-top: 8px; font-style: italic; }

/* Content */
.jr-sp-content { font-size: 16px; line-height: 1.8; color: #333; margin-bottom: 32px; }
.jr-sp-content p { margin-bottom: 20px; }
.jr-sp-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 20px 0; }
.jr-sp-content h2, .jr-sp-content h3 { color: #1a1a2e; margin: 32px 0 16px; }
.jr-sp-content blockquote { border-left: 4px solid #FFD700; padding: 16px 24px; margin: 24px 0; background: #fafafa; font-style: italic; border-radius: 0 8px 8px 0; }
.jr-sp-content a { color: var(--jr-accent) !important; text-decoration: underline !important; }

/* Share buttons */
.jr-sp-share { display: flex; gap: 8px; margin: 16px 0; }
.jr-sp-share-btn { width: 36px !important; height: 36px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; background: #f0f0f0 !important; border: none !important; box-shadow: none !important; }
.jr-sp-share-btn:hover { transform: scale(1.1); }
.jr-sp-share--fb:hover { background: #1877f2 !important; color: #fff !important; }
.jr-sp-share--tw:hover { background: #1a1a2e !important; color: #fff !important; }
.jr-sp-share--li:hover { background: #0077b5 !important; color: #fff !important; }
.jr-sp-share--email:hover { background: var(--jr-accent) !important; color: #fff !important; }
.jr-sp-share-btn svg { fill: #666; }
.jr-sp-share-btn:hover svg { fill: #fff; }

/* Author box */
.jr-sp-author-box { display: flex; gap: 16px; padding: 24px; background: #f8f9fa; border-radius: 12px; margin: 32px 0; }
.jr-sp-author-avatar img { border-radius: 50%; width: 64px; height: 64px; }
.jr-sp-author-name { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: #1a1a2e; }
.jr-sp-author-bio { font-size: 13px; color: #666; margin: 0; line-height: 1.5; }

/* Related */
.jr-sp-related { margin-top: 40px; padding-top: 32px; border-top: 1px solid #e8e8e8; }
.jr-sp-related-heading { font-size: 20px; font-weight: 700; color: #1a1a2e; margin: 0 0 20px; }
.jr-sp-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.jr-sp-related-card { display: block; }
.jr-sp-related-img { height: 160px; border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.jr-sp-related-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.jr-sp-related-card:hover .jr-sp-related-img img { transform: scale(1.03); }
.jr-sp-related-title { font-size: 14px; font-weight: 600; color: #1a1a2e; margin: 4px 0 0; line-height: 1.3; }

/* Sidebar */
.jr-sp-sidebar-block { margin-bottom: 32px; }
.jr-sp-sidebar-heading { font-size: 18px; font-weight: 800; color: #1a1a2e; text-transform: uppercase; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 3px solid #1a1a2e; display: inline-block; }

/* Sidebar live feed */
.jr-sp-feed-scroll { max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.jr-sp-feed-scroll::-webkit-scrollbar { width: 3px; }
.jr-sp-feed-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
.jr-sp-feed-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; line-height: 1.4; }
.jr-sp-feed-item:hover { padding-left: 4px; }
.jr-sp-feed-date { font-weight: 700; color: var(--jr-accent); flex-shrink: 0; min-width: 40px; font-size: 12px; }
.jr-sp-feed-title { color: #333; font-weight: 500; }

/* Sidebar most read */
.jr-sp-mr-list { list-style: none; margin: 0; padding: 0; }
.jr-sp-mr-list li { padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.jr-sp-mr-list li a { display: flex; gap: 10px; align-items: flex-start; }
.jr-sp-rank { font-size: 22px; font-weight: 800; color: var(--jr-accent); min-width: 24px; opacity: 0.6; line-height: 1; }
.jr-sp-mr-list li a span:last-child { font-size: 13px; color: #333; font-weight: 500; line-height: 1.4; }

/* Newsletter bar */
.jr-sp-newsletter { margin-top: 40px; padding: 40px; background: #FFD700; border-radius: 12px; text-align: center; }
.jr-sp-nl-inner h3 { font-size: 22px; font-weight: 700; color: #1a1a2e; margin: 0 0 6px; }
.jr-sp-nl-inner p { font-size: 14px; color: #333; margin: 0 0 16px; }
.jr-sp-nl-form { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; }
.jr-sp-nl-form input { flex: 1; padding: 12px 16px !important; border: 2px solid #1a1a2e !important; border-radius: 8px !important; font-size: 14px !important; background: #fff !important; color: #1a1a2e !important; }
.jr-sp-nl-form button { padding: 12px 28px !important; background: #1a1a2e !important; color: #FFD700 !important; font-weight: 700 !important; border: none !important; border-radius: 8px !important; cursor: pointer !important; font-size: 14px !important; }
.jr-sp-nl-form button:hover { background: #333 !important; }

/* ═══════════════════════════════
 *  SINGLE PRODUCT
 * ═══════════════════════════════ */
.jr-sprod-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 40px; }

/* Gallery */
.jr-sprod-gallery { display: flex; flex-direction: column; gap: 12px; }
.jr-sprod-main-img { border-radius: 12px; overflow: hidden; background: #f8f8f8; aspect-ratio: 1; }
.jr-sprod-main-img img, .jr-sprod-img-main { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block; }
.jr-sprod-thumbs { display: flex; gap: 8px; }
.jr-sprod-thumb { width: 64px !important; height: 64px !important; border-radius: 8px !important; overflow: hidden; cursor: pointer !important; border: 2px solid transparent !important; padding: 0 !important; background: #f0f0f0 !important; box-shadow: none !important; transition: border-color 0.2s ease !important; }
.jr-sprod-thumb.is-active { border-color: #FFD700 !important; }
.jr-sprod-thumb:hover { border-color: #ddd !important; }
.jr-sprod-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* Variations */
.jr-sprod-variations { margin-bottom: 20px; }
.jr-sprod-var-group { margin-bottom: 14px; }
.jr-sprod-var-label { display: block; font-size: 13px; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.jr-sprod-var-options { display: flex; flex-wrap: wrap; gap: 8px; }
.jr-sprod-var-btn { padding: 8px 20px !important; font-size: 13px !important; font-weight: 600 !important; border: 2px solid #e2e8f0 !important; border-radius: 8px !important; background: #fff !important; color: #1a1a2e !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: none !important; outline: none !important; -webkit-appearance: none !important; }
.jr-sprod-var-btn:hover { border-color: #FFD700 !important; }
.jr-sprod-var-btn.is-selected { background: #FFD700 !important; border-color: #FFD700 !important; color: #1a1a2e !important; }

/* Info */
.jr-sprod-title { font-size: 28px; font-weight: 800; color: #1a1a2e; margin: 0 0 12px; line-height: 1.2; }
.jr-sprod-price { font-size: 24px; font-weight: 700; color: var(--jr-accent); margin-bottom: 16px; }
.jr-sprod-short-desc { font-size: 15px; color: #555; line-height: 1.6; margin-bottom: 24px; }

/* Qty + Add to Cart */
.jr-sprod-actions { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; }
.jr-sprod-qty { display: flex; align-items: center; border: 2px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.jr-sprod-qty-btn { width: 40px !important; height: 44px !important; font-size: 18px !important; background: #f8f9fa !important; border: none !important; cursor: pointer !important; color: #1a1a2e !important; font-weight: 600 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; }
.jr-sprod-qty-btn:hover { background: #e8e8e8 !important; }
.jr-sprod-qty-input { width: 50px !important; height: 44px !important; text-align: center !important; font-size: 16px !important; font-weight: 600 !important; border: none !important; border-left: 1px solid #e2e8f0 !important; border-right: 1px solid #e2e8f0 !important; background: #fff !important; color: #1a1a2e !important; }
.jr-sprod-btn { padding: 14px 40px !important; font-size: 15px !important; font-weight: 700 !important; background: #FFD700 !important; color: #1a1a2e !important; border-radius: 8px !important; border: none !important; cursor: pointer !important; transition: all 0.3s ease !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
.jr-sprod-btn:hover { background: #1a1a2e !important; color: #FFD700 !important; }

/* Meta */
.jr-sprod-meta-list { font-size: 13px; color: #888; margin-top: 20px; padding-top: 20px; border-top: 1px solid #f0f0f0; }
.jr-sprod-meta-item { margin-bottom: 6px; }
.jr-sprod-meta-item span { font-weight: 600; color: #666; }

/* Description */
.jr-sprod-description { margin-bottom: 40px; padding: 32px; background: #f8f9fa; border-radius: 12px; }
.jr-sprod-description h3 { font-size: 20px; font-weight: 700; color: #1a1a2e; margin: 0 0 16px; }
.jr-sprod-desc-content { font-size: 15px; line-height: 1.7; color: #555; }

/* Related products */
.jr-sprod-related { margin-top: 40px; padding-top: 32px; border-top: 1px solid #e8e8e8; }
.jr-sprod-related h3 { font-size: 22px; font-weight: 700; color: #1a1a2e; margin: 0 0 24px; }
.jr-sprod-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.jr-sprod-related-card { text-align: center; }
.jr-sprod-related-img { height: 200px; border-radius: 12px; overflow: hidden; margin-bottom: 10px; background: #f0f0f0; }
.jr-sprod-related-img img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform 0.3s ease; }
.jr-sprod-related-card:hover .jr-sprod-related-img img { transform: scale(1.04); }
.jr-sprod-related-card h4 { font-size: 14px; font-weight: 600; color: #1a1a2e; margin: 0 0 4px; }
.jr-sprod-related-price { font-size: 15px; font-weight: 700; color: var(--jr-accent); }

/* ═══════════════════════════════
 *  SINGLE PROGRAM PAGE
 * ═══════════════════════════════ */

/* ── Hero: Artwork + Info (Africa Radio style) ── */
.jr-sprg-hero {
    display: flex; gap: 40px; max-width: 900px; margin: 0 auto;
    padding: 40px 24px; align-items: flex-start;
}

.jr-sprg-artwork {
    width: 280px; height: 280px; flex-shrink: 0;
    border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.jr-sprg-artwork img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.jr-sprg-info { flex: 1; min-width: 0; }
.jr-sprg-series-label { font-size: 13px; font-weight: 600; color: #006600; display: block; margin-bottom: 4px; }
.jr-sprg-title { font-size: 28px; font-weight: 800; color: #1a1a2e; margin: 0 0 12px; line-height: 1.2; }
.jr-sprg-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: #888; margin-bottom: 16px; }
.jr-sprg-meta strong { color: #1a1a2e; }
.jr-sprg-desc { font-size: 15px; color: #444; line-height: 1.7; margin: 0 0 20px; }

/* Action buttons */
.jr-sprg-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.jr-sprg-play-btn,
button.jr-sprg-play-btn {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    padding: 12px 28px !important; background: #1a1a2e !important; color: #ffffff !important;
    border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important;
    border: none !important; cursor: pointer !important; transition: all 0.2s ease !important;
    box-shadow: none !important; text-decoration: none !important;
}
.jr-sprg-play-btn:hover { background: #333 !important; color: #ffffff !important; }
.jr-sprg-play-btn svg { fill: #ffffff !important; }

.jr-sprg-sub-btn {
    display: inline-flex !important; align-items: center !important;
    padding: 10px 20px !important; border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important; font-size: 14px !important; font-weight: 500 !important;
    color: #333 !important; background: #fff !important; text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.jr-sprg-sub-btn:hover { border-color: #1a1a2e !important; }

.jr-sprg-share-btn {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    padding: 10px 20px !important; border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important; font-size: 14px !important; font-weight: 500 !important;
    color: #333 !important; background: #fff !important; cursor: pointer !important;
    transition: all 0.2s ease !important; box-shadow: none !important;
}
.jr-sprg-share-btn:hover { border-color: #1a1a2e !important; }

/* Episodes list — Africa Radio clean style */
.jr-sprg-episodes { max-width: 900px; margin: 0 auto; padding: 0 24px 40px; }
.jr-sprg-section-title { font-size: 20px; font-weight: 700; color: #1a1a2e; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
.jr-sprg-no-episodes { padding: 32px; background: #f8f9fa; border-radius: 12px; color: #999; text-align: center; font-size: 14px; }

.jr-sprg-episode {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s ease; cursor: pointer;
}
.jr-sprg-episode:hover { background: #fafafa; padding-left: 8px; }
.jr-sprg-episode:last-child { border-bottom: none; }

.jr-sprg-ep-info { flex: 1; min-width: 0; }
.jr-sprg-ep-info h4 { font-size: 15px; font-weight: 500; color: #1a1a2e; margin: 0 0 2px; line-height: 1.4; }
.jr-sprg-ep-meta { font-size: 12px; color: #aaa; }

.jr-sprg-ep-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.jr-sprg-ep-play,
button.jr-sprg-ep-play,
.jr-sprg-ep-play:hover,
.jr-sprg-ep-play:focus,
.jr-sprg-ep-play:active {
    width: 40px !important; height: 40px !important; min-width: 40px !important;
    border-radius: 50% !important; background: #1a1a2e !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important; border: none !important; box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    transition: transform 0.2s ease !important; padding: 0 !important;
    -webkit-appearance: none !important;
}
.jr-sprg-ep-play:hover { transform: scale(1.1) !important; }
.jr-sprg-ep-play svg,
.jr-sprg-ep-play:hover svg,
.jr-sprg-ep-play:active svg { fill: #ffffff !important; width: 16px !important; height: 16px !important; }

.jr-sprg-ep-duration { font-size: 13px; color: #888; font-weight: 500; white-space: nowrap; }

/* More Programmes */
.jr-sprg-more { padding: 48px 24px; text-align: center; }
.jr-sprg-more-heading { font-size: 28px; font-weight: 800; color: #1a1a2e; margin: 0 0 32px; }
.jr-sprg-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; }

/* Yellow card style */
.jr-sprg-more-card--yellow { display: flex; flex-direction: column; align-items: center; text-align: center; background: #FFD700; border-radius: 12px; padding: 24px 16px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.jr-sprg-more-card--yellow:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.jr-sprg-mc-title { font-size: 18px; font-weight: 800; color: #1a1a2e; margin: 0 0 4px; font-style: italic; }
.jr-sprg-mc-host { font-size: 13px; font-weight: 600; color: #E94560; display: block; margin-bottom: 6px; }
.jr-sprg-mc-desc { font-size: 12px; color: #333; line-height: 1.4; margin: 0 0 12px; }
.jr-sprg-mc-photo { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin: 0 auto 10px; border: 3px solid rgba(255,255,255,0.5); }
.jr-sprg-mc-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50%; }
.jr-sprg-mc-time { font-size: 12px; font-weight: 600; color: #E94560; }

/* Overlay card style */
.jr-sprg-more-card--overlay { position: relative; height: 240px; border-radius: 12px; overflow: hidden; display: flex; align-items: flex-end; }
.jr-sprg-more-card--overlay .jr-sprg-mc-img { position: absolute; inset: 0; }
.jr-sprg-more-card--overlay .jr-sprg-mc-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.3s ease; }
.jr-sprg-more-card--overlay:hover .jr-sprg-mc-img img { transform: scale(1.05); }
.jr-sprg-more-card--overlay .jr-sprg-mc-overlay { position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,0.7) 100%); z-index: 1; }
.jr-sprg-more-card--overlay .jr-sprg-mc-info { position: relative; z-index: 2; padding: 16px; width: 100%; }
.jr-sprg-more-card--overlay .jr-sprg-mc-title { color: #fff; font-style: normal; }
.jr-sprg-more-card--overlay .jr-sprg-mc-time { color: #FFD700; }

/* ═══════════════════════════════
 *  RESPONSIVE
 * ═══════════════════════════════ */
@media (max-width: 1024px) {
    .jr-sp-layout { flex-direction: column; }
    .jr-sp-layout--sidebar .jr-sp-sidebar { width: 100%; }
    .jr-sprod-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .jr-sp-title { font-size: 24px; }
    .jr-sp-related-grid { grid-template-columns: 1fr; }
    .jr-sprod-layout { grid-template-columns: 1fr; gap: 24px; }
    .jr-sprg-hero { flex-direction: column; gap: 24px; padding: 24px 16px; }
    .jr-sprg-artwork { width: 100%; height: auto; aspect-ratio: 1; max-width: 280px; margin: 0 auto; }
    .jr-sprg-title { font-size: 22px; }
    .jr-sprg-actions { flex-direction: column; }
    .jr-sprg-more-grid { grid-template-columns: 1fr; max-width: 320px; }
    .jr-sprg-episode { flex-direction: row; }
    .jr-sprod-title { font-size: 22px; }
    .jr-sprod-related-grid { grid-template-columns: repeat(2, 1fr); }
    .jr-sp-nl-form { flex-direction: column; }
}