/* Phase H19: scoped Course navigation, playlist, Tags, Course hero and Download preparation. */

.h19-course-sidebar {
  margin: 0;
}

.h19-course-sidebar .h19-course-sidebar-row {
  margin: 0;
  border-bottom: 1px solid rgba(11, 107, 79, 0.1);
}

.h19-course-sidebar .h19-course-sidebar-row:last-child {
  border-bottom: 0;
}

.h19-course-sidebar .h19-course-sidebar-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.68rem 0;
  color: #213d34;
  line-height: 1.35;
  text-decoration: none;
}

.h19-course-sidebar .h19-course-sidebar-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.h19-course-sidebar .h19-course-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.65rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(11, 107, 79, 0.14);
  border-radius: 999px;
  color: #07573f;
  background: #e8f5ef;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.h19-course-sidebar .h19-course-sidebar-link:hover .h19-course-sidebar-title,
.h19-course-sidebar .h19-course-sidebar-link:focus-visible .h19-course-sidebar-title {
  color: #087552;
}

.h19-course-sidebar .h19-course-sidebar-link:focus-visible,
.h19-tag-list a:focus-visible,
.h19-tags-toggle:focus-visible,
.h19-playlist a:focus-visible,
.h19-course-hero__primary:focus-visible,
.h19-course-hero__secondary:focus-visible,
.h19-download-form .h9-download-primary:focus-visible {
  outline: 3px solid #d6a545;
  outline-offset: 3px;
}

.h19-tags-widget .h19-tag-list.widget-card,
.h19-tags-widget .h19-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  list-style: none;
}

.h19-tags-widget .h19-tag-item {
  margin: 0 !important;
  padding: 0;
}

.h19-tags-widget .h19-tag-item[hidden] {
  display: none !important;
}

.h19-tags-widget .h19-tag-item a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.32rem 0.58rem;
  border: 1px solid #d8e5de;
  border-radius: 999px;
  color: #315247;
  background: #f6faf8;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.h19-tags-widget .h19-tag-item a:hover {
  border-color: #78ad96;
  color: #07573f;
  background: #eaf6f0;
}

.h19-tags-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  margin-top: 0.85rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid #a8c6b8;
  border-radius: 10px;
  color: #07573f;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.h19-tags-toggle:hover {
  background: #f0f8f4;
}

.h19-tags-noscript {
  margin-top: 0.85rem;
  color: #315247;
}

.h19-tags-noscript summary {
  min-height: 2.75rem;
  font-weight: 800;
  cursor: pointer;
}

.h19-tag-list--noscript {
  margin-top: 0.65rem !important;
}

.h19-playlist {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.h19-playlist .h19-playlist-item {
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 11px;
  background: #f7faf8;
  list-style: none;
}

.h19-playlist .h19-playlist-item a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.62rem;
  color: #26483c;
  line-height: 1.4;
  text-decoration: none;
}

.h19-playlist .h19-playlist-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  border: 1px solid #b8d2c5;
  border-radius: 9px;
  color: #07573f;
  background: #fff;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.h19-playlist .h19-playlist-title {
  min-width: 0;
  padding-top: 0.28rem;
  overflow-wrap: anywhere;
}

.h19-playlist .h19-playlist-item:hover {
  border-color: #b8d2c5;
  background: #f0f7f3;
}

.h19-playlist .h19-playlist-item.is-current {
  border-color: rgba(214, 165, 69, 0.58);
  background: linear-gradient(135deg, #0a6b4d, #07573f);
  box-shadow: 0 8px 22px rgba(7, 87, 63, 0.16);
}

.h19-playlist .h19-playlist-item.is-current a,
.h19-playlist .h19-playlist-item.is-current .h19-playlist-number {
  color: #fff;
}

.h19-playlist .h19-playlist-item.is-current .h19-playlist-number {
  border-color: rgba(255, 255, 255, 0.38);
  background: #d6a545;
}

.h5b-category-shell .h19-course-category-hero {
  padding: clamp(1.5rem, 3.5vw, 2.75rem) 0 clamp(1.8rem, 4vw, 3rem);
}

.h5b-category-shell .h19-course-category-hero .h5b-breadcrumbs ol {
  margin-bottom: 1rem;
}

.h19-course-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.34fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid rgba(11, 107, 79, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 50px rgba(23, 53, 40, 0.09);
  backdrop-filter: blur(4px);
}

.h5b-category-shell .h19-course-hero .h5b-category-heading {
  max-width: 53rem;
}

.h5b-category-shell .h19-course-hero .h5b-category-heading h1 {
  max-width: 18ch;
  margin: 0.45rem 0 0.8rem;
  font-size: clamp(2rem, 4.2vw, 3.65rem);
  line-height: 1.04;
  text-wrap: balance;
}

.h5b-category-shell .h19-course-hero .h5b-category-description {
  max-width: 74ch;
  font-size: clamp(0.98rem, 1.35vw, 1.08rem);
  line-height: 1.65;
}

.h19-course-hero__meta,
.h19-course-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
}

.h19-course-hero__count {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.38rem 0.7rem;
  border: 1px solid rgba(11, 107, 79, 0.17);
  border-radius: 999px;
  color: #07573f;
  background: #e8f5ef;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.h19-course-hero__primary,
.h19-course-hero__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.68rem 1rem;
  border-radius: 11px;
  font-weight: 850;
  text-decoration: none;
}

