/**
 * Excel Man - course surfaces (modern redesign)
 * Added 2026-09-18.
 *
 * Scope: the /courses/ archive, course category/tag archives, and the course
 * cards embedded on the front page (Training section carousel).
 *
 * Why a separate stylesheet rather than more rules in style.css: Tutor's own
 * tutor.min.css / tutor-front.min.css are enqueued on these pages after the
 * theme stylesheet, so theme rules lose on equal specificity. This file is
 * enqueued with 'tutor' as a dependency (see blank_starter_assets() in
 * functions.php), which puts it last in the cascade and lets these rules win
 * on specificity alone instead of on !important.
 *
 * Design language is taken from the existing site rather than invented:
 *   - accent #388E3C, hover #2E7D32, tints #e8f5e9 / #f6f9f6  (:root, .about-hero)
 *   - 16px card radius, 1px #f0f0f0 border, soft shadow, -5px hover lift (.hcard)
 *   - pill badges, uppercase 11px / 0.6px tracking            (.hcard-badge)
 *   - Poppins via var(--font-base)
 * so the courses pages read as the same site, only current.
 */

/* ============================================================
   TOKENS
   Local to the course surfaces. Values mirror the site's existing
   palette so nothing here introduces a new brand colour.
   ============================================================ */
.tutor-course-card,
.tutor-archive-body {
  --em-c-accent: #388E3C;
  --em-c-accent-dark: #2E7D32;
  --em-c-accent-tint: #e8f5e9;
  --em-c-ink: #111;
  --em-c-muted: #5b6560;
  --em-c-line: #e8ece8;
  --em-c-radius: 16px;
  --em-c-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  --em-c-shadow-hover: 0 14px 38px rgba(17, 40, 20, 0.13);
}

/* ============================================================
   ARCHIVE CONTAINER WIDTH
   The archive template nests Tutor's .tutor-container inside the theme's
   .home-container. Tutor gives .tutor-container width:100% + a max-width
   ladder, but inside the theme's shell it was rendering ~575px wide and
   centred, which collapsed the course grid to a single column on a 1440px
   viewport.
   Re-asserting the intended box here is deliberate: it restates what Tutor
   already intends (full width of its parent, capped by .home-container's
   1200px) rather than inventing a new width, and it is scoped to the archive
   body so no other Tutor screen is affected.
   ============================================================ */
/* The actual cause of the collapse: .site is a flex column, so .site-main is a
   flex item and does NOT stretch to the container width on its own. With
   `margin: 28px auto` it was being centred at its intrinsic (shrink-to-fit)
   width, which measured ~523px - so .home-container's max-width:1200px never
   came into play and the course grid could only ever fit one column.
   style.css already fixes exactly this for single posts (".site is a flex
   column, so the item does not stretch on its own" - see the
   `.single .site-main` block); the course archive simply never got the same
   treatment. This applies it for the archive only. */
.tutor-archive-body,
body.post-type-archive-courses .site-main.page-main,
body.tax-course-category .site-main.page-main,
body.tax-course-tag .site-main.page-main {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  /* box-sizing so the section's own horizontal padding (.home-section has
     `padding: 72px 24px`) stays inside the 100% width rather than adding to
     it, which otherwise pushes the grid past the viewport edge on a phone. */
  box-sizing: border-box;
}

/* Keep the archive shell and Tutor's nested wrappers inside the viewport.
   Tutor's .tutor-row uses negative side margins for its gutter, which would
   otherwise overflow its parent now that the row is width:100%. */
.tutor-archive-body,
.tutor-archive-body .home-container,
.tutor-archive-body .tutor-wrap.tutor-container,
.tutor-archive-body .tutor-row {
  box-sizing: border-box;
  max-width: 100%;
}

.tutor-archive-body .tutor-row {
  margin-left: 0;
  margin-right: 0;
}

