/*
 * Landing page: the course catalog (numbered-path motif on the cards), reviews
 * and the cat above the footer. Uses only the variables from tokens.css.
 */

/* Catalog: the first section of the page, its title is the page's h1. */
.catalog {
  padding: var(--space-7) 0;
  scroll-margin-top: var(--space-4);
}

.catalog__header {
  margin-bottom: var(--space-6);
}

.catalog__title {
  margin-bottom: var(--space-3);
}

.catalog__subtitle {
  max-width: calc(var(--container-width) / 2);
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-lg);
}

.catalog__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--container-width) / 4)), 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalog__empty {
  padding: var(--space-6);
  border: var(--border-width) dashed var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-soft);
  color: var(--color-muted);
}

/* Course card: the whole card is one link. */
.course-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-ground);
  color: var(--color-ink);
  text-decoration: none;
}

.course-card:hover {
  border-color: var(--color-accent);
}

.course-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

/* Step badge (components.css) turns yellow when the card is hovered. */
.course-card:hover .step-badge {
  border-color: var(--color-ink);
  background: var(--color-highlight);
  color: var(--color-ink);
}

.course-card__title {
  margin: 0;
  font-size: var(--text-lg);
}

.course-card__tagline {
  margin: 0;
  color: var(--color-muted);
}

.course-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
}

/* Reviews */
.reviews {
  padding: var(--space-7) 0;
  scroll-margin-top: var(--space-4);
}

.reviews__title {
  margin-bottom: var(--space-6);
}

.reviews__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--container-width) / 3.5)), 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.review-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-line);
  border-left: calc(var(--border-width) * 4) solid var(--color-highlight);
  border-radius: var(--radius-card);
  background: var(--color-ground);
}

.review-card__text {
  flex: 1;
  margin: 0 0 var(--space-4);
  overflow-wrap: anywhere;
}

.review-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.review-card__name {
  color: var(--color-ink);
  font-weight: var(--weight-bold);
}

/* Decorative cat above the footer (landing only). Centred, its own block, so it
   fills the space under the catalog however many courses there are. The desk
   runs off the artwork's bottom and sides: the bottom edge sits flush on the
   footer's top edge (no footer margin here, no inline gap under the image), the
   two cut-off sides fade out (only the mask's alpha matters). The artwork is
   transparent, so no blend mode is needed. */
.landing-cat {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
  pointer-events: none;
}

.landing-cat picture,
.landing-cat img {
  display: block;
}

.landing-cat img {
  width: 25rem;
  max-width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--color-ink) 8%, var(--color-ink) 92%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--color-ink) 8%, var(--color-ink) 92%, transparent);
}

/* landing.css is loaded on the landing page only: the footer's usual top
   margin (base.css) would leave a white strip under the desk. */
.site-footer {
  margin-top: 0;
}

@media (max-width: 64rem) {
  .landing-cat img {
    width: 22.5rem;
  }
}

@media (max-width: 40rem) {
  .catalog {
    padding-top: var(--space-6);
  }

  .landing-cat img {
    width: 15rem;
  }
}