/* PMA Science University — Courses · course cards, catalogue grid and the
   root-commerce call to action.

   THE ACTUAL CAUSE OF THE COLLAPSED CARDS, measured with the browser's own
   matched-rule list rather than guessed at:

     .learn-press-courses .course { width: 25%; }

   LearnPress lays the catalogue out as a CSS grid, and a percentage width on a
   grid item resolves against its **track**, not the row. With three 384px
   tracks, 25% of 384 is 96px — which is exactly the width every card was
   measured at (96px card, 62x39px thumbnail, a title column 17px wide, one
   letter per line). It is not a breakpoint problem: 1920, 1600 and 1440 were
   all identical, and only the single-column phone layout escaped it, because
   there 25% of the one full-width track is still wide enough to look plausible.

   So the width declaration is answered directly, and the tracks are restated as
   a real responsive grid instead of three fixed 384px columns. Measured after
   the change at 1920 / 1600 / 1440 / 1280 / 1024 / 990 / 768 / 430 / 390 / 375:
   no card narrower than 300px, thumbnails on a 16:10 crop, titles on at most
   two lines, zero document overflow. */

/* 1 · The grid ---------------------------------------------------------- */
body.pma-lms ul.learn-press-courses,
body.pma-lms .learn-press-courses.grid,
body.pma-lms ul.learn-press-courses.grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The list layout is one card per row by design, so it gets one track. */
body.pma-lms ul.learn-press-courses.list,
body.pma-lms .learn-press-courses.list {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* 2 · The card itself --------------------------------------------------- */
body.pma-lms ul.learn-press-courses > li.course,
body.pma-lms .learn-press-courses .course {
  width: auto !important;
  max-width: none;
  min-width: 0;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
}

body.pma-lms ul.learn-press-courses > li.course > .course-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

/* 3 · Thumbnail — one consistent crop everywhere ------------------------ */
body.pma-lms .learn-press-courses .course-item .course-thumbnail {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--pma-stone-100);
  position: relative;
}
body.pma-lms .learn-press-courses .course-item .course-thumbnail a,
body.pma-lms .learn-press-courses .course-item .course-thumbnail > a img,
body.pma-lms .learn-press-courses .course-item .course-thumbnail img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transition: transform 480ms var(--ease);
}
body.pma-lms .learn-press-courses .course-item:hover .course-thumbnail img { transform: scale(1.03); }

/* 4 · Card body -------------------------------------------------------- */
body.pma-lms .learn-press-courses .course-item .course-content,
body.pma-lms .learn-press-courses .course-item > .course-detail-info {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-5);
}

body.pma-lms .learn-press-courses .course-title,
body.pma-lms .learn-press-courses .course-item h3,
body.pma-lms .learn-press-courses .course-item h4 {
  min-width: 0;
  width: auto;
  overflow-wrap: break-word;
  hyphens: none;
  font-size: 1.125rem;
  line-height: 1.3;
  margin: 0;
}

/* Course meta and price never wrap a word per line. */
body.pma-lms .learn-press-courses .course-item .course-meta,
body.pma-lms .learn-press-courses .course-item .course-instructor,
body.pma-lms .learn-press-courses .course-item .course-categories,
body.pma-lms .learn-press-courses .course-item .course-price {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
}
body.pma-lms .learn-press-courses .course-item .course-price { margin-top: auto; }

/* 5 · The root-commerce call to action --------------------------------- */
/* Root WooCommerce is the only till, so the catalogue and course pages send
   the reader there. The button is stated once, here, and used by both. */
body.pma-lms .pma-enrol,
body.pma-lms a.pma-enrol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 3rem;
  padding: var(--s-3) var(--s-5);
  background-color: var(--pma-navy-900);
  color: var(--pma-ivory) !important;
  border: 1px solid var(--pma-navy-900);
  border-radius: 0;
  font-family: var(--pma-sans);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