/* Tutor's .tutor-container carries a max-width ladder (540/720/960/1140/1320px)
   declared inside min-width media queries. Now that the shell is full width,
   that ladder would still cap the listing at 1140px inside an already-capped
   1200px .home-container, so it is released here and the theme's own
   .home-container stays the single source of the content measure.
   !important is required because a media-query rule outranks this one on
   cascade order, not specificity. */
.tutor-archive-body .tutor-wrap.tutor-container,
.tutor-archive-body .tutor-courses-wrap {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* The row/column Tutor wraps the listing in must not shrink-to-fit either. */
.tutor-archive-body .tutor-row {
  width: 100%;
}

.tutor-archive-body .tutor-col-12 {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}

/* ============================================================
   GRID
   Tutor's .tutor-grid-N hardcodes a column count. Auto-fill lets the
   same grid serve the 3-up archive and the narrower category pages
   without a per-breakpoint override, and keeps cards from stretching
   absurdly wide when only one or two courses match a filter.
   ============================================================ */
.tutor-course-list.tutor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  align-items: stretch;
}

@media (max-width: 640px) {
  .tutor-course-list.tutor-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ============================================================
   CARD
   ============================================================ */
.tutor-course-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: var(--em-c-radius);
  box-shadow: var(--em-c-shadow);
  overflow: hidden;
  /* Tutor animates nothing; the lift is what the site's own .hcard does. */
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.tutor-course-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--em-c-shadow-hover);
  border-color: rgba(56, 142, 60, 0.28);
}

/* Keyboard parity: the card is not focusable itself, so mirror the hover
   treatment when focus lands on any link inside it. */
.tutor-course-card:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--em-c-shadow-hover);
  border-color: rgba(56, 142, 60, 0.45);
}

@media (prefers-reduced-motion: reduce) {

  .tutor-course-card,
  .tutor-course-card:hover,
  .tutor-course-card:focus-within {
    transition: none;
    transform: none;
  }
}

/* ---- Thumbnail ---------------------------------------------------- */
.tutor-course-card .em-course-thumb {
  position: relative;
  overflow: hidden;
  /* Tinted placeholder so a missing image reads as an empty thumbnail rather
     than sprawled alt text - the same fix already applied to the front-page
     carousel in style.css. */
  background: linear-gradient(135deg, #eef5ee, #e3efe3);
}

.tutor-course-card .em-course-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Hide alt text of a broken image instead of letting it fill the box. */
  color: transparent;
  transition: transform 0.45s ease;
}

.tutor-course-card:hover .em-course-thumb img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {

  .tutor-course-card .em-course-thumb img,
  .tutor-course-card:hover .em-course-thumb img {
    transition: none;
    transform: none;
  }
}

/* Bottom-up scrim: keeps the level pill legible over a light photo. */
.tutor-course-card .em-course-thumb-veil {
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(12, 32, 15, 0.45), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.tutor-course-card:hover .em-course-thumb-veil {
  opacity: 1;
}

/* ---- Level badge --------------------------------------------------- */
.em-course-level {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--em-c-accent-dark);
  font-family: var(--font-base);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Level is a rank, so it earns a colour ramp rather than one flat pill. */
.em-course-level--beginner {
  color: #2E7D32;
}

.em-course-level--intermediate {
  color: #B26A00;
}

.em-course-level--expert {
  color: #8E24AA;
}

/* ---- Body ---------------------------------------------------------- */
.tutor-course-card .tutor-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 20px 16px;
}

.tutor-course-card .tutor-course-name {
  margin: 0 0 12px;
  font-family: var(--font-base);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.1px;
}

.tutor-course-card .tutor-course-name a {
  color: var(--em-c-ink);
  text-decoration: none;
  /* Two-line clamp keeps every card's meta row on the same baseline; without
     it a long title pushes its card's footer out of line with the row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.tutor-course-card .tutor-course-name a:hover {
  color: var(--em-c-accent);
}

/* ---- Rating -------------------------------------------------------- */
.tutor-course-card .tutor-course-ratings {
  margin-bottom: 10px;
}

.tutor-course-card .tutor-ratings-average,
.tutor-course-card .tutor-ratings-count {
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 600;
  color: var(--em-c-muted);
}

/* ---- Stats row ----------------------------------------------------- */
.em-course-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.em-course-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #f4f7f4;
  color: var(--em-c-muted);
  font-family: var(--font-base);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.em-course-stat .tutor-meta-icon {
  font-size: 14px;
  color: var(--em-c-accent);
  line-height: 1;
}

.em-course-stat .tutor-meta-value {
  color: inherit;
}

/* ---- Author row ---------------------------------------------------- */
.em-course-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--em-c-line);
}

