/* =========================================================
   MBWS Audio – Frontend Stylesheet
   style.css
   ========================================================= */

/* ── CSS Variables ──────────────────────────────────────── */
:root {
    --mbws-primary:       var(--fs-color-primary);
    --mbws-primary-dark:  var(--fs-color-primary);
    --mbws-accent:        #f0a500;
    --mbws-bg:            #ffffff;
    --mbws-bg-card:       none;
    --mbws-bg-card-hover: none;
    --mbws-border:        #e0e4ec;
    --mbws-text:          #2c3140;
    --mbws-text-muted:    #6b7280;
    --mbws-text-small:    0.82rem;
    --mbws-radius:        0;
    --mbws-radius-sm:     0;
    --mbws-shadow:        none;
    --mbws-shadow-hover:  none;
    --mbws-gap:           1.25rem;
    --mbws-transition:    .22s ease;
    --mbws-col:           3;           /* overridden inline */
}

/* ── Reset box-sizing ───────────────────────────────────── */
.mbws-audio-wrap *,
.mbws-audio-wrap *::before,
.mbws-audio-wrap *::after {
    box-sizing: border-box;
}

/* ── Wrapper ────────────────────────────────────────────── */
.mbws-audio-wrap {
    width: 100%;
    margin: 0 auto;
}

/* ── Grid ───────────────────────────────────────────────── */
.mbws-audio-grid {
    display: grid;
    grid-template-columns: repeat(var(--mbws-col, 3), 1fr);
    gap: var(--mbws-gap);
    align-items: start;
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
    .mbws-audio-grid {
        grid-template-columns: repeat(
            min(var(--mbws-col, 3), 2),
            1fr
        );
    }
}
@media (max-width: 640px) {
    .mbws-audio-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Audio Item Card ────────────────────────────────────── */
.mbws-audio-item {
    background:    var(--mbws-bg-card);
    border:        1px solid var(--mbws-border);
    border-radius: var(--mbws-radius);
    box-shadow:    var(--mbws-shadow);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:    box-shadow var(--mbws-transition),
                   transform  var(--mbws-transition),
                   border-color var(--mbws-transition);
}
.mbws-audio-item:hover {
    box-shadow:   var(--mbws-shadow-hover);
    transform:    translateY(-3px);
    border-color: var(--mbws-primary);
    background:   var(--mbws-bg-card-hover);
}

/* Thumbnail */
.mbws-audio-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--mbws-border);
}
.mbws-audio-thumb .mbws-thumb-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .4s ease;
}
.mbws-audio-item:hover .mbws-thumb-img {
    transform: scale(1.04);
}

/* Body */
.mbws-audio-body {
    padding:        1rem 1.1rem 1.2rem;
    display:        flex;
    flex-direction: column;
    gap:            .5rem;
    flex: 1;
}
.mbws-audio-body .dots {
    margin-left: 5px;
}
/* Title */
.mbws-audio-title {
    font-size:   1rem;
    font-weight: 700;
    margin:      0;
    line-height: 1.35;
    color:       var(--mbws-text);
}
.mbws-audio-title a {
    color:           inherit;
    text-decoration: none;
    transition:      color var(--mbws-transition);
    font-size: 1.4rem;
    color: var(--fs-color-primary);
}
.mbws-audio-title a:hover {
    color: var(--mbws-primary);
}

/* Note label */
.mbws-audio-note-label {
    display:       inline-block;
    /* background:    var(--mbws-accent);
    color:         #fff;
    font-size:     var(--mbws-text-small);
    font-weight:   600;
    padding:       .18em .55em;
    border-radius: var(--mbws-radius-sm);
    line-height:   1.5;
    max-width:     100%;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap; */
}

/* Excerpt */
.mbws-audio-excerpt {
    color:     var(--mbws-text-muted);
    font-size: var(--mbws-text-small);
    margin:    0;
    line-height: 1.6;
    display:   -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:  hidden;
}
.mbws-dots {
    letter-spacing: .15em;
    color: var(--mbws-text-muted);
}

/* ── Audio Player ───────────────────────────────────────── */
.mbws-audio-player {
    display:     flex;
    align-items: center;
    gap:         .55rem;
    background:  rgba(26,115,232,.06);
    border:      1px solid rgba(26,115,232,.14);
    border-radius: var(--mbws-radius-sm);
    padding:     .45rem .65rem;
    margin-top:  .2rem;
}

/* Play button */
.mbws-play-btn {
    width:         36px;
    height:        36px;
    border-radius: 50%;
    border:        none;
    background:    var(--mbws-primary);
    color:         #fff;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    transition:    background var(--mbws-transition),
                   transform  var(--mbws-transition);
    padding:       0;
    min-height: unset;
    margin: 0;
}
.mbws-play-btn:hover {
    background: var(--mbws-primary-dark);
    transform:  scale(1.08);
}
.mbws-play-btn:active {
    transform: scale(.96);
}
.mbws-play-btn.is-playing {
    background: var(--mbws-accent);
}
.mbws-play-icon.mbws-icon-play {
    margin-left: 3px;
}

