/* ==========================================================================
   hrosInclassNew — styles for views/partials/components/hrosInclassNew.hbs
   Everything is scoped under .hrosInclassNew so this file can be dropped on
   any page without touching the shared .curriculumOutclassDs styles.
   ========================================================================== */

.hrosInclassNew {
  padding: 60px 0;
  border-bottom: 1px solid var(--grey4);
  background: var(--white3);
}

.hrosInclassNew .hinWrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* ---------- header ---------- */

.hrosInclassNew .hinTop {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  position: sticky;
  top: 5.8rem;
  z-index: 10;
  background: var(--white3);
  padding-block: 8px;
}

.hrosInclassNew .hinBrochureBtn {
  flex-shrink: 0;
}

/* ---------- layout ---------- */

.hrosInclassNew .hinBody {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.hrosInclassNew .hinMedia {
  width: 100%;
  max-width: 630px;
  position: sticky;
  top: 14rem;
  height: fit-content;
}

.hrosInclassNew .hinMedia img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.hrosInclassNew .hinList {
  width: 100%;
  max-width: calc(100% - 660px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- accordion item ---------- */

.hrosInclassNew .hinItem {
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 6px;
}

.hrosInclassNew .hinHead {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--white);
  border-radius: 6px;
  padding: 12px;
  cursor: pointer;
}

.hrosInclassNew .hinHeadText {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hrosInclassNew .hinBadge {
  max-width: fit-content;
}

.hrosInclassNew .hinBadge span {
  display: inline-flex;
  gap: 10px;
  background: var(--black);
  color: var(--white);
  font-size: 12px;
  font-family: var(--go-regular);
  line-height: 120%;
  padding: 4px 12px;
  border-radius: 60px;
  font-weight: 400;
}

.hrosInclassNew .hinTitle {
  font-size: 18px;
  font-family: "go-semibold";
  line-height: 160%;
  color: var(--grey17);
}

.hrosInclassNew .hinDesc {
  font-size: 14px;
  font-family: var(--go-regular);
  line-height: 150%;
  color: var(--grey15);
}

.hrosInclassNew .hinDescStrong {
  font-family: var(--go-medium);
}

.hrosInclassNew .hinRedTerm {
  font-size: 14px;
  line-height: 120%;
  font-family: var(--go-medium);
  color: #df2935;
}

/* the description collapses while the panel is open, matching the old accordion */
.hrosInclassNew .hinItem.active .hinDesc {
  display: none;
}

.hrosInclassNew .hinToggle {
  max-width: 42px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.4s ease-in, filter 0.4s ease-in;
}

.hrosInclassNew .hinItem.active .hinToggle {
  transform: rotate(45deg);
  filter: invert(1);
}

/* ---------- panel ---------- */

.hrosInclassNew .hinPanel {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

.hrosInclassNew .hinTabs {
  display: flex;
  gap: 20px;
  padding: 0 12px;
  margin: 0;
  list-style: none;
  background: var(--white);
  border-bottom: 1px solid var(--grey4);
}

.hrosInclassNew .hinTabs li {
  font-size: 13px;
  font-family: var(--go-medium);
  line-height: 150%;
  color: var(--grey10);
  padding: 8px 0;
  position: relative;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.4s ease-in-out;
}

.hrosInclassNew .hinTabs li.active {
  color: var(--black);
}

.hrosInclassNew .hinTabs li.active::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  border-bottom: 1px solid var(--black);
  z-index: 2;
}

.hrosInclassNew .hinPanelBody {
  padding: 18px 12px;
  background: var(--white);
  cursor: auto;
}

.hrosInclassNew .hinContent {
  display: none;
}

.hrosInclassNew .hinContent.active {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- course list ---------- */

/* in class: a heading paragraph followed by its own pointer list, per topic */
.hrosInclassNew .hinGroups {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hrosInclassNew .hinGroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hrosInclassNew .hinGroupTitle {
  font-size: 13px;
  font-family: var(--go-semibold);
  line-height: 140%;
  color: var(--grey17);
}

.hrosInclassNew .hinPoints {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 20px;
  margin: 0;
  list-style: disc;
}

.hrosInclassNew .hinPoint {
  font-size: 13px;
  font-family: var(--go-semibold);
  line-height: 140%;
  color: var(--grey17);
}

.hrosInclassNew .hinPointSub {
  font-size: 13px;
  font-family: var(--go-regular);
  line-height: 150%;
  color: var(--grey15);
}

/* ---------- out class videos ---------- */

.hrosInclassNew .hinVideos {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 16px;
  /* margin-top: 16px; */
}

.hrosInclassNew .hinVideoCard {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hrosInclassNew .hinVideoThumb {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.hrosInclassNew .hinVideoThumb img {
  width: 100%;
  height: 224px;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hrosInclassNew .hinVideoPlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: #00000054;
  border-radius: 50%;
}

.hrosInclassNew .hinVideoPlay img {
  width: 48px;
  height: 48px;
  aspect-ratio: auto;
  object-fit: contain;
}

/* image-only card: no video behind it, so no play badge and no click affordance */
.hrosInclassNew .hinVideoCard.hinMediaOnly .hinVideoThumb {
  cursor: default;
}

.hrosInclassNew .hinVideoCard.hinMediaOnly .hinVideoPlay {
  display: none;
}

.hrosInclassNew .hinVideoMeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hrosInclassNew .hinVideoTitle {
  font-size: 14px;
  font-family: var(--go-semibold);
  line-height: 140%;
  color: var(--grey17);
}

.hrosInclassNew .hinVideoText {
  font-size: 13px;
  font-family: var(--go-regular);
  line-height: 150%;
  color: var(--grey15);
}

/* ---------- tablet ---------- */

@media (max-width: 1280px) {
  .hrosInclassNew .hinMedia {
    max-width: 480px;
  }

  .hrosInclassNew .hinList {
    max-width: calc(100% - 510px);
  }
}

@media (max-width: 1024px) {
  .hrosInclassNew .hinBody {
    flex-direction: column;
    gap: 32px;
  }

  .hrosInclassNew .hinMedia {
    position: relative;
    top: unset;
    max-width: 100%;
  }

  .hrosInclassNew .hinList {
    max-width: 100%;
  }
}

/* ---------- mobile ---------- */

@media (max-width: 767px) {
  .hrosInclassNew {
    padding: 40px 0;
  }

  .hrosInclassNew .hinWrapper {
    gap: 32px;
  }

  .hrosInclassNew .hinTop {
    gap: 16px;
    padding-block: 0;
    flex-direction: column;
    align-items: flex-start;
    position: unset;
  }

  .hrosInclassNew .hinTitle {
    font-size: 13px;
    line-height: 120%;
  }

  .hrosInclassNew .hinDesc,
  .hrosInclassNew .hinRedTerm {
    font-size: 12px;
  }

  .hrosInclassNew .hinPointSub {
    font-size: 12px;
  }

  .hrosInclassNew .hinToggle {
    max-width: 32px;
  }

  .hrosInclassNew .hinVideoTitle {
    font-size: 13px;
  }

  .hrosInclassNew .hinVideoText {
    font-size: 12px;
  }

  .hrosInclassNew .hinVideoPlay img {
    width: 40px;
    height: 40px;
  }
}