/* Beatz Convert Premium — front-end styles.
   Scoped under .playdrop so nothing leaks into the theme. */

.playdrop {
    margin: 28px 0;
    font-family: inherit;
    line-height: 1.4;
}

/* ---------------------------------- heading --------------------------------- */

.playdrop-heading {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
}
.playdrop-sub {
    margin: 0 0 14px;
    font-size: .875rem;
    opacity: .7;
}

/* ---------------------------------- embed ----------------------------------- */

.playdrop-embed {
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    background: #131313;
    line-height: 0;
}
.playdrop-embed iframe {
    display: block;
    width: 100% !important;
    border: 0;
}

/* -------------------------------- pill buttons ------------------------------ */

.playdrop-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.playdrop-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--pd-brand, #333);
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.playdrop-btn:hover,
.playdrop-btn:focus {
    color: #fff !important;
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.playdrop-btn-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 12px;
}
.playdrop-btn-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}
.playdrop-btn-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}
.playdrop-btn-small {
    font-size: .72rem;
    font-weight: 500;
    opacity: .92;
}
.playdrop-btn-big {
    font-size: .98rem;
    font-weight: 800;
    letter-spacing: .02em;
}

/* --------------------------- platform switcher state ------------------------ */

.playdrop-buttons.is-switching .playdrop-btn {
    cursor: pointer;
    opacity: .82;
}
.playdrop-buttons.is-switching .playdrop-btn:hover,
.playdrop-buttons.is-switching .playdrop-btn:focus,
.playdrop-buttons.is-switching .playdrop-btn.is-active {
    opacity: 1;
}
/* The gap ring is drawn in the platform's own colour at low opacity rather
   than in "page background white", which was only ever right on a light page. */
.playdrop-buttons.is-switching .playdrop-btn.is-active {
    box-shadow: 0 0 0 3px rgba(128, 128, 128, .35), 0 0 0 5px var(--pd-brand, #333);
}

.playdrop-switch-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 10px 2px 0;
    font-size: .82rem;
    opacity: .7;
}
.playdrop-open-out {
    text-decoration: none;
    font-weight: 600;
    color: inherit;
    border-bottom: 1px solid currentColor;
}

/* ------------------------------- download block ----------------------------- */

.playdrop-download-block {
    margin-top: 20px;
}

.playdrop-mini {
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    padding: 16px 18px 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.playdrop-mini-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.playdrop-mini-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.playdrop-mini-title {
    font-weight: 700;
    font-size: 1.02rem;
    color: #16181a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.playdrop-mini-artist {
    font-size: .9rem;
    color: #6b7176;
    margin-top: 2px;
}

.playdrop-mini-play {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--pd-play-bg, #1a8a3c);
    color: var(--pd-play-fg, #fff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: filter .15s ease, transform .12s ease;
}
.playdrop-mini-play:hover { filter: brightness(1.08); }
.playdrop-mini-play:active { transform: scale(.95); }
.playdrop-mini-play svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}
.playdrop-icon-pause { display: none; }
.playdrop-mini.is-playing .playdrop-icon-play  { display: none; }
.playdrop-mini.is-playing .playdrop-icon-pause { display: block; }

.playdrop-mini-bar {
    position: relative;
    height: 4px;
    margin: 16px 0 8px;
    border-radius: 999px;
    background: #e3e6e8;
    cursor: pointer;
}
.playdrop-mini-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 999px;
    background: var(--pd-play-bg, #1a8a3c);
    transition: width .1s linear;
}
.playdrop-mini-times {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    color: #8a9096;
    font-variant-numeric: tabular-nums;
}

.playdrop-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 16px auto 0;
    max-width: 330px;
    padding: 16px 26px;
    border-radius: 999px;
    background: var(--pd-dl-bg, #1a8a3c);
    color: var(--pd-dl-fg, #fff) !important;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .02em;
    text-decoration: none !important;
    box-shadow: 0 4px 14px var(--pd-dl-glow, rgba(26, 138, 60, .28));
    transition: transform .15s ease, filter .15s ease;
}
.playdrop-download:hover,
.playdrop-download:focus {
    color: var(--pd-dl-fg, #fff) !important;
    transform: translateY(-2px);
    filter: brightness(1.07);
}
.playdrop-download svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ----------------------------- "See more" collapse -------------------------- */

.playdrop-collapse {
    position: relative;
    margin-bottom: 8px;
}
.playdrop-collapse-inner {
    max-height: var(--pd-collapse, 420px);
    overflow: hidden;
    transition: max-height .35s ease;
}
.playdrop-collapse.is-open .playdrop-collapse-inner {
    max-height: none;
}
.playdrop-collapse-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 44px;
    height: 110px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .96) 88%);
    /* Replaced by the mask below wherever masks are supported. */
}
.playdrop-collapse.is-open .playdrop-collapse-fade {
    display: none;
}
.playdrop-more {
    display: block;
    margin: 10px auto 0;
    padding: 10px 26px;
    border: 1px solid rgba(128, 128, 128, .38);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.playdrop-more:hover {
    background: rgba(128, 128, 128, .12);
    border-color: rgba(128, 128, 128, .7);
}

/* ---------------------------------- mobile ---------------------------------- */

@media (max-width: 560px) {
    .playdrop-buttons { grid-template-columns: 1fr; }
    .playdrop-mini { padding: 14px 14px 10px; }
    .playdrop-download { max-width: none; }
}

/* ------------------------------- dark themes -------------------------------- */

/* Where masks are supported, fade the text itself to transparent instead of
   covering it with a white panel — then the fade is right on any background,
   and on any theme, without guessing what colour the page is. */
@supports (mask-image: linear-gradient(#000, transparent)) {
    .playdrop-collapse-fade { display: none; }
    .playdrop-collapse:not(.is-open) .playdrop-collapse-inner {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent 100%);
                mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent 100%);
    }
}

