:root {
  --violet-primary: hsl(285, 100%, 50%); /* #bf00ff */
  --violet-primary-hover: hsl(284, 96%, 43%); /* #9c04d5 */
  --violet-secondary: hsl(261, 69%, 42%); /* #5521b5 */
  --lilac-primary: hsl(248, 100%, 87%); /* #c5bcff */
  --lilac-secondary-70: hsla(248, 100%, 87%, 0.7); /* #c5bcff */
  --white: hsl(0, 0%, 100%); /* #ffffff */
  --white-70: hsla(0, 0%, 100%, 0.7); /* #ffffff */
  --white-50: hsla(0, 0%, 100%, 0.5); /* #ffffff */
  --white-30: hsla(0, 0%, 100%, 0.3); /* #ffffff */
  --grey: hsl(0, 0%, 79%); /* #cacaca */
  --dark-primary: hsl(259, 100%, 11%); /* #120038 */
  --dark-secondary: hsl(230, 51%, 12%); /* #0f142e  */
  --green: hsl(120, 61%, 50%); /* #32cd32 */
  --red: hsl(351, 100%, 47%); /* #ef0025  */
  --blue: hsl(206, 100%, 50%); /* #0092ff */

  --gradient-premium: linear-gradient(135.62deg, var(--violet-secondary) -3.84%, var(--violet-primary) 115.33%);
  --gradient-okladki: linear-gradient(180deg, #0E0335 0%, rgba(15, 20, 46, 0) 59.3%);
  --gradient-modal: linear-gradient(180deg, #2F1070 0%, #120038 100%);

  --lol-color: hsl(253, 57%, 21%);
  /* 	#192148 bigstone: hsl(211, 49%, 17%) #162A40 - tło selectlisty popupy*/
  --bigstone-approx: hsl(230, 49%, 19%);

  /* #242c51 cloudburst: hsl(224, 45%, 23%) #202E54 - tło tag */
  --cloudburst-approx: hsl(230, 38%, 23%);

  /* #0F142E haiti: hsl(258, 54%, 14%); #1B1035 - tlo header, footer, sekcji np artykulu */
  --haiti-solid: hsl(258, 54%, 14%);

  --bg-gradient: linear-gradient(0deg,hsla(0, 0%, 0%, 0.4),hsla(0, 0%, 0%, 0.4)),
    linear-gradient(228deg,hsl(228, 100%, 22%) 2.5%,hsl(351, 100%, 24%) 152.5%);

  /* base colors */
  --hue: 200;
  --sat-bg: 32%;
  --sat-bg-section: 15%;
  --sat-bg-tags: 32%;
  --sat-bg-placeholder: 10%;
  --luma-bg: 14%;
  --luma-bg-section: 22%;
  --luma-bg-tags: 9%;
  --luma-bg-placeholder: 34%;

  --ofm-color-bunker: hsl(
    var(--hue),
    var(--sat-bg-tags),
    var(--luma-bg-tags)
  ); /* #101A1F bg pomocnicze (tagi itp) */

  --ofm-color-blue-gray-medium: hsl(
    var(--hue),
    var(--sat-bg-section),
    var(--luma-bg-section)
  ); /* #2F3B40 bg section wrapper */

  /* --ofm-color-blue-gray-light: hsl(
    var(--hue),
    var(--sat-bg-placeholder),
    var(--luma-bg-placeholder)
  ); */ /* #4F595F placeholder color ?? */

  /* --ofm-color-blue-gray-light: hsl(0, 0%, 90%, 0.3); */

  --ofm-color-gray-darkest: hsl(
    var(--hue),
    var(--sat-bg),
    var(--luma-bg)
  ); /* #18282F page bg color */

  --ofm-color-gray-medium: rgb(185, 190, 192); /* #BABEC0 secondary color */

  --ofm-color-white: var(--white); /* #FFFFFF  text color */
  --ofm-color-black: hsl(0, 0%, 0%); /* #000000 */

  --ofm-color-blue-medium: var(--blue);
  --ofm-color-blue-medium-5: hsl(206, 100%, 70%, 0.5); /* #0091FF alpha 0.5 */

  --ofm-color-notification-red: hsl(350, 100%, 50%); /* #F00024 */

  --ofm-color-violet-medium: hsl(257, 47%, 15%); /* #1E1437 */

  --ofm-bg-premium-color: var(--violet-primary);

  --border-hairline: 0.0625rem solid var(--white-70);

  --base-scale: calc(100vw / 75);
  --base-space: 1em;
  --half-space: calc(var(--base-space) * 0.5);
  --pad: clamp(0.5em, min(2vw, 4vh), 4em);
  --ofm-teaser-pad: clamp(1.00rem, calc(0.88rem + 0.62vw), 1.25rem);
  --ofm-scaled-space: clamp(1.00rem, 0.83rem + 0.83vw, 1.50rem);
  --ofm-scaled-radius: max(0.25rem, min(0.375rem, calc(var(--base-scale) * 0.375)));
  --ofm-space-user-settings: clamp(1rem, 0.41rem + 2.62vw, 2rem);

  /* dla viewport 360 - 970 */
  --ofm-size-0-32: clamp(0rem, calc(-1.18rem + 5.25vw), 2rem);
  --ofm-size-10-12: clamp(0.625rem, calc(0.55rem + 0.33vw), 0.75rem);
  --ofm-size-12-14: clamp(0.75rem, calc(0.68rem + 0.33vw), 0.875rem);   /* breadcrumbs fontsize */
  --ofm-size-16-0: clamp(1rem, calc(1.59rem + -2.62vw), 0rem);
  --ofm-size-16-18: clamp(1rem, calc(0.94rem + 0.31vw), 1.125rem);
  --ofm-size-16-21: clamp(1rem, calc(0.85rem + 0.77vw), 1.3125rem);
  --ofm-size-16-24: clamp(1rem, calc(0.70rem + 1.31vw), 1.50rem);
  --ofm-size-16-36: clamp(1rem, calc(0.26rem + 3.28vw), 2.25rem);    /* podcast and station title */
  --ofm-size-18-24: clamp(1.125rem, calc(0.90rem + 0.98vw), 1.50rem);   /* section title */
  --ofm-size-18-28: clamp(1.125rem, calc(0.76rem + 1.64vw), 1.75rem);
  --ofm-size-18-16: clamp(1.125rem, calc(1.20rem + -0.33vw), 1rem);
  --ofm-size-21-24: clamp(1.3125rem, calc(1.22rem + 0.46vw), 1.50rem);
  --ofm-size-21-28: clamp(1.3125rem, calc(1.17rem + 0.73vw), 1.75rem);
  --ofm-size-21-36: clamp(1.3125rem, calc(0.85rem + 2.31vw), 2.25rem);
  --ofm-size-24-32: clamp(1.50rem, calc(1.25rem + 1.23vw), 2rem);
  --ofm-size-24-40: clamp(1.50rem, calc(1.11rem + 1.74vw), 2.50rem);
  --ofm-size-40-32: clamp(2.50rem, calc(2.80rem + -1.31vw), 2rem);
  --ofm-size-40-48: clamp(2.50rem, calc(2.20rem + 1.31vw), 3rem);
  --ofm-size-64-100: clamp(4rem, calc(2.67rem + 5.90vw), 6.25rem);
  --ofm-size-128-172: clamp(8rem, calc(5.98rem + 7.87vw), 10.75rem);

  --fluid-14-16: clamp(0.875rem, 0.8261rem + 0.2174vw, 1rem);
  --fluid-14-24: clamp(0.875rem, 0.6576rem + 1.087vw, 1.5rem);

	--border-radius-outer: 0.5rem; /* ~8px */
	--border-radius-inner: 0.3125rem; /* ~5px */

  --ofm-gradient-1: linear-gradient(180deg, #0F142E 0%, rgba(15, 20, 46, 0) 59.3%);
  --ofm-gradients-photo-fade: linear-gradient(180deg, hsl(200, 32%, 14%, 0.4) 40%, var(--ofm-color-gray-darkest) 100%);
  --ofm-gradients-photo-fade-hover: linear-gradient(180deg, rgba(2, 7, 17, 0.3) -21.08%, var(--ofm-color-bunker) 99.25%);
  --ofm-dark-overlay: hsl(0, 0%, 0%, 0.5);

  --ofm-shadow-1: 0px -2px 4px 0px var(--ofm-dark-overlay);
  --ofm-shadow-2: 0px 0px 8px 0px var(--ofm-dark-overlay);

  --min-page-width: 16.875rem; /* 270px */
  --mid-page-width: 60.625rem; /* 970px */
  --max-page-width: 80rem; /* 1280px */
  --max-container-width: 58.75rem; /* 940px */

  --threshold-mobil: 62.625rem; /* 1002px */
  --threshold-narrow: 84.6875rem; /* 85.375rem - 1366px */

  --col-narrow-width: 40.25rem;
  --col-wide-width: 58.75rem;

  --grid-aside-width: 18.75rem; /* 300px */

  --nowplaying-anim: nowplaying 6s infinite linear;

  --onelogin-color: hsl(242, 92%, 53%);
  --onelogin-avatar-bg:	var(--violet-primary);
  --onelogin-icon-color: hsl(242, 91%, 77%);

  --font-icons: "icons";

  --ofm-logo-url: url(/ofm_logo.svg);

  --ofm-flowtext: system-ui, sans-serif;

  color-scheme: only light;

  background-color: #0F142E;
}

body {
  --ofm-labels-color: hsl(207, 100%, 31%);
  --ofm-bg-primary-color: hsl(231, 82%, 7%);/*  var(--haiti-approx); */
  --ofm-bg-secondary-color: hsl(0, 0%, 0%, 0.5);
  --ofm-bg-tertiary-color: var(--cloudburst-approx);
  --ofm-bg-placeholder-color: var(--white-70);
  --ofm-text-color: var(--ofm-color-white);
  --ofm-text-secondary-color: var(--white-70);
  --ofm-hide-text-behind-gradient: linear-gradient(90deg,rgba(255,255,255,0) 0%,var(--ofm-bg-primary-color) 98%);
  --ofm-image-light-gradient: linear-gradient(180deg,rgba(24,40,47,0) 0%,var(--ofm-bg-primary-color) 100%);
  --ofm-image-dark-gradient: linear-gradient(180deg,rgba(2,7,17,0.3) -21.08%,var(--adv-txt-color) 99.25%);
  --ofm-fontsize-xxs: 0.625rem;
  --ofm-fontsize-xs: 0.75rem;
  --ofm-fontsize-s: 0.875rem;
  --ofm-fontsize-m: 1rem;
  --ofm-fontsize-l: 1.125rem;
  --ofm-fontsize-xl: 1.5rem;
  --ofm-fontsize-xxl: 1.75rem;
  --ofm-fontsize-xxxl: 2rem;
  --nowplaying-bgcolor: var(--ofm-bg-primary-color);
}

html,body,div,p,h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dt,dd,form,fieldset,caption,legend,
table,tr,td,th,address,blockquote,img,figure {
	margin:0;
	padding:0;
}

img, fieldset {
	border:none;
}

blockquote, q {
	quotes:none;
}

body *, *:after, *:before {
	box-sizing:border-box;
}

legend {
  appearance: none;
  display: block;
}

button, label, summary {
	cursor:pointer;
}

html, body {
	height:100%;
}

body, button, input, table, textarea, select {
	font-size: 1rem;
	line-height: 1.5;
	font-family: var(--ofm-flowtext);
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote::after,
q::before, q::after {
  content: '';
  content: none;
}

hr {
  display: none;
}

ol, ul {
  list-style: none;
}

input:not([type="input"]) {
  box-sizing: border-box;
}

body {
  color: var(--ofm-text-color);
  background-color: var(--dark-secondary);

  scroll-behavior: smooth;
  font-optical-sizing: auto;
}

body:has(.modal:target) {
  overflow: hidden;
}

/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
  display: none;
}

/* a:focus {
  outline: 1px solid var(--ofm-color-blue-medium-5);
  outline-offset: 3px;
}

button:focus {
  box-shadow:
    0 0 0 1px transparent,
    0 0 0 1px var(--ofm-color-blue-medium-5);
}

::-moz-focus-inner {
  border: 0;
} */

a:focus,
button:focus {
  outline: auto;
  outline-color:var(--blue)
}
#root, #__next {
  isolation: isolate;
  /* background: var(--bg-gradient); */
  background-color: var(--dark-primary);
}

#__next:has(main.entry) {
  background: linear-gradient(198.87deg, #0F142E 20.13%, #461C94 80.33%);
}

#fauxBody,
.modal, .modal > a {
  position: fixed;
	inset: 0;
  overflow: auto;
  scroll-behavior: smooth;
}

button {
  align-items: center;
  background-color: transparent;
  border-radius: 0;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font-size: 1em;
  justify-content: center;
  line-height: 0;
  margin: 0;
  outline: none;
  padding: 0;
  position: relative;
  text-decoration: none;
  user-select: none;
  vertical-align: middle;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

button,
a {
  --_color: var(--ofm-text-color);
  --_colorHover: var(--ofm-text-color);
  text-decoration: none;
  color: var(--_color);
}

button:hover,
a:hover,
a:active,
a[aria-current=page] {
  color: var(--_colorHover)
}

.textShortening,
[style*=--ofm-line-clamp-number] {
  --ofm-line-clamp-number: 1;

  display: -webkit-box;
  -webkit-line-clamp: var(--ofm-line-clamp-number, 1);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.visuallyhidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.visuallyhidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.Placeholder {
  position: relative;
  width: 100%;
}

.Placeholder.rails {
  height: 100%;
}

.Placeholder > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header-logo {
  position: relative;
  margin-left: 0 !important;
  width: 150px;
  height: 45%;
  background: url(/ofm_logo.svg) no-repeat left center;
}

.header-logo a {
  display: block;
  height: 100%;
  text-indent: -1000rem;
}

.header-logo a::before {
  content: "";
  position: absolute;
  inset: 0;
}

h2, h3, h4, h5, h6 {
  --_fontSize: var(--ofm-fontSize, var(--ofm-size-18-24));
  --_fontWeight: var(--ofm-fontWeight, 700);

  font-size: var(--_fontSize);
  font-weight: var(--_fontWeight);
}

h3, h4, h5 {
  --ofm-fontSize: var(--ofm-fontsize-m);
  --ofm-fontWeight: 600;
}

:is(h3, h4, h5) > a {
  color: var(--ofm-text-color);
}

:is(h3, h4, h5) > a:hover {
  color: var(--ofm-color-blue-medium);
}

#site-header {
  margin-bottom: 20px;
}

#site-header > div {
  background-color: var(--dark-secondary);
  transition: transform 0.4s;
}

#site-header > div > div {
  display: flex;
  align-items: center;
  gap: 0 var(--base-space);
}

#site-header > div > div > :not(h1) {
  margin-inline-start: auto;
}

