/* ==========================================================
   Cancer Study opening - v23 (JB_Full_View_Final_9_21)
   Trump Int'l Golf Club + Watch The Trial (2 videos) + Avastin sales
   Design width 1366px.
   ========================================================== */
.ryan-cancer .trump-block, .ryan-cancer .watch-trial, .ryan-cancer .avastin-sales {
  box-sizing: border-box;
  position: relative; left: 50%; transform: translateX(-50%); text-align: center;
  font-family: "Inter", Arial, Helvetica, sans-serif;
}
/* ---- Trump Int'l Golf Club ---- */
.ryan-cancer .trump-block {
  width: 100vw; box-sizing: border-box; margin: -10px 0 0;
  padding: clamp(40px, 9.5vw, 130px) 16px clamp(22px, 4.2vw, 58px);
  background:
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 26%, rgba(0,0,0,.35) 70%, #000 100%),
    url("../images/cancer-study/trump-golf-club-bg.jpg") center / cover no-repeat;
}
.ryan-cancer .trump-inner { max-width: 700px; margin: 0 auto; }
.ryan-cancer .t-line {
  margin: 0; color: #fff; font-weight: 900;
  font-size: clamp(15px, 1.69vw, 23px); line-height: 1.25; letter-spacing: .01em;
}
.ryan-cancer .t-line .pink { color: #f72088; }
.ryan-cancer .t-logo {
  display: block; width: min(642px, 92%); height: auto; margin: 10px auto 8px;
}
/* ---- Watch The Trial ---- */
.ryan-cancer .watch-trial { width: min(1275px, calc(100vw - 32px)); margin: 6px 0 0; }
.ryan-cancer .jb-rule-title { position: relative; margin: 0 auto 34px; width: min(1262px, 100%); }
.ryan-cancer .jb-rule-title::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, #e83e8c, #2fc3d2);
}
.ryan-cancer .jb-rule-title > span {
  position: relative; display: inline-block; padding: 0 16px; background: #000;
  color: #fff; font-weight: 900; font-size: clamp(22px, 2.56vw, 35px); line-height: 1.1; letter-spacing: .01em;
}
.ryan-cancer .pink { color: #f82187; }
.ryan-cancer .videos { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; }
.ryan-cancer .video-card { text-align: center; }
.ryan-cancer .video-thumb {
  position: relative; display: block; width: 100%; padding: 0; margin: 0; border: 0;
  background: #000; cursor: pointer; line-height: 0;
}
.ryan-cancer .video-thumb img { display: block; width: 100%; height: auto; transition: filter .25s ease; }
.ryan-cancer .v-meta { transition: opacity .25s ease; padding-top: 30px; }
/* Hover ("dark mode" in the design) */
@media (hover: hover) {
  .ryan-cancer .video-card:hover .video-thumb img { filter: brightness(.42); }
  .ryan-cancer .video-card:hover .v-meta { opacity: .45; }
}
.ryan-cancer .video-thumb:focus-visible { outline: 2px solid #2fc3d2; outline-offset: 3px; }
.ryan-cancer .video-soon {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  padding: 8px 14px; border-radius: 6px; background: rgba(0,0,0,.82); color: #fff;
  font: 700 13px/1.2 "Inter", Arial, sans-serif; letter-spacing: .04em; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.ryan-cancer .video-card.show-soon .video-soon { opacity: 1; }
.ryan-cancer .v-title { margin: 0; color: #fff; font-weight: 900; font-size: clamp(22px, 2.47vw, 34px); line-height: 1.05; letter-spacing: .01em; }
.ryan-cancer .v-title .cy { color: #00ecfd; }
.ryan-cancer .v-title .pk { color: #f90f83; }
.ryan-cancer .v-dur { margin: 6px 0 0; color: #fff; font-weight: 400; font-size: clamp(16px, 1.7vw, 23px); line-height: 1.2; letter-spacing: .01em; }
.ryan-cancer .v-plat { display: block; width: 154px; max-width: 60%; height: auto; margin: 12px auto 0; }
/* ---- Avastin sales ---- */
.ryan-cancer .avastin-sales {
  width: min(1262px, calc(100vw - 32px)); margin: 24px 0 0; padding: clamp(28px, 3vw, 42px) 0 clamp(30px, 3vw, 41px);
  border-top: 1px solid transparent; border-bottom: 1px solid transparent;
  background:
    linear-gradient(90deg, #e83e8c, #2fc3d2) top / 100% 1px no-repeat,
    linear-gradient(90deg, #e83e8c, #2fc3d2) bottom / 100% 1px no-repeat;
}
.ryan-cancer .s-small { margin: 0; color: #fff; font-weight: 900; font-size: clamp(22px, 3.52vw, 48px); line-height: 1.1; }
.ryan-cancer .s-big { margin: 2px 0 6px; color: #f82187; font-weight: 900; font-size: clamp(36px, 7.48vw, 102px); line-height: 1.05; letter-spacing: -.05em; white-space: nowrap; }
/* Angiogenesis box after the sales block */
.ryan-cancer .avastin-sales + .angiogenesis-intro.angio-only { margin-top: 40px !important; }
@media (max-width: 700px) {
  .ryan-cancer .videos { grid-template-columns: 1fr; gap: 36px; }
  .ryan-cancer .v-meta { padding-top: 18px; }
  .ryan-cancer .jb-rule-title { margin-bottom: 22px; }
}
/* ---- Video player ---- */
.jb-video-modal { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.92); }
.jb-video-modal[hidden] { display: none; }
.jb-video-box { position: relative; width: min(1100px, 100%); }
.jb-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.jb-video-frame iframe, .jb-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jb-video-close { position: absolute; top: -48px; right: 0; width: 44px; height: 44px; border: 1px solid #1d3b47; border-radius: 4px; background: #050d11; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.jb-video-close:hover { border-color: #2fc3d2; color: #2fc3d2; }
.jb-video-missing { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0; color:#fff; font:700 18px/1.5 "Inter", Arial, sans-serif; text-align:center; }
.jb-video-missing small { color:#93a4ab; font-weight:400; font-size:13px; }