.podcast-card { position: relative; --ink: #33352e; --accent: #ad4933; --card-footer-color: #9b8c7b; width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; gap: var(--card-footer-gap); padding: var(--format-top) max(var(--edge), env(safe-area-inset-right)) var(--content-bottom) max(var(--edge), env(safe-area-inset-left)); color: var(--ink); background: radial-gradient(ellipse at 85% 22%, #eec9a465, transparent 55%), #f5efe5; }
.podcast-card button, .podcast-card select, .podcast-card a { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.podcast-card button, .podcast-card select { border: 0; cursor: pointer; }
.podcast-card svg { width: 24px; height: 24px; flex: none; }
.podcast-card button:focus-visible, .podcast-card a:focus-visible, .podcast-card select:focus-visible, .podcast-card input:focus-visible, .podcast-card__scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.podcast-card__layout { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.podcast-card__scroll { flex: 1; min-height: 0; display: flex; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d2b59e transparent; }
.podcast-card__scroll.is-scrollable { touch-action: pan-y; }
.podcast-card__body { width: 100%; min-height: 100%; flex: none; display: flex; flex-direction: column; margin: 0 auto; padding: 4px 0 0; }
.podcast-card__topbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.podcast-card__meta { flex: none; display: flex; align-items: center; gap: 12px; margin: 0; font-size: 9px; font-weight: 650; letter-spacing: .13em; }
.podcast-card__badge { display: flex; gap: 6px; align-items: center; color: #81543e; }
.podcast-card__badge svg { width: 14px; height: 14px; }
.podcast-card__episode { padding-left: 12px; border-left: 1px solid #cdbba5; color: #998575; font-size: 9px; }
/* Give listening controls their own row; the artwork fits the remaining space. */
.podcast-card__listening { flex: 1; min-height: calc(96px + var(--media-play-size) + 14px); display: grid; grid-template-rows: minmax(96px, 1fr) auto; gap: 14px; }
.podcast-card__stage { min-height: 0; width: 100%; display: grid; place-items: center; container-type: size; }
.podcast-card > .social-actions__notice { position: absolute; top: var(--format-top); left: var(--edge); right: var(--edge); z-index: 1; box-shadow: 0 4px 20px #3332; }
.podcast-card__art { position: relative; width: min(calc(100cqw - 12px), 100cqh, 420px); max-width: calc(100% - 12px); margin: 0 auto; }
.podcast-card__cover { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; box-shadow: 0 12px 24px -14px #78332680; }
.podcast-card__playing { position: absolute; top: 12px; right: 12px; display: flex; gap: 3px; align-items: center; justify-content: center; width: 36px; height: 30px; border: 1px solid #fff4; border-radius: 20px; background: #943324b8; opacity: 0; }
.podcast-card.is-playing .podcast-card__playing { opacity: 1; }
.podcast-card__playing i { display: block; width: 2px; height: 12px; border-radius: 2px; background: #ffe8c6; transform: scaleY(.3); }
.podcast-card.is-playing .podcast-card__playing i { animation: podcast-bars 850ms ease-in-out infinite alternate; }
.podcast-card__playing i:nth-child(2) { animation-delay: -340ms !important; }
.podcast-card__playing i:nth-child(3) { animation-delay: -600ms !important; }
.podcast-card__playing i:nth-child(4) { animation-delay: -170ms !important; }
.podcast-card__playing i:nth-child(5) { animation-delay: -470ms !important; }
.podcast-card__info { flex: none; min-width: 0; width: calc(100% - var(--social-reserve)); margin-top: 12px; }
.podcast-card__title { margin: 0 0 4px; font-size: clamp(24px, 4vw, 32px); font-weight: 650; line-height: 1.15; letter-spacing: -.045em; overflow-wrap: anywhere; }
.podcast-card__author { margin: 0; color: #756351; font-size: 11px; line-height: 1.5; }
.podcast-card__description { margin: 15px 0 0; font-size: 13px; line-height: 1.45; color: #8a7766; overflow-wrap: anywhere; }
.podcast-card__player { width: 100%; min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* The timeline sits below the social rail, so it can use the full width. */
.podcast-card__footer { flex: none; width: 100%; margin: 0; }
.podcast-card__timeline { --timeline-text: #937f6b; --timeline-fill: var(--accent); --timeline-track: #dacfc0; }
.podcast-card__controls { display: grid; grid-template-columns: 56px var(--media-play-size) 56px; justify-content: center; align-items: center; justify-items: center; gap: 16px; }
.podcast-card__controls { margin: 0; }
.podcast-card__tools { flex: none; display: flex; align-items: center; gap: 4px; color: #756351; }
.podcast-card__controls button, .podcast-card__tools > button, .podcast-card__rate, .podcast-card__download { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; flex: none; border-radius: 50%; }
.podcast-card__tools > :is(button, select, a) { border: 1px solid #d9c5ae9c; border-radius: 12px; background: #eadfcead; }
.podcast-card__rate { appearance: none; text-align: center; text-align-last: center; font-size: 12px !important; font-weight: 600 !important; }
.podcast-card__controls .podcast-card__play { width: var(--media-play-size); height: var(--media-play-size); }
.podcast-card__play .media-play { color: #fff8ef; background: var(--accent); backdrop-filter: none; box-shadow: 0 7px 18px #ad49332b, inset 0 1px 0 #ffffff30; }
.podcast-card__controls .podcast-card__skip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 56px; height: 56px; border: 1px solid #dac8b4; border-radius: 16px; color: #785845; background: #eee2d2; box-shadow: inset 0 1px 0 #fff8; transition: background 140ms ease, transform 140ms ease; }
.podcast-card__skip svg { width: 24px; height: 24px; }
.podcast-card__skip-label { font-size: 10px; line-height: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.podcast-card__skip:active { background: #e6d4bf; transform: scale(.96); }
@media (hover: hover) {
  .podcast-card__skip:hover { background: #e6d4bf; }
  .podcast-card__play:hover .media-play { background: #993d2a; }
}
.podcast-card__controls button:disabled { opacity: .35; cursor: default; }
.podcast-card__download { border: 0; text-decoration: none; }
@media (hover: hover) { .podcast-card__tools > :hover { background: #e2d1be; } }
.podcast-card__download svg { width: 22px; height: 22px; }
.podcast-card__tools > button svg { width: 22px; height: 22px; }
.podcast-card__error { padding: 10px; border-radius: 8px; background: #ebd8ca; font-size: 12px; line-height: 1.4; }
@keyframes podcast-bars { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@media (min-width: 900px) and (min-height: 700px) {
  .podcast-card__body { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(min-content, 1fr) auto; column-gap: 5vw; row-gap: 14px; }
  .podcast-card__listening { display: contents; }
  .podcast-card__stage { grid-column: 1; grid-row: 1; }
  .podcast-card__info { grid-column: 1; grid-row: 2; width: 100%; max-width: 420px; margin: 0; }
  .podcast-card__player { grid-column: 2; grid-row: 1; align-self: center; }
}
@media (max-height: 650px) and (max-width: 899px) {
  .podcast-card__layout { gap: 6px; }
  .podcast-card__info { margin-top: 8px; }
  .podcast-card__description { margin-top: 8px; }
}
@media (max-width: 520px) and (min-height: 481px) and (max-height: 1020px) {
  /* Center the cover within the card, with clearance for the fixed social rail. */
  .podcast-card__art { width: min(calc(100cqw - 100px), 100cqh, 420px); }
}
@media (prefers-reduced-motion: reduce) {
  .podcast-card__playing i { animation: none !important; }
  .podcast-card__skip { transition: none !important; }
  .podcast-card__skip:active { transform: none; }
}

@media (max-height: 480px) {
  .podcast-card__topbar { padding-right: var(--social-reserve); }
  .podcast-card__scroll { display: block; padding-right: 0; }
  .podcast-card__body { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 5vw; }
  .podcast-card__listening { display: contents; }
  .podcast-card__stage { grid-column: 1; grid-row: 1; height: clamp(120px, 50dvh, 220px); }
  .podcast-card__info { grid-column: 1; grid-row: 2; width: 100%; }
  .podcast-card__player { grid-column: 2; grid-row: 1; align-self: center; padding-right: var(--social-reserve); }
  /* Keep the fixed timeline clear of the social rail in landscape. */
  .podcast-card__footer { padding: 12px var(--social-reserve) 0 0; }
}

@media (max-width: 359px) {
  .podcast-card__topbar { gap: 8px; }
  .podcast-card__tools { gap: 0; }
  .podcast-card__controls { gap: 12px; }
  .podcast-card__meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  .podcast-card__episode { border: 0; padding-left: 0; }
}