#main-content {
  min-height: 400px;
  margin-bottom: 22px;
}

body.scroll-up {
  padding-top: clamp(4.00rem, calc(2.67rem + 5.90vw), 6.25rem);
}

.scroll-down #site-header > div {
  transform: translate3d(0, -100%, 0);
}

#site-header > div,
#site-header > div > div {
  height: 4rem;
}

#site-header > .superapp-header {
  height: auto;
}

.scroll-up #site-header > div,
.scroll-up #site-header > div > div {
  height: 3.125rem;
}
.scroll-up #site-header .superapp-header {
  height: auto;
}

.scroll-up #site-header > div {
  position: fixed;
  transform: none;
  inset: 0 0 auto 0;
  z-index: 298;
}

#ofm-cookie-info {
  width: 100%;
}

#notifications,
#site-header > div > div,
#site-footer > div,
main > :is(div, section, form),
.wrapper {
  margin-inline: auto;
  max-width: var(--mid-page-width);
}

.sc-mu1m3rp main > :is(div, section, form),
.sc-mu1m3rp .wrapper {
  max-width: var(--max-container-width);
}

#user-bar,
#main-menu > ul,
ul:is(.actions, .controls) {
  display: flex;
}

#user-bar {
  gap: 1em;
  align-items: center;
}

