/* Odtwarzacz rozwazania "Modlitwa w drodze" (core/view/_mwd.phtml, skrypt core-js/mwd-player.js).
   Kolor: --mwd-accent; w szablonach centralnych (.mwd-player--accent) kolor glowny palety, na starych stronach kolor
   tekstu wokol (currentColor), wiec odtwarzacz pasuje i do jasnej, i do ciemnej kolumny. Tla polprzezroczyste szare
   z tego samego powodu. Postep (--mwd-p, 0-1) ustawia skrypt: pierscien wokol przycisku i suwak. */
.mwd-player {
  --mwd-accent: currentColor;
  --mwd-p: 0;
  --mwd-line: rgba(128, 128, 128, .3);
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(128, 128, 128, .1);
  color: inherit;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
}
.mwd-player--accent { --mwd-accent: var(--pri, #8a3b12); }
.mwd-player, .mwd-player * { box-sizing: border-box; }
.mwd-player :is(span, i) { float: none; }
.mwd-player audio { display: none; }
.mwd-player svg { max-width: none; }
.mwd-player button { margin: 0; box-shadow: none; text-transform: none; letter-spacing: 0; line-height: 1; font-family: inherit; -webkit-appearance: none; appearance: none; }

/* przycisk: kolo z ikona, wokol pierscien postepu */
.mwd-player__play { position: relative; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--mwd-accent); cursor: pointer; }
.mwd-player__play::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: rgba(128, 128, 128, .2); transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .3s; }
.mwd-player--accent .mwd-player__play { color: #fff; }
.mwd-player--accent .mwd-player__play::before { background: var(--mwd-accent); }
.mwd-player__play:hover::before { transform: scale(1.07); }
.mwd-player__play:active::before { transform: scale(.96); }
.mwd-player__play:focus-visible { outline: 2px solid var(--mwd-accent); outline-offset: 2px; }
.mwd-player__ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 2.5; transform: rotate(-90deg); }
.mwd-player__ring circle { stroke: var(--mwd-line); }
.mwd-player__ring circle.mwd-player__ring-fill { stroke: var(--mwd-accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--mwd-p) * 100); transition: stroke-dashoffset .3s linear; }
.mwd-player--accent .mwd-player__ring circle.mwd-player__ring-fill { stroke: var(--mwd-accent); }
.mwd-player__icon { position: relative; width: 22px; height: 22px; fill: currentColor; }
.mwd-player__icon--pause, .mwd-player.is-playing .mwd-player__icon--play { display: none; }
.mwd-player.is-playing .mwd-player__icon--pause { display: block; }
.mwd-player.is-loading .mwd-player__ring { animation: mwd-spin .9s linear infinite; }
.mwd-player.is-loading .mwd-player__ring circle.mwd-player__ring-fill { stroke-dashoffset: 72; transition: none; }

/* opis: naglowek z korektorem (gra), tytul z dniem, zrodlo albo komunikat */
.mwd-player__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mwd-player__kicker { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.mwd-player--accent .mwd-player__kicker { color: var(--mwd-accent); opacity: 1; }
.mwd-player__title { font-size: 15px; font-weight: 600; }
.mwd-player__source { align-self: flex-start; font-size: 12.5px; color: inherit; opacity: .7; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.mwd-player__source:focus-visible { outline: 2px solid var(--mwd-accent); outline-offset: 2px; }
.mwd-player__source:hover { opacity: 1; }
.mwd-player.is-started .mwd-player__source { display: none; }
.mwd-player__error { display: none; font-size: 13px; }
.mwd-player.is-error .mwd-player__error { display: block; }
.mwd-player__eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.mwd-player .mwd-player__eq > span { display: block; flex: none; width: 2.5px; height: 100%; margin: 0; border-radius: 1px; background: currentColor; opacity: 0; transform: scaleY(.25); transform-origin: bottom; transition: opacity .3s; }
.mwd-player.is-playing .mwd-player__eq > span { opacity: 1; animation: mwd-eq .8s ease-in-out infinite alternate; }
.mwd-player.is-playing .mwd-player__eq > span:nth-child(2) { animation-duration: .55s; animation-delay: -.3s; }
.mwd-player.is-playing .mwd-player__eq > span:nth-child(3) { animation-duration: .7s; animation-delay: -.15s; }
.mwd-player.is-playing .mwd-player__eq > span:nth-child(4) { animation-duration: .6s; animation-delay: -.45s; }

/* sterowanie po pierwszym odtworzeniu: suwak na cala szerokosc, pod nim 15 s wstecz/dalej, czas i predkosc */
.mwd-player__controls { grid-column: 1 / -1; display: none; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 6px 8px; }
.mwd-player.is-started .mwd-player__controls { display: grid; animation: mwd-in .4s cubic-bezier(.2, .8, .2, 1) both; }
.mwd-player__seek { grid-column: 1 / -1; width: 100%; height: 18px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.mwd-player__seek:focus-visible { outline: 2px solid var(--mwd-accent); outline-offset: 2px; }
.mwd-player__seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--mwd-accent) calc(var(--mwd-p) * 100%), var(--mwd-line) 0); }
.mwd-player__seek::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; border: 2px solid #fff; border-radius: 50%; background: var(--mwd-accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); -webkit-appearance: none; appearance: none; }
.mwd-player__seek::-moz-range-track { height: 4px; border-radius: 2px; background: var(--mwd-line); }
.mwd-player__seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--mwd-accent); }
.mwd-player__seek::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: var(--mwd-accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.mwd-player__skip, .mwd-player__speed { min-width: 46px; min-height: 30px; padding: 4px 9px; border: 1px solid var(--mwd-line); border-radius: 999px; background: none; color: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s; }
.mwd-player__skip:hover, .mwd-player__speed:hover { border-color: var(--mwd-accent); color: var(--mwd-accent); }
.mwd-player__skip:focus-visible, .mwd-player__speed:focus-visible { outline: 2px solid var(--mwd-accent); outline-offset: 2px; }
.mwd-player__time { white-space: nowrap; font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; opacity: .8; }

@keyframes mwd-spin { to { transform: rotate(270deg); } }
@keyframes mwd-eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
@keyframes mwd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mwd-player *, .mwd-player *::before { animation: none !important; transition: none !important; }
  .mwd-player.is-playing .mwd-player__eq > span { transform: scaleY(.6); }
}

/* Stare uklady przycinaly ramke modlitwawdrodze.pl kontenerem o stalej wysokosci (np. .mp3 { height: 51px; overflow: hidden }):
   bezposredni rodzic odtwarzacza dostaje wysokosc z tresci. */
:has(> .mwd-player) { height: auto !important; max-height: none !important; overflow: visible !important; }