/* Auxesis Media. Colors follow the theme when it defines them. */
.axm { --axm-ink: var(--wp--preset--color--slate, #374550); --axm-muted: var(--wp--preset--color--muted, #5B6770); --axm-line: var(--wp--preset--color--line, #DDE3E9); --axm-accent: var(--wp--preset--color--azure, #0088FE); --axm-link: var(--wp--preset--color--primary, #0066C2); }
.axm-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.axm-shorts .axm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 600px) { .axm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .axm-shorts .axm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .axm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .axm-shorts .axm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
.axm-card { margin: 0; min-width: 0; }
.axm-play { display: block; text-decoration: none; border-radius: 12px; }
.axm-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #0d141b; }
.axm-card.is-short .axm-thumb { aspect-ratio: 9 / 16; }
.axm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.axm-play:hover .axm-thumb img, .axm-play:focus-visible .axm-thumb img { transform: scale(1.04); }
.axm-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,20,27,0) 55%, rgba(13,20,27,.55) 100%); pointer-events: none; }
.axm-btn { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 1; transition: transform .2s, background .2s; }
.axm-btn::before { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent var(--axm-accent); }
.axm-card.is-short .axm-btn { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.axm-card.is-short .axm-btn::before { left: 21px; top: 16px; border-width: 10px 0 10px 16px; }
.axm-play:hover .axm-btn { transform: scale(1.08); background: #fff; }
.axm-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.axm-meta { padding: .7rem .1rem 0; }
.axm-title { margin: 0; font-size: 1rem; line-height: 1.35; font-weight: 700; }
.axm-card.is-short .axm-title { font-size: .88rem; font-weight: 600; }
.axm-title a { color: var(--axm-ink); text-decoration: none; }
.axm-title a:hover { color: var(--axm-link); text-decoration: underline; }
.axm-date { margin: .25rem 0 0; font-size: .82rem; color: var(--axm-muted); }
.axm-more { margin: 1.1rem 0 0; font-weight: 600; font-size: .92rem; }
.axm-more a::after { content: " \2192"; }
.axm-fallback { padding: 1.2rem; border: 1px dashed var(--axm-line); border-radius: 12px; }
/* On dark backgrounds */
.has-night-background-color .axm-title a, .has-night-background-color .axm-more a { color: #fff; }
.has-night-background-color .axm-date { color: rgba(255,255,255,.7); }
.has-night-background-color .axm-title a:hover { color: var(--wp--preset--color--sky, #5CB2FF); }
.axm-spotify iframe { display: block; width: 100%; border: 0; border-radius: 12px; }