#main-menu {
  margin-inline-end: auto;
}

#main-menu > ul,
ul.actions {
  gap: var(--ofm-menu-gap, 1rem);
}
#main-menu a {
  text-transform: uppercase;
  padding: 1em 0;
}

#main-menu a::before {
  content: "";
}

#main-menu .premium a {
  padding: 0.625em 1em;
  border-radius: 1.5rem;
  background-color: var(--ofm-bg-premium-color);
  color: var(--ofm-text-color);
  font-weight: 300;
}
#main-menu .premium a:hover {
  background-color: hsl(285, 100%, 50%, 0.8);
}

.scroll-up #main-menu a {
  padding-top: 0.3125em;
  padding-bottom: 0.3125em;
}

.homepage > *,
.articles > * + *  {
  margin-block: 2.5rem;
}

.wrapper[variant=grid] {
  row-gap: 15px;
}

.wrapper[variant=grid] > div > * ~ * {
  margin-block-start: 14px;
}

main + footer,
main ~ div + footer {
  margin-block-start: var(--ofm-scaled-space);
}

#ofm-player > div {
  position: fixed;
  bottom: calc(clamp(3.75rem, 3.50rem + 1.23vw, 4.25rem) + 1rem);
  left: 1rem;
  width: 1px;
  transform: scale(0);
}