body.pma-lms .pma-enrol:hover,
body.pma-lms .pma-enrol:focus-visible {
  background-color: var(--pma-gold-500);
  border-color: var(--pma-gold-500);
  color: var(--pma-navy-900) !important;
}
body.pma-lms .pma-enrol__note {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--pma-sans);
  font-size: var(--fs-xs);
  color: var(--pma-ink-muted);
  text-align: center;
}

/* 6 · The broken glyphs -------------------------------------------------
   Measured, not guessed: `.lp-icon-angle-right` carries `content: "\f105"`
   from a private-use area, the `lp-icon` webfont reports `loaded`, and the
   element's computed `font-family` was **Archivo** — this theme's own body
   face, applied by a global rule. A PUA codepoint rendered in a text face is
   exactly the mojibake the owner reported ("fl" in the search button, and the
   same in the sort control, the breadcrumb chevrons and the lesson counters).
   Every LearnPress icon is therefore pinned back to its own font. */
body.pma-lms [class^="lp-icon"],
body.pma-lms [class*=" lp-icon"],
body.pma-lms [class^="lp-icon"]::before,
body.pma-lms [class*=" lp-icon"]::before {
  font-family: "lp-icon" !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/* Enfold's own icon face, for the same reason. */
body.pma-lms [class^="av-icon"]::before,
body.pma-lms .av_font_icon .av-icon-char::before,
body.pma-lms .avia-font-entypo-fontello,
body.pma-lms .avia-font-entypo-fontello::before {
  font-family: "entypo-fontello" !important;
  font-weight: normal !important;
}

/* 7 · Price — institutional, never LearnPress green -------------------- */
body.pma-lms .learn-press-courses .course-item .price,
body.pma-lms .learn-press-courses .course-item .course-price .price,
body.pma-lms .course-price .price,
body.pma-lms .course-item-price .price {
  color: var(--pma-navy-900) !important;
  font-family: var(--pma-sans);
  font-size: 1.125rem;
  font-weight: 600;
}
body.pma-lms .course-item .origin-price,
body.pma-lms .course-price del {
  color: var(--pma-ink-muted) !important;
  font-size: 0.9375rem;
}

/* 8 · Tablet and phone ------------------------------------------------- */
@media (max-width: 767px) {
  body.pma-lms ul.learn-press-courses,
  body.pma-lms ul.learn-press-courses.grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--s-5);
  }
}

/* 9 · Institutional bands for the campus front page ---------------------
   Written at `#top #wrap_all` weight on purpose. The lesson from the /pma
   theme, learned the expensive way: Enfold generates its own colour set at
   that specificity, and a card's internals keep their light-background
   colours by *direct* rule — a direct rule always beats an inherited one — so
   headings and body copy rendered dark on dark until they were stated here. */
#top #wrap_all .pma-hero,
#top #wrap_all .pma-band-navy {
  background-color: var(--pma-navy-900) !important;
}
#top #wrap_all .pma-band-ivory { background-color: var(--pma-ivory) !important; }
#top #wrap_all .pma-band-stone { background-color: var(--pma-stone-100) !important; }

#top #wrap_all .pma-hero .av_textblock_section,
#top #wrap_all .pma-band-navy .av_textblock_section,
#top #wrap_all .pma-hero p,
#top #wrap_all .pma-band-navy p,
#top #wrap_all .pma-hero li,
#top #wrap_all .pma-band-navy li {
  color: rgba(251, 248, 242, 0.86) !important;
}
#top #wrap_all .pma-hero h1,
#top #wrap_all .pma-hero h2,
#top #wrap_all .pma-hero h3,
#top #wrap_all .pma-band-navy h1,
#top #wrap_all .pma-band-navy h2,
#top #wrap_all .pma-band-navy h3,
#top #wrap_all .pma-band-navy h4 {
  color: var(--pma-ivory) !important;
  font-family: var(--pma-serif);
  letter-spacing: -0.01em;
}
#top #wrap_all .pma-hero h1,
#top #wrap_all .pma-band-navy h2,
#top #wrap_all .pma-band-navy h3,
#top #wrap_all .pma-band-ivory h2,
#top #wrap_all .pma-band-stone h2 { text-transform: none; }

