/*
 * /courses — index of every published course.
 *
 * Hero is title + lede in the same shape /feed uses (Courses. + a
 * short description), then a 2-column grid of bordered cards. The
 * featured course leads with a "START HERE" eyebrow in --accent.
 */

.courses-index-shell {
  max-width: var(--container-marketing);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

@media (max-width: 700px) { .courses-index-shell { padding: 0 var(--space-5); } }
@media (max-width: 640px) { .courses-index-shell { padding: 0 var(--space-4); } }

/* ─── Hero ────────────────────────────────────────────────────────── */

.courses-index-hero { padding: 0; }

/* Title + "+ New Course" inline on the SAME row at every viewport.
   Mirrors /feed's hero-row pattern. flex-wrap: nowrap so the button
   never drops below the title. */
.courses-index-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 1rem;
}
.courses-index-hero-row .button-new {
  flex-shrink: 0;
}

/* "+ New Course" CTA — black-filled pill matching the "+ New Post"
   button on /feed exactly. Lives here (not in a shared file) until
   we add a third surface that needs it; at that point promote the
   rule to app/shared/styles/. */
.button-new {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: var(--font-medium);
  line-height: 1;
  background: var(--ink);
  color: var(--bg);
  padding: 0.6875rem 1.25rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.button-new:hover { background: #2a2a2e; }
.button-new-plus { display: inline-block; }
/* Optical centering — Inter's hhea ascent is larger than its descent;
   the label sits above the line-box midpoint while the SVG plus is
   geometrically centered. Nudge the label down 1px so they share the
   same horizontal mid-line. Same fix as on /feed. */
.button-new > span { margin-top: 1px; }

.courses-index-h1 {
  font-family: var(--font-sans);
  font-weight: var(--font-bold);
  font-size: 3.5rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}

.courses-index-lede {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 34rem;
  margin: 0;
}

/* Quiet admin-only link below the lede ("Edit page"). Subdued so it
   doesn't compete with the "+ Create" CTA in the hero row; reads as
   a settings affordance. */
.courses-index-admin {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--ink-dim);
  margin: 0.5rem 0 0;
}
.courses-index-admin a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 1px;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.courses-index-admin a:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
}

/* ─── Grid ────────────────────────────────────────────────────────── */

.courses-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3.5rem;
}

@media (max-width: 640px) {
  .courses-grid { grid-template-columns: 1fr; }
}

/* Wrap that contains the card link + the (admin-only) kebab menu.
   Acts as the grid item and as the positioning context for the
   absolutely-placed kebab. The inner .course-card carries all the
   visual chrome via the existing rules below. */
.course-card-wrap {
  position: relative;
  display: flex;
  min-width: 0;
}
.course-card-wrap > .course-card {
  flex: 1;
  min-width: 0;
}

/* Per-card "Edit" link — plain text in the top-right of the card.
   Subtle by default, accent on hover. Replaces an earlier one-action
   kebab that wrapped the same link in a menu (anti-affordance). */
.course-card-edit {
  position: absolute;
  top: 0.625rem;
  right: 0.875rem;
  z-index: 5;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.course-card-edit:hover {
  color: var(--accent-deep);
  background: var(--bg-soft);
}

/* Per-card kebab — same chrome as the issues-row kebab + comment
   overflow menu (.cmt-more) so the affordance reads identically
   across surfaces. Floats top-right of each card. */
.course-card-menu-wrap {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 5;
}
/* Same chrome as the /feed row kebab + comment overflow menu —
   transparent glyph button, color-only hover, no border, no bg
   pill. Earlier "outlined chip" treatment read as a different
   affordance from the rest of the site. */
.course-card-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Explicit height + padding overrides framework button defaults
     (--button-height: 36px, button:hover bg/border). */
  height: auto;
  min-height: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--duration-fast) var(--ease-out);
}
.course-card-menu-btn:hover,
.course-card-menu-btn.is-open {
  color: var(--accent-deep);
  background: transparent;
  border-color: transparent;
}
.course-card-menu-btn:active {
  background: transparent;
  border-color: transparent;
  transform: none;
}
.course-card-menu-btn:focus,
.course-card-menu-btn:focus-visible {
  outline: none;
  box-shadow: none;
}
.course-card-menu-btn svg { display: block; }

.course-card-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  /* Drop down-and-RIGHT from the kebab — same anchor as
     .action-menu-panel and .post-meta-menu site-wide so the menu
     always opens in a predictable direction. Earlier right-anchor
     read like a misclick (panel appears to the LEFT of the cursor).
     The card's content has room on the right within the page
     container; on the narrowest mobile widths the panel hugs the
     viewport edge but does not push past it. */
  left: 0;
  right: auto;
  min-width: 10.625rem;
  z-index: 10;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 0.25rem 0;
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  cursor: default;
}
.course-card-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0.4375rem 0.875rem;
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.course-card-menu-item:hover { background: var(--bg-soft); color: var(--ink); }

/* ─── Card ────────────────────────────────────────────────────────── */

.course-card {
  display: block;
  padding: 1.375rem 1.375rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background   var(--duration-fast) var(--ease-out),
    transform    var(--duration-fast) var(--ease-out);
}
.course-card:hover {
  border-color: var(--ink-faint);
  background: var(--bg-soft);
}
/* Keyboard-mode selection. Mirrors the .feed-row pattern: when any
   list opts into feed-nav, the selected row gets .is-selected and
   the body gets .is-keyboard-mode (suppressing :hover styles). */
.is-keyboard-mode .course-card:hover {
  border-color: var(--rule);
  background: var(--bg);
}
.course-card.is-selected,
.course-card.is-selected:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.course-card-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: var(--font-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.course-card-title {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: var(--font-medium);
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

.course-card-desc {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 1.125rem;
}

.course-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.course-card-meta-sep {
  color: var(--ink-faint);
}

/* ─── Admin actions ──────────────────────────────────────────────── */

.courses-index-admin-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ─── Empty ───────────────────────────────────────────────────────── */

.courses-index-empty {
  margin: 3.5rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* ─── Mobile ──────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* h1 mobile size + margin-top come from canonical .courses-index-h1
     in app/shared/styles/global.css. No local padding-top on the hero so
     the title sits at the same Y as /install, /pricing, /learn, etc. */
  .courses-grid { margin-top: 2rem; }
}