/**
 * Horizon Core: MUSIC RELEASES (HORIZON-20261008-088). The `releases` and `release_next` sections in
 * src/Render/section-library-releases.php: a square cover, the date status, title, kind, one button.
 *
 * The SKIN belongs to the site: every colour and font is a --hp-* token. Loaded only on a podcast tenant's home or
 * Releases page when it has a release. Body-prefixed and enqueued late, like hp-episode.css. Phones: running text
 * 16px, nothing under 12px, taps 44px.
 */

body .hp-release-head { margin-bottom: 24px; }
body .hp-release-head__eyebrow { margin: 0 0 6px; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hp-gold, var(--hp-text, #fff)); }
body .hp-release-head__title { margin: 0; font-family: var(--hp-font-display, inherit); }

body .hp-releases__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }

body .hp-release {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--hp-bg-surface, rgba(255, 255, 255, 0.04));
  border-radius: var(--hp-radius-md, 12px); overflow: hidden;
}
body .hp-release__cover { aspect-ratio: 1 / 1; background: var(--hp-bg, #000); }
body .hp-release__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The title tile (no cover yet): the site's own colours, a centred band like the store covers. */
body .hp-release__cover--tile {
  display: flex; align-items: center; justify-content: center; padding: 8%;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--hp-gold, #c9a227) 35%, transparent), transparent 70%),
    linear-gradient(180deg, var(--hp-bg-surface, #1a1a22), var(--hp-bg, #000));
}
body .hp-release__band {
  width: 100%; padding: 10% 6%; text-align: center; background: rgba(0, 0, 0, 0.82);
  display: flex; flex-direction: column; gap: 4px; color: #fff;
}
body .hp-release__band-artist { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.9; }
body .hp-release__band-title { font-family: var(--hp-font-display, inherit); font-size: clamp(1rem, 4.5cqi, 1.6rem); font-weight: 700; line-height: 1.1; text-transform: uppercase; overflow-wrap: anywhere; }
body .hp-release__band-kind { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
body .hp-release__cover--tile { container-type: inline-size; }

body .hp-release__body { display: flex; flex-direction: column; gap: 6px; padding: 16px; flex: 1; }
body .hp-release__status { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hp-gold, var(--hp-text, #fff)); }
body .hp-release__title { margin: 0; font-family: var(--hp-font-display, inherit); font-size: 1.25rem; line-height: 1.25; color: var(--hp-text, #fff); overflow-wrap: anywhere; }
body .hp-release__kind { margin: 0; font-size: 1rem; color: var(--hp-text-muted, #9a9a9a); }
body .hp-release__explicit {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid currentColor; border-radius: 4px;
  font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle;
}
body .hp-release__cta { align-self: flex-start; margin-top: auto; min-height: 44px; display: inline-flex; align-items: center; }
body .hp-release__body .hp-release__cta { margin-top: 10px; }

/* The home strip: cover beside the words from tablet up, stacked on phones. */
body .hp-release--feature { flex-direction: row; align-items: stretch; max-width: 760px; }
body .hp-release--feature .hp-release__cover { flex: 0 0 min(42%, 300px); }
body .hp-release--feature .hp-release__body { justify-content: center; padding: 24px; }
body .hp-release--feature .hp-release__title { font-size: 1.75rem; }
@media (max-width: 600px) {
  body .hp-release--feature { flex-direction: column; }
  body .hp-release--feature .hp-release__cover { flex-basis: auto; }
  body .hp-release--feature .hp-release__body { padding: 16px; }
  body .hp-release--feature .hp-release__title { font-size: 1.375rem; }
}

body .hp-releases__all { margin: 16px 0 0; }
body .hp-releases__all a { display: inline-flex; align-items: center; min-height: 44px; color: var(--hp-gold, var(--hp-text, #fff)); }