/* ================================================================
   SO MUCH PIĘKNIE - home slider (HeroSliderBlock)
   One slide per song, newest first, then the brand slide.
   Slide = blurred cover backdrop + copy on the left + sharp cover card
   on the right (cover first on mobile). Slides share one grid cell and
   cross-fade; hero.js toggles .is-active and the controls.
   Loaded after site.css (tokens) and blocks.css.
   ================================================================ */

.smp-slider { position: relative; isolation: isolate; overflow: hidden; background: var(--night); }
.smp-slider__slides { display: grid; }

.smp-slide {
  position: relative; grid-area: 1 / 1; overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s;
}
.smp-slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; }

/* The backdrop is the cover itself, blurred so far that only its colour mood is left
   (blue sea and golden sky, warm night bokeh), oversized so no edge shows. */
.site-somuchpieknie .smp-slide__backdrop {
  position: absolute; top: -25%; left: -25%; width: 150%; height: 150%; max-width: none;
  object-fit: cover; filter: blur(100px) saturate(1.45);
}
/* Scrim: only as dark as the copy needs, darkest under the copy column (below the cover
   card on mobile, left on desktop) and clear towards the card. No generic glow: the
   colour must come from the cover. */
.smp-slide__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(11, 11, 16, .12) 0%, rgba(11, 11, 16, .45) 32%, rgba(11, 11, 16, .8) 58%, rgba(11, 11, 16, .86) 100%);
}

.smp-wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.smp-slide__grid { position: relative; display: grid; gap: 2rem; align-items: center; padding-top: 3rem; padding-bottom: 7rem; }
.smp-slide__cover {
  order: -1; width: min(62vw, 15rem); margin: 0 auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 1.25rem; box-shadow: 0 25px 60px -12px rgba(0, 0, 0, .65), 0 0 0 1px rgba(245, 240, 234, .12);
}
.site-somuchpieknie .smp-slide__cover { max-width: none; height: auto; }
/* The released song's video (lite embed) takes the cover card's place */
.smp-slide__media { order: -1; width: 100%; }
.smp-slide__title {
  margin: 1.25rem 0 0; font-family: var(--display); font-size: 3.25rem; font-weight: 600; line-height: 1;
  text-transform: uppercase; letter-spacing: var(--tracking); color: var(--snow);
}
.smp-slide__lead { margin: 1.25rem 0 0; max-width: 28rem; font-size: 1.25rem; line-height: 1.7; color: var(--snow); }
.smp-slide__lead p { margin: 0; }
.smp-slide .smp-actions { margin-top: 1.75rem; }
.smp-slide__copy .smp-pill { background: rgba(18, 18, 24, .8); }

@media (min-width: 640px) { .smp-slide__title { font-size: 4.5rem; } }
@media (min-width: 768px) {
  .smp-slide__shade {
    background:
      linear-gradient(to right, rgba(11, 11, 16, .72) 0%, rgba(11, 11, 16, .6) 38%, rgba(11, 11, 16, .2) 60%, rgba(11, 11, 16, 0) 80%),
      linear-gradient(to top, rgba(11, 11, 16, .4) 0%, rgba(11, 11, 16, 0) 28%);
  }
  .smp-slide__grid { grid-template-columns: 1fr 1fr; gap: 4rem; padding-top: 5rem; padding-bottom: 8rem; }
  .smp-slide__media { order: 0; }
  .smp-slide__cover { order: 0; width: 100%; max-width: 30rem; margin: 0 0 0 auto; border-radius: 1.5rem; }
  .smp-slide__lead { font-size: 1.5rem; }
}
@media (min-width: 1024px) { .smp-slide__title { font-size: 5.5rem; } }

/* Controls: pause/play, previous, dots, next - 48px targets */
.smp-slider__bar { position: absolute; left: 0; right: 0; bottom: 1rem; z-index: 2; pointer-events: none; }
.smp-slider__controls {
  display: inline-flex; align-items: center; gap: .25rem; padding: .25rem; pointer-events: auto;
  border-radius: 999px; background: rgba(11, 11, 16, .7); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(245, 240, 234, .15);
}
.smp-slider__btn {
  display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--snow); cursor: pointer; transition: background-color .2s;
}
.smp-slider__btn:hover { background: rgba(245, 240, 234, .15); }
.smp-slider__dots { display: flex; align-items: center; }
.smp-slider__dot {
  display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.smp-slider__dot::before {
  content: ""; width: .75rem; height: .75rem; border-radius: 999px; background: rgba(245, 240, 234, .6);
  transition: width .25s, background-color .25s;
}
.smp-slider__dot:hover::before { background: var(--snow); }
.smp-slider__dot[aria-current="true"]::before { width: 1.75rem; background: var(--snow); }
.smp-slider__controls[hidden] { display: none; }

/* Premiere date under the slide title: quiet line, snow on the night scrim (AA) */
.smp-slide__date { margin: .75rem 0 0; font-size: 1.125rem; font-weight: 600; letter-spacing: .04em; color: rgba(245, 240, 234, .92); }

/* Long labels ("Zapisz przed premierą") never wrap inside a button; the row wraps instead */
.smp-slide .smp-actions { flex-wrap: wrap; }
.smp-slide .smp-btn { white-space: nowrap; }