/*
 * course-reviews.css — Wave 6
 * Student review screenshots: gallery track + lightbox, on the course
 * detail page only.
 *
 * Three deliberate constraints drive every rule below:
 *
 *  1. NEVER crop a screenshot. Every image sits in a frame sized by the
 *     image's own aspect ratio (via `aspect-ratio` set inline per-card is
 *     avoided — instead the frame is a bounded box with object-fit:contain,
 *     so portrait, landscape, square, very tall and very wide screenshots
 *     all fit without cutting content or stretching it).
 *  2. The glow reuses the exact restrained radial-gradient technique already
 *     established in engagement.css (.quiz-teaser) — on-brand gold/navy at
 *     low opacity, not a new colour introduced for this one feature.
 *  3. Motion is layered on top of a working no-JS/no-motion baseline: the
 *     track is a plain CSS scroll-snap row first (usable with JS off, with
 *     touch, with a mouse wheel), and course-reviews.js only adds drag,
 *     autoplay and the lightbox on top of that.
 */

/* ==========================================================================
   Section chrome + glow
   ========================================================================== */

.course-reviews-section{
  position:relative;
  padding-block:var(--space-2xl);
}

/*
 * The gallery now sits directly beneath the hero's enrolment actions and
 * ABOVE the detailed course information, so it carries a soft surface band:
 * it needs to read as its own chapter of the page rather than blending into
 * the hero above it or the long-form content below it.
 */
.course-reviews-section::after{
  background:var(--color-bg-alt);
}

/*
 * The blurred colour-cloud behind the gallery. Same technique as
 * .quiz-teaser's background in engagement.css: a soft radial gold wash that
 * fades to nothing, positioned once behind the whole section rather than
 * per-card (per-card recreates the "circles competing with content" look
 * that the site's colour system deliberately moved away from).
 */
.course-reviews-glow{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(60% 70% at 15% 20%, var(--color-accent-soft) 0%, transparent 60%),
    radial-gradient(50% 60% at 85% 80%, var(--color-secondary-soft) 0%, transparent 65%);
  opacity:0.75;
  filter:blur(2px);
}
[data-theme="dark"] .course-reviews-glow{
  opacity:0.55;
}

.course-reviews-section > .section-header,
.course-reviews-section > .course-reviews-gallery{
  position:relative;
  z-index:1;
}

/* ==========================================================================
   Gallery track
   ========================================================================== */

.course-reviews-gallery{
  position:relative;
}

.course-reviews-track{
  display:flex;
  align-items:stretch;
  gap:var(--space-md);
  padding-block:var(--space-xs);
  padding-inline:var(--space-3xs);
  margin-inline:calc(var(--space-3xs) * -1);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-padding-inline:var(--space-2xs);
  /* Native scrollbar hidden: the drag/swipe interaction plus the visible
     card edges are the scroll affordance, matching the "premium gallery"
     brief rather than a utilitarian scrollbar. Keyboard and wheel scrolling
     both still work with it hidden. */
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
  /*
   * Both axes are handed to the browser's native touch compositor, plus
   * pinch-zoom — this is the same pattern already used by
   * .carousel__viewport in components.css. `pan-y` alone (the previous
   * value here) explicitly withheld horizontal panning from the browser,
   * which is indistinguishable — for a horizontal-swipe gesture — from
   * `touch-action:none`: the compositor is told this element does not
   * handle horizontal touch panning, so it never starts a horizontal
   * scroll gesture on it. `pan-x pan-y` lets the compositor pick whichever
   * axis the gesture is actually moving in: a horizontal swipe scrolls the
   * track natively, a vertical swipe still scrolls the page.
   */
  touch-action:pan-x pan-y pinch-zoom;
}
.course-reviews-track::-webkit-scrollbar{ display:none; }
.course-reviews-track:active{ cursor:grabbing; }
.course-reviews-track.is-dragging,
.course-reviews-track.is-auto-scrolling,
.course-reviews-track.is-keynav-scrolling{ scroll-snap-type:none; }
.course-reviews-track.is-dragging{ cursor:grabbing; }
.course-reviews-track:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:4px;
  border-radius:var(--radius-sm);
}

/*
 * Layered/overlapping premium look: each card is a touch shorter and
 * slightly rotated at rest, straightening and lifting on hover/focus. The
 * effect is achieved with transforms only (never cropping or resizing the
 * image itself), and is fully disabled under reduced-motion below.
 */
.course-review-card{
  flex:0 0 auto;
  width:min(78vw, 260px);
  scroll-snap-align:start;
  margin:0;
  display:flex;
  flex-direction:column;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-base) var(--ease-soft);
}
.course-review-card:nth-child(odd){ transform:rotate(-0.6deg) translateY(4px); }
.course-review-card:nth-child(even){ transform:rotate(0.6deg); }
.course-review-card:hover,
.course-review-card:focus-within{
  transform:rotate(0deg) translateY(-3px);
  box-shadow:var(--shadow-md);
  /* Themed courses tint the review card's active edge from their palette. */
  border-color:var(--course-primary-border, var(--color-border-strong));
  z-index:2;
}

/*
 * The non-cropping frame. A bounded box (not an aspect-ratio square) with a
 * neutral backdrop behind object-fit:contain, so a very tall portrait
 * screenshot letterboxes left/right and a very wide one letterboxes top/
 * bottom — either way, nothing is cut off and nothing is stretched.
 */
