/*
 * Music and video players, shared by every template theme (master copy in
 * shared/embeds/). The card takes the theme's font and text colour, and is the
 * same size as the player it turns into, so nothing jumps on play.
 */

.aie {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--aie-w, none);
    margin: 0 0 1.5em;
    color: inherit;
}
.aie *, .aie *::before, .aie *::after { box-sizing: border-box; }
.aie--video { aspect-ratio: 16 / 9; background: #000; }
.aie--row, .aie--tall { height: var(--aie-h, 152px); }

/* Inside WordPress's Embed block: drop its aspect-ratio spacer and our margin. */
.wp-block-embed__wrapper:has(> .aie)::before { content: none; display: none; }
.wp-block-embed__wrapper > .aie, .aie-figure > .aie { margin: 0; }
.aie-figure { margin: 0 0 1.5em; }

.aie iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.aie.is-playing:not(.aie--video) { background: transparent; }

/* The card */
.aie .aie__play {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    background: color-mix(in srgb, currentColor 4%, transparent);
    transition: background-color .2s ease, border-color .2s ease;
}
.aie .aie__play:hover { color: inherit; text-decoration: none; background: color-mix(in srgb, currentColor 9%, transparent); border-color: color-mix(in srgb, currentColor 35%, transparent); }
.aie .aie__play:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.aie .aie__art { position: relative; display: block; min-width: 0; height: 100%; overflow: hidden; }
.aie .aie__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; margin: 0; border: 0; border-radius: 0; }
.aie .aie__img--blank { background: color-mix(in srgb, currentColor 10%, transparent); }

.aie .aie__text { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.aie .aie__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.aie .aie__via { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }

.aie .aie__icon {
    position: relative;
    display: block;
    flex: none;
    width: 3rem;
    height: 3rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    transition: background-color .2s ease, color .2s ease;
}
.aie .aie__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    width: .8rem;
    height: .95rem;
    transform: translate(-50%, -50%);
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Audio players: cover | text | play. Tall ones (albums, playlists) stack on phones,
   and Bandcamp's fixed-width big-artwork player always stacks. */
.aie--row .aie__play, .aie--tall .aie__play {
    grid-template-columns: min(var(--aie-h, 152px), 40%) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1.25rem;
    padding-right: 1.25rem;
}
.aie--row.aie--bandcamp .aie__play { grid-template-columns: min(var(--aie-h, 120px), 30%) minmax(0, 1fr) auto; }

@media (max-width: 600px) {
    .aie--tall .aie__play { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; padding-right: 0; }
    .aie--tall .aie__art { grid-column: 1 / -1; }
    .aie--tall .aie__text { padding: 1rem 1.25rem; }
    .aie--tall .aie__icon { margin-right: 1.25rem; }
}
.aie--tall[style*="--aie-w"] .aie__play { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; padding-right: 0; }
.aie--tall[style*="--aie-w"] .aie__art { grid-column: 1 / -1; }
.aie--tall[style*="--aie-w"] .aie__text { padding: 1rem 1.25rem; }
.aie--tall[style*="--aie-w"] .aie__icon { margin-right: 1.25rem; }

/* Video: cover fills the frame, title over a shade, play in the centre */
.aie--video .aie__play { display: block; border: 0; background: #000; color: #fff; }
.aie--video .aie__play:hover { background: #000; color: #fff; }
.aie--video .aie__art { position: absolute; inset: 0; }
.aie--video .aie__img { transition: opacity .2s ease; opacity: .9; }
.aie--video .aie__play:hover .aie__img { opacity: 1; }
.aie--video .aie__text {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 2.5rem 1.25rem 1rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, .7));
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.aie--video .aie__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4.25rem;
    height: 4.25rem;
    transform: translate(-50%, -50%);
    border-color: #fff;
    background: rgba(0, 0, 0, .35);
}
.aie--video .aie__icon::after { width: 1.1rem; height: 1.3rem; }

.aie .aie__play:hover .aie__icon { background: color-mix(in srgb, currentColor 15%, transparent); }
.aie--video .aie__play:hover .aie__icon { background: #fff; }
.aie--video .aie__play:hover .aie__icon::after { background: #000; }

@media (max-width: 480px) {
    .aie--row .aie__play { column-gap: .9rem; padding-right: .9rem; }
    .aie .aie__icon { width: 2.5rem; height: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .aie .aie__play, .aie .aie__icon, .aie .aie__img { transition: none; }
}

.aie-notice { padding: 1rem; border: 1px dashed currentColor; opacity: .7; }