/* FP3 (/lose-weight-faster) — small additions on top of the shared
   courses/assets/irp/landing.css theme. Loaded after it, so these rules
   only need to cover what IRP's page doesn't use. */

/* ===== Variable aliases =====
   The testimonial gallery below (.dx-*) is copied from src/_includes/detox/
   styles.njk, which was written against /shared/waken.css's variable names.
   This page loads courses/assets/irp/landing.css instead, which doesn't
   define these — so alias them here rather than forking the gallery CSS.
   Values match shared/waken.css exactly. */
:root {
  --purple-soft: rgba(91, 43, 207, 0.08);
  --on-purple-soft: rgba(255, 255, 255, 0.84);
  --on-purple-line-strong: rgba(255, 255, 255, 0.30);
  --white: #ffffff;
}

/* ===== Testimonial gallery (reused from the Detox program — see
   fp3.testimonials_gallery in src/_data/fp3.json for why) ===== */
.dx-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px 18px; }
@media (max-width: 520px) { .dx-vids { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 16px 12px; } }
.dx-vid {
  display: flex; flex-direction: column;
  border: 0; padding: 0; margin: 0; background: none;
  text-align: left; cursor: pointer; font-family: var(--sans);
}
.dx-vid-media {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; background: var(--purple-soft);
  box-shadow: 0 2px 8px rgba(91,43,207,0.10), 0 12px 28px rgba(91,43,207,0.12);
  transition: transform 0.22s cubic-bezier(.2,.7,.3,1), box-shadow 0.22s;
}
.dx-vid:hover .dx-vid-media,
.dx-vid:focus-visible .dx-vid-media { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(91,43,207,0.22); }
.dx-vid:focus { outline: none; }
.dx-vid:focus-visible .dx-vid-media { outline: 3px solid var(--purple); outline-offset: 3px; }
.dx-vid-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dx-vid-zoom {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(27,14,63,0.72);
  border: 1px solid var(--on-purple-line-strong);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.18s; pointer-events: none;
}
.dx-vid:hover .dx-vid-zoom, .dx-vid:focus-visible .dx-vid-zoom { opacity: 1; }
.dx-vid-zoom svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.dx-vid-name {
  margin-top: 10px; font-family: var(--display); font-weight: 600;
  font-size: 15px; letter-spacing: -0.01em; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.section-purple .dx-vid-name { color: var(--white); }
.dx-vid-name::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 3px var(--green-glow); flex: none;
}

/* ===== Lightbox ===== */
.dx-lb { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
      padding: 24px; background: rgba(27,14,63,0.86);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dx-lb.is-open { display: flex; animation: dx-lb-in 0.2s ease-out; }
@keyframes dx-lb-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 720px) { .dx-lb { padding: 0; align-items: stretch; } }
.dx-lb-dialog {
  position: relative;
  --dxlb-reserve: 210px;
  width: min(1040px, 100vw - 48px, calc((100vh - var(--dxlb-reserve)) * 16 / 9));
  display: flex; flex-direction: column;
  padding-top: 52px;
}
@media (max-width: 720px) { .dx-lb-dialog { justify-content: center; width: 100%; padding: 56px 12px 12px; } }
.dx-lb-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden; background: #140B33;
  box-shadow: 0 30px 70px rgba(0,0,0,0.46); flex: none;
}
.dx-lb-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dx-lb-meta { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.dx-lb-name { font-family: var(--display); font-weight: 700; font-size: clamp(16px, 2.6vw, 20px); letter-spacing: -0.02em; color: var(--white); }
.dx-lb-counter { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--on-purple-soft); font-variant-numeric: tabular-nums; }
.dx-lb-btn { position: absolute; top: 50%; transform: translateY(-50%);
          width: 48px; height: 48px; border-radius: 50%;
          border: 1px solid var(--on-purple-line-strong);
          background: rgba(27,14,63,0.66); backdrop-filter: blur(6px);
          color: var(--white); display: flex; align-items: center; justify-content: center;
          cursor: pointer; z-index: 3; transition: background 0.16s, transform 0.16s; }
.dx-lb-btn:hover { background: var(--purple); transform: translateY(-50%) scale(1.07); }
.dx-lb-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dx-lb-prev { left: -64px; } .dx-lb-next { right: -64px; }
@media (max-width: 1200px) { .dx-lb-prev { left: 10px; } .dx-lb-next { right: 10px; } }
.dx-lb-close { position: absolute; top: 4px; right: 0;
            width: 42px; height: 42px; border-radius: 50%;
            border: 1px solid var(--on-purple-line-strong);
            background: rgba(27,14,63,0.66); color: var(--white);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; z-index: 4; transition: background 0.16s, transform 0.16s; }
.dx-lb-close:hover { background: #FF0033; transform: scale(1.07); }
.dx-lb-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
body.dx-lb-lock { overflow: hidden; }