/* ══════════════════════════════════════════════════════════
   SPOTLIGHT — single promotional feature block
   Sits between SupportStrip and LeagueSection
══════════════════════════════════════════════════════════ */

.spotlight {
  position: relative;
  background: var(--surface);
  overflow: hidden;
  min-height: 22rem;
  display: flex;
  align-items: stretch;
}

/* ── Image layer ── */
.spotlight-img {
  position: absolute;
  inset: 0;
}

.spotlight-img::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: .08;
  mix-blend-mode: overlay;
}

/* Actual photo — transparent areas fall through to the red CI background */
.spotlight-img-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* When a real image is set, it overrides the placeholder via inline style.
   The texture stays as a subtle overlay via ::after. */
.spotlight-img::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Shield / noise texture at low opacity */
  background-image: var(--ci-texture);
  background-size: 18.75rem;
  opacity: .08;
}

/* Gradient: fully opaque surface colour on left, transparent on right */
.spotlight-img-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--surface)                    0%,
    var(--surface)                    38%,
    rgba(var(--rgb-surface), .90)    52%,
    rgba(var(--rgb-surface), .50)    68%,
    rgba(var(--rgb-surface), .15)    82%,
    transparent                      100%
  );
}

/* ── Inner layout ── */
.spotlight-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 3rem clamp(1.25rem, 5vw, 3rem);
  display: flex;
  align-items: center;
}

/* ── Content block — left ~50% ── */
.spotlight-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  max-width: 30rem;           /* caps content width; image shows right of this */
}

/* Red left accent bar */
.spotlight-content::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--red);
  margin-bottom: .125rem;
}

/* ── Eyebrow ── */
.spotlight-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(var(--rgb-red), .12);
  border: 1px solid rgba(var(--rgb-red), .3);
  padding: .3rem .65rem;
  line-height: 1;
}

/* ── Headline ── */
.spotlight-headline {
  font-family: 'Teko', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1;
  color: var(--white);
  margin: 0;
}

/* ── Body ── */
.spotlight-body {
  line-height: 1.55;
  color: var(--muted);
  max-width: 26rem;
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 56rem) {
  .spotlight {
    min-height: 18rem;
  }
  .spotlight-img-fade {
    /* On smaller screens: fade covers more so content stays readable */
    background: linear-gradient(
      to right,
      var(--surface)                    0%,
      var(--surface)                    45%,
      rgba(var(--rgb-surface), .95)    60%,
      rgba(var(--rgb-surface), .6)     78%,
      transparent                      100%
    );
  }
}

@media (max-width: 40rem) {
  .spotlight {
    min-height: unset;
  }
  /* Stack: content on top, image below as a decorative band */
  .spotlight-img {
    position: relative;
    inset: auto;
    height: 12rem;
    order: 2;
    flex-shrink: 0;
  }
  .spotlight-img-fade {
    /* On mobile: gradient goes bottom-to-top so it fades into section bg above */
    background: linear-gradient(
      to bottom,
      var(--surface)                    0%,
      rgba(var(--rgb-surface), .6)     40%,
      transparent                      100%
    );
  }
  .spotlight-inner {
    order: 1;
    padding: 2.25rem 1.25rem 1.75rem;
  }
  .spotlight {
    flex-direction: column;
  }
  .spotlight-headline {
    font-size: clamp(1.875rem, 8vw, 2.5rem);
  }
  .spotlight-cta {
    width: 100%;
    justify-content: center;
  }
}