#ofm-player.open > div {
  transform: scale(1);
  width: min(100%, 37.5rem) !important;
  height: auto !important;
}

#ofm-player > div .liveinfo {
  display: none !important;
}

#notifications {
  position: fixed;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  z-index: 5;
}

#notifications > div {
  position: absolute;
  right: 0;
}

#notifications > div > div {
  position: absolute;
  transform: translateX(calc(-100% - 5px));
}

#notifications > div > div > * + *  {
  margin-top: 0.5em;
}

a.actionMore {
  position: relative;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  width: var(--ofm-size-128-172);
  height: var(--ofm-size-128-172);
  border-radius: var(--border-radius-outer);
}

a.actionMore > span {
  position: relative;
  z-index: 1;
}

a.actionMore::before {
  content: "";
  position: absolute;
  inset: -28%;
  background: no-repeat 50% 50% / cover;
  background-image: linear-gradient(var(--ofm-dark-overlay), var(--ofm-dark-overlay)), url(/tile_more.jpg);
  filter: blur(1.25rem);
  z-index: 0;
}

a.actionMore:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ofm-gradient-1) no-repeat 50% 50% / cover;
}

progress {
  appearance: none;
  border: none;
  border-radius: 2px;
  height: 0.3125em;
}

progress::-webkit-progress-bar {
  background-color: var(--ofm-bg-placeholder-color);
  border-radius: 2px;
}

progress::-webkit-progress-value {
  background-color: var(--ofm-color-white);
  border-radius: 2px;
}

progress::-moz-progress-bar {
  background-color: var(--ofm-bg-placeholder-color);
  border-radius: 2px;
}

#page-header {
  position: relative;
}

#page-header h1 {
  --ofm-fontSize: var(--ofm-size-18-28);
  display: flex;
  align-items: center;
  padding-block-end: 0;
  height: 3rem;
  text-transform: none;
  gap: 0 0.25em;
  white-space: nowrap;
}

