.elementor-14031 .elementor-element.elementor-element-17bfd10 > .elementor-background-overlay{opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-14031 .elementor-element.elementor-element-17bfd10{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-14031 .elementor-element.elementor-element-6c14d81{text-align:center;}.elementor-14031 .elementor-element.elementor-element-7b4e305{--spacer-size:164px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-14031 .elementor-element.elementor-element-923841a{text-align:justify;}.elementor-14031 .elementor-element.elementor-element-923841a .elementor-heading-title{font-family:"Murecho", Sans-serif;font-weight:800;-webkit-text-stroke-color:#000;stroke:#000;text-shadow:7px 0px 0px #000000;color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-b1079ca > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-14031 .elementor-element.elementor-element-b1079ca{text-align:justify;}.elementor-14031 .elementor-element.elementor-element-b1079ca .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:17px;font-weight:600;color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-060cb40{--spacer-size:163px;}.elementor-14031 .elementor-element.elementor-element-8712f81{text-align:center;}.elementor-14031 .elementor-element.elementor-element-8712f81 .elementor-heading-title{font-family:"Murecho", Sans-serif;font-weight:800;-webkit-text-stroke-color:#000;stroke:#000;text-shadow:7px 0px 0px #000000;color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-30e245b.elementor-social-icon{background-color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-30e245b.elementor-social-icon i{color:#FF0000;}.elementor-14031 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-30e245b.elementor-social-icon svg{fill:#FF0000;}.elementor-14031 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-f1aae98.elementor-social-icon{background-color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-f1aae98.elementor-social-icon i{color:#FF0000;}.elementor-14031 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-f1aae98.elementor-social-icon svg{fill:#FF0000;}.elementor-14031 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-1cda8a4.elementor-social-icon{background-color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-1cda8a4.elementor-social-icon i{color:#FF0000;}.elementor-14031 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-1cda8a4.elementor-social-icon svg{fill:#FF0000;}.elementor-14031 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-ca8ec49.elementor-social-icon{background-color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-ca8ec49.elementor-social-icon i{color:#FF0000;}.elementor-14031 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-ca8ec49.elementor-social-icon svg{fill:#FF0000;}.elementor-14031 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-6e96c77.elementor-social-icon{background-color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-6e96c77.elementor-social-icon i{color:#FF0000;}.elementor-14031 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-6e96c77.elementor-social-icon svg{fill:#FF0000;}.elementor-14031 .elementor-element.elementor-element-8d71556{--grid-template-columns:repeat(0, auto);--icon-size:21px;--grid-column-gap:4px;--grid-row-gap:0px;}.elementor-14031 .elementor-element.elementor-element-8d71556 .elementor-widget-container{text-align:center;}.elementor-14031 .elementor-element.elementor-element-8d71556 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-14031 .elementor-element.elementor-element-e4ecf23{padding:0px 0px 0px 0px;}.elementor-widget-media-carousel .elementor-carousel-image-overlay{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-14031 .elementor-element.elementor-element-640e39f.elementor-skin-slideshow .elementor-main-swiper{margin-bottom:10px;}.elementor-14031 .elementor-element.elementor-element-640e39f .elementor-swiper-button{font-size:20px;}.elementor-14031 .elementor-element.elementor-element-640e39f .elementor-main-swiper .elementor-carousel-image{background-size:contain;}.elementor-14031 .elementor-element.elementor-element-ff36656 .elementor-heading-title{color:#070000FC;}.elementor-14031 .elementor-element.elementor-element-54d3876 > .elementor-widget-container{margin:0px 0px -17px 0px;padding:0px 0px 0px 0px;}.elementor-14031 .elementor-element.elementor-element-54d3876{text-align:center;}.elementor-14031 .elementor-element.elementor-element-54d3876 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:23px;font-weight:500;color:#000000;}.elementor-14031 .elementor-element.elementor-element-801f7b2 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-14031 .elementor-element.elementor-element-801f7b2{text-align:center;}.elementor-14031 .elementor-element.elementor-element-372cabd .elementor-heading-title{color:#070000FC;}.elementor-14031 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-30e245b.elementor-social-icon{background-color:#FF0000;}.elementor-14031 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-30e245b.elementor-social-icon i{color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-30e245b.elementor-social-icon svg{fill:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-f1aae98.elementor-social-icon{background-color:#FF0000;}.elementor-14031 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-f1aae98.elementor-social-icon i{color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-f1aae98.elementor-social-icon svg{fill:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-1cda8a4.elementor-social-icon{background-color:#FF0000;}.elementor-14031 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-1cda8a4.elementor-social-icon i{color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-1cda8a4.elementor-social-icon svg{fill:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-ca8ec49.elementor-social-icon{background-color:#FF0000;}.elementor-14031 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-6e96c77.elementor-social-icon{background-color:#FF0000;}.elementor-14031 .elementor-element.elementor-element-eb6888a{--grid-template-columns:repeat(0, auto);--grid-column-gap:2px;--grid-row-gap:0px;}.elementor-14031 .elementor-element.elementor-element-eb6888a .elementor-widget-container{text-align:center;}.elementor-14031 .elementor-element.elementor-element-eb6888a > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-14031 .elementor-element.elementor-element-dbf5009 > .elementor-widget-container{margin:0px 0px -9px 0px;}.elementor-14031 .elementor-element.elementor-element-dbf5009{text-align:center;}.elementor-14031 .elementor-element.elementor-element-dbf5009 .elementor-heading-title{font-family:"Saira", Sans-serif;font-size:17px;font-weight:600;color:#000000;}.elementor-14031 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-30e245b.elementor-social-icon{background-color:#FF00000D;}.elementor-14031 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-30e245b.elementor-social-icon i{color:#000000F5;}.elementor-14031 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-30e245b.elementor-social-icon svg{fill:#000000F5;}.elementor-14031 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-f1aae98.elementor-social-icon{background-color:#FF00000D;}.elementor-14031 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-f1aae98.elementor-social-icon i{color:#000000;}.elementor-14031 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-f1aae98.elementor-social-icon svg{fill:#000000;}.elementor-14031 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-1cda8a4.elementor-social-icon{background-color:#FF00000D;}.elementor-14031 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-1cda8a4.elementor-social-icon i{color:#000000;}.elementor-14031 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-1cda8a4.elementor-social-icon svg{fill:#000000;}.elementor-14031 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-739e0ae.elementor-social-icon{background-color:#FF00000D;}.elementor-14031 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-739e0ae.elementor-social-icon i{color:#000000;}.elementor-14031 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-739e0ae.elementor-social-icon svg{fill:#000000;}.elementor-14031 .elementor-element.elementor-element-8dd6fb8{--grid-template-columns:repeat(0, auto);--grid-column-gap:5px;--grid-row-gap:0px;}.elementor-14031 .elementor-element.elementor-element-8dd6fb8 .elementor-widget-container{text-align:center;}.elementor-14031 .elementor-element.elementor-element-8dd6fb8 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-14031 .elementor-element.elementor-element-6bfe6e3{padding:0px 0px 160px 0px;}.elementor-14031 .elementor-element.elementor-element-b0b0a41{text-align:center;}.elementor-14031 .elementor-element.elementor-element-b0b0a41 .elementor-heading-title{color:#000000;}.elementor-14031 .elementor-element.elementor-element-cdb6d91{--swiper-slides-gap:10px;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-14031 .elementor-element.elementor-element-f10de5e{--divider-border-style:solid;--divider-color:#FFFFFF;--divider-border-width:3.3px;}.elementor-14031 .elementor-element.elementor-element-f10de5e .elementor-divider-separator{width:52%;margin:0 auto;margin-center:0;}.elementor-14031 .elementor-element.elementor-element-f10de5e .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-14031 .elementor-element.elementor-element-c31988b{text-align:center;}.elementor-14031 .elementor-element.elementor-element-c31988b .elementor-heading-title{font-family:"Roboto Condensed", Sans-serif;font-weight:bold;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-14031 .elementor-element.elementor-element-9d88582{font-family:"Roboto Condensed", Sans-serif;font-weight:400;color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-0286fb4{text-align:center;}.elementor-14031 .elementor-element.elementor-element-0286fb4 .elementor-heading-title{font-family:"Roboto Condensed", Sans-serif;font-weight:bold;color:#FEFEFE;}.elementor-14031 .elementor-element.elementor-element-2309f42{text-align:left;font-family:"Roboto Condensed", Sans-serif;font-weight:400;color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-85bb7a9{text-align:center;}.elementor-14031 .elementor-element.elementor-element-85bb7a9 .elementor-heading-title{font-family:"Roboto Condensed", Sans-serif;font-weight:bold;color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-e38d47f{color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-e9722dc{text-align:center;}.elementor-14031 .elementor-element.elementor-element-e9722dc .elementor-heading-title{font-family:"Roboto Condensed", Sans-serif;font-weight:bold;color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-fd523a0{font-family:"Roboto Condensed", Sans-serif;font-weight:400;color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-ff9128e{text-align:center;}.elementor-14031 .elementor-element.elementor-element-ff9128e .elementor-heading-title{font-family:"Roboto Condensed", Sans-serif;font-weight:bold;color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-48f9ac7{font-family:"Roboto Condensed", Sans-serif;font-weight:400;color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-74a7255{--divider-border-style:solid;--divider-color:#FFFFFF;--divider-border-width:3.3px;}.elementor-14031 .elementor-element.elementor-element-74a7255 .elementor-divider-separator{width:52%;margin:0 auto;margin-center:0;}.elementor-14031 .elementor-element.elementor-element-74a7255 .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-14031 .elementor-element.elementor-element-0bc433e{text-align:center;}.elementor-14031 .elementor-element.elementor-element-0bc433e .elementor-heading-title{font-family:"Roboto Condensed", Sans-serif;font-size:23px;font-weight:600;color:#FFFFFF;}.elementor-14031 .elementor-element.elementor-element-6a52594{--spacer-size:230px;}body.elementor-page-14031:not(.elementor-motion-effects-element-type-background), body.elementor-page-14031 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;background-image:url("https://boxradio.online/wp-content/uploads/2026/02/450836F3-2E33-4B98-B5E1-B004E6529379-2.png");background-position:center center;background-size:cover;}@media(max-width:1024px){.elementor-14031 .elementor-element.elementor-element-640e39f.elementor-skin-slideshow .elementor-main-swiper{margin-bottom:10px;}.elementor-14031 .elementor-element.elementor-element-6bfe6e3{padding:0px 0px 200px 0px;}body.elementor-page-14031:not(.elementor-motion-effects-element-type-background), body.elementor-page-14031 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-repeat:repeat-x;background-size:auto;}}@media(max-width:767px){.elementor-14031 .elementor-element.elementor-element-640e39f.elementor-skin-slideshow .elementor-main-swiper{margin-bottom:10px;}.elementor-14031 .elementor-element.elementor-element-ff36656{text-align:center;}.elementor-14031 .elementor-element.elementor-element-372cabd{text-align:center;}.elementor-14031 .elementor-element.elementor-element-6bfe6e3{padding:0px 0px 250px 0px;}body.elementor-page-14031:not(.elementor-motion-effects-element-type-background), body.elementor-page-14031 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:top center;background-size:800px auto;}}@media(min-width:768px){.elementor-14031 .elementor-element.elementor-element-c45d20a{width:26.654%;}.elementor-14031 .elementor-element.elementor-element-f4e2cec{width:45.282%;}.elementor-14031 .elementor-element.elementor-element-0be0e50{width:27.728%;}.elementor-14031 .elementor-element.elementor-element-e66a13a{width:26.913%;}.elementor-14031 .elementor-element.elementor-element-c817037{width:45.057%;}.elementor-14031 .elementor-element.elementor-element-70d8f4f{width:27.694%;}.elementor-14031 .elementor-element.elementor-element-95509d2{width:33.595%;}.elementor-14031 .elementor-element.elementor-element-fbb3195{width:32.709%;}.elementor-14031 .elementor-element.elementor-element-b879774{width:26.665%;}.elementor-14031 .elementor-element.elementor-element-be4c22e{width:47.736%;}.elementor-14031 .elementor-element.elementor-element-627e37a{width:24.903%;}}@media(min-width:1025px){body.elementor-page-14031:not(.elementor-motion-effects-element-type-background), body.elementor-page-14031 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS */@import url('https://fonts.googleapis.com/css?family=Unbounded&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');

/*
 * Globals
 */

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}

/*
 * Base structure
 */

.cover-container {
  max-width: 42em;
}


/*
 * Header
 */


.h1 h1 {
  font-size: 25px;
  font-family: 'Space Grotesk', sans-serif;
}

.image_wrapper {
  position: relative;
}

.image_wrapper img {
  box-shadow: 0px 3px 8px 0 rgba(134, 134, 134, 0.914);
}

.image_wrapper .overlay {
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 10px;
}

.image_wrapper .artist {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  font-weight: normal;
  letter-spacing: -0.2px;
  white-space: nowrap;
  font-size: 13px;
  text-overflow: ellipsis;
  font-family: 'Open Sans', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.41em;
  color: whitesmoke;
  display: block;
}

.image_wrapper .title {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  font-weight: normal;
  letter-spacing: -0.2px;
  white-space: nowrap;
  font-size: 15px;
  text-overflow: ellipsis;
  font-family: 'Open Sans', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.41em;
  color: whitesmoke;
  display: block;
}

.FadeAway {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: transparent;
  background: linear-gradient(
    to bottom,
    rgba(125, 185, 232, 0) 0%,
    rgba(63, 93, 116, 0) 50%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

.livebadge {
  display: inline-block;
  color: #ffffff;
  min-width: 40px;
  height: 20px;
  font-family: "Open Sans", sans-serif;
  border-radius: 2px;
  font-size: 11px;
  line-height: 1em;
  padding: 5px 8px;
  text-align: center;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  font-weight: bold;
  text-transform: uppercase;
  position: absolute;
  bottom: 55px;
  left: 10px;
  }

.onairbadge {
    display: inline-block;
    color: #ffffff;
    min-width: 40px;
    height: 20px;
    font-family: "Open Sans", sans-serif;
    border-radius: 2px;
    font-size: 11px;
    line-height: 1em;
    padding: 5px 8px;
    text-align: center;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    bottom: -15px;
    left: 0px;
    }

#bars {
  height: 30px;
  position: absolute;
  bottom: 55px;
  left: 59px;
}

.bar {
  background: rgb(255, 255, 255);
  bottom: 1px;
  height: 2px;
  position: absolute;
  width: 2px;
  animation: sound 0ms -200ms linear infinite alternate;
}

@keyframes sound {
  0% {
    opacity: 0.35;
    height: 3px;
  }
  100% {
    opacity: 1;
    height: 14px;
  }
}

.bar:nth-child(1) {
  left: 1px;
  animation-duration: 250ms;
}
.bar:nth-child(2) {
  left: 5px;
  animation-duration: 270ms;
}
.bar:nth-child(3) {
  left: 9px;
  animation-duration: 290ms;
}
.bar:nth-child(4) {
  left: 13px;
  animation-duration: 300ms;
}
.bar:nth-child(5) {
  left: 17px;
  animation-duration: 310ms;
}
.bar:nth-child(6) {
  left: 21px;
  animation-duration: 427ms;
}
.bar:nth-child(7) {
  left: 25px;
  animation-duration: 441ms;
}
.bar:nth-child(8) {
  left: 29px;
  animation-duration: 419ms;
}
.bar:nth-child(9) {
  left: 33px;
  animation-duration: 487ms;
}
.bar:nth-child(10) {
  left: 37px;
  animation-duration: 442ms;
}

/* ════════════════════════════════════════════════
   ALBUM THUMBNAILS — previous / up-next
   Model (confirmed with user):
   • PREVIOUS group on LEFT, heading right-aligned.
   • UP NEXT group on RIGHT, heading left-aligned.
   • Each group has 2 albums (150×150, 8px gap).
   • Hovering an album expands it to COVER its
     PARTNER, growing toward the group's centre:
       – left album  → grows RIGHT over partner
       – right album → grows LEFT  over partner
   • Expanded width = 150 + 8 + 150 = 308px so the
     partner is fully covered.
   • Slots keep their 150px footprint (no pushing).
   ════════════════════════════════════════════════ */

/* outer wrapper: PREVIOUS | UP NEXT, flanking the centre */
.tracks-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
}

.tracks-group { display: flex; flex-direction: column; }

/* headings */
.tracks-group .head-prev { text-align: right; }
.tracks-group .head-next { text-align: left; }

/* the two-album row */
.tracks-row {
  display: flex;
  gap: 8px;
}

/* Defensive: some CMS themes (Elementor) wrap injected widgets in
   containers with overflow:hidden, which clips the expanded card so its
   title/artwork disappears. Force the album ancestors to show overflow. */
.tracks-wrap, .tracks-group, .tracks-row,
.nextalbum, .gonealbum,
#nextOut1, #nextOut2, #goneout1, #goneout2 {
  overflow: visible !important;
}

/* ── SLOT: fixed footprint, establishes stacking ──
   The nextOut and goneout elements are spans. They must hold a fixed box
   even though their only child (.mytooltip) is absolutely positioned and
   thus out of flow. Use explicit dimensions so the slot can't collapse to
   0x0 (which hid the pos-left albums). */
.nextalbum,
.gonealbum {
  display: inline-block;
  font-family: 'Electrolize', sans-serif;
  width: 150px;
  height: 150px;
  flex: 0 0 150px;
  position: relative;
  z-index: 1;
  vertical-align: top;
}

/* expanded/hovered album rises above its neighbours */
.nextalbum:hover,
.gonealbum:hover,
.nextalbum.is-open,
.gonealbum.is-open { z-index: 99999; }

/* A card only expands (and therefore only overlaps neighbours) while it
   is hovered or open. Closed cards stay exactly within their slot so they
   never sit on top of a neighbour and steal its taps. */

/* ── CARD: absolutely positioned, animates width ── */
.mytooltip {
  position: absolute;
  top: 0;
  height: 150px;
  width: 150px;
  overflow: hidden;
  border-radius: 8px;
  border: 3px solid #fff;
  box-sizing: border-box;
  line-height: 0;
  transition: width 0.35s cubic-bezier(.2,.7,.2,1);
  z-index: 2;
  pointer-events: none;
}

/* slot itself receives taps; closed/open cards never steal a neighbour's tap */
.nextalbum,
.gonealbum { pointer-events: auto; }

/* DIRECTION RULES — grow toward group centre, covering partner.
   We tag each album with .pos-left / .pos-right (added by covers.js)
   instead of relying on :first-child/:last-child or the > combinator,
   which break if a CMS (Elementor/WordPress) wraps each album in its
   own container. .pos-left grows rightward, .pos-right grows leftward. */

/* left album of a pair: anchor left edge → expands rightward */
.gonealbum.pos-left .mytooltip,
.nextalbum.pos-left .mytooltip { left: 0; right: auto; }

/* right album of a pair: anchor right edge → expands leftward */
.gonealbum.pos-right .mytooltip,
.nextalbum.pos-right .mytooltip { right: 0; left: auto; }

/* Fallback if no pos- class is present: keep old child-based behaviour */
.tracks-row > .gonealbum:first-child:not(.pos-left):not(.pos-right) .mytooltip,
.tracks-row > .nextalbum:first-child:not(.pos-left):not(.pos-right) .mytooltip { left: 0; right: auto; }
.tracks-row > .gonealbum:last-child:not(.pos-left):not(.pos-right) .mytooltip,
.tracks-row > .nextalbum:last-child:not(.pos-left):not(.pos-right) .mytooltip { right: 0; left: auto; }

/* expand to fully cover the partner (150 + 8 gap + 150) */
.nextalbum:hover .mytooltip,
.gonealbum:hover .mytooltip,
.nextalbum.is-open .mytooltip,
.gonealbum.is-open .mytooltip { width: 308px; }

/* image fills the card; pin to TOP so when the square cover is cropped
   into a landscape the top of the artwork (usually the title/artist or
   main subject) stays visible instead of showing only the middle band */
.mytooltip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border: none;
  border-radius: 0;
}

/* gradient overlay */
.mytooltip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.nextalbum:hover .mytooltip::after,
.gonealbum:hover .mytooltip::after,
.nextalbum.is-open .mytooltip::after,
.gonealbum.is-open .mytooltip::after { opacity: 1; }

/* text overlay */
.mytooltip .mytooltiptext {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 12px 10px;
  z-index: 2;
  text-align: left;
  line-height: 1.3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease 0.12s;
}
.nextalbum:hover .mytooltip .mytooltiptext,
.gonealbum:hover .mytooltip .mytooltiptext,
.nextalbum.is-open .mytooltip .mytooltiptext,
.gonealbum.is-open .mytooltip .mytooltiptext { opacity: 1; }

.mytooltip .tip-title {
  display: block;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px; font-weight: 700;
  text-transform: capitalize;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.mytooltip .tip-artist {
  display: block;
  color: #eee;
  font-family: 'Open Sans', sans-serif;
  font-size: 11px; font-weight: 400;
  text-transform: capitalize;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* ── MOBILE: all four albums on ONE row, sized to fit screen ── */
@media (max-width: 640px) {
  /* both groups stay side by side on one line */
  .tracks-wrap {
    gap: 10px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    padding: 0 8px;
  }

  /* each group takes half the row; its two albums share that half */
  .tracks-group {
    flex: 1 1 0;
    min-width: 0;
    align-items: stretch;
  }

  .tracks-row {
    gap: 6px;
    justify-content: center;
  }

  /* fluid square albums:
     row width ≈ (100vw - 16px padding - 10px group gap) / 2 per group,
     each album = (that - 6px inner gap) / 2.
     Using flex so they auto-fit; aspect-ratio keeps them square. */
  .nextalbum, .gonealbum {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .mytooltip {
    width: 100%;
    height: 100%;
  }

  /* MOBILE direction: every album anchors LEFT and expands RIGHT by
     default (the PREVIOUS behavior that works). The RIGHT album of each
     pair would run off-screen growing right, so it anchors RIGHT and
     grows left — but its text overlay stays pinned to the card so it is
     never clipped regardless of grow direction. */
  .tracks-row > .gonealbum .mytooltip,
  .tracks-row > .nextalbum .mytooltip {
    left: 0;
    right: auto;
  }
  .tracks-row > .gonealbum:last-child .mytooltip,
  .tracks-row > .nextalbum:last-child .mytooltip {
    left: auto;
    right: 0;
  }

  /* on tap/hover expand to cover the partner: 2 albums + the 6px gap.
     200% + 6px overshoots the partner edge so coverage is complete. */
  .nextalbum:hover .mytooltip,
  .gonealbum:hover .mytooltip,
  .nextalbum.is-open .mytooltip,
  .gonealbum.is-open .mytooltip {
    width: calc(200% + 6px);
  }

  .mytooltip .tip-title  { font-size: 12px; }
  .mytooltip .tip-artist { font-size: 10px; }

  /* slightly tighter text padding on small cards */
  .mytooltip .mytooltiptext { padding: 0 8px 7px; }

  /* headings keep the same alignment as desktop:
     PREVIOUS over its pair on the left, UP NEXT over its pair on the right */
  .tracks-group .head-prev { text-align: right; }
  .tracks-group .head-next { text-align: left; }
}

/* very small phones — let titles wrap to two lines instead of clipping */
@media (max-width: 380px) {
  .mytooltip .tip-title { font-size: 11px; }
}

.nowonair {
  box-shadow: 0 6px 8px 0 rgb(255, 255, 255);
}

#play-stop-button {
  font-size: 70px;
  cursor: pointer;
  color: rgb(255, 255, 255);
  transition: width 2s, height 2s;
}
#play-stop-button:hover {
  font-size: 72px;
  color: rgb(255, 0, 0);
  shadow: 0 5px 15px rgba(123, 79, 155, 0.4);
}

.ru-fluid {
  max-width: 150px;
  max-height: 150px;
}

.tracks-in-out {
  font-family: 'Electrolize', sans-serif;
  font-size:15px;
  font-weight:600;
}

.gradient-background {
  height: 600px;
  background: linear-gradient(62deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  animation: gradient 15s ease infinite;
  background-size: 400% 400%;
}
@-webkit-keyframes gradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes gradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}/* End custom CSS */