/* LHR video controls (6.6): Play / Stop + sound, bottom right of every carousel video.
   Colours come from the tokens; the two icons are drawn with CSS so nothing is fetched. */
.vctl__play {
	position: absolute; right: var(--s-2); bottom: var(--s-2); z-index: 2;
	width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
	background: var(--c-white); color: var(--c-ink); display: grid; place-items: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.vctl__icon { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.vctl__play[aria-pressed="true"] .vctl__icon { width: 12px; height: 12px; border: 0; background: currentColor; margin: 0; border-radius: 2px; }
.vctl__play:focus-visible, .vctl__sound:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }

/* The sound button now shows a speaker, not a play triangle. */
.vctl__sound span { width: 18px; height: 18px; border: 0; margin: 0; background: currentColor; border-radius: 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3z'/%3E%3Cpath d='M16 8.5a4 4 0 0 1 0 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M19 5.5a8 8 0 0 1 0 13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3z'/%3E%3Cpath d='M16 8.5a4 4 0 0 1 0 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M19 5.5a8 8 0 0 1 0 13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.vctl__sound[aria-pressed="false"] span {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3z'/%3E%3Cpath d='M16 9l5 6M21 9l-5 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3z'/%3E%3Cpath d='M16 9l5 6M21 9l-5 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.lhr-media.is-playing-sound .lhr-media__wm { opacity: calc(var(--lhr-wm-opacity, .7) * .8); }
@media (max-width: 640px) { .vctl__play, .vctl__sound { width: 40px; height: 40px; } }