/* Original flow content keeps the approved section footprint and breakpoints.
   All new treatments are out of flow, contained within the same yellow section. */
.surf-right-now { position: relative; }
.surf-right-now .surf-events-heading > .eyebrow,
.surf-right-now .surf-events-flow { visibility: hidden; }
.surf-right-now #surf-events-title { opacity: 0; }
.surf-right-now .surf-events-artwork {
  position: absolute;
  left: 6vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(34vw, 440px);
  height: auto;
  max-width: none;
  pointer-events: none;
}
.surf-right-now .surf-events-information {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(36vw, 520px);
  text-align: left;
  color: #071219;
}
.surf-right-now .surf-events-information h3 {
  width: fit-content;
  margin: 0 0 .75rem;
  padding-bottom: calc(.45rem + 3px);
  font: 700 clamp(1.35rem, 1.65vw, 1.6rem)/1.1 Oswald, sans-serif;
  letter-spacing: .07em;
}
.surf-right-now .surf-events-information p {
  font-size: clamp(1rem, 1.18vw, 1.15rem);
  font-weight: 700;
  line-height: 1.9;
}
.surf-right-now .surf-events-all { text-decoration: none; }
.surf-right-now .surf-events-cta-treatment {
  position: absolute;
  right: 6vw;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: max-content;
  max-width: 270px;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  line-height: 1.35;
}
.surf-right-now .surf-events-arrow-space { visibility: hidden; }
.surf-right-now .surf-events-wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.surf-right-now .surf-events-all:focus-visible .surf-events-cta-treatment {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}
@media (max-width: 1100px) and (min-width: 721px) {
  .surf-right-now .surf-events-cta-treatment { top: auto; bottom: 2rem; transform: none; }
}
@media (max-width: 720px) {
  .surf-right-now .surf-events-artwork { left: 5vw; top: 1rem; transform: none; width: 52vw; }
  .surf-right-now .surf-events-information { left: 5vw; top: 50%; width: 90%; transform: none; }
  .surf-right-now .surf-events-information p { font-size: 1rem; line-height: 1.7; }
  .surf-right-now .surf-events-cta-treatment { left: 5vw; right: auto; top: auto; bottom: 1rem; transform: none; }
}

/* Keep the approved two-line presentation on desktop; narrow layouts wrap. */
@media (min-width: 1101px) {
  .surf-right-now .surf-events-information p { white-space: nowrap; }
}