.h19-course-hero__primary {
  color: #fff;
  background: #087552;
  box-shadow: 0 10px 22px rgba(8, 117, 82, 0.2);
}

.h19-course-hero__primary:hover {
  color: #fff;
  background: #07573f;
}

.h19-course-hero__secondary {
  border: 1px solid #a8c6b8;
  color: #07573f;
  background: #fff;
}

.h19-course-hero__sequence {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 190px;
  padding: 1.25rem;
  border: 1px solid rgba(214, 165, 69, 0.38);
  border-radius: 20px;
  color: #f6fbf8;
  background:
    radial-gradient(circle at 70% 20%, rgba(214, 165, 69, 0.25), transparent 6rem),
    linear-gradient(145deg, #0a6b4d, #064533);
  text-align: center;
}

.h19-course-hero__sequence-number {
  color: #f2c45f;
  font-family: var(--h1-font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 0.95;
}

.h19-course-hero__sequence span:last-child {
  max-width: 14ch;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.h19-course-hero__visual {
  position: relative;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 190px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(11, 107, 79, 0.18);
  border-radius: 20px;
  background: linear-gradient(145deg, #eaf6f0, #f9fcfa);
  box-shadow: 0 14px 34px rgba(23, 53, 40, 0.12);
}

.h19-course-hero__visual img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 190px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.h19-course-description {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: clamp(1rem, 2.2vw, 1.6rem) 0 0;
  padding: clamp(1.2rem, 2.6vw, 2rem);
  border: 1px solid rgba(11, 107, 79, 0.16);
  border-radius: 20px;
  color: #20372f;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 38px rgba(23, 53, 40, 0.07);
}

.h19-course-description h2 {
  margin: 0.35rem 0 0.85rem;
  color: #132c24;
  font-family: var(--h1-font-display);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.15;
}

.h19-course-description__content {
  font-size: clamp(0.96rem, 1.25vw, 1.05rem);
  line-height: 1.72;
}

.h19-course-description__content > :first-child {
  margin-top: 0;
}

.h19-course-description__content > :last-child {
  margin-bottom: 0;
}

.h19-course-description__content ul,
.h19-course-description__content ol {
  margin: 0.85rem 0;
  padding-left: 1.4rem;
}

.h19-course-description__content li + li {
  margin-top: 0.35rem;
}

.h19-course-description__content blockquote {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border-left: 4px solid #d6a545;
  background: #fff9eb;
}

.h19-course-description__content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.h19-course-description__content th,
.h19-course-description__content td {
  padding: 0.55rem 0.7rem;
  border: 1px solid #d7e6df;
  text-align: left;
}

.h19-download-preparation {
  flex: 1 1 100%;
  max-width: 34rem;
  padding: 1rem;
  border: 1px solid #d7e6df;
  border-radius: 15px;
  background: #f7fbf9;
}

.h19-download-preparation__label,
.h19-download-countdown {
  margin: 0;
}

.h19-download-preparation__label {
  color: #07573f;
  font-weight: 850;
}

.h19-download-countdown {
  margin-top: 0.3rem;
  color: #526b61;
}

.h19-download-progress {
  display: block;
  width: 100%;
  height: 0.65rem;
  margin: 0.85rem 0 1rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  accent-color: #087552;
}

.h19-download-progress::-webkit-progress-bar {
  border-radius: 999px;
  background: #dfece6;
}

.h19-download-progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #087552, #d6a545);
}

.h19-download-form {
  margin: 0;
}

.h19-download-form .h9-download-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 0;
  cursor: pointer;
}

.h19-download-form .h9-download-primary i {
  flex: 0 0 auto;
  font-size: 1.1em;
  line-height: 1;
}

.h19-download-form .h9-download-primary[disabled] {
  color: #6a7c74;
  background: #dfe7e3;
  box-shadow: none;
  cursor: not-allowed;
}

.h19-download-preparation.is-ready {
  border-color: rgba(8, 117, 82, 0.35);
  background: #f0f8f4;
}

.h19-download-noscript {
  margin: 0.85rem 0 0;
  padding: 0.75rem;
  border-left: 3px solid #d6a545;
  color: #59481f;
  background: #fff9eb;
  font-size: 0.86rem;
}

@media (max-width: 767.98px) {
  .h19-course-hero {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 18px;
  }

  .h19-course-hero__sequence {
    display: none;
  }

  .h19-course-hero__visual {
    min-height: 0;
  }

  .h19-course-hero__visual img {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .h19-course-hero__actions a {
    flex: 1 1 11rem;
  }
}

@media (max-width: 420px) {
  .h19-course-sidebar .h19-course-sidebar-link {
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
  }

  .h19-course-sidebar .h19-course-count {
    justify-self: start;
  }

  .h19-playlist .h19-playlist-item a {
    grid-template-columns: 1.9rem minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.55rem;
  }

  .h19-playlist .h19-playlist-number {
    width: 1.9rem;
    min-width: 1.9rem;
    height: 1.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .h19-course-sidebar a,
  .h19-tag-item a,
  .h19-tags-toggle,
  .h19-playlist a,
  .h19-download-progress {
    scroll-behavior: auto;
    transition: none !important;
  }
}

/* Catalogue category panels remain compact in the tablet sidebar grid. */
.widget.h19-catalogue-categories { align-self: start; }