/* Why DJ — "Every Night Has A Story" social band.
   Dark band; two overlapping IG screenshots at left (overhanging the top edge),
   heading + tagging prompt centre, two stacked CTAs right. */

.why-dj-social.why-dj-events {
  position: relative;
  background: #111111;
  color: #ffffff;
  /* Sit flush under the hero; the phones overhang this top edge onto the hero. */
  margin-top: 0;
  padding: 0;
}

.why-dj-social__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2vw, 36px);
  min-height: 274px;
}

/* ---- Left: overlapping IG screenshots ---- */
.why-dj-social__media {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  width: clamp(280px, 24vw, 398px);
  /* Phones may overhang the band's TOP (onto the hero) but anything below the dark
     band's bottom edge is clipped, per the design. Negative top inset keeps the top
     overhang visible; bottom inset 0 clips at the band's bottom. */
  clip-path: inset(-1000px 0 0 0);
}

/* Pre-shaped transparent PNGs (device frame / IG card baked in) — shown as-is, no CSS
   rounding, border, or crop. drop-shadow follows the artwork's alpha shape. */
.why-dj-social__phone,
.why-dj-social__feed {
  position: absolute;
}

/* Phone + feed are taller than the band: they overhang the top edge (onto the hero)
   and bleed off the bottom, matching the design's prominent mockups. */
.why-dj-social__phone {
  left: 0;
  bottom: -20px;
  width: clamp(214px, 21vw, 268px);
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.4));
  z-index: 1;
}

.why-dj-social__feed {
  left: clamp(122px, 12.5vw, 174px);
  bottom: 12px;
  width: clamp(206px, 20vw, 252px);
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.45));
  z-index: 2;
}

.why-dj-social__phone img,
.why-dj-social__feed img {
  display: block;
  width: 100%;
  height: auto;
}

/* Scroll parallax: the front IG feed card drifts upward as the band scrolls
   through the viewport, floating a little relative to the anchored phone. Driven
   by js/why-dj-social-parallax.js, which sets --why-dj-feed-shift from scroll
   progress (rAF + passive listener, only while the band is near the viewport).
   A CSS view() timeline can't be used here: an ancestor .box has overflow:hidden,
   so it captures the scroll timeline and freezes it. Reduced-motion is honored in
   the JS (it never sets the var), so the card rests at its designed position. */
.why-dj-social__feed {
  transform: translateY(var(--why-dj-feed-shift, 0px));
  will-change: transform;
}

/* ---- Centre: heading + tagging prompt ---- */
.why-dj-social__text {
  flex: 1 1 auto;
  min-width: 0;
}

.why-dj-social__heading {
  margin: 0;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.4rem, 2.15vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  /* Wrap instead of nowrap: at in-between widths (~960–1300px) the one-line heading overflowed
     into the CTA buttons on the right. It still fits one line on wide desktop. */
  white-space: normal;
}

.why-dj-social__heading-accent {
  color: #ff3b3b;
}

.why-dj-social__desc {
  margin: 0.75rem 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  font-weight: 400;
  line-height: 1.4;
}

.why-dj-social__handle {
  color: #ffffff;
  font-weight: 700;
}

/* ---- Right: stacked CTAs ---- */
.why-dj-social__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  min-width: 200px;
}

.why-dj-social__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: 26px;
  font-family: "Poppins", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
}

.why-dj-social__btn--primary {
  background: #a91d22;
  color: #ffffff;
}
.why-dj-social__btn--primary:hover,
.why-dj-social__btn--primary:focus-visible {
  background: #c02127;
  color: #ffffff;
  transform: translateY(-1px);
}

.why-dj-social__btn--outline {
  border: 1.5px solid #ffffff;
  color: #ffffff;
}
.why-dj-social__btn--outline:hover,
.why-dj-social__btn--outline:focus-visible {
  background: #ffffff;
  color: #111111;
  transform: translateY(-1px);
}

/* ---- Responsive ---- */
@media (max-width: 959px) {
  .why-dj-social__inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
  }
  /* Mobile stack order: text → CTAs → image (image below the copy, per design). */
  .why-dj-social__text { order: 1; flex-basis: 100%; }
  .why-dj-social__heading { white-space: normal; }
  .why-dj-social__desc { margin-left: auto; margin-right: auto; }
  .why-dj-social__actions { order: 2; width: 260px; margin: 0 auto; }
  .why-dj-social__media {
    order: 3;
    width: 100%;
    height: 300px;
  }
  .why-dj-social__phone { left: 50%; margin-left: -170px; bottom: 0; }
  .why-dj-social__feed { left: 50%; margin-left: -20px; bottom: 30px; }
}

@media (max-width: 479px) {
  .why-dj-social__media { height: 260px; }
  .why-dj-social__phone { width: 150px; margin-left: -140px; }
  .why-dj-social__feed { width: 160px; margin-left: -10px; }
}