/* Standalone replacement for #learning; load after the shared page styles.
   Brand vectors are reused without redrawing or recolouring the supplied assets.
   Ozon blue #005bff comes directly from assets/brand/ozon.svg. */
.wbl-courses--final {
  padding-top: 34px;
  padding-bottom: 86px;
  background: #fff;
}
.wbl-courses--final .wbc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
}
.wbl-courses--final .wbc-course {
  --course-accent: #ac098c;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid #e4dfe8;
  border-radius: 4px;
  background: #fff;
  color: #231c2b;
  box-shadow: 0 10px 24px -20px #21122d5c;
  text-decoration: none;
  overflow: hidden;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.wbl-courses--final .wbc-course:is(:hover, :focus-visible) {
  transform: translateY(-3px);
  border-color: #bbaacb;
  box-shadow: 0 18px 35px -24px #21122d73;
}
.wbl-courses--final .wbc-course:focus-visible {
  outline: 2px solid #973fe5;
  outline-offset: 5px;
}
.wbl-courses--final .wbc-cover {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr) auto;
  row-gap: 12px;
  height: 264px;
  min-height: 264px;
  padding: 25px 26px 21px;
  color: #fff;
  background: linear-gradient(135deg, #db00ca 0%, #b300a7 58%, #800763 100%);
  overflow: hidden;
}
.wbl-courses--final .wbc-cover::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-top: 1px solid #ffffff38;
  box-shadow: inset 0 -22px 40px -30px #1f00267a;
  content: "";
  pointer-events: none;
}
.wbl-courses--final .wbc-brand-row,
.wbl-courses--final .wbc-cover-title,
.wbl-courses--final .wbc-market-lockup,
.wbl-courses--final .wbc-update {
  position: relative;
  z-index: 1;
}
.wbl-courses--final .wbc-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  min-height: 44px;
}
.wbl-courses--final .wbc-cover-label {
  font-size: 10px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #ffffffd9;
}
.wbl-courses--final .wbc-wb-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
}
.wbl-courses--final .wbc-wb-brand img {
  display: block;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  box-shadow: 0 8px 17px -10px #60005488;
  border-radius: 12px;
}
.wbl-courses--final .wbc-cover-title {
  align-self: center;
  margin: 0;
  color: #fff;
  font-size: clamp(48px, 4.7vw, 66px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -3px;
}
.wbl-courses--final .wbc-update {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 10px;
  font-weight: 300;
  line-height: 1.6;
  white-space: nowrap;
}
.wbl-courses--final .wbc-update > span {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: #ffffffa6;
}
.wbl-courses--final .wbc-surface {
  position: absolute;
  z-index: 0;
  top: 31px;
  right: -135px;
  width: 265px;
  height: 320px;
  border: 1px solid #ffffff24;
  border-radius: 5px;
  background: linear-gradient(115deg, #ffffff19, #ffffff02 67%);
  box-shadow: -18px 14px 27px #4a00351c, inset 1px 0 #ffffff17;
  transform: rotate(24deg);
  transition: transform .65s cubic-bezier(.2, .7, .25, 1);
  pointer-events: none;
}
.wbl-courses--final .wbc-course:hover .wbc-surface {
  transform: translateX(-8px) rotate(24deg);
}

/* Saturated Ozon blue, with the unmodified official blue vector on white. */
.wbl-courses--final .wbc-course--ozon { --course-accent: #005bff; }
.wbl-courses--final .wbc-course--ozon .wbc-cover {
  background: linear-gradient(128deg, #005bff 16%, #0051e6 61%, #00369b 100%);
}
.wbl-courses--final .wbc-ozon-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 126px;
  height: 44px;
  padding: 10px 13px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 7px 17px -10px #001f6b99;
}
.wbl-courses--final .wbc-ozon-brand img {
  display: block;
  width: 100%;
  height: auto;
}
.wbl-courses--final .wbc-course--ozon .wbc-cover-title {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 0;
  font-size: 91px;
  letter-spacing: -5px;
}
.wbl-courses--final .wbc-course--ozon .wbc-cover-title > span {
  margin-top: 6px;
  font-size: 53px;
  line-height: 1;
  letter-spacing: -2px;
}
.wbl-courses--final .wbc-course--ozon .wbc-surface {
  border-color: #ffffff30;
  background: linear-gradient(115deg, #ffffff1f, #ffffff02 65%);
  box-shadow: -18px 14px 27px #001a661f, inset 1px 0 #ffffff24;
}

/* The complete Marketplace lockup, including the bag and gradient 2.0. */
.wbl-courses--final .wbc-course--market { --course-accent: #8222cd; }
.wbl-courses--final .wbc-course--market .wbc-cover {
  background: linear-gradient(125deg, #231b2d 0%, #17121f 75%);
}
.wbl-courses--final .wbc-market-signature {
  color: #e2cbe9;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: .2px;
}
.wbl-courses--final .wbc-market-lockup {
  align-self: center;
  margin: 0 -7px;
}
.wbl-courses--final .wbc-market-lockup img {
  display: block;
  width: 100%;
  height: auto;
}
.wbl-courses--final .wbc-market-lockup > span {
  display: block;
  margin: 16px 0 0 7px;
  color: #d5c1e2;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .35px;
}
.wbl-courses--final .wbc-course--market .wbc-surface {
  top: 9px;
  right: -149px;
  width: 278px;
  height: 360px;
  border-color: #d58bff2b;
  background: linear-gradient(145deg, #9c147e8c, #5b1c7c62 48%, #16358e40);
  box-shadow: -18px 14px 27px #08050f47, inset 1px 0 #efbbff12;
}
.wbl-courses--final .wbc-course--market .wbc-update { color: #dfd4e7; }
.wbl-courses--final .wbc-course--market .wbc-update > span { background: #ce7ce7; }

/* Shared light lower half. Equal rows keep the three links aligned. */
.wbl-courses--final .wbc-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 28px 26px 25px;
}
.wbl-courses--final .wbc-kicker {
  min-height: 16px;
  margin: 0 0 12px;
  color: #776481;
  font-size: 10px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.wbl-courses--final .wbc-copy h3 {
  margin: 0 0 16px;
  color: #261d2e;
  font-size: 23px;
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -.65px;
}
.wbl-courses--final .wbc-description {
  margin: 0;
  color: #6c6373;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.85;
}
.wbl-courses--final .wbc-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 29px;
  color: var(--course-accent);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
}
.wbl-courses--final .wbc-link > svg {
  display: block;
  flex: 0 0 31px;
  width: 31px;
  height: 24px;
  transition: transform .25s;
}
.wbl-courses--final .wbc-course:is(:hover, :focus-visible) .wbc-link > span {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.wbl-courses--final .wbc-course:is(:hover, :focus-visible) .wbc-link > svg { transform: translateX(5px); }

@media (max-width: 1100px) {
  .wbl-courses--final .wbc-grid { gap: 19px; }
  .wbl-courses--final .wbc-cover { height: 244px; padding: 22px 21px 20px; min-height: 244px; }
  .wbl-courses--final .wbc-cover-title { font-size: 53px; letter-spacing: -2.3px; }
  .wbl-courses--final .wbc-wb-brand { gap: 8px; font-size: 12px; }
  .wbl-courses--final .wbc-cover-label { font-size: 9px; letter-spacing: .7px; }
  .wbl-courses--final .wbc-copy { padding: 24px 21px; }
  .wbl-courses--final .wbc-copy h3 { font-size: 20px; }
  .wbl-courses--final .wbc-description { font-size: 13px; }
  .wbl-courses--final .wbc-kicker { font-size: 9px; min-height: 29px; }
  .wbl-courses--final .wbc-link { gap: 8px; font-size: 11px; }
  .wbl-courses--final .wbc-market-lockup > span { font-size: 10px; }
}
@media (max-width: 900px) {
  .wbl-courses--final { padding-bottom: 65px; }
  .wbl-courses--final .wbc-grid { grid-template-columns: 1fr; gap: 24px; }
  .wbl-courses--final .wbc-course { display: grid; grid-template-columns: 1fr 1.12fr; }
  .wbl-courses--final .wbc-cover { height: 100%; min-height: 276px; padding: 24px; }
  .wbl-courses--final .wbc-copy { padding: 27px; }
  .wbl-courses--final .wbc-kicker { min-height: 0; font-size: 10px; }
  .wbl-courses--final .wbc-copy h3 { font-size: 23px; }
  .wbl-courses--final .wbc-description { font-size: 14px; }
  .wbl-courses--final .wbc-link { font-size: 12px; }
  .wbl-courses--final .wbc-cover-label { font-size: 10px; }
  .wbl-courses--final .wbc-wb-brand { font-size: 13px; }
  .wbl-courses--final .wbc-market-lockup > span { font-size: 11px; }
}
@media (max-width: 600px) {
  .wbl-courses--final { padding-top: 22px; padding-bottom: 54px; }
  .wbl-courses--final .wbc-course { display: flex; }
  .wbl-courses--final .wbc-cover { height: 255px; min-height: 255px; padding: 24px; }
  .wbl-courses--final .wbc-cover-title { font-size: 61px; }
  .wbl-courses--final .wbc-course--ozon .wbc-cover-title { font-size: 88px; }
  .wbl-courses--final .wbc-wb-brand { font-size: 14px; }
  .wbl-courses--final .wbc-copy { padding: 27px 24px 25px; }
  .wbl-courses--final .wbc-copy h3 { font-size: 24px; }
  .wbl-courses--final .wbc-link { font-size: 13px; }
  .wbl-courses--final .wbc-market-lockup > span { font-size: 12px; }
}
@media (max-width: 350px) {
  .wbl-courses--final .wbc-cover { padding: 21px; }
  .wbl-courses--final .wbc-cover-title { font-size: 55px; }
  .wbl-courses--final .wbc-wb-brand { font-size: 12px; }
  .wbl-courses--final .wbc-copy { padding: 24px 21px; }
  .wbl-courses--final .wbc-copy h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .wbl-courses--final .wbc-course,
  .wbl-courses--final .wbc-surface,
  .wbl-courses--final .wbc-link > svg { transition: none; }
  .wbl-courses--final .wbc-course:is(:hover, :focus-visible),
  .wbl-courses--final .wbc-course:is(:hover, :focus-visible) .wbc-link > svg { transform: none; }
  .wbl-courses--final .wbc-course:hover .wbc-surface { transform: rotate(24deg); }
}