#page-header:has(.actions) h1 {
  width: calc(100% - 3rem);
  overflow: hidden;
  background: linear-gradient(90deg,var(--ofm-text-color) 70%,transparent 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#page-header h1 > a {
  color: var(--ofm-color-white);
}

#page-header > h2 + nav {
    margin-block-start: clamp(0.5rem, 0.2554rem + 1.087vw, 1.125rem);
}

#page-header h1[style*="logo"]::before {
  content: "";
  display: block;
  width: var(--ofm-size-40-48);
  height: var(--ofm-size-40-48);
  aspect-ratio: 1 / 1;
  background: var(--station-logo) no-repeat center center;
  background-size: contain;
  border-radius: 0.125em;
}

#page-header .actions {
  position: absolute;
  inset: 50% 0 auto;
  display: flex;
  align-items: center;
  height: 3rem;
  transform: translateY(-50%);
}

#page-header .actions [name=favorite] {
  margin-inline-start: auto;
}

article[data-premium] header::before {
  content: "PREMIUM";
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 0.625rem;
  font-weight: 700;
  background-color: var(--ofm-bg-premium-color);
  color: var(--ofm-text-color);
  border-radius: 0.25rem;
  max-height: 1.5rem;
  overflow: hidden;
  z-index: 3;
}

main {
  margin-block-start: 18px;
}

.page-header-category {
  margin-block-end: 0;
  margin-block-start: 0 !important;
}

ul.actions {
  flex-wrap: wrap;
}

.actions a, a.action {
  --btn-fontsize: var(--ofm-fontsize-m);
  --btn-color: var(--ofm-text-color);
  --btn-border-color: var(--ofm-text-color);
  --btn-bg-color: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  padding-inline: 2em;

  border-radius: 2em;
  border: 0.0625rem solid var(--btn-border-color);

  background-color: var(--btn-bg-color);
  color: var(--btn-color);

  transition: scale 0.3s, background 0.3s;

  min-width: 4.1875rem;
  height: 3rem;

  white-space: nowrap;
}

.actions a.featured {
  --btn-color: var(--ofm-bg-tertiary-color);
  --btn-bg-color: var(--ofm-text-color);
}

.actions a:hover {
  scale: 1.1;
}

.modal {
  align-items: center;
  justify-content: center;
	opacity: 0;
	background: hsl(0, 0%, 0%, 0.7);
	transition: opacity 0.3s;
  font-weight: 300;
}

#modal-root .modal {
  opacity: 1;
}

.modal:target {
  display: flex;
  opacity: 1;
  z-index: 999;
}
.modal:target > a {
	display:block; /* undo hidden state */
}

.modal > div {
  --_width: min(100%, var(--ofm-modal-width, 46.875rem));
  --_bgColor: var(--ofm-modal-bgColor, var(--bigstone-approx));
  --_radius: var(--ofm-modal-radius, 0.5rem);

	position: relative;
	margin: auto;
	background: var(--_bgColor);
	border-radius: var(--_radius);
	box-shadow: var(--modalBoxShadow);
  width: var(--_width);

  padding-inline: clamp(1.3125rem, 0.0584rem + 5.5738vw, 3.4375rem);
  padding-block: clamp(2.5rem, 2.3525rem + 0.6557vw, 2.75rem);
}

.modal h2 {
  text-align: center;
}

.modal h3 {
  font-size: var(--ofm-size-16-18);
  margin-bottom: var(--ofm-size-16-21);
}

.modal > div > div:first-of-type {
	height: 100%;
  overflow: hidden;
  overflow-y: auto;
}

.modal h2 + div,
.modal h2 + div :is(section, p, ul) {
  margin-top: var(--ofm-size-16-21);
}


/* .modal > a {
	text-indent: -999em;
} */

.modal > a span,
.modalClose span {
	position:fixed;
	left:-999em;
}

.modalClose {
  display: block;
	position: absolute;
	top: clamp(2.5rem, 2.3525rem + 0.6557vw, 2.75rem);
	right: clamp(1.3125rem, 0.0584rem + 5.5738vw, 3.4375rem);
	text-decoration: none;
	transition: scale 0.3s;
	color:var(--headerColor);
}
.modalClose::before {
  content: "\e80b";
  font-family: var(--font-icons);
  font-size: var(--ofm-size-18-24);
}

#contactUs {
  --ofm-modal-width: 45.625rem;
}
#contactUs ul li {
  list-style: inside;
  padding-inline-start: var(--ofm-size-16-21);
}

#contactUs section:first-child {
  padding-block-end: var(--ofm-size-16-21);
  border-bottom: 1px outset var(--ofm-color-white);
}

#contactUs a[href^=mailto] {
  font-weight: 700;
}

.modal h2 + div li + li {
  margin-block: 0.75em;
}

/**
  #site-footer
*/

#site-footer {
  color: var(--ofm-text-secondary-color);
  border-top: 1px solid hsl(0, 0%, 100%, 0.3);
  background-color: hsl(230, 51%, 12%, 0.4);
  padding-block: 1.5em;
}