/* ------------------------------ Track details ------------------------------- */

.playdrop-details {
    margin: 22px 0;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* A clear line between the details list and the article, on whichever side the
   article is. Without it the last row and the first paragraph read as one run
   of text and the list stops looking like a panel. */
.playdrop-details.is-above {
    padding-bottom: 20px;
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(128, 128, 128, .3);
}
.playdrop-details.is-below {
    padding-top: 20px;
    margin-top: 26px;
    border-top: 1px solid rgba(128, 128, 128, .3);
}
/* The last row already carries its own spacing; the rule needs the room, not
   a double gap. */
.playdrop-details h2.playdrop-detail:last-child { margin-bottom: 0; }
.playdrop-details-head {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 6px solid rgba(128, 128, 128, .18);
    padding-bottom: 6px;
    margin-bottom: 14px;
    opacity: 1 !important;
    animation: none !important;
    visibility: visible !important;
}
/* The short coloured stripe on the left, following the play button's colour so
   the page reads as one design rather than two unrelated green things. */
.playdrop-details-head::before {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 34px;
    border-radius: 2px;
    background: var(--pd-play-bg, #1a8a3c);
}
/* The title sits beside its stripe, at every width.
 *
 * It was right-aligned to copy the reference screenshot, which put it at the
 * far end of a long rule. That reads as one heading on a phone-width column
 * and as two unrelated things on a desktop one, where the gap between the
 * stripe and the words is most of the page. Left, next to the stripe, is the
 * same on both — and cannot be pushed off the edge.
 *
 * min-width:0 stops a flex child refusing to shrink and overflowing. */
.playdrop-details .playdrop-details-head span {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.2;
    overflow-wrap: break-word;
    color: var(--pd-detail-head, inherit) !important;
}

/* Every row is an h2, so the theme's own h2 rules have to be overridden or the
   list inherits eight enormous headings with big margins.
 *
 * The three lines at the end matter more than they look. A theme is free to
 * colour its headings differently from its body text, or to fade them in as
 * you scroll — and either one leaves this list washed out or invisible while
 * the values beside it show up fine. Taking the colour from the surrounding
 * text instead of from the theme's heading rule, and refusing the fade-in,
 * is what keeps the labels readable on a theme this plugin has never seen. */
.playdrop-details h2.playdrop-detail {
    margin: 0 0 19px;
    padding: 0;
    border: 0;
    font-size: 1.15rem;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: inherit !important;
    opacity: 1 !important;
    animation: none !important;
    visibility: visible !important;
    transform: none;
}
/* Written with the section class in front of every one of these, and marked
   !important, so a theme rule cannot repaint the list.
 *
 * !important is normally a smell. It earns its place here: this markup is
 * dropped into whatever theme a site happens to run, several of which colour,
 * fade or animate every h2 in the post body, and any of those leaves the
 * labels washed out while the values beside them look fine. The colours stay
 * fully controllable — they come from the CSS variables that Settings →
 * Beatz Convert Premium → Colours writes, so overriding them is still a setting, not a
 * stylesheet fight. */
.playdrop-details h2.playdrop-detail .playdrop-detail-label {
    color: var(--pd-detail-label, inherit) !important;
    font-weight: 600;
}
.playdrop-details h2.playdrop-detail .playdrop-detail-value,
.playdrop-details h2.playdrop-detail .playdrop-detail-value a {
    color: var(--pd-detail-a, #2f6bff) !important;
    font-weight: 700;
    text-decoration: none;
}
.playdrop-details h2.playdrop-detail .playdrop-detail-value a:hover,
.playdrop-details h2.playdrop-detail .playdrop-detail-value a:focus {
    text-decoration: underline;
}
/* Alternating value colour, as on the blogs this is modelled on. */
.playdrop-details h2.playdrop-detail:nth-of-type(even) .playdrop-detail-value,
.playdrop-details h2.playdrop-detail:nth-of-type(even) .playdrop-detail-value a {
    color: var(--pd-detail-b, #e5484d) !important;
}

@media (max-width: 560px) {
    .playdrop-details .playdrop-details-head span {
        font-size: 1.25rem;
    }
    .playdrop-details-head {
        gap: 10px;
        border-bottom-width: 4px;
    }
    .playdrop-details-head::before { height: 26px; width: 8px; }
    .playdrop-details h2.playdrop-detail {
        font-size: 1.02rem;
        margin-bottom: 15px;
    }
}

/* ===========================================================================
 * 1.3.0 — the download button, the player card, and the pictures in the post.
 *
 * Appended rather than woven into the rules above, so everything in this file
 * can be read as one change and removed as one change. Each block below is
 * driven by a class the renderer only adds when the matching setting is not
 * the default, which means a site that never opens these settings gets byte
 * for byte the same page as before.
 * =========================================================================== */

/* ------------------------------ button shape ------------------------------- */

.playdrop-download.pd-b-pill    { border-radius: 999px; }
.playdrop-download.pd-b-rounded { border-radius: 10px; }
.playdrop-download.pd-b-square  { border-radius: 0; }

.playdrop-download.pd-b-block {
    border-radius: 10px;
    max-width: none;
    width: 100%;
}

.playdrop-download.pd-b-outline {
    background: transparent;
    color: var(--pd-dl-bg, #1a8a3c) !important;
    border: 2px solid var(--pd-dl-bg, #1a8a3c);
    box-shadow: none;
}
.playdrop-download.pd-b-outline:hover,
.playdrop-download.pd-b-outline:focus {
    color: var(--pd-dl-bg, #1a8a3c) !important;
    background: rgba(128, 128, 128, .1);
}

/* A plain link follows the paragraph it sits in, which is the one case where
   the alignment setting deliberately does not apply. */
.playdrop-download.pd-b-plain {
    display: inline-flex;
    background: transparent;
    color: var(--pd-dl-bg, #1a8a3c) !important;
    box-shadow: none;
    padding: 0;
    margin: 16px 0 0;
    max-width: none;
    font-weight: 700;
    text-decoration: underline !important;
}
.playdrop-download.pd-b-plain:hover,
.playdrop-download.pd-b-plain:focus {
    transform: none;
    color: var(--pd-dl-bg, #1a8a3c) !important;
}

/* ------------------------------- button size ------------------------------- */

/* Small keeps the button to its own width, which is the fix for a button that
   feels oversized on a phone — the full-width stretch is what does that, not
   the font size. */
.playdrop-download.pd-s-small {
    padding: 11px 20px;
    font-size: .92rem;
    max-width: max-content;
}
.playdrop-download.pd-s-large {
    padding: 20px 34px;
    font-size: 1.1rem;
    max-width: 420px;
}

/* ----------------------------- button position ----------------------------- */

/* Automatic margins rather than text-align, because a theme's own paragraph
   alignment would otherwise win and the setting would look broken. */
.playdrop-download.pd-a-left   { margin-left: 0;    margin-right: auto; }
.playdrop-download.pd-a-center { margin-left: auto; margin-right: auto; }
.playdrop-download.pd-a-right  { margin-left: auto; margin-right: 0;    }

@media (max-width: 560px) {
    /* The stylesheet above lets the button go full width on a phone. These two
       are the deliberate exceptions. */
    .playdrop-download.pd-s-small { max-width: max-content; }
    .playdrop-download.pd-b-block { max-width: none; width: 100%; }
    .playdrop-download.pd-b-plain { max-width: none; }
}

/* ------------------------------- player card ------------------------------- */

.playdrop-mini.pd-dark {
    background: #17191c;
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.playdrop-mini.pd-dark .playdrop-mini-title  { color: #f2f4f6; }
.playdrop-mini.pd-dark .playdrop-mini-artist { color: #9aa3ab; }
.playdrop-mini.pd-dark .playdrop-mini-bar    { background: rgba(255, 255, 255, .16); }
.playdrop-mini.pd-dark .playdrop-mini-times  { color: #8d959c; }

/* Follows the reader's own setting. Light by day, dark by night, without
   anybody choosing for them. */
@media (prefers-color-scheme: dark) {
    .playdrop-mini.pd-auto {
        background: #17191c;
        border-color: rgba(255, 255, 255, .14);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    }
    .playdrop-mini.pd-auto .playdrop-mini-title  { color: #f2f4f6; }
    .playdrop-mini.pd-auto .playdrop-mini-artist { color: #9aa3ab; }
    .playdrop-mini.pd-auto .playdrop-mini-bar    { background: rgba(255, 255, 255, .16); }
    .playdrop-mini.pd-auto .playdrop-mini-times  { color: #8d959c; }
}

/* No card at all: the controls sit straight on the page, for a theme whose
   own design already provides the panel. */
.playdrop-mini.pd-bare {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* --------------------------- pictures in the post -------------------------- */

/*
 * One size for every picture.
 *
 * The problem this solves: a post carries a 1400px promo shot and a 200px
 * scan of a tracklist, and the page lurches between them. Here every picture
 * is given the same box, so the page reads evenly however the pictures
 * arrived.
 *
 * aspect-ratio rather than a fixed height, so the box stays the same shape
 * when the screen is narrower than the cap and there is never a stretched
 * image on a phone. object-fit: cover fills that box without distorting
 * anything — a wide photo is cropped at the sides rather than squashed.
 *
 * Skipped on purpose: smileys, emoji, avatars, anything a theme has marked
 * as an icon, and anything you add pd-keep to yourself when one picture
 * really does need to be left alone.
 */
.playdrop-body img:where(:not(.wp-smiley):not(.emoji):not(.avatar):not(.pd-keep):not([width="1"])) {
    display: block;
    width: 100%;
    max-width: var(--pd-img, 420px);
    height: auto;
    aspect-ratio: var(--pd-img-ratio, 1 / 1);
    object-fit: cover;
    object-position: center;
    margin: 18px auto;
    border-radius: var(--pd-img-radius, 12px);
    background: rgba(128, 128, 128, .08);
}

/* Keep each picture's own shape: the width is still shared, the height is the
   picture's own. object-fit has nothing to do in this mode. */
.playdrop-body.pd-img-free img:where(:not(.wp-smiley):not(.emoji):not(.avatar):not(.pd-keep)) {
    aspect-ratio: auto;
    object-fit: unset;
}

/*
 * The plugin's own blocks are never touched by the rules above.
 *
 * When the block is placed automatically it sits inside the content, so it
 * ends up inside this wrapper — and a cover thumbnail inside the player has no
 * business being cropped to a square by a setting about the write-up. The
 * selectors above are written with :where(), which contributes no specificity,
 * precisely so these two lines can win without a single !important.
 */
.playdrop-body .playdrop img,
.playdrop-body .playdrop-details img {
    width: auto;
    max-width: 100%;
    aspect-ratio: auto;
    object-fit: unset;
    margin: 0;
    border-radius: 0;
    background: none;
}

/* Blocks and figures centre with the picture, or the caption ends up under the
   left edge of a centred image. */
.playdrop-body figure,
.playdrop-body .wp-block-image,
.playdrop-body .wp-caption {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.playdrop-body figcaption,
.playdrop-body .wp-caption-text {
    text-align: center;
    font-size: .88rem;
    opacity: .75;
}

/* Embeds pasted into a write-up overflow a narrow screen otherwise. */
.playdrop-body iframe,
.playdrop-body video,
.playdrop-body embed {
    max-width: 100%;
}