/*
 * QUE-UP shared banner
 * One structure and one size for every page.
 */

:root {
  --queup-banner-height:150px;
  --queup-banner-purple:#35bec2;
  --queup-banner-violet:#ff0000cc;
  --queup-banner-coral:#6d22e7;
  --queup-banner-yellow:#ffffff;
  --queup-banner-green:#01bd5a;
  --queup-banner-green-text:#153f31;
}

.queup-banner,
.queup-banner *,
.queup-banner *::before,
.queup-banner *::after {
  box-sizing:border-box;
}

.queup-banner {
  position:relative;
  display:grid;
  grid-template-columns:minmax(250px,1fr) minmax(300px,1.25fr) minmax(260px,1fr);
  align-items:center;
  width:100%;
  max-width:100%;
  height:var(--queup-banner-height);
  min-height:var(--queup-banner-height);
  max-height:var(--queup-banner-height);
  margin:0 0 16px 0;
  padding:14px 16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:
    radial-gradient(
      circle at 91% 0%,
      rgba(255,255,255,.18),
      transparent 25%
    ),
    linear-gradient(
      120deg,
      #291735 0%,
      #5c285c 25%,
      #d45d55 50%,
      #8b35d2 75%,
      #291735 100%,
  
    );
  background-size:
     auto,
     300% 300%;
  background-position:
     91% 0%,
     0% 50%;
  animation:
     queupBannerGradient 12s ease-in-out

}

.queup-banner::after {
  content:"";
  position:absolute;
  right:24%;
  bottom:-85px;
  width:135px;
  height:135px;
  border-radius:50%;
  background:rgba(255,255,255,.055);
  pointer-events:none;
}

.queup-banner > * {
  position:relative;
  z-index:1;
  min-width:0;
}

.queup-banner__identity {
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  height:100%;
}