.course-review-card__trigger{
  display:block;
  width:100%;
  height:340px;
  padding:0;
  border:0;
  background:
    linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-surface-2) 100%);
  cursor:zoom-in;
}
.course-review-card__trigger img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  /* Screenshots are still images, not decorative UI — draggable:false stops
     the browser's native "drag this image" ghost from fighting the track's
     own pointer-drag-to-scroll gesture. */
  -webkit-user-drag:none;
  user-select:none;
}
@media (min-width:640px){
  .course-review-card{ width:280px; }
  .course-review-card__trigger{ height:380px; }
}
@media (min-width:960px){
  .course-review-card{ width:300px; }
  .course-review-card__trigger{ height:400px; }
}

.course-review-card__footer{
  padding:var(--space-xs) var(--space-sm) var(--space-sm);
  border-top:1px solid var(--color-border);
  background:var(--color-surface);
}
.course-review-card__meta{
  margin:0 0 0.3rem;
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--course-accent-text, var(--color-accent-strong));
}
.course-review-card__caption{
  margin:0;
  font-size:var(--fs-small);
  color:var(--color-text-soft);
  line-height:1.7;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.course-reviews-hint{
  margin:var(--space-xs) 0 0;
  text-align:center;
  font-size:var(--fs-xs);
  color:var(--color-text-muted);
}
/* Only relevant once there is something to drag — course-reviews.js removes
   this class (and the hint disappears) when the track doesn't overflow. */
.course-reviews-gallery:not([data-scrollable]) .course-reviews-hint{ display:none; }

/* ==========================================================================
   Lightbox
   ========================================================================== */

.reviews-lightbox{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-md);
  background:rgba(23, 31, 35, 0.88);
  backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-soft);
}
.reviews-lightbox.is-open{
  opacity:1;
  visibility:visible;
}
.reviews-lightbox__figure{
  position:relative;
  max-width:min(92vw, 720px);
  max-height:88vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  transform:scale(0.96);
  transition:transform var(--dur-base) var(--ease-premium);
}
.reviews-lightbox.is-open .reviews-lightbox__figure{ transform:scale(1); }

.reviews-lightbox__image-wrap{
  max-width:100%;
  max-height:calc(88vh - 4.5rem);
  display:flex;
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  background:var(--color-surface);
}
.reviews-lightbox__image-wrap img{
  display:block;
  max-width:100%;
  max-height:calc(88vh - 4.5rem);
  width:auto;
  height:auto;
  object-fit:contain;
}
.reviews-lightbox__caption{
  margin:var(--space-xs) 0 0;
  max-width:100%;
  text-align:center;
  color:var(--color-bg);
  font-size:var(--fs-small);
}
.reviews-lightbox__caption:empty{ display:none; }

.reviews-lightbox__close{
  position:absolute;
  top:calc(var(--space-md) * -1);
  inset-inline-end:calc(var(--space-md) * -1);
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-btn);
  border:1px solid rgba(247, 248, 246, 0.3);
  background:rgba(23, 31, 35, 0.72);
  color:var(--color-bg);
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-soft);
}
.reviews-lightbox__close:hover{ background:rgba(23, 31, 35, 0.92); }
.reviews-lightbox__close:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
.reviews-lightbox__close svg{ width:20px; height:20px; }

.reviews-lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-btn);
  border:1px solid rgba(247, 248, 246, 0.25);
  background:rgba(23, 31, 35, 0.58);
  color:var(--color-bg);
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-soft), opacity var(--dur-fast) var(--ease-soft);
}
.reviews-lightbox__nav:hover{ background:rgba(23, 31, 35, 0.82); }
.reviews-lightbox__nav:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
.reviews-lightbox__nav[disabled]{ opacity:0.25; cursor:default; }
.reviews-lightbox__nav svg{ width:22px; height:22px; }
.reviews-lightbox__nav--prev{ inset-inline-start:calc(var(--space-md) * -1); }
.reviews-lightbox__nav--next{ inset-inline-end:calc(var(--space-md) * -1); }
@media (max-width:720px){
  /* Off-canvas nav buttons have no room on a phone; move them into the
     frame's own bottom corners instead of overlapping the image. */
  .reviews-lightbox__nav--prev{ inset-inline-start:var(--space-2xs); top:auto; bottom:var(--space-2xs); transform:none; }
  .reviews-lightbox__nav--next{ inset-inline-end:var(--space-2xs); top:auto; bottom:var(--space-2xs); transform:none; }
  .reviews-lightbox__close{ top:var(--space-2xs); inset-inline-end:var(--space-2xs); }
}

.reviews-lightbox__position{
  position:absolute;
  bottom:calc(var(--space-md) * -1);
  inset-inline-start:0;
  color:var(--color-bg);
  font-size:var(--fs-xs);
  opacity:0.8;
  font-variant-numeric:tabular-nums;
  /*
   * Without this, "1 / 5" inside an RTL ancestor can get visually
   * reordered by the Unicode bidi algorithm — plain digits and a slash are
   * "weak" characters with no direction of their own, so they inherit
   * reordering from the surrounding RTL context and can render as "5 / 1".
   * Forcing LTR + isolating this run from its surroundings is the same fix
   * already used for the quiz result card's score fraction and result ID.
   */
  direction:ltr;
  unicode-bidi:isolate;
}

/* ==========================================================================
   Reduced motion — mandatory
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  .course-review-card{ transition:none; }
  .course-review-card:nth-child(odd),
  .course-review-card:nth-child(even){ transform:none; }
  .course-review-card:hover,
  .course-review-card:focus-within{ transform:none; }
  .course-reviews-track{ scroll-behavior:auto; }
  .reviews-lightbox,
  .reviews-lightbox__figure{ transition:none; }
}