.em-course-author-avatar {
  flex-shrink: 0;
}

.em-course-author .tutor-avatar,
.em-course-author img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: #e3efe3;
  object-fit: cover;
  /* Suppress alt text of a missing avatar - it used to spill out of the circle
     on the front page (see the note in style.css). */
  color: transparent;
  text-indent: -9999px;
}

.em-course-author-text {
  min-width: 0;
  font-family: var(--font-base);
  font-size: 12.5px;
  line-height: 1.35;
}

.em-course-author-name {
  display: block;
  color: var(--em-c-ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.em-course-author-name:hover {
  color: var(--em-c-accent);
}

.em-course-author-cats {
  display: block;
  color: #8a938c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.em-course-author-cats a {
  color: #8a938c;
  text-decoration: none;
}

.em-course-author-cats a:hover {
  color: var(--em-c-accent);
  text-decoration: underline;
}

/* ============================================================
   FOOTER (price + enrol)
   ============================================================ */
.tutor-course-card .em-course-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--em-c-line);
  background: #fcfdfc;
}

.tutor-course-card .em-course-footer .tutor-course-price,
.tutor-course-card .em-course-footer .price,
.em-course-price {
  font-family: var(--font-base);
  font-size: 18px;
  font-weight: 800;
  color: var(--em-c-ink);
  line-height: 1.25;
  /* min-width:0 lets the price column shrink inside the flex footer so the
     button keeps its natural width instead of being squeezed. */
  min-width: 0;
}

/* Woo prints the old and new price as inline siblings; stacking them keeps a
   discounted course's footer the same height as a full-price one. */
.tutor-course-card .em-course-footer .price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

/* A struck-through original next to the live price - Woo emits both inside
   .price, and at equal weight the discount is unreadable. */
.tutor-course-card .em-course-footer del,
.tutor-course-card .em-course-footer del .amount {
  font-size: 13px;
  font-weight: 500;
  color: #9aa39c;
  text-decoration: line-through;
  margin-right: 0;
}

.tutor-course-card .em-course-footer ins {
  text-decoration: none;
}

.em-course-price--free {
  color: var(--em-c-accent-dark);
}

/* The enrol / add-to-cart button: the site's pill button, scaled down to sit
   inside a card footer. Kept specific enough to beat .tutor-btn without
   !important, since this file loads after Tutor's stylesheet. */
.tutor-course-card .em-course-footer .tutor-btn,
.tutor-course-card .em-course-footer .tutor-btn-outline-primary,
.tutor-course-card .em-course-footer a.button,
.tutor-course-card .em-course-footer button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-height: 0;
  /* "Add to cart" was wrapping onto two lines in a 3-up grid, which made the
     footers of adjacent cards different heights. */
  white-space: nowrap;
  flex-shrink: 0;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--em-c-accent);
  color: #fff;
  font-family: var(--font-base);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(56, 142, 60, 0.22);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.tutor-course-card .em-course-footer .tutor-btn:hover,
.tutor-course-card .em-course-footer a.button:hover,
.tutor-course-card .em-course-footer button.button:hover {
  background: var(--em-c-accent-dark);
  color: #fff;
  box-shadow: 0 6px 18px rgba(56, 142, 60, 0.3);
  transform: translateY(-1px);
}

.tutor-course-card .em-course-footer .tutor-btn:focus-visible,
.tutor-course-card .em-course-footer a.button:focus-visible {
  outline: 3px solid rgba(56, 142, 60, 0.4);
  outline-offset: 2px;
}

