/* ==========================================================================
   Single course — the pieces that are course-only
   The hero, quick-facts strip, body grid and facts column are shared with the
   other detail templates and live in library/css/lhi-detail.css.

   Enqueued from library/bones.php when is_singular('course').
   ========================================================================== */

/* ---------------------------- Gallery ----------------------------------- */

.course-gallery {
  list-style: none;
  /* Out of the prose measure: lhi-detail.css caps every text block in the
     column at 34em, and the shots are figures, not copy. */
  max-width: none;
  margin: clamp(24px, 3vw, 40px) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.course-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
  border: 1px solid var(--line);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.course-gallery li { margin: 0; }
.course-gallery a { display: block; overflow: hidden; border-radius: var(--r); }
.course-gallery a:hover img { transform: scale(1.04); }

/* ---------------------------- Actions ----------------------------------- */

.course-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin: clamp(24px, 3vw, 40px) 0 0;
}

/* .btn--primary now lives in lhi-foundation.css — it was written here and
   in three block stylesheets with the same values. */

.course-apply { flex: 0 0 auto; }

.course-moreinfo {
  font-size: 14px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.75;
}

.course-moreinfo:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .course-gallery img { transition: none; }
}

/* ---------------------------- Responsive -------------------------------- */

@media (max-width: 600px) {
  .course-gallery { grid-template-columns: repeat(2, 1fr); }
  .course-apply { width: 100%; justify-content: center; }
}