/* Airplay40 — Cards layout (grid of expressive cards) */

/* Grid container */
.airplay40 .ap40-grid {
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax(220px, 1fr) );
  gap: var(--ap40-gap, 12px);
  align-items: stretch; /* equal heights per row */
}

/* Card container */
.airplay40 .ap40-card {
  background: var(--ap40-surface, #fff);
  color: var(--ap40-on-surface, #1d1b20);
  border: 1px solid color-mix(in oklab, var(--ap40-outline, #79747E) 40%, transparent);
  border-radius: var(--ap40-radius, 12px);
  box-shadow: var(--ap40-elev-1, 0 1px 2px rgba(0,0,0,.07));
  overflow: visible; /* allow tooltips to escape; clip image instead */
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Card media (square) with rounded top corners */
.airplay40 .ap40-card .ap40-media {
  aspect-ratio: 1 / 1;
  border-top-left-radius: var(--ap40-radius, 12px);
  border-top-right-radius: var(--ap40-radius, 12px);
  overflow: hidden;
}

/* Dark mode tweaks for cards */
.airplay40[data-theme="dark"], @media (prefers-color-scheme: dark) {
  .airplay40[data-theme="auto"] .ap40-card {
    background:#1F1B24; color:#ECE6F0;
    border-color: color-mix(in oklab, #BBB 20%, transparent);
  }
  .airplay40[data-theme="auto"] .ap40-btn { background:#D0BCFF; color:#381E72; }
}