#site-footer h2 {
  text-transform: uppercase;
  font-size: var(--ofm-fontsize-xs);
}

#site-footer > div > section > h2 {
  font-size: var(--ofm-fontsize-m);
}

#site-footer .disclaimer > p {
  margin-top: var(--base-space);
  border-top: var(--border-hairline);
  padding: 1rem 0.1875rem 0;
  text-align: center;
  font-size: var(--ofm-size-10-12);
}

#site-footer :is(.socialLinks, .rodoLinks, .socialLinks > ul) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#site-footer .rodoLinks {
  gap: 0 1.3125rem;
  margin-top: 1.3125rem;
}

#site-footer .rodoLinks > li {
  font-size: var(--ofm-fontsize-xs);
  text-transform: capitalize;
}

#site-footer .socialLinks {
  gap: 0.5em;
}

#site-footer .socialLinks::before {
  content: "";
  height: clamp(2rem, calc(1.69rem + 1.88vw), 2.8125rem);
  flex: 1;
  background: no-repeat left center;
  background-size: contain;
  background-image: var(--ofm-logo-url);
}

#site-footer .socialLinks > ul a {
  font-size: 1.5rem;
}

#site-footer .linkSections {
  text-align: center;
}

#site-footer .linkSections > div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  overflow: hidden;
  margin-block-start: 1.3125rem;
  gap: 1.3125rem 0;
  text-align: left;
}

#footerLinksExpanded {
  position: absolute;
  left: -999em;
}

label[for=footerLinksExpanded] {
  display: inline-flex;
  align-items: center;
  margin-inline: auto;
  font-size: var(--ofm-fontsize-xs);
  margin-block: 0.25rem;
  min-width: 3rem;
  min-height: 3rem;
  gap: 0.25em;
}

#site-footer .linkSections section {
  flex: 1 0 25%;
}

#site-footer [class="linkSections"] ul {
  margin-top: .3125rem;
}

#site-footer .linkSections ul a {
  font-size: var(--ofm-fontsize-xs);
  margin: 0.125rem 0;
  padding: 0.5em 0;
  display: inline-block;
  min-width: 50%;
  line-height: 1;
}

#site-footer .linkSections ul a::first-letter {
  text-transform: uppercase;
}

.categories,
.labels,
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}

.tags {
  overflow: hidden;
  overflow-x: auto;
}

.tags li {
  display: inline-flex;
  align-items: center;
  width: max-content;
  height: 3rem;

}

:is(.tags, .categories) a,
:is(.tags, .categories, .labels) label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-weight: 600;
  line-height: 1;
  color: var(--ofm-color-white);
}

:is(.tags, .categories) a {
  position: relative;
  border-radius: 1.5em;
  padding: 0 1em;
  min-width: 4.1875rem;
}

.tags a {
  border: 0.0625rem solid hsl(0, 0%, 100%, 0.4);
  border-radius: 1.5em;
  font-size: var(--ofm-fontsize-s);
  min-height: 40px;
}

.tags a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3rem;
  transform: translateY(-50%);
}

.tags li.selected a {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

.categories a {
  height: 1.5rem;
  font-size: var(--ofm-size-12-14);
  background-color: hsla(0, 0%, 100%, 0.3);
}

:is(.tags, .categories, .labels) label {
  height: 1.5rem;
  font-size: var(--ofm-size-10-12);
  border-radius: 0.25rem;
  width: max-content;
  background-color: var(--ofm-labels-color);
  padding: 0 1em;
}

:is(.tags, .categories, .labels) .premium label {
  background-color: var(--ofm-bg-premium-color);
}

:is(.tags, .categories, .labels) .adult label {
  background-color: var(--ofm-color-notification-red);
  padding: .25rem;
}

.categorySelection {
  overflow-x: hidden;
  margin-block-start: 0 !important;
}

input[type=checkbox] + label > i::before {
  padding-top: 0.125em;
}

input[type=checkbox]:checked + label > i::before {
  content: "\e808"
}

input[type=checkbox] + label::before {
  content: "Rozwiń";
}
input[type=checkbox]:checked + label::before {
  content: "Zwiń";
}

button[name=listen] {
  font-size: 3rem;
  color: hsl(0, 0%, 100%);
  border-radius: 2em;
  width: 4rem;
  height: 4rem;
  border-radius: 2em;
}

button[name=listen]::before {
  font-size: 1.333em;
}


button[name=listen].eq,
button[name=listen].loading {
  background-color: #fff;
}

div.moreText {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.8125em;
}

div.moreText > button {
  width: max-content;
  color: var(--lilac-primary);
  font-size: 0.875em;
}

div.moreText > button > span {
  text-decoration: underline;
}

div.moreText > button::after {
  content: "\e807";
  font-family: icons;
}

ofm-italic {
  font-style: italic;
}
ofm-bold {
  font-weight: bold;
}

:where(#page-header ~ section) > :is(h2, h3, h4) {
  --ofm-fontSize: var(--ofm-size-18-24);
  letter-spacing: .05rem;

  line-height: 1.5;
  padding: clamp(0.25rem, calc(0.58rem + -0.42vw), 0.50rem) 0;
}

#ofm-player p.promo {
  display: flex;
  align-items: center;
  gap: 0.8667em;
  padding: 1.25em 1em;
  background: linear-gradient(135deg, #5522B5 -3.84%, #B522A6 115.33%);
}

#ofm-player p.promo a.action {
  background-color: var(--ofm-color-white);
  color: hsla(230, 51%, 12%, 1);
  font-size: 0.8em;
  padding: 0 0.667em;
  margin-inline-start: auto;
  height: 1.875rem;
}