#top #wrap_all .pma-band-ivory h2,
#top #wrap_all .pma-band-ivory h3,
#top #wrap_all .pma-band-stone h2,
#top #wrap_all .pma-band-stone h3 {
  color: var(--pma-navy-900) !important;
  font-family: var(--pma-serif);
}

/* The eyebrow. Gold-300 on navy, gold-500 on light: the antique gold fails
   contrast on the dark ground and the pale gold fails on the light one. */
#top #wrap_all .pma-eyebrow-tb,
#top #wrap_all .pma-eyebrow-tb p {
  font-family: var(--pma-sans) !important;
  font-size: var(--fs-xs) !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
#top #wrap_all .pma-hero .pma-eyebrow-tb p,
#top #wrap_all .pma-band-navy .pma-eyebrow-tb p { color: var(--pma-gold-300) !important; }
#top #wrap_all .pma-band-ivory .pma-eyebrow-tb p,
#top #wrap_all .pma-band-stone .pma-eyebrow-tb p { color: #8a6a1f !important; }

/* Hero proportion. A 1920px monitor should read as composed, not stretched. */
/* Band gutters. A full-bleed break-out was measured and rejected: Enfold only
   stretches an `av_section` when its layout-builder flag is set, that flag is
   protected post meta this installation will not let anything write, and the
   negative-margin break-out was overridden by Enfold's own section rule — it
   moved the band 25px and pushed the copy 340px inward instead. The bands are
   therefore composed as inset institutional blocks with their own generous
   gutters, which is predictable at every width. */
#top #wrap_all .pma-hero,
#top #wrap_all .pma-band-navy,
#top #wrap_all .pma-band-ivory,
#top #wrap_all .pma-band-stone {
  padding-left: clamp(1.5rem, 4vw, 4rem);
  padding-right: clamp(1.5rem, 4vw, 4rem);
}

#top #wrap_all .pma-hero h1 {
  text-transform: none;
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  line-height: 1.06;
  max-width: 22ch;
  margin: 0 0 var(--s-5);
}
#top #wrap_all .pma-hero .pma-lede p {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 60ch;
}
#top #wrap_all .pma-hero,
#top #wrap_all .pma-band-navy,
#top #wrap_all .pma-band-ivory,
#top #wrap_all .pma-band-stone { padding-top: clamp(3.5rem, 7vw, 7rem); padding-bottom: clamp(3.5rem, 7vw, 7rem); }

/* A quiet gold hairline under each pillar, instead of a card shadow. */
#top #wrap_all .pma-pillar {
  border-top: 1px solid rgba(240, 206, 115, 0.34);
  padding-top: var(--s-4);
}
#top #wrap_all .pma-band-navy .pma-pillar h3 { font-size: 1.25rem; margin: 0 0 var(--s-2); }

#top #wrap_all .pma-standing {
  font-family: var(--pma-sans);
  font-size: var(--fs-sm);
  color: var(--pma-ink-muted);
  max-width: 78ch;
}
#top #wrap_all .pma-band-navy .pma-standing { color: rgba(251, 248, 242, 0.72); }

/* 10 · Buttons inside the institutional bands --------------------------
   `av_button` renders `a.avia-button` with Enfold's theme colour, which on a
   navy band arrived as unstyled uppercase text with no affordance at all.
   Stated here as the institutional pair: a solid gold primary and a hairline
   ivory secondary, both with a real target size. */
#top #wrap_all .pma-hero .avia-button-wrap,
#top #wrap_all .pma-band-navy .avia-button-wrap,
#top #wrap_all .pma-band-ivory .avia-button-wrap,
#top #wrap_all .pma-band-stone .avia-button-wrap {
  display: inline-block;
  margin: var(--s-2) var(--s-3) 0 0;
}