.queup-banner__brand {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.queup-banner__mark {
  position:relative;
  display:block;
  width:31px;
  height:31px;
  flex:0 0 31px;
  overflow:visible;
  border:0;
  
  background:0;

  color:transparent;
  font-size:0;
  
  box-shadow:none;

}
.queup-banner__mark::before {
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:150px;
  height:150px;
  background-image:url("lepaq-logo.png");
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  transform:translatey(-50%);

}

.queup-banner__brand-copy {
  display:relative;
  z-index:3;
  top:-4px;
  left:200px;
}

.queup-banner__brand-copy small {
  position:relative;
  z-index:3;
  top:-23px;
  left:7px;
  
  overflow:visible;

  color:rgba(255,255,255,.68);
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
  text-overflow:ellipsis;
  white-space:nowrap;
}



.queup-banner__meta {
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  max-width:100%;
  margin-top:12px;
  padding:3px 6px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  background:rgba(210, 141, 4, 0.315);
  color:#fff;
  overflow:hidden;
  font-size:8px;
  font-weight:750;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;

}

.queup-banner__live {
  display:flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  margin-top:3px;
  overflow:hidden;
  color:rgba(255,255,255,.76);
  font-size:8px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.queup-banner__live-dot {
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#69e6a4;
  box-shadow:0 0 0 3px rgba(105,230,164,.13);
}

.queup-banner__clock {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 7px;
  width:max-content;
  max-width:100%;
  margin-top:3px;
  padding:3px 6px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  background:rgba(255,255,255,.08);
  color:#fff;
  line-height:1;
}

.queup-banner__clock span {
  color:rgba(255,255,255,.72);
  font-size:7px;
}

.queup-banner__clock strong {
  color:#fff;
  font-size:9px;
}

.queup-banner__clock .queup-banner__zone {
  color:var(--queup-banner-yellow);
  font-size:7px;
  font-weight:900;
}

.queup-banner__title {
  padding:0 14px;
  text-align:center;
}

.queup-banner__title h1 {
  max-width:100%;
  margin:0;
  overflow:hidden;
  color:var(--queup-banner-yellow);
  font-size:clamp(25px,2.5vw,38px);
  font-weight:950;
  line-height:1.04;
  letter-spacing:-.035em;
  text-overflow:ellipsis;
  text-shadow:0 5px 16px rgba(35,11,31,.25);
  white-space:nowrap;
}

.queup-banner__title p {
  max-width:100%;
  margin:7px 0 0;
  overflow:hidden;
  color:rgba(255,255,255,.72);
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
  line-height:1.2;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.queup-banner__actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(105px,1fr));
  grid-auto-rows:minmax(24px,auto);
  align-content:center;
  justify-self:end;
  gap:5px;
  width:100%;
  max-width:330px;
  max-height:84px;
}

.queup-banner__actions:empty {
  visibility:hidden;
}

.queup-banner__actions > *,
.queup-banner__actions > form > * {
  min-width:0;
  grid-column:auto !important;
  grid-row:auto !important;
}

.queup-banner__actions form {
  display:flex;
  width:100%;
  height:100%;
  margin:0;
}

.queup-banner__actions input[type="checkbox"] {
  width:auto !important;
  height:auto !important;
  margin:0 5px 0 0 !important;
  accent-color:var(--queup-banner-violet);
}

/* The same banner remains branded in every page theme. */
body[class*="light"] .queup-banner,
html[class*="light"] .queup-banner,
[data-theme="light"] .queup-banner {
  border-color:rgba(255,255,255,.16);
  background:
    radial-gradient(
      circle at 91% 0%,
      rgba(255,255,255,.18),
      transparent 25%
    ),
    linear-gradient(
      120deg,
      var(--queup-banner-purple) 0%,
      var(--queup-banner-violet) 52%,
      var(--queup-banner-coral) 100%
    );
  color:#fff;
}

@media(max-width:900px) {
  .queup-banner {
    grid-template-columns:minmax(210px,1fr) minmax(230px,1fr) minmax(220px,1fr);
  }

  .queup-banner__title h1 {
    font-size:clamp(22px,3.3vw,31px);
  }
}

@media(max-width:760px) {
  .queup-banner {
    display:flex;
    align-items:stretch;
    flex-direction:column;
    width:100%;
    height:auto;
    min-height:112px;
    max-height:none;
    gap:10px;
    padding:12px;
    border-radius:15px;
  }

  .queup-banner__identity {
    height:auto;
  }

  .queup-banner__meta,
  .queup-banner__live {
    white-space:normal;
  }

  .queup-banner__title {
    order:-1;
    padding:0;
  }

  .queup-banner__title h1 {
    font-size:25px;
    white-space:normal;
  }

  .queup-banner__title p {
    margin-top:5px;
    white-space:normal;
  }

  .queup-banner__actions {
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-self:stretch;
    justify-self:auto;
    width:100%;
    max-width:none;
    max-height:none;
  }

}
/* Animated banner colour layer */

.queup-banner {
  isolation:isolate;
}

/* Animated gradient behind all banner content. */

.queup-banner::before {
  content:"";

  position:absolute;
  inset:0;
  z-index:0;

  border-radius:inherit;

  background:
    linear-gradient(
      120deg,
      #ff0000 0%,
      #540d2b 20%,
      #ff9808 40%,
      #099c77 60%,
      #0617af 80%,
      #d10b92 100%
    );

  background-size:300% 300%;
  background-position:0% 50%;

  animation:
    queupBannerFlow 30s linear infinite;

  pointer-events:none;
}

/* Keep all wording, logos and buttons above the animation. */

.queup-banner > * {
  position:relative;
  z-index:2;
}

/* Keep the decorative circle visible. */

.queup-banner::after {
  z-index:1;
}

@keyframes queupBannerFlow {
  0% {
    background-position:0% 50%;
  }

  50% {
    background-position:100% 50%;
  }

  100% {
    background-position:0% 50%;
  }
}