.cards {
  --teaser-base-width: var(--ofm-size-128-172, 100%);
  --teaser-mobile-row-width: min(18rem, 100%);

  --teaser-tile-base-width: var(--teaser-base-width);
  --teaser-tile-mobile-row-width: 4rem;

  --teaser-width: var(--teaser-base-width);
  --teaser-tile-width: var(--teaser-tile-base-width);

  --teaser-list-tpl: repeat(auto-fill, var(--teaser-width));

  display: grid;
  grid-template-columns: var(--teaser-list-tpl);
  gap: 16px var(--ofm-teaser-pad);
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  overflow-x: auto;

  scrollbar-width: none;  /* ukrycie scrollbara dla FF */
}
.cards::-webkit-scrollbar {
  display: none;
}

.cards > * {
  scroll-snap-align: start;
}

#episodes .cards {
  display: block;
}

.iconLoader,
.equalizer {
  --eq-bg-color : var(--ofm-color-white);
  --eq-bar-color: #000;
  --eq-size: 1.5rem;
  font-size: var(--eq-size);
  height: 1em;
  display: flex;
  align-items: flex-end;
  gap: 0.146em;
}

.iconLoader::before,
.equalizerBar {
  background-color: var(--eq-bar-color);
  width: 0.19em;
  height: 0;
  border-radius: 5px;
}

.iconLoader::before {
  content: "";
  display: block;
  height: 100%;
  animation: animloader 1s linear infinite alternate;
}

.equalizerBar-1 {
  animation: bnce .7s .1s infinite alternate;
}

.equalizerBar-2 {
  animation: bnce2 .5s .5s infinite alternate;
}

.equalizerBar-3 {
  animation: bnce3 .8s .3s infinite alternate;
}

.equalizerBar-4 {
  animation: bnce4 .6s .7s infinite alternate;
}

.equalizerBar-5 {
  animation: bnce5 .5s .2s infinite alternate;
}

.station > section {
  --fluid-250-300: clamp(15.625rem, 13.7807rem + 8.1967vw, 18.75rem);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5em 0;
  padding-inline-start: calc(var(--fluid-250-300) + 1.625rem);
  min-height: var(--fluid-250-300);
}

.station .playingNow > img {
  width: var(--fluid-250-300);
  aspect-ratio: 1 / 1;
}

.station .playingNow > p strong {
  font-size: var(--ofm-size-18-16);
  font-weight: 400;
  color: var(--white-70);
}

.station .extras {
  display: flex;
  flex-wrap: wrap;
  flex: 1 0 100%;
  align-content: flex-start;
  gap: 0.5em 1em;
}

.station .playSoon {
  flex: 1 0 100%;
}

.station .playSoon h3 {
  padding-block: 0.5em 0.25em;
}

.station .playSoon ul > li {
  font-size: clamp(0.875rem, 1.0738rem + -0.3279vi, 1rem);
  color: var(--white-70);
}

.station .playingNow > p b {
  font-weight: 500;
}

:is(.station, .podcastEpisode) .controls > li:nth-child(2) {
  display: flex;
  justify-content: center;
  flex: 1 1;
}

:is(.station, .podcastEpisode) .controls a[class^=icon-arrow] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ofm-fontsize-xxl);
  width: 48px;
  height: 64px;
 /*  aspect-ratio: 1 / 1; */
}

[data-disabled="true"] {
  pointer-events: none;
}

/* 480px */
@media (min-width: 30rem) {
  #main-menu > ul a:hover {
    color: var(--ofm-color-white);
  }

  .tags li > a:hover {
    background-color: hsl(0, 0%, 100%);
    color: hsl(0, 0%, 0%);
  }

  button[name=listen]:hover {
    color: var(--white-70);
  }
}