/* Tutor makes the enrol button full-width via .tutor-btn-block; inside the new
   split footer that would push the price onto its own line. */
.tutor-course-card .em-course-footer .tutor-btn-block {
  width: auto;
  display: inline-flex;
}

/* The purchasable-course states don't put the price and button directly in the
   footer: course-price-woocommerce.php wraps them in its own
   .tutor-d-flex.tutor-justify-between div. That makes the footer a one-child
   flex row, so the footer's own space-between has nothing to separate, and the
   wrapper shrink-wraps its content - which is why the button sat right against
   the price. Make the wrapper fill the footer so its justify-between resolves
   against the full card width. */
.tutor-course-card .em-course-footer > .tutor-justify-between {
  flex: 1 1 100%;
  min-width: 0;
  gap: 12px;
}

/* Belt and braces: the price column takes the slack and the button is pinned to
   the right edge, so they stay apart even if a state renders without the
   wrapper's utility classes. */
.tutor-course-card .em-course-footer .list-item-price {
  flex: 1 1 auto;
  min-width: 0;
}

.tutor-course-card .em-course-footer .list-item-button {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
}

/* A free course has no price to balance against, so the button takes the row. */
.em-course-cta--free .tutor-course-list-btn {
  margin-left: auto;
}

/* "Continue learning" / "In cart" states render a full-width button and no
   price; let those span the footer rather than hugging one edge. */
.tutor-course-card .em-course-footer .tutor-course-continue-wrap,
.tutor-course-card .em-course-footer .tutor-course-in-cart-wrap {
  width: 100%;
}

.tutor-course-card .em-course-footer .tutor-course-continue-wrap .tutor-btn,
.tutor-course-card .em-course-footer .tutor-course-in-cart-wrap .tutor-btn {
  width: 100%;
}

/* ============================================================
   ARCHIVE SHELL - filter sidebar, sort bar, pagination
   ============================================================ */

/* Sort dropdown: suppressed on the archive via an empty theme override of
   Tutor's course-archive-filter-bar template, so there is no bar to style
   here. The <select> rules remain because Tutor renders the same
   .tutor-form-select inside other archive surfaces (the sidebar filter form,
   which this site can switch back on from Tutor settings). */
.tutor-archive-body .tutor-course-filter {
  margin-bottom: 20px;
}

.tutor-archive-body .tutor-course-filter .tutor-form-select,
.tutor-archive-body select.tutor-form-select {
  padding: 10px 40px 10px 16px;
  border: 1px solid var(--em-c-line);
  border-radius: 999px;
  background-color: #fff;
  font-family: var(--font-base);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--em-c-ink);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tutor-archive-body .tutor-form-select:hover,
.tutor-archive-body .tutor-form-select:focus {
  border-color: var(--em-c-accent);
  box-shadow: 0 0 0 3px rgba(56, 142, 60, 0.12);
  outline: none;
}

/* Filter sidebar: a plain list on a white page. Give it a card so it reads as
   a panel beside the course grid. */
.tutor-archive-body .tutor-course-filter-container .tutor-course-filter-form {
  padding: 24px 22px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: var(--em-c-radius);
  box-shadow: var(--em-c-shadow);
}

.tutor-archive-body .tutor-widget + .tutor-widget {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--em-c-line);
}

/* Tutor spaces widgets with a .tutor-mt-48 utility; the divider above replaces
   it, so collapse the extra gap. */
.tutor-archive-body .tutor-course-filter-form .tutor-widget.tutor-mt-48 {
  margin-top: 28px;
}

.tutor-archive-body .tutor-widget-title {
  margin: 0 0 14px;
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 700;
  color: var(--em-c-ink);
  letter-spacing: -0.1px;
}

