/* Espresso Tempo: the grid of album covers (js/album-grid.js). Each cover is
   a button that plays its sample; a small icon and a thin progress line show
   which one is playing. Three across, two on a phone. Under each cover: the
   number, the title and a row of streaming links (outside the button, so
   they never start a sample). */

.et-albums { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1rem; }
@media (max-width: 599px) { .et-albums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .75rem; } }

.et-album { min-width: 0; }
.et-cover { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; overflow: hidden; }
.et-cover img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.et-cover:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* play / pause: a small dark disc in the corner */
.et-icon { position: absolute; right: .5rem; bottom: .6rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; opacity: 0; transition: opacity .2s var(--ease); }
.et-icon svg { width: .7rem; height: .7rem; display: block; }
.et-i-pause, .et-cover.is-playing .et-i-play { display: none; }
.et-cover.is-playing .et-i-pause { display: block; }
.et-cover:hover .et-icon, .et-cover:focus-visible .et-icon, .et-cover.is-playing .et-icon { opacity: 1; }
@media (hover: none) { .et-icon { opacity: .85; } }

/* progress along the bottom edge */
.et-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .25s linear; }

.et-caption { margin: .5rem 0 0; font-size: .8rem; line-height: 1.35; }
.et-num { display: block; color: var(--text-muted); }
.et-name { display: block; color: var(--text); overflow-wrap: anywhere; }
.et-links { margin: .3rem 0 0; font-size: .7rem; line-height: 1.6; color: var(--text-muted); }
.et-links a { color: var(--text-muted); border-bottom: 1px solid currentColor; white-space: nowrap; }
.et-links a:hover { color: var(--text); }