/* 970px + 32px */
@media (min-width: 62.625rem) {
  #main-menu a {
    --_color: var(--ofm-text-secondary-color);
  }
  a {
    --_color: var(--ofm-color-white);
  }

  body:not(.sc-mu1m3rp) .wrapper[variant=grid] {
    display: grid;
    grid-template-columns: 1fr var(--grid-aside-width, 18.75rem);
    grid-template-rows: repeat(var(--grid-content-length, 1), auto);
    grid-auto-flow: column;
    column-gap: 1.625rem;
  }

  .wrapper[variant=grid] > * ~ *:not(aside) {
    margin-block-start: var(--ofm-size-24-40);
  }

  .wrapper[variant=grid] > * ~ aside + div {
    margin-block-start: 0;
  }

  :is(#main-menu, .controls) [data-hidden=mobile] {
    display: initial;
  }

  #radioStations > header {
    margin-block-end: clamp(0.5rem, 0.2554rem + 1.087vw, 1.125rem);
  }

  .station .controls {
    order: 1;
    border-top: 1px solid hsl(0, 0%, 100%, 0.2);
    padding-top: 1rem;
  }

  .station .playingNow > img {
    position: absolute;
    top: 0;
    left: 0.5rem;
  }

  .station .playSoon li {
    background-color: transparent;
    background-size: 100%;
    background-repeat: repeat;
    background-image: linear-gradient(180deg, hsl(0, 0%, 100%, 1), hsl(0, 0%, 100%, 0.8));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .station .playSoon li:nth-child(1) {
    font-size: 1.125rem;
  }
  .station .playSoon li:nth-child(2) {
    background-image: linear-gradient(180deg, hsl(0, 0%, 100%, 0.7), hsl(0, 0%, 100%, 0.5));
  }
  .station .playSoon li:nth-child(3) {
    background-image: linear-gradient(180deg, hsl(0, 0%, 100%, 0.5), hsl(0, 0%, 100%, 0.3));
  }
  .station .playSoon li:nth-child(4) {
    background-image: linear-gradient(180deg, hsl(0, 0%, 100%, 0.3), hsl(0, 0%, 100%, 0.1));
  }

  .station .playSoon li {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .station .playingNow > p {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
  }

  .iconLoader {
    margin-left: -1.75rem;
  }
}

/* 970px + 32px and 1280px + 32px */
@media (min-width: 62.625rem) and (max-width: 82rem) {
  body:not(.sc-mu1m3rp) .catalog .wrapper[variant="grid"] {
    column-gap: 3rem;
  }

  .wrapper[variant=grid] > .colspan2,
  .wrapper[variant=grid] > .newestArticles {
    grid-column: span 2;
  }

  a.actionMore {
    display: flex;
  }
}

/* 1280px + 32px */
@media (min-width: 82rem) {
  main > :is(div, section, form),
  .wrapper,
  #notifications,
  #site-header > div > div,
  #site-footer > div {
    max-width: var(--max-page-width);
  }

  #page-header.page-header-category {
    max-width: var(--max-page-width);
    margin-inline: auto;
  }
  .sc-mu1m3rp main > :is(div, section, form),
  .sc-mu1m3rp .wrapper {
    max-width: var(--max-container-width);
  }

  body:not(.sc-mu1m3rp) .wrapper[variant=grid] {
    column-gap: 0.625rem;
  }

  body:not(.sc-mu1m3rp) .wrapper[variant=grid] > :is(div, section),
  body:not(.sc-mu1m3rp) .wrapper[variant=grid] > div > :is(div, section) {
    max-width: var(--max-container-width);
  }

  .station > section {
    padding-inline-start: calc(var(--fluid-250-300) + 3.5rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
    scroll-behavior: smooth;
  }
}

@keyframes nowplaying {
  0% {transform: translateX(0);}
  100% {transform: translateX(calc(-1 * var(--nowplaying-text-width)));}
}

@keyframes bnce {
  30% { height: 43%; }
  60% { height: 71%; }
  100% { height: 29%; }
}
@keyframes bnce2 {
  20% { height: 71%; }
  40% { height: 43%; }
  100% { height: 86%; }
}
@keyframes bnce3 {
  80%{ height: 100%; }
}
@keyframes bnce4 {
  70% { height: 64%; }
}
@keyframes bnce5 {
  60%{ height: 29%; }
}

@keyframes animloader {
  0% {
    box-shadow: 0.292em 0 rgba(255, 255, 255, 0), 0.584em 0 rgba(255, 255, 255, 0), 0.876em 0 rgba(255, 255, 255, 0), 1.168em 0 rgba(255, 255, 255, 0);
  }
  25% {
    box-shadow: 0.292em 0 #000, 0.584em 0 rgba(255, 255, 255, 0), 0.876em 0 rgba(255, 255, 255, 0), 1.168em 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 0.292em 0 #000, 0.584em 0 #000, 0.876em 0 rgba(255, 255, 255, 0), 1.168em 0 rgba(255, 255, 255, 0);
  }
  75% {
    box-shadow: 0.292em 0 #000, 0.584em 0 #000, 0.876em 0 #000, 1.168em 0 rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0.292em 0 #000, 0.584em 0 #000, 0.876em 0 #000, 1.168em 0 #000;
  }
}

#ofm-console {
  position: fixed;
  bottom: 190px;
  left: 0;

  font-size: .75rem;

  background-color: hsl(0, 0%, 0%, 0.9);

  padding: 1em;

  border-bottom-right-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}