/* Dedicated unit page. Loaded only on unit.php — does not restyle the homepage or course hub. */
.hp-shell { max-width: 1180px; }
.unit-page {
  padding: .85rem 1.1rem 2.2rem;
  color: #243044;
}
.up-crumb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.up-crumbs { font-size: .92rem; color: #4a5b6b; }
.up-crumbs a { color: #1a5c36; text-decoration: none; font-weight: 700; }
.up-crumbs a:hover { text-decoration: underline; }
.up-crumbs span { margin: 0 .35rem; color: #7a8794; }
.up-back {
  display: inline-block;
  border: 1px solid #c5d0da;
  border-radius: 8px;
  padding: .38rem .8rem;
  text-decoration: none;
  color: #16324f;
  font-weight: 700;
  background: #fff;
}
.up-back:hover, .up-back:focus { outline: 2px solid #1a5c36; outline-offset: 2px; }

.up-hero {
  display: grid;
  grid-template-columns: 260px minmax(0, 1.4fr) minmax(250px, 280px);
  gap: .85rem 1rem;
  align-items: stretch;
  margin-bottom: 1rem;
}
.up-hero-media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  min-height: 168px;
  align-self: stretch;
}
.up-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 168px;
  object-fit: cover;
  display: block;
}
.up-badge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 74px;
  height: 74px;
  border-radius: 12px;
  background: #111;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.up-badge span { font-size: .62rem; letter-spacing: .12em; font-weight: 800; }
.up-badge strong { font-size: 1.85rem; line-height: 1; }
.up-hero-copy h1 {
  margin: 0 0 .4rem;
  color: #1a5c36;
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
}
.up-hero-copy p {
  margin: 0 0 .7rem;
  color: #3a4a58;
  line-height: 1.45;
  max-width: 40rem;
}
.up-stats {
  list-style: none;
  margin: 0;
  padding: .55rem .7rem;
  border: 1px solid #d5dde6;
  border-radius: 10px;
  background: #fff;
}
.up-stats li {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .22rem 0;
  font-size: .92rem;
  font-weight: 700;
  color: #243044;
}
.up-stats svg { color: #1a5c36; flex-shrink: 0; }
.up-quick {
  display: grid;
  grid-template-columns: 1fr;
  gap: .45rem;
  align-content: stretch;
}
.up-idcard {
  position: relative;
  display: block;
  height: 78px;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid #c9b27a;
  box-shadow: 0 3px 10px rgba(20, 30, 40, .14);
}
.up-idcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.up-idcard--chi img { object-position: center 72%; }
.up-idcard--roots img { object-position: 48% 38%; }
.up-idcard-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: .4rem .7rem;
}
.up-idcard--chi .up-idcard-copy {
  background: linear-gradient(90deg, rgba(16, 42, 28, .88) 0%, rgba(16, 42, 28, .22) 78%);
  color: #f4f7f0;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.up-idcard--chi .up-idcard-copy strong {
  letter-spacing: .1em;
  font-size: 1.28rem;
}
.up-idcard--roots .up-idcard-copy {
  background: linear-gradient(90deg, rgba(72, 48, 22, .72) 0%, rgba(72, 48, 22, .08) 68%);
  color: #f7f0df;
  text-shadow: 0 1px 2px rgba(50, 30, 10, .45);
}
.up-idcard-copy strong {
  font-size: 1.12rem;
  line-height: 1.1;
  letter-spacing: .02em;
}
.up-idcard-copy span {
  display: block;
  margin-top: .12rem;
  font-size: .72rem;
  font-weight: 700;
  opacity: .95;
}

.up-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: .7rem;
  align-items: start;
  min-width: 0;
  max-width: 100%;
}
.up-main, .up-side, .up-bar, .up-res-row {
  min-width: 0;
  max-width: 100%;
}
.up-lectures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin-bottom: .9rem;
}
.up-lectures--1 {
  grid-template-columns: minmax(0, 1fr);
  max-width: calc((100% - 1.4rem) / 3);
  margin-left: auto;
  margin-right: auto;
}
.up-lectures--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: calc((2 * ((100% - 1.4rem) / 3)) + .7rem);
  margin-left: auto;
  margin-right: auto;
}
.up-lec {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.up-lec:focus-visible { outline: 3px solid #1a5c36; outline-offset: 3px; }
.up-lec-art {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  min-height: 168px;
  background: #10243c;
}
.up-lec-art img {
  width: 100%;
  height: 168px;
  object-fit: cover;
  display: block;
  filter: brightness(.82);
}
.up-lec-num {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #111;
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  padding: .18rem .45rem;
  border-radius: 6px;
}
.up-lec-title {
  position: absolute;
  left: 12px;
  right: 70px;
  top: 44px;
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
}
.up-lec-play {
  position: absolute;
  right: 10px;
  bottom: 10px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
.up-lec-time {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  background: rgba(12, 12, 12, .78);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .03em;
  padding: .12rem .38rem;
  border-radius: 4px;
  line-height: 1.15;
  pointer-events: none;
}
.up-lec:hover .up-lec-art img,
.up-lec:focus .up-lec-art img { filter: brightness(.9); }
.up-lec-meta {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .4rem .1rem 0;
  font-size: .8rem;
  font-weight: 700;
  color: #3a4a58;
}

.up-bar { border-radius: 10px; overflow: visible; margin-bottom: .85rem; }
.up-bar h2 {
  margin: 0;
  padding: .45rem .75rem;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .4rem;
  border-radius: 10px 10px 0 0;
}
.up-bar--student { background: #eef6e8; border: 1px solid #c5ddb8; }
.up-bar--student h2 { background: #1a5c36; color: #fff; }
.up-bar--teacher { background: #f3eef8; border: 1px solid #d3c4e4; }
.up-bar--teacher h2 { background: #6b3d91; color: #fff; padding: .38rem .7rem; }
.up-res-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .45rem;
  padding: .55rem .5rem .65rem;
}
.up-res, .up-res-menu {
  position: relative;
  flex: 1 1 11rem;
  min-width: min(100%, 10.5rem);
  max-width: 100%;
  box-sizing: border-box;
}
.up-res {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .32rem .4rem;
  background: #fff;
  border: 1px solid #d4dce4;
  border-radius: 10px;
  padding: .45rem .55rem;
  text-decoration: none;
  color: #243044;
  font-weight: 800;
  font-size: .78rem;
  cursor: pointer;
  list-style: none;
  min-height: 52px;
  line-height: 1.2;
  overflow-wrap: break-word;
}
.up-res::-webkit-details-marker { display: none; }
.up-res-icon {
  display: flex;
  align-items: center;
  gap: .12rem;
  color: #1a5c36;
  flex-shrink: 0;
}
.up-res-icon svg { width: 22px; height: 22px; }
.up-res-label {
  display: block;
  flex: 1 1 0;
  line-height: 1.2;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}
.up-res-label span {
  display: inline;
  white-space: normal;
}
.up-res:hover, .up-res:focus { border-color: #1a5c36; outline: none; }
.up-res--locked {
  color: #5b3d78;
  background: #f7f2fb;
  border-color: #d9c8ea;
  cursor: default;
}
.up-res--locked:hover, .up-res--locked:focus { border-color: #d9c8ea; outline: none; }
.up-res--soon { cursor: default; }
.up-bar--student .up-res--soon {
  flex: 1 1 15rem;
  min-width: min(100%, 15rem);
}
.up-res--soon .up-res-label {
  flex: 0 1 auto;
  max-width: 100%;
}
.up-res--soon:hover, .up-res--soon:focus { border-color: #d4dce4; }
.up-res--soon > .up-res-soon-label {
  display: inline-block;
  flex: 0 0 auto;
  margin: 0 0 0 .45rem;
  color: #1a5c36;
  font-size: .62rem;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}
.up-res--locked .up-res-icon { color: #6b3d91; }
.up-res-menu .up-res-list {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 8;
  min-width: 14rem;
  background: #fff;
  border: 1px solid #cfd8e2;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  padding: .35rem;
}
.up-res-menu .up-res-list a {
  display: block;
  padding: .4rem .5rem;
  color: #16324f;
  text-decoration: none;
  font-size: .84rem;
  font-weight: 700;
  border-radius: 6px;
}
.up-res-menu .up-res-list a:hover { background: #e8f3df; }
.up-res-menu .up-res-list .up-res-soon {
  display: block;
  padding: .4rem .5rem;
  color: #4a5b6b;
  font-size: .84rem;
  font-weight: 700;
  border-radius: 6px;
}
.up-res-soon-label {
  display: block;
  margin-top: .1rem;
  color: #1a5c36;
  font-size: .75rem;
  font-weight: 800;
}
.up-teacher-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 250px);
  gap: .65rem;
  padding: .55rem .55rem .65rem;
  align-items: start;
  min-width: 0;
  max-width: 100%;
}
.up-teacher-wrap .up-res-row { padding: 0; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.up-bar--teacher .up-res {
  flex: 1 1 12rem;
  min-width: min(100%, 12rem);
  min-height: 52px;
}
.up-teacher-note {
  background: #fff;
  border: 1px solid #d9c8ea;
  border-radius: 10px;
  padding: .55rem .7rem .6rem;
  min-width: 0;
  max-width: 100%;
}
.up-teacher-note h3 { margin: 0 0 .2rem; color: #6b3d91; font-size: 1rem; }
.up-teacher-note p {
  margin: 0 0 .4rem;
  font-size: .82rem;
  line-height: 1.35;
  color: #4a4a4a;
  white-space: normal;
  overflow-wrap: break-word;
}
.up-teacher-cta {
  display: inline-block;
  background: #6b3d91;
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  font-size: .78rem;
  padding: .32rem .6rem;
  border-radius: 8px;
}

.up-side-card {
  background: #fff;
  border: 1px solid #d5dde6;
  border-radius: 10px;
  padding: .5rem .65rem .55rem;
  margin-bottom: .45rem;
}
.up-side-card h2 {
  margin: 0 0 .32rem;
  font-size: .88rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #1a5c36;
}
.up-side-card ul { list-style: none; margin: 0; padding: 0; }
.up-side-card li {
  display: flex;
  gap: .35rem;
  align-items: flex-start;
  margin: 0 0 .22rem;
  font-size: .84rem;
  line-height: 1.25;
}
.up-side-card li svg { color: #1a5c36; flex-shrink: 0; margin-top: .08rem; }
.up-side-card:last-child { margin-bottom: 0; }
.up-ngss li { flex-direction: column; gap: .05rem; margin-bottom: .18rem; }
.up-ngss strong { color: #c45c12; }
.up-ngss span { color: #4a5b6b; font-size: .76rem; }
.up-side-card a { color: #c45c12; font-weight: 700; }
.up-side-card p { margin: .2rem 0 0; }
.up-zip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #1d4e89;
  font-weight: 800;
  text-decoration: none;
}
.up-zip:hover { text-decoration: underline; }

.up-watch-nav { margin: 0 0 .6rem; }
.up-watch-title { color: #1a5c36; margin: 0 0 .25rem; }
.up-watch-meta { margin: 0 0 .7rem; color: #4a5b6b; }
.up-watch-video { width: 100%; max-width: 960px; background: #000; border-radius: 10px; }
.up-watch-embed {
  width: 100%;
  max-width: 960px;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.up-watch-embed::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.up-watch-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Unit-page footer only — homepage/hub keep the locked green footer */
.hp-footer { display: none; }
.up-footer {
  background: #1a1c1f;
  color: #e6e8e4;
  border-top: 3px solid #1a5c36;
  padding: .7rem 1.15rem .8rem;
}
.up-footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: .6rem 1.2rem;
  align-items: center;
}
.up-footer-chi {
  margin: 0;
  font-size: .95rem;
  color: #f2f4f0;
}
.up-footer-chi strong {
  color: #8fbc4a;
  margin-right: .35rem;
  letter-spacing: .04em;
}
.up-footer-tag {
  margin: .18rem 0 0;
  font-size: .78rem;
  color: #b7c0b4;
}
.up-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .15rem;
  justify-content: center;
}
.up-footer-links a {
  color: #dce4d8;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 700;
  padding: .15rem .45rem;
}
.up-footer-links a:hover { color: #fff; text-decoration: underline; }
.up-footer-copy {
  margin: 0;
  font-size: .78rem;
  color: #a8b0a6;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .up-hero { grid-template-columns: 1fr 1fr; }
  .up-quick { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .up-grid { grid-template-columns: 1fr; }
  .up-lectures { grid-template-columns: 1fr 1fr; }
  .up-lectures--1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: calc((100% - .7rem) / 2);
  }
  .up-lectures--2 {
    grid-template-columns: 1fr 1fr;
    max-width: none;
  }
  .up-res-row, .up-teacher-wrap .up-res-row { flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .up-hero, .up-quick, .up-lectures, .up-lectures--1, .up-lectures--2, .up-teacher-wrap { grid-template-columns: 1fr; }
  .up-lectures--1, .up-lectures--2 { max-width: none; }
  .up-hero-media img, .up-lec-art img { height: 190px; }
  .up-lec-art { min-height: 190px; }
  .up-res, .up-res-menu, .up-bar--teacher .up-res, .up-bar--student .up-res--soon {
    max-width: 100%;
  }
  .up-bar, .up-res-row, .up-teacher-wrap, .up-teacher-note { min-width: 0; max-width: 100%; }
  .up-footer-inner { grid-template-columns: 1fr; text-align: center; }
  .up-footer-copy { text-align: center; white-space: normal; }
  .up-footer-links { justify-content: center; }
}
@media (max-width: 560px) {
  .up-bar--student .up-res-row,
  .up-teacher-wrap .up-res-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  .up-res, .up-res-menu, .up-bar--teacher .up-res, .up-bar--student .up-res--soon {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .up-res-label { overflow-wrap: anywhere; }
}