.tutor-archive-body .tutor-widget .tutor-form-check-label,
.tutor-archive-body .tutor-widget label {
  font-family: var(--font-base);
  font-size: 14px;
  color: var(--em-c-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.tutor-archive-body .tutor-widget label:hover {
  color: var(--em-c-accent);
}

.tutor-archive-body .tutor-form-check-input:checked {
  background-color: var(--em-c-accent);
  border-color: var(--em-c-accent);
}

/* Search field inside the filter panel. */
.tutor-archive-body .tutor-widget-search .tutor-form-control {
  padding: 11px 16px 11px 40px;
  border: 1px solid var(--em-c-line);
  border-radius: 999px;
  font-family: var(--font-base);
  font-size: 14px;
}

.tutor-archive-body .tutor-widget-search .tutor-form-control:focus {
  border-color: var(--em-c-accent);
  box-shadow: 0 0 0 3px rgba(56, 142, 60, 0.12);
  outline: none;
}

/* Pagination: Tutor ships square bordered boxes. */
.tutor-archive-body .tutor-pagination-wrapper {
  margin-top: 44px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tutor-archive-body .tutor-pagination-wrapper a,
.tutor-archive-body .tutor-pagination-wrapper span {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--em-c-line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: 600;
  color: var(--em-c-muted);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tutor-archive-body .tutor-pagination-wrapper a:hover {
  border-color: var(--em-c-accent);
  color: var(--em-c-accent);
  background: var(--em-c-accent-tint);
}

.tutor-archive-body .tutor-pagination-wrapper .active,
.tutor-archive-body .tutor-pagination-wrapper .tutor-pagination-item-active {
  background: var(--em-c-accent);
  border-color: var(--em-c-accent);
  color: #fff;
}

/* Empty state: Tutor's is a bare centred line of grey text. */
.tutor-archive-body .tutor-empty-state {
  padding: 60px 24px;
  background: #f8faf8;
  border: 1px dashed #d8e4d8;
  border-radius: var(--em-c-radius);
  text-align: center;
  font-family: var(--font-base);
  color: var(--em-c-muted);
}

/* ============================================================
   FRONT-PAGE CARDS
   The Training section renders the same Tutor card inside a carousel
   slide. Everything above already applies; these only neutralise the
   older carousel overrides in style.css that forced the card to
   display:block and full-bleed width.
   ============================================================ */
.course-carousel-wrapper .tutor-course-card,
.training-right .tutor-course-card {
  display: flex !important;
  height: 100%;
}

.course-carousel-wrapper .tutor-course-list.tutor-grid,
.training-right .tutor-course-list.tutor-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0;
}

/* ============================================================
   ARCHIVE HERO
   The compact banner scale this page introduced is now the site-wide default
   (.about-hero / .page-hero in style.css), so only what is genuinely specific
   to the course archive lives here: the left alignment and the wider inner
   box, which let the title line up with the first column of the card grid
   instead of floating centred above a left-aligned wall of cards.
   ============================================================ */
.about-hero.courses-hero {
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Matches .home-container's 1200px so the hero and grid share a left edge. */
.courses-hero .about-hero-inner {
  max-width: 1200px;
  padding: 0 20px;
}

@media (max-width: 600px) {
  .courses-hero .about-hero-inner {
    padding: 0;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {

  /* Tutor's filter column is a hard .tutor-col-3; below the desktop breakpoint
     the plugin's own JS toggles it off-canvas, so only the grid reflows here. */
  .tutor-archive-body .tutor-course-list.tutor-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 640px) {
  .tutor-course-card .tutor-card-body {
    padding: 18px 16px 14px;
  }

  .tutor-course-card .tutor-course-name {
    font-size: 16px;
  }

  .tutor-course-card .em-course-footer {
    padding: 14px 16px 16px;
  }

  /* Price and button stack rather than squeeze on a narrow card. */
  .tutor-course-card .em-course-footer .tutor-btn,
  .tutor-course-card .em-course-footer .tutor-btn-block {
    width: 100%;
  }

  .em-course-cta--free .tutor-course-list-btn {
    width: 100%;
  }
}

/* ============================================================
   FOOTER: stop the button crowding the price
   ============================================================
   The footer's own `gap: 10px` never applied to the price and the button,
   because tutor_course_loop_price() prints its own wrapper between them:

     .em-course-footer                     <- our flex, gap:10px
       └ .tutor-d-flex.tutor-justify-between   <- Tutor's flex, gap:normal
           ├ .list-item-price
           └ .list-item-button

   So the two sat flush. Measured on /courses/ at 1440px: the inner row was
   247px wide with a 91px price and a 156px button - 247px of content in
   247px of space, a 0px gap - and the button's rounded left edge printed
   over the "₹2,000.00" beneath it.

   Three things fix it, in order of importance:
     1. a real gap on the element that actually lays the two out,
     2. the price column may shrink but the button may not, so a long price
        never pushes the button over,
     3. below a usable width they stack instead of fighting for the row.
*/

.tutor-course-card .em-course-footer > .tutor-d-flex,
.tutor-course-card .em-course-footer > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The gap the footer intended, applied where the children actually are. */
  gap: 14px;
  width: 100%;
  flex-wrap: wrap;
  row-gap: 10px;
}

/* The price may shrink and wrap; it must never be overlapped. min-width:0
   is what allows a flex item to shrink below its content width at all. */
.tutor-course-card .em-course-footer .list-item-price {
  flex: 1 1 auto;
  min-width: 0;
}

/* The button keeps its natural width - shrinking it is what let it ride up
   onto the price in the first place. */
.tutor-course-card .em-course-footer .list-item-button {
  flex: 0 0 auto;
  min-width: 0;
  /* Tutor's wrapper is a plain block, so the anchor inside it would still
     be laid out at the wrapper's full width without this. */
  display: inline-flex;
  justify-content: flex-end;
}

/* Belt and braces: whatever the wrapper does, the button never overlaps the
   text to its left. */
.tutor-course-card .em-course-footer .list-item-button .tutor-btn,
.tutor-course-card .em-course-footer .list-item-button a.button {
  position: relative;
  flex-shrink: 0;
  margin-left: 0;
}

/* Narrow cards (4-up grid, tablets): 91px of price plus a ~156px button plus
   a gap does not fit, so stack them full width rather than overlap. */
@media (max-width: 1200px) and (min-width: 861px) {
  .tutor-course-card .em-course-footer > .tutor-d-flex,
  .tutor-course-card .em-course-footer > div:first-child {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .tutor-course-card .em-course-footer .list-item-button {
    display: flex;
    justify-content: stretch;
  }

  .tutor-course-card .em-course-footer .list-item-button .tutor-btn,
  .tutor-course-card .em-course-footer .list-item-button a.button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .tutor-course-card .em-course-footer > .tutor-d-flex,
  .tutor-course-card .em-course-footer > div:first-child {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .tutor-course-card .em-course-footer .list-item-button .tutor-btn,
  .tutor-course-card .em-course-footer .list-item-button a.button {
    width: 100%;
    justify-content: center;
  }
}

/* --- Scope correction: leave the free-course footer alone ---------------
   The rule above used `> div:first-child` to reach Tutor's price/button
   wrapper, but a free course's footer has no price - its only child is
   .tutor-course-list-btn holding a .tutor-btn-block "Enroll Course". That
   selector therefore turned the block button into a shrink-to-fit flex
   item, so it stopped filling the card.

   Restore the block behaviour for that case. Scoping by what the wrapper
   CONTAINS is what distinguishes the two footers; :has() covers modern
   browsers and the .tutor-course-list-btn rule below is the fallback.
*/
.tutor-course-card .em-course-footer > .tutor-course-list-btn {
  display: block;
  width: 100%;
  flex: 1 1 100%;
}

.tutor-course-card .em-course-footer > .tutor-course-list-btn .tutor-btn,
.tutor-course-card .em-course-footer .tutor-btn-block {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* The gap/justify treatment is only wanted on a wrapper that actually holds
   both a price and a button. */
.tutor-course-card .em-course-footer > div:first-child:not(:has(.list-item-price)):not(.tutor-d-flex) {
  display: block;
  gap: 0;
}