/* «پادکست مرتبط» / «حالا گوش کن»: a podcast episode that uses the lesson's words (learn/podcast_links.py,
   templates/learn/_pod_pill.html). One block for every placement: the lesson intro, the lesson's end screen, the practice hub.
   A big tappable pill in the spirit of the home page's «پادکست روز» (.hm-pod): a moving equaliser, a light sweeping across,
   the English title, show · level · minutes and the lesson's words as chips. Logical properties only (RTL). */

.lp-pod { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 12px;
  inline-size: 100%; max-inline-size: 640px; min-block-size: 56px; padding: 12px 14px; border-radius: var(--r-lg, 20px);
  color: var(--ink); text-decoration: none; text-align: start;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--hair, #d1d1d6); /* WebView before color-mix (Chrome 111) */
  background: linear-gradient(120deg, color-mix(in srgb, var(--indigo) 16%, var(--card)), color-mix(in srgb, #14b8a6 16%, var(--card)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--indigo) 34%, var(--hair, #d1d1d6)), var(--e1, none);
  transition: transform .18s ease, box-shadow .18s ease; -webkit-tap-highlight-color: transparent; }
.lp-pod::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .4) 50%, transparent 70%);
  transform: translateX(120%); animation: lp-pod-sweep 6s ease-in-out 1.5s infinite; }
[dir="ltr"] .lp-pod::after { animation-name: lp-pod-sweep-ltr; }
.lp-pod:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--indigo), 0 8px 20px -10px var(--indigo); }
.lp-pod:active { transform: scale(.985); }
.lp-pod:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }

.lp-pod-eq { flex: none; display: inline-flex; align-items: flex-end; justify-content: center; gap: 3px; inline-size: 44px;
  block-size: 44px; padding-block-end: 12px; border-radius: 50%; background: var(--indigo);
  box-shadow: 0 4px 12px -6px var(--indigo); }
.lp-pod-eq i { inline-size: 3.5px; block-size: 20px; border-radius: 2px; background: #fff; transform-origin: bottom;
  animation: lp-pod-eq 1.1s ease-in-out infinite; }
.lp-pod-eq i:nth-child(2) { animation-delay: -.45s; }
.lp-pod-eq i:nth-child(3) { animation-delay: -.2s; }
.lp-pod-eq i:nth-child(4) { animation-delay: -.7s; }

.lp-pod-body { flex: 1; display: grid; gap: 3px; min-inline-size: 0; line-height: 1.4; }
.lp-pod-kicker { font-size: var(--fs-xs); font-weight: 800; color: var(--indigo); }
.lp-pod-title { font-size: var(--fs-md, 1.0625rem); font-weight: 700; color: var(--ink); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[dir="rtl"] .lp-pod-title { text-align: right; } /* an English title lines up with the Persian lines around it */
.lp-pod-meta { font-size: var(--fs-xs); color: var(--ink-2); overflow-wrap: anywhere; }
.lp-nw { white-space: nowrap; }
.lp-pod-words { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-block-start: 3px; }
.lp-pod-wl { font-size: var(--fs-xs); color: var(--ink-2); }
.lp-chip { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700;
  color: var(--indigo); background: var(--card); box-shadow: inset 0 0 0 1px var(--hair, #d1d1d6);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--indigo) 40%, transparent); }
.lp-pod-go { flex: none; display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%;
  color: var(--indigo); background: var(--card); box-shadow: inset 0 0 0 1px var(--hair, #d1d1d6); }
.lp-pod-go .ic { inline-size: 16px; block-size: 16px; }

/* the end screen: a heading and one or two pills, start-aligned inside the centred «درس تمام شد» card */
.pod-next { inline-size: 100%; max-inline-size: 640px; display: grid; gap: 8px; text-align: start; }
.pod-next h2 { font-size: var(--fs-md, 1.0625rem); margin: 0; }
.pod-next > p { margin: 0; }
/* the practice hub: a little air between the pill and the tiles */
.hub-pod { margin-block: 4px 16px; }

@keyframes lp-pod-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes lp-pod-sweep { 0% { transform: translateX(120%); } 30%, 100% { transform: translateX(-120%); } }
@keyframes lp-pod-sweep-ltr { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }

@media (max-width: 420px) {
  .lp-pod { gap: 10px; padding: 10px 12px; }
  .lp-pod-eq { inline-size: 40px; block-size: 40px; padding-block-end: 11px; }
  .lp-pod-go { display: none; } /* the whole pill is the link; on a phone the title needs the room */
}
@media (prefers-reduced-motion: reduce) {
  .lp-pod::after { display: none; }
  .lp-pod-eq i { animation: none; transform: scaleY(.65); }
  .lp-pod-eq i:nth-child(2n) { transform: scaleY(1); }
  .lp-pod, .lp-pod:hover, .lp-pod:active { transition: none; transform: none; }
}
html[data-motion="0"] .lp-pod::after { display: none; }
html[data-motion="0"] .lp-pod-eq i { animation: none; transform: scaleY(.65); }
html[data-motion="0"] .lp-pod-eq i:nth-child(2n) { transform: scaleY(1); }