/* ==========================================================
   v24 (FINAL_JB_Site.psb): "As Seen On - You Can See Everything"
   between the Trump Int'l Golf Club section and Watch The Trial.
   The artwork is laid out on a 1366 x 197 design canvas that scales.
   ========================================================== */
.ryan-cancer .trump-block { padding-bottom: clamp(14px, 2.2vw, 30px) !important; }
.ryan-cancer .as-seen-on {
  box-sizing: border-box; position: relative; left: 50%; transform: translateX(-50%);
  width: 100vw; margin: 0; text-align: center; overflow: hidden;
  font-family: "Inter", Arial, Helvetica, sans-serif;
}
.ryan-cancer .as-seen-title { width: min(1179px, calc(100% - 32px)) !important; margin: 0 auto !important; position: relative; z-index: 2; }
.ryan-cancer .as-seen-title > span {
  color: #f81e87 !important; font-weight: 500 !important; letter-spacing: .02em !important;
  font-size: clamp(20px, 2.64vw, 36px) !important; background: transparent !important;
}
.ryan-cancer .as-seen-title::before { background: linear-gradient(90deg, #e83e8c, #2fc3d2) !important; }
.ryan-cancer .ycse-wrap { position: relative; margin-top: calc(-1 * clamp(10px, 1vw, 14px)); }
.ryan-cancer .ycse-canvas { position: relative; width: 100%; aspect-ratio: 1366 / 197; }
.ryan-cancer .ycse-canvas img { position: absolute; display: block; height: auto; }
.ryan-cancer .ycse-left  { left: 1.24%;  top: 0;      width: 33.82%; opacity: .30; }
.ryan-cancer .ycse-right { left: 73.65%; top: 2.03%;  width: 26.13%; opacity: .47; }
.ryan-cancer .ycse-t1    { left: 42.75%; top: 22.3%;  width: 28.84%; }
.ryan-cancer .ycse-t2    { left: 28.48%; top: 51.8%;  width: 27.96%; }
.ryan-cancer .as-seen-on + .watch-trial { margin-top: -6px; }
@media (max-width: 700px) {
  /* phones: show the artwork larger, side images crop at the edges */
  .ryan-cancer .ycse-canvas { width: 180%; margin-left: -40%; }
  .ryan-cancer .ycse-wrap { margin-top: 4px; }
  .ryan-cancer .as-seen-on + .watch-trial { margin-top: 6px; }
}

/* Fix: the line was running through "AS SEEN ON" (strike-through look).
   The heading now sits between two separate line segments, as in the design. */
.ryan-cancer .as-seen-title { display: flex !important; align-items: center; gap: clamp(12px, 1.2vw, 16px); }
.ryan-cancer .as-seen-title::before,
.ryan-cancer .as-seen-title::after {
  content: "" !important; position: static !important; display: block;
  flex: 1 1 0; height: 1px; min-width: 20px;
}
.ryan-cancer .as-seen-title::before { background: linear-gradient(90deg, #e83e8c, #b25aa8) !important; }
.ryan-cancer .as-seen-title::after  { background: linear-gradient(90deg, #6f8fc4, #2fc3d2) !important; }
.ryan-cancer .as-seen-title > span { flex: 0 0 auto; padding: 0 !important; white-space: nowrap; }