/* Public teaser lessons: lock interactive regions with a padlock overlay */

.public-lesson-cta {
  margin: 1.75rem 0 1rem;
  padding: 1.1rem 1.25rem;
  border-left: 4px solid #FB8C00;
  background: #FFF8F0;
  color: #222831;
}

.public-lesson-cta__title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

.public-lesson-cta__text {
  margin: 0 0 0.85rem;
  font-size: 1rem;
  line-height: 1.55;
  color: #3E4A59;
}

.public-lesson-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
}

.public-lesson-cta__btn {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  background: #FB8C00;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  border-radius: 4px;
}

.public-lesson-cta__btn:hover,
.public-lesson-cta__btn:focus {
  background: #E65100;
  color: #fff !important;
}

.public-lesson-cta__link {
  color: #1565C0 !important;
  font-weight: 600;
}

.public-lesson-cta--interactive {
  border-left-color: #2E7D32;
  background: #F1F8F2;
}

.public-course-intro {
  max-width: 52rem;
  margin: 1.5rem auto 0;
  padding: 0 1.25rem;
  color: #3E4A59;
  line-height: 1.55;
}

.lesson-badge--free {
  background: #E8F5E9;
  color: #2E7D32;
}

.public-lesson-locked {
  position: relative;
  margin: 1.25rem 0;
  border-radius: 4px;
  overflow: hidden;
  /* Room for the overlay CTA (icon + label + button + note) on short blocks */
  min-height: 185px;
}

.public-lesson-locked__content {
  opacity: 0.45;
  filter: grayscale(0.35);
  pointer-events: none;
  user-select: none;
}

/* Blurred variant: used for locked quiz questions so the text is unreadable */
.public-lesson-locked--blur .public-lesson-locked__content {
  opacity: 0.6;
  filter: blur(6px) grayscale(0.35);
}

/* Locked quiz blocks can be very tall, so show the padlock and label at the
   top of the block where the visitor scrolls into it, rather than centered
   (which would be off-screen most of the time). Sticky positioning is not an
   option here: the lesson layout's overflow containers prevent it from
   tracking the window scroll. */
.public-lesson-locked--blur .public-lesson-locked__overlay {
  justify-content: flex-start;
  padding-top: 4rem;
}

/* The overlay is a link to /freetrial/ — the whole locked block is clickable. */
.public-lesson-locked__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: rgba(34, 40, 49, 0.28);
  text-decoration: none !important;
  cursor: pointer;
  transition: background 150ms ease;
}

.public-lesson-locked__overlay:hover,
.public-lesson-locked__overlay:focus-visible {
  background: rgba(34, 40, 49, 0.42);
}

.public-lesson-locked__btn {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.55rem 1.2rem;
  background: #FB8C00;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: background 150ms ease;
}

.public-lesson-locked__overlay:hover .public-lesson-locked__btn,
.public-lesson-locked__overlay:focus-visible .public-lesson-locked__btn {
  background: #E65100;
}

.public-lesson-locked__note {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Compact variant (applied by the lesson layout to every locked block after
   the first): still a clickable link, but no button/note so stacked locks
   don't read as a wall of CTAs. */
.public-lesson-locked--compact {
  min-height: 0;
}

.public-lesson-locked--compact .public-lesson-locked__btn,
.public-lesson-locked--compact .public-lesson-locked__note {
  display: none;
}

.public-lesson-locked--compact .public-lesson-locked__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.public-lesson-locked--compact .public-lesson-locked__label {
  text-transform: none;
  letter-spacing: 0.02em;
}

.public-lesson-locked--compact .public-lesson-locked__overlay:hover .public-lesson-locked__label,
.public-lesson-locked--compact .public-lesson-locked__overlay:focus-visible .public-lesson-locked__label {
  text-decoration: underline;
}

.public-lesson-locked__icon {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 8h-1V6a4 4 0 1 0-8 0v2H7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2zm-7-2a2 2 0 1 1 4 0v2h-4V6zm3 10.7a1.7 1.7 0 1 1 0-3.4 1.7 1.7 0 0 1 0 3.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 8h-1V6a4 4 0 1 0-8 0v2H7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2zm-7-2a2 2 0 1 1 4 0v2h-4V6zm3 10.7a1.7 1.7 0 1 1 0-3.4 1.7 1.7 0 0 1 0 3.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.public-lesson-locked__label {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.public-lesson-teaser {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

/* Small "no card required" note beside CTA buttons */
.public-lesson-cta__note {
  font-size: 0.9rem;
  font-weight: 600;
  color: #3E4A59;
}

/* End-of-lesson footer: pagination + CTA live in the main lesson column */
.public-lesson-footer {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}

.lesson-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  margin: 0 0 1.5rem;
}

.lesson-pagination__link {
  display: inline-block;
  max-width: 100%;
  padding: 0.6rem 1rem;
  border: 1px solid #CFD8DC;
  border-radius: 4px;
  background: #fff;
  color: #1565C0 !important;
  font-weight: 600;
  text-decoration: none !important;
  line-height: 1.4;
}

.lesson-pagination__link:hover,
.lesson-pagination__link:focus-visible {
  border-color: #1565C0;
  background: #F5F9FF;
}

.lesson-pagination__link--next {
  margin-left: auto;
  text-align: right;
}

.lesson-pagination__hint {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5A6572;
}

/* Free-trial button in the public course hero */
.course-hero__cta {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.65rem 1.4rem;
  background: #FB8C00;
  color: #fff !important;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.course-hero__cta:hover,
.course-hero__cta:focus-visible {
  background: #E65100;
}

.course-hero__cta-note {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Member mode on public teaser pages: html.sbb-member is set from the auth
   cookie in the page head (no Outseta on these pages). Trial CTAs are
   anon-only; members get links into the members area instead. */
html.sbb-member .sbb-anon-only {
  display: none !important;
}

html:not(.sbb-member) .sbb-member-only {
  display: none !important;
}

/* "Preview" / "Free interactive" badges are meaningless to members — their
   lesson links point at the full members versions. */
html.sbb-member .lesson-badge {
  display: none;
}