/* ============================================================
   dc-audio — „Vypočuť článok" prehrávač (self-contained canvas player)
   Layout built at runtime by dc-audio.js (pctuning-style): label ABOVE the panel ·
   waveform on top (accent baseline) · control row below
   [elapsed · ⏪ · play (floats onto the wave) · ⏩ · duration].
   Semantic theme variables (light/dark auto); yellow variant = dark controls on a yellow panel.
   Canonical tokens: src/digitalcoach/style.css
   ============================================================ */
.dc-audio{ margin:30px 0; font-family:'Inter',sans-serif; }
/* wpautop occasionally injects an empty <p> into the player panel — noscript fallback must remain visible */
.dc-audio .dc-audio__panel p:empty{ display:none; }

/* label above the module (sits on the page background; higher specificity beats theme figcaption) */
.dc-audio .dc-audio__title{
  display:flex; align-items:center; gap:9px; margin:0 0 12px 2px;
  font-family:'Space Grotesk',sans-serif; font-style:normal; font-weight:700; font-size:14px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text);
}
.dc-audio .dc-audio__title svg{ width:19px; height:19px; flex:none; stroke:var(--accent); fill:none; stroke-width:2; }

/* card */
.dc-audio .dc-audio__panel{
  background:var(--panel-bg); border:1px solid var(--border);
  border-radius:var(--r-lg,14px); padding:14px 18px 16px; margin:0;
}

/* waveform — full width on top */
.dc-audio .dc-audio__wave{ width:100%; height:48px; cursor:pointer; margin:0; }
.dc-audio__preview{ width:100%; height:100%; display:block; }

/* control row — [elapsed] [back] [play] [fwd] [duration]; times pinned to the edges */
.dc-audio .dc-audio__control{ display:flex; align-items:center; gap:10px; margin:8px 0 0; }
.dc-audio__control .cur{ margin-right:auto; }
.dc-audio__control .dur{ margin-left:auto; }
.dc-audio .cur, .dc-audio .dur{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--muted);
}

/* skip ±10 s — quiet, icon-only */
.dc-audio .dc-audio__skip{
  flex:none; width:38px; height:38px; border:0; border-radius:50%; cursor:pointer; margin:0;
  background:transparent; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  -webkit-appearance:none; appearance:none; transition:background .15s ease, color .15s ease;
}
.dc-audio__skip:hover{ background:rgba(0,0,0,.07); color:var(--text); }
.dc-audio__skip svg{ width:21px; height:21px; display:block; fill:currentColor; }

/* play/pause — the focal circle; floats up onto the waveform */
.dc-audio__play{
  flex:none; width:52px; height:52px; border:0; cursor:pointer; border-radius:50%;
  background:var(--accent); color:var(--white,#fff);
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease, background .15s ease; -webkit-appearance:none; appearance:none;
}
.dc-audio .dc-audio__control .dc-audio__play{ margin:-34px 0 0; }   /* pull up onto the wave */
.dc-audio__play:hover{ background:var(--accent-hover,#4338CA); }
.dc-audio__play:active{ transform:scale(.94); }
.dc-audio__play svg{ width:24px; height:24px; display:block; fill:currentColor; }
.dc-audio__play .ico-pause{ display:none; }
.dc-audio.is-playing .ico-play{ display:none; }
.dc-audio.is-playing .ico-pause{ display:block; }

@media (max-width:520px){
  .dc-audio .dc-audio__panel{ padding:12px 13px 14px; }
  .dc-audio .dc-audio__wave{ height:40px; }
  .dc-audio__play{ width:46px; height:46px; }
  .dc-audio .dc-audio__control .dc-audio__play{ margin-top:-28px; }
  .dc-audio .dc-audio__skip{ width:34px; height:34px; }
  .dc-audio .dc-audio__control{ gap:6px; }
  .dc-audio .cur, .dc-audio .dur{ font-size:14px; }
}

/* ---- variant: yellow panel, dark controls + dark waveform baseline ---- */
.dc-audio--yellow .dc-audio__panel{ background:var(--yellow); border-color:rgba(0,0,0,.14); }
.dc-audio--yellow .dc-audio__wave{ border-bottom:2px solid var(--ink); }
.dc-audio--yellow .cur, .dc-audio--yellow .dur{ color:var(--ink); }
.dc-audio--yellow .dc-audio__skip{ color:var(--ink); }
.dc-audio--yellow .dc-audio__skip:hover{ background:rgba(0,0,0,.10); color:var(--ink); }
.dc-audio--yellow .dc-audio__play{ background:var(--ink); color:#fff; border:4px solid var(--yellow); box-shadow:0 3px 10px rgba(0,0,0,.22); }
.dc-audio--yellow .dc-audio__play:hover{ background:var(--ink); }