/*
 * Course Materials (page 1536, key "course-materials"), rulebook P-20.
 * Code-rendered: eam-course-materials/templates/course-materials.php
 * ([eam_course_materials] inside the eam/section block). Loaded by
 * includes/redesign.php only on this page and only while the redesign switch
 * is on.
 *
 * RS model: the grant listing (clone:src/app/grants/search/grant-listings/
 * page.tsx with RSC/shared/PostDisplay.tsx and RSC/shared/StickyFilter.tsx).
 * The shared parts already style the light hero, the breadcrumb, the tabs, the
 * search field, the card frame, the "Members" tag, the buttons and the CTA band
 * (components.css, forms.css, templates.css). This file only does what is
 * particular to this page:
 *   1. the filter bar sticks under the header like the RS StickyFilter
 *      (desktop), and on tablets and phones puts the search above the tabs so
 *      the active tab sits on the bar's hairline;
 *   2. the featured course panel (shown from 4 courses on) in RS type: square,
 *      flat, white text on indigo, the title a link to its card (D-19 fix in
 *      the template);
 *   3. the members-only PDF rows inside the cards as a plain RS "Downloads"
 *      list (file icon, title link, status line under it);
 *   4. the "no match" line under the grid while the search hides every card;
 *   5. the page's bottom spacing when no CTA band follows the grid (members).
 * Every rule: body.eam-redesign.page-id-1536, tokens only. The indigo tile for
 * courses without a cover (D-44) is left as it is.
 */

/* ---- 1. Filter bar (S-11) ------------------------------------------------ */

/* eam-course-materials.css:97-103 makes the bar sticky at top: 0 and
 * components.css removed its background, so on scroll the tabs slid over the
 * cards with nothing behind them, under the header. RS StickyFilter: white
 * bar right under the visible header (DESIGN-SYSTEM.md section 7). */
body.eam-redesign.page-id-1536 .eam-cm .eam-cm-toolbar {
  position: sticky;
  top: var(--rd-header-offset, var(--rd-header-h));
  z-index: var(--rd-z-sticky);
  /* Room above the search field once the bar is stuck to the viewport top. */
  padding-top: var(--rd-space-xs);
  background: var(--rd-white);
  transition: top var(--rd-dur-base) var(--rd-ease-out-quad);
}

@media (max-width: 820px) {
  /* Search plus tabs is two rows here: too tall to follow the reader. */
  body.eam-redesign.page-id-1536 .eam-cm .eam-cm-toolbar {
    position: static;
    padding-top: 0;
  }

  /* Search first, then the tabs on the hairline (the RS bar keeps the tabs
   * on its bottom line; the full-width search moved under it). */
  body.eam-redesign.page-id-1536 .eam-cm .eam-cm-search {
    order: -1;
    margin: 0;
  }
}

