@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');

/* HUB COURSES ONLY */

.trh-courses-page,
.trh-courses-page *,
.trh-course-detail-page,
.trh-course-detail-page * {
  font-family: 'Comfortaa', sans-serif !important;
  box-sizing: border-box;
}

.trh-courses-page,
.trh-course-detail-page {
  color: #434B49;
  background: #FFFFFF;
  overflow-x: hidden;
}

/* SHARED */

.trh-courses-page .trh-container,
.trh-course-detail-page .trh-container {
  width: min(1120px, 92%);
  margin: 0 auto;
}

.trh-courses-page .trh-eyebrow,
.trh-course-detail-page .trh-eyebrow {
  color: #582581;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.trh-courses-page h1,
.trh-course-detail-page h1,
.trh-courses-page h2,
.trh-course-detail-page h2 {
  color: #00A19E;
}

.trh-courses-page .trh-hero-text,
.trh-course-detail-page .trh-hero-text {
  font-size: 19px;
  line-height: 1.7;
  max-width: 780px;
  margin-bottom: 30px;
}

.trh-courses-page .trh-buttons,
.trh-course-detail-page .trh-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.trh-courses-page .trh-btn,
.trh-course-detail-page .trh-btn,
.trh-courses-page .trh-course-link,
.trh-course-detail-page .trh-course-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.trh-courses-page .trh-btn-primary,
.trh-course-detail-page .trh-btn-primary,
.trh-courses-page .trh-course-link,
.trh-course-detail-page .trh-course-link {
  background: #582581;
  color: #FFFFFF;
}

.trh-courses-page .trh-btn-primary:hover,
.trh-course-detail-page .trh-btn-primary:hover,
.trh-courses-page .trh-course-link:hover,
.trh-course-detail-page .trh-course-link:hover {
  background: #9A4795;
  color: #FFFFFF;
  text-decoration: none;
  transform: translateY(-2px);
}

.trh-courses-page .trh-btn-secondary,
.trh-course-detail-page .trh-btn-secondary {
  background: #FFFFFF;
  color: #434B49;
  border: 1px solid #DDEAEA;
}

.trh-courses-page .trh-btn-secondary:hover,
.trh-course-detail-page .trh-btn-secondary:hover {
  border-color: #00A19E;
  color: #00A19E;
  text-decoration: none;
  transform: translateY(-2px);
}

/* ARCHIVE HERO */

.trh-courses-page .trh-hero {
  background: linear-gradient(135deg, #F2F8F8 0%, #FFFFFF 100%);
  padding: 90px 0 70px;
}

.trh-courses-page .trh-hero-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 56px;
  align-items: center;
}

.trh-courses-page .trh-hero h1 {
  color: #00A19E;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.12;
  margin: 0 0 22px;
  font-weight: 700;
}

.trh-course-hero-card {
  background: #FFFFFF;
  border-radius: 34px;
  padding: 30px;
  box-shadow: 0 24px 60px rgba(67, 75, 73, 0.14);
  border: 1px solid #E6EFEF;
  /* Forces every pathway link to stack in one column regardless of an
     <a>'s own default (inline) display - a plain "display:block" on
     .trh-course-pathway isn't reliably enough on its own here. */
  display: flex;
  flex-direction: column;
}

.trh-course-pathway {
  display: block;
  background: #F2F8F8;
  border-left: 8px solid #582581;
  border-radius: 18px;
  padding: 18px 22px;
  margin-bottom: 16px;
  font-weight: 700;
  color: #434B49;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.trh-course-pathway:hover {
  background: #E6EFEF;
  transform: translateX(4px);
  text-decoration: none;
}

.trh-course-pathway:last-child {
  margin-bottom: 0;
}

/* ARCHIVE SECTION */

.trh-courses-page .trh-section {
  padding: 78px 0;
}

.trh-courses-page .trh-section-header {
  max-width: 790px;
  margin-bottom: 36px;
}

.trh-courses-page .trh-section-header h2 {
  color: #00A19E;
  font-size: clamp(30px, 3.5vw, 44px);
  line-height: 1.12;
  margin: 0 0 22px;
}

.trh-courses-page .trh-section-header p {
  font-size: 17px;
  line-height: 1.75;
  margin-top: 0;
}

/* COURSE CARDS */

.trh-course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.trh-course-card {
  background: #FFFFFF;
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(67, 75, 73, 0.08);
  border: 1px solid #E6EFEF;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.trh-course-image-wrap {
  display: block;
  background: #F2F8F8;
  aspect-ratio: 2 / 1;
  max-height: 400px;
  overflow: hidden;
}

.trh-course-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trh-course-image-placeholder {
  width: 100%;
  aspect-ratio: 2 / 1;
  background: #582581;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  font-weight: 800;
}

/* Podcast episode cover art is a wide landscape graphic with text
   baked into the artwork itself (season/episode labels, branding) -
   cropping it to the 2:1 box above with object-fit:cover chopped
   that text off and stretched the image, which read as "blurry and
   doesn't fit". Forcing it into a square box instead just added
   empty letterboxing above/below (the card read as "too tall for
   the image"), since the art isn't square either. Let the wrapper's
   height follow the image's own natural ratio instead of guessing
   one, scoped to the podcasts page only so course/coach cards
   elsewhere keep their 2:1 cover crop. */
.trh-podcasts-page .trh-course-image-wrap {
  aspect-ratio: auto;
  max-height: none;
  background: none;
}

.trh-podcasts-page .trh-course-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.trh-course-content {
  padding: 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.trh-course-content h3 {
  color: #582581;
  font-size: 23px;
  margin: 12px 0;
}

.trh-course-content p {
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trh-course-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  background: #F2F8F8;
  color: #582581;
  border-left: 6px solid #582581;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 12px;
}

/* BRAND LOGOS */

.trh-course-brand-logo-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

.trh-course-brand-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
}

.trh-course-brand-logo-item img {
  max-width: 76px;
  max-height: 28px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.trh-course-detail-page .trh-course-brand-logo-item img {
  max-width: 86px;
  max-height: 32px;
}

.trh-course-detail-brands {
  max-width: 420px;
  margin-bottom: 0;
}

/* META */

/* Groups price + meta + View Course and pushes the whole thing down as
   one, flush with the card's bottom edge - a title or description that
   only wraps to 1-2 lines otherwise left this sitting higher than a
   neighbouring card's, out of line across the row (the grid stretches
   every card in a row to the tallest one's height already, see
   .trh-course-card itself). Wrapping div (rather than putting
   margin-top:auto directly on .trh-course-meta) because price is only
   sometimes present (a free course has none) - auto-margin on two
   separate sibling elements would each claim a share of the free
   space, opening an unwanted gap between price and meta instead of
   keeping them flush together as one block.*/
.trh-course-footer {
  margin-top: auto;
  padding-top: 12px;
}

.trh-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 18px;
}

.trh-course-meta span {
  background: #F2F8F8;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
}

.trh-course-price {
  color: #582581;
  font-weight: 800;
  margin-top: 0;
}

.trh-course-card .trh-course-link {
  margin-top: 0;
}

/* CTA */

.trh-courses-page .trh-cta {
  background: linear-gradient(135deg, #00A19E 0%, #582581 100%);
  color: #FFFFFF;
  text-align: center;
  padding: 78px 0;
}

.trh-courses-page .trh-cta h2 {
  color: #FFFFFF;
  font-size: clamp(30px, 3.5vw, 44px);
  line-height: 1.12;
  margin: 0 0 22px;
}

.trh-courses-page .trh-cta p {
  max-width: 720px;
  margin: 0 auto 30px;
  font-size: 18px;
  line-height: 1.7;
}

.trh-courses-page .trh-buttons-centred {
  justify-content: center;
}

.trh-courses-page .trh-cta .trh-btn-secondary {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.6);
}

.trh-courses-page .trh-cta .trh-btn-secondary:hover {
  background: #FFFFFF;
  color: #00A19E;
}

/* DETAIL PAGE HERO */

.trh-course-title-hero {
  background: linear-gradient(135deg, #F2F8F8 0%, #FFFFFF 100%);
  padding: 90px 0 64px;
}

.trh-course-title-hero h1 {
  color: #00A19E;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.1;
  margin: 0 0 22px;
  max-width: 980px;
}

.trh-course-title-hero .trh-hero-text {
  max-width: 850px;
}

/* DETAIL PAGE BODY */

.trh-course-sales-section {
  background: #FFFFFF;
  padding: 78px 0;
}

.trh-course-sales-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 380px;
  gap: 42px;
  align-items: start;
}

.trh-course-description,
.trh-course-summary-card {
  background: #FFFFFF;
  border-radius: 28px;
  padding: 30px;
  box-shadow: 0 18px 50px rgba(67, 75, 73, 0.08);
  border: 1px solid #E6EFEF;
}

.trh-course-description h2 {
  color: #00A19E;
  margin-top: 0;
}

.trh-course-summary-card h3 {
  color: #582581;
  margin-top: 0;
}

.trh-rich-text,
.trh-rich-text p,
.trh-rich-text li {
  font-size: 17px;
  line-height: 1.75;
}

.trh-rich-text a {
  color: #582581;
  text-decoration: underline;
}

.trh-rich-text a:hover {
  color: #9A4795;
}

.trh-course-sales-sidebar {
  position: relative;
}

.trh-course-sidebar-image-wrap {
  width: 100%;
  margin-bottom: 22px;
  border-radius: 28px;
  overflow: hidden;
  background: #F2F8F8;
  box-shadow: 0 18px 50px rgba(67, 75, 73, 0.08);
}

.trh-course-sidebar-image {
  width: 100%;
  aspect-ratio: 2 / 1;
  max-height: 400px;
  object-fit: cover;
  display: block;
}

.trh-course-sticky-card {
  position: sticky;
  top: 120px;
}

.trh-course-sales-price {
  color: #582581;
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 18px;
}

.trh-course-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.trh-course-price-row .trh-course-sales-price {
  margin: 0;
}

.trh-course-original-price {
  color: #9a9aa3;
  font-size: 20px;
  font-weight: 600;
  text-decoration: line-through;
}

.trh-course-back-link {
  display: inline-block;
  margin-top: 14px;
  background: #F2F8F8;
  color: #434B49;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 999px;
}

.trh-course-back-link:hover {
  background: #E6EFEF;
  text-decoration: none;
}

.trh-course-summary-card hr {
  border: 0;
  border-top: 1px solid #E6EFEF;
  margin: 24px 0;
}

/* MOBILE */

@media (max-width: 980px) {
  .trh-courses-page .trh-hero-grid,
  .trh-course-grid,
  .trh-course-sales-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .trh-course-sticky-card {
    position: relative;
    top: auto;
  }
}

@media (max-width: 620px) {
  .trh-courses-page .trh-hero,
  .trh-course-title-hero {
    padding: 60px 0 46px;
  }

  .trh-courses-page .trh-section,
  .trh-course-sales-section,
  .trh-courses-page .trh-cta {
    padding: 56px 0;
  }

  .trh-courses-page .trh-hero h1,
  .trh-course-title-hero h1 {
    font-size: 38px;
  }

  .trh-courses-page .trh-buttons,
  .trh-course-detail-page .trh-buttons {
    flex-direction: column;
    align-items: flex-start;
  }

  .trh-courses-page .trh-buttons-centred {
    align-items: center;
  }

  .trh-courses-page .trh-btn,
  .trh-course-detail-page .trh-btn,
  .trh-course-link {
    width: fit-content;
    max-width: 100%;
  }

  .trh-course-content,
  .trh-course-description,
  .trh-course-summary-card {
    padding: 26px 22px;
  }

  .trh-course-brand-logo-row {
    grid-template-columns: repeat(2, 1fr);
    max-width: 260px;
  }

  .trh-course-brand-logo-item img,
  .trh-course-detail-page .trh-course-brand-logo-item img {
    max-width: 78px;
    max-height: 30px;
  }
}

.trh-course-enrol-button {
  border: none;
  cursor: pointer;
  font-family: 'Comfortaa', sans-serif !important;
}

.trh-course-enrol-button:disabled {
  opacity: 0.7;
  cursor: wait;
}

/* COURSE SIGNUP PAGE */

.trh-course-signup-page {
  min-height: 100vh;
  background: #F2F8F8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px 18px;
  font-family: Comfortaa, sans-serif;
}

.trh-course-signup-card {
  width: min(820px, 100%);
  background: #FFFFFF;
  border-radius: 28px;
  padding: 38px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,0.10);
}

.trh-course-signup-card h1 {
  color: #582581;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.12;
  margin: 0 0 14px;
}

.trh-course-signup-card h2 {
  color: #00A19E;
  margin: 22px 0 12px;
}

.trh-course-signup-form {
  margin-top: 24px;
}

.trh-course-signup-form input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #ddd;
  margin-bottom: 14px;
  font-family: Comfortaa, sans-serif;
  font-size: 16px;
}

.trh-course-existing-login {
  margin-top: 22px;
}

.trh-course-existing-login p {
  margin-bottom: 4px;
  font-weight: 700;
}

#trhCourseSignupMessage {
  margin-top: 18px;
  font-weight: 700;
  color: #AC455C;
}

@media (max-width: 640px) {
  .trh-course-signup-card {
    padding: 28px 22px;
  }
}