/**
 * File:         playlist-ux.css
 * Package:      streamtube-child
 * Sub-package:  functions_php/SPA
 * Version:      v1.0.2
 * Last Updated: 2026-06-05
 *
 * Purpose: Playlist (Collection) UX styles that need to load on
 *          BOTH the single-video page AND the collection archive
 *          page. spa-transitions.css is gated to single-video so
 *          rules here live separately to cover the archive too.
 *
 * Selectors/Blocks:
 *   - .term-description           Playlist description block (rendered
 *                                  by streamtube-core playlist content
 *                                  widget + collection archive template).
 *                                  Clamped to 1 line; expands on click.
 *   - .term-description-more      Inline "more…/less" toggle button
 *                                  injected by playlist-ux.js.
 *
 * Bug fixes covered:
 *   - Bug 3 (Monday #2730698753) — playlist description first-line +
 *     "more…" toggle. Same UX pattern as the video description block.
 *
 * Changelog:
 *   v1.0.2 — "more…" button colour switched from blue (#007bff)
 *            to Witness21 golden yellow (#f5a623, hover #d68910).
 *            Font-weight bumped 500 → 600 for stronger visual cue.
 *
 *   v1.0.1 — Switched from -webkit-line-clamp (which clipped the
 *            appended "more…" button off-screen) to a FLEX layout:
 *            <p> shrinks with text-overflow:ellipsis, button stays
 *            visible alongside. Expanded state goes back to block.
 *   v1.0.0 — initial release with Bug 3 description clamp + toggle.
 */

/* v1.0.1 — Switched from -webkit-line-clamp to a FLEX layout because
 * line-clamp + overflow:hidden also clipped the appended "more…"
 * <button> — it rendered at the right edge of the container, often
 * outside the visible area. With flex the <p> is the flex item that
 * clips via text-overflow: ellipsis, and the button sits alongside
 * (flex:0 auto) so it's always visible.
 *
 * When .is-expanded toggles, switch to block and let the <p> wrap. */
.term-description {
    display: flex;
    align-items: baseline;
    gap: 6px;
    cursor: pointer;
    overflow: hidden;
}
.term-description > p {
    flex: 1 1 auto;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;             /* required for flex children to shrink */
}
/* v1.0.2 — Witness21 golden yellow brand colour. */
.term-description-more {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 0;
    color: #f5a623;
    cursor: pointer;
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}
.term-description-more:hover,
.term-description-more:focus {
    color: #d68910;
    text-decoration: none;
}

/* Expanded state — let the description flow naturally. */
.term-description.is-expanded {
    display: block;
    overflow: visible;
}
.term-description.is-expanded > p {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    display: block;
    margin-bottom: 8px;
}
.term-description.is-expanded .term-description-more {
    display: inline-block;
}