/* ---- 2. Featured course -------------------------------------------------- */

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-featured {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  min-height: 0;
  margin: 0 0 var(--rd-space-section);
  box-shadow: none;
}

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-featured__img {
  min-height: 0;
  aspect-ratio: 16 / 9;
}

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-featured__panel {
  justify-content: center;
  padding: var(--rd-space-l) var(--rd-space-m);
  background: var(--rd-color-primary);
  color: var(--rd-color-on-primary);
}

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-featured__panel .eam-cm-eyebrow {
  margin: 0 0 var(--rd-space-xs);
  opacity: 1;
  color: var(--rd-color-on-primary);
}

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-featured__title {
  margin: 0 0 var(--rd-space-s);
  font-family: var(--rd-font);
  font-size: var(--rd-fs-h3);
  font-weight: var(--rd-fw-semibold);
  line-height: var(--rd-lh-h3);
  letter-spacing: var(--rd-ls-heading);
  color: var(--rd-color-on-primary);
}

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-featured__link {
  color: inherit;
  text-decoration: none;
}

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-featured__link:hover {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-featured__lede {
  max-width: none;
  margin: 0 0 var(--rd-space-s);
  font-size: var(--rd-fs-large);
  line-height: var(--rd-lh-body);
  opacity: 1;
}

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-featured__meta {
  font-size: var(--rd-fs-body);
  font-weight: var(--rd-fw-semibold);
  opacity: 1;
}

/* The featured link jumps to the course card: keep the card clear of the
 * header and the sticky bar. */
body.eam-redesign.page-id-1536 .eam-cm .eam-cm-card {
  scroll-margin-top: calc(var(--rd-header-h) + 96px);
}

@media (max-width: 820px) {
  body.eam-redesign.page-id-1536 .eam-cm .eam-cm-featured {
    grid-template-columns: minmax(0, 1fr);
  }

  /* eam-course-materials.css:192 fixes the photo at 190px under 700px. */
  body.eam-redesign.page-id-1536 .eam-cm .eam-cm-featured__img {
    height: auto;
  }

  body.eam-redesign.page-id-1536 .eam-cm .eam-cm-featured__panel {
    padding: var(--rd-space-base) var(--rd-space-s) var(--rd-space-m);
  }
}

/* ---- 3. Members-only PDF rows (RS "Downloads" list) ---------------------- */

/* member-resources.css:131-217 draws each row as a small rounded box with
 * a coloured status dot; in a 3-column card the title wrapped into a narrow
 * column next to the status. Here: one plain row per file, hairline
 * between rows, file icon + title link, the status as a line under it. */
body.eam-redesign.page-id-1536 .eam-cm .eam-cm-card__matlabel {
  margin-bottom: var(--rd-space-2xs);
}

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-card__materials .eam-course-entry__resources {
  margin: 0;
}

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-card__materials .eam-course-entry__resource {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rd-space-2xs);
  margin: 0;
  padding: var(--rd-space-xs) 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--rd-font);
  font-size: var(--rd-fs-body);
  line-height: var(--rd-lh-body);
  color: var(--rd-color-text);
}

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-card__materials .eam-course-entry__resource + .eam-course-entry__resource {
  border-top: var(--rd-border-width) solid var(--rd-border-light);
}

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-card__materials :is(.eam-course-entry__resource-link, .eam-course-entry__resource-label) {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--rd-space-xs);
  font-weight: var(--rd-fw-semibold);
  line-height: var(--rd-lh-body);
}

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-card__materials .eam-course-entry__resource-link {
  color: var(--rd-color-link);
  text-decoration: none;
}

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-card__materials .eam-course-entry__resource-link:hover {
  color: var(--rd-color-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-card__materials :is(.eam-course-entry__resource-link, .eam-course-entry__resource-label) svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

/* Status under the title, lined up with the title text (icon 20 + gap 12). */
body.eam-redesign.page-id-1536 .eam-cm .eam-cm-card__materials .eam-course-entry__resource-status {
  padding-left: 32px;
  font-size: var(--rd-fs-small);
  font-weight: var(--rd-fw-regular);
  line-height: var(--rd-lh-body);
  white-space: normal;
  color: var(--rd-color-text-70);
}

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-card__materials .eam-course-entry__resource-status::before {
  content: none;
}

/* ---- 4. No match (template line, hidden by default) ---------------------- */

/* eam-course-materials.js hides a card with style="display: none". When the
 * search hides every card, show the line under the grid (RS NoResults). */
body.eam-redesign.page-id-1536 .eam-cm .eam-cm-grid:not(:has(> .eam-cm-card:not([style*="none"]))) + .eam-cm-noresults {
  display: block;
}

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-noresults {
  margin: 0;
  font-family: var(--rd-font);
  font-size: var(--rd-fs-h4);
  font-weight: var(--rd-fw-semibold);
  line-height: var(--rd-lh-h4);
  color: var(--rd-color-text);
}

/* ---- 5. Bottom spacing ----------------------------------------------------- */

/* Signed-in members get no CTA band, so the last card row touched the
 * footer line. One section space under whatever ends the page. */
body.eam-redesign.page-id-1536 .eam-cm > .eam-cm-wrap:last-child {
  padding-bottom: var(--rd-space-xl);
}

body.eam-redesign.page-id-1536 .eam-cm .eam-cm-cta {
  margin-bottom: 0;
}