#top #wrap_all .pma-hero a.avia-button,
#top #wrap_all .pma-band-navy a.avia-button,
#top #wrap_all .pma-band-ivory a.avia-button,
#top #wrap_all .pma-band-stone a.avia-button {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: var(--s-3) var(--s-6);
  border-radius: 0;
  border: 1px solid var(--pma-gold-500);
  background: var(--pma-gold-500) !important;
  color: var(--pma-navy-900) !important;
  font-family: var(--pma-sans);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
#top #wrap_all .pma-hero a.avia-button:hover,
#top #wrap_all .pma-band-navy a.avia-button:hover,
#top #wrap_all .pma-band-ivory a.avia-button:hover,
#top #wrap_all .pma-band-stone a.avia-button:hover {
  background: var(--pma-gold-300) !important;
  border-color: var(--pma-gold-300);
}

/* The second button in a band is the quieter one. */
#top #wrap_all .pma-hero .avia-button-wrap ~ .avia-button-wrap a.avia-button,
#top #wrap_all .pma-band-navy .avia-button-wrap ~ .avia-button-wrap a.avia-button {
  background: transparent !important;
  border-color: rgba(251, 248, 242, 0.6);
  color: var(--pma-ivory) !important;
}
#top #wrap_all .pma-hero .avia-button-wrap ~ .avia-button-wrap a.avia-button:hover,
#top #wrap_all .pma-band-navy .avia-button-wrap ~ .avia-button-wrap a.avia-button:hover {
  background: var(--pma-ivory) !important;
  border-color: var(--pma-ivory);
  color: var(--pma-navy-900) !important;
}

#top #wrap_all .pma-hero .avia_button_icon,
#top #wrap_all .pma-band-navy .avia_button_icon { display: none; }

/* Enfold inserts a <br> after each textblock; inside a composed band that
   doubles the rhythm and left the hero with a large dead area under the
   buttons. */
#top #wrap_all .pma-hero br,
#top #wrap_all .pma-band-navy br,
#top #wrap_all .pma-band-ivory br,
#top #wrap_all .pma-band-stone br { display: none; }
#top #wrap_all .pma-hero .av_textblock_section,
#top #wrap_all .pma-band-navy .av_textblock_section,
#top #wrap_all .pma-band-ivory .av_textblock_section,
#top #wrap_all .pma-band-stone .av_textblock_section { margin-bottom: 0; }

/* 11 · The knowledge area ----------------------------------------------
   Enfold's blog index arrived with a placeholder sidebar and no heading of any
   kind. The sidebar is retired and the content column takes the full width, the
   same correction already made on /psychology. */
body.pma-lms.blog .sidebar,
body.pma-lms.single-post .sidebar,
body.pma-lms.archive .sidebar { display: none !important; }
body.pma-lms.blog .content,
body.pma-lms.single-post .content,
body.pma-lms.archive .content {
  width: 100% !important;
  max-width: 78ch;
  margin: 0 auto;
  border-right: 0 !important;
  padding-right: 0 !important;
}

#top .pma-knowledge-header {
  margin: 0 0 var(--s-7);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--pma-stone-300);
}
#top .pma-knowledge-header .pma-eyebrow {
  font-family: var(--pma-sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a6a1f;
  margin: 0 0 var(--s-2);
}
#top .pma-knowledge-header h1 {
  font-family: var(--pma-serif);
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.1;
  color: var(--pma-navy-900);
  margin: 0 0 var(--s-3);
  text-transform: none;
}
#top .pma-knowledge-header p:last-child {
  font-family: var(--pma-sans);
  font-size: 1.0625rem;
  color: var(--pma-ink-muted);
  max-width: 62ch;
  margin: 0;
}

/* Enfold's hover post-navigation previews sit off-canvas by design and link
   between unrelated courses. Retired inside the learning context. */
body.pma-lms.pma-lms-course .avia-post-nav,
body.pma-lms.pma-lms-lesson .avia-post-nav,
body.pma-lms.pma-lms-quiz .avia-post-nav { display: none !important; }