/* Progress */
.mbws-progress-wrap {
    flex:        1;
    display:     flex;
    align-items: center;
    gap:         .4rem;
    min-width:   0;
}
.mbws-progress-bar {
    flex:          1;
    height:        5px;
    background:    var(--mbws-border);
    border-radius: 99px;
    cursor:        pointer;
    overflow:      hidden;
    position:      relative;
}
.mbws-progress-fill {
    width:         0%;
    height:        100%;
    background:    var(--mbws-primary);
    border-radius: 99px;
    transition:    width .25s linear;
}
.mbws-time-current,
.mbws-time-total,
.mbws-time-sep {
    font-size:   .72rem;
    color:       var(--mbws-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mbws-no-audio-msg {
    font-size: var(--mbws-text-small);
    color:     var(--mbws-text-muted);
    font-style: italic;
}

/* ── FAQ Preview ────────────────────────────────────────── */
.mbws-audio-faq-preview {
    border-top:  1px dashed var(--mbws-border);
    padding-top: .5rem;
    margin-top:  .2rem;
}
.mbws-faq-item {
    font-size: var(--mbws-text-small);
}
.mbws-faq-question {
    cursor:      pointer;
    font-weight: 600;
    color:       var(--mbws-text);
    user-select: none;
    list-style:  none;
    padding:     .2rem 0;
}
.mbws-faq-question::-webkit-details-marker { display: none; }
.mbws-faq-question::before {
    content:      '▶ ';
    font-size:    .65em;
    color:        var(--mbws-primary);
    transition:   transform var(--mbws-transition);
    display:      inline-block;
}
details[open] .mbws-faq-question::before {
    transform: rotate(90deg);
}
.mbws-faq-answer {
    margin:      .25rem 0 0 1rem;
    color:       var(--mbws-text-muted);
    font-size:   var(--mbws-text-small);
    line-height: 1.55;
}
.mbws-faq-more {
    display:     inline-block;
    font-size:   var(--mbws-text-small);
    color:       var(--mbws-primary);
    margin-top:  .3rem;
    text-decoration: none;
}
.mbws-faq-more:hover { text-decoration: underline; }

/* ── Term badges ────────────────────────────────────────── */
.mbws-audio-terms {
    display:   flex;
    flex-wrap: wrap;
    gap:       .3rem;
    margin-top: auto;
    padding-top: .4rem;
}
.mbws-term-badge {
    font-size:     .72rem;
    font-weight:   600;
    color:         var(--mbws-primary);
    background:    rgba(26,115,232,.08);
    border:        1px solid rgba(26,115,232,.2);
    border-radius: 99px;
    padding:       .15em .65em;
    text-decoration: none;
    transition:    background var(--mbws-transition),
                   color      var(--mbws-transition);
}
.mbws-term-badge:hover {
    background: var(--mbws-primary);
    color:      #fff;
}

/* ── No results ─────────────────────────────────────────── */
.mbws-no-results {
    grid-column: 1 / -1;
    text-align:  center;
    color:       var(--mbws-text-muted);
    padding:     2rem 0;
    font-size:   .95rem;
}

/* ── Pagination ─────────────────────────────────────────── */
.mbws-pagination {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             .4rem;
    margin-top:      1.75rem;
}

/* paginate_links styles */
.mbws-pagination .page-numbers,
.mbws-pagination .mbws-page-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       36px;
    height:          36px;
    padding:         0 .6rem;
    border-radius:   var(--mbws-radius-sm);
    border:          1px solid var(--mbws-border);
    background:      var(--mbws-bg);
    color:           var(--mbws-text);
    font-size:       .88rem;
    font-weight:     500;
    text-decoration: none;
    cursor:          pointer;
    transition:      background var(--mbws-transition),
                     color      var(--mbws-transition),
                     border-color var(--mbws-transition);
}
.mbws-pagination .page-numbers:hover,
.mbws-pagination .mbws-page-btn:hover:not(:disabled) {
    background:   var(--mbws-primary);
    color:        #fff;
    border-color: var(--mbws-primary);
}
.mbws-pagination .current,
.mbws-pagination .mbws-page-btn.active {
    background:   var(--mbws-primary);
    color:        #fff;
    border-color: var(--mbws-primary);
}
.mbws-pagination .mbws-page-btn:disabled,
.mbws-pagination .mbws-page-btn[disabled] {
    opacity: .4;
    cursor:  not-allowed;
}
.mbws-pagination .dots { border: none; background: none; cursor: default; }

/* ── Loading spinner (AJAX) ─────────────────────────────── */
.mbws-loading {
    position:   relative;
    min-height: 120px;
}
.mbws-loading::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(255,255,255,.7);
    display:    flex;
    z-index:    10;
}
.mbws-spinner {
    display:         block;
    width:           36px;
    height:          36px;
    border:          3px solid var(--mbws-border);
    border-top-color: var(--mbws-primary);
    border-radius:   50%;
    animation:       mbwsSpin .7s linear infinite;
    margin:          2rem auto;
}
@keyframes mbwsSpin {
    to { transform: rotate(360deg); }
}