/* ─────────────────────────────────────────────────────────────────────────────
   Course catalogue — filters, search and the course grid. The grid is reused
   by "other courses" on each course page.
   ───────────────────────────────────────────────────────────────────────────── */

@layer page {

  /* Catalogue hero picture (hero/courses-classroom, 1672×941): the teacher,
     the children, their desk and floating cards end at 55% of its width; the
     rest is open sky and clouds (#FDEBF6 on average). The copy column (31vw)
     sits in the middle of that open side — 8vw off the edge, 6vw clear of the
     desk. Its widest line, «مع أمهر المعلمات.», measures 7.73em on the page
     font, so a title of 3.8vw fits the column. Cropped a little more from the
     bottom than the top when the hero is shorter than the picture, so the cap
     over the cards stays whole. */
  .courses-hero {
    --photo-focus: 0% 20%;
    --photo-inset: 8vw;
    --photo-copy: clamp(20rem, 31vw, 40rem);
    --photo-title: 3.8vw;
    --photo-veil-at: 76% 48%;
    --photo-focus-narrow: 0% 45%;
  }

  .catalog { padding-top: 0; }

  .catalog__bar {
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3) var(--s-6);
    padding: var(--s-3);
    border-radius: var(--r-lg);
  }
  .catalog__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .catalog__search { flex: 1 1 16rem; max-width: 22rem; }
  .catalog__search .input { min-height: 2.75rem; border-radius: var(--r-pill); }

  .catalog__status { margin: var(--s-6) 0 var(--s-5); color: var(--ink-2); font-size: var(--fs-small); }

  .catalog__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-6);
  }
  .catalog__item[hidden] { display: none; }

  /* A course left alone on the last row spans the whole row (the count skips
     courses the filter has hidden). The card itself turns wide — poster beside
     the text — whenever its cell is wide enough, whatever made it so. */
  .catalog__item { container-type: inline-size; }
  .catalog__item:nth-child(3n + 1 of :not([hidden])):nth-last-child(1 of :not([hidden])) { grid-column: 1 / -1; }

  @container (min-width: 40rem) {
    .course-card {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: var(--s-4);
    }
    .course-card__media { align-self: center; }
    .course-card__body { align-self: center; padding: var(--s-6) var(--s-5) var(--s-4); gap: var(--s-4); }
    .course-card__foot { margin-top: var(--s-4); }
    .course-card__desc { -webkit-line-clamp: 4; font-size: var(--fs-body); }
  }

  /* The card's title link covers the card; the WhatsApp shortcut sits above it. */
  .course-card__inquiry {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    margin-inline-start: calc(var(--s-3) * -1);
    border-radius: var(--r-pill);
    color: var(--ink-2);
    transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
  }
  .course-card__inquiry svg { width: 1.15rem; height: 1.15rem; color: #1FA855; }
  .course-card__inquiry:hover { background: rgb(31 168 85 / 0.08); color: var(--ink); }
  .course-card__desc { -webkit-line-clamp: 3; }
  .chip__icon { width: 0.85rem; height: 0.85rem; }

  .catalog__empty {
    display: grid;
    justify-items: center;
    gap: var(--s-3);
    padding: var(--s-12) var(--s-6);
    text-align: center;
    color: var(--ink-2);
  }
  .catalog__empty[hidden] { display: none; }
  .catalog__empty-art { width: 180px; margin-bottom: var(--s-2); }
  .catalog__empty-title { font-size: var(--fs-h3); color: var(--ink); }

  .catalog-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    padding: clamp(1.75rem, 1rem + 3vw, 3rem);
    border-radius: var(--r-xl);
  }
  .catalog-help__copy { display: grid; gap: var(--s-2); max-width: 40rem; }
  .catalog-help__title { font-size: var(--fs-h3); }
  .catalog-help__copy p { color: var(--ink-2); }
  .catalog-help__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

  @media (max-width: 1080px) {
    .catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Two columns: the lone course is the odd one out. */
    .catalog__item:nth-child(3n + 1 of :not([hidden])):nth-last-child(1 of :not([hidden])) { grid-column: auto; }
    .catalog__item:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])) { grid-column: 1 / -1; }
  }
  @media (max-width: 720px) {
    .catalog__bar { position: static; }
    .catalog__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--s-3) * -1); padding-inline: var(--s-3); }
    .catalog__chips::-webkit-scrollbar { display: none; }
    .catalog__search { max-width: none; }
  }
  @media (max-width: 640px) {
    .catalog__grid { grid-template-columns: minmax(0, 1fr); }
    .catalog__item:nth-child(odd of :not([hidden])):nth-last-child(1 of :not([hidden])) { grid-column: auto; }
  }
}