/* Pole Education — module cards matching lavender concept */
.module-grid{align-items:stretch;gap:18px!important}
.module-card{
  position:relative;overflow:hidden;isolation:isolate;min-height:300px;display:flex;flex-direction:column;
  padding:28px!important;border:1px solid #ded7f3!important;border-radius:26px!important;
  background:linear-gradient(145deg,#fff 0%,#fdfcff 64%,#f4f0ff 100%)!important;
  box-shadow:0 16px 44px rgba(76,58,132,.075)!important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important;
}
.module-card::before{
  content:""!important;position:absolute!important;right:-54px!important;top:-46px!important;left:auto!important;bottom:auto!important;
  width:180px!important;height:180px!important;border-radius:46% 54% 62% 38%/44% 34% 66% 56%!important;
  background:linear-gradient(145deg,rgba(155,131,238,.14),rgba(123,92,225,.05))!important;background-image:none!important;
  filter:none!important;transform:rotate(18deg)!important;pointer-events:none!important;z-index:0!important;
}
.module-card::after{
  content:""!important;position:absolute!important;right:28px!important;top:28px!important;left:auto!important;bottom:auto!important;
  width:42px!important;height:42px!important;border-radius:50%!important;
  background:radial-gradient(circle at 36% 32%,#fff 0 16%,#e8e0ff 18% 100%)!important;
  border:1px solid #d5caf3!important;box-shadow:0 8px 18px rgba(91,67,180,.08)!important;z-index:0!important;
}
.module-card>*{position:relative;z-index:1}
.module-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding-right:54px}
.module-card .module-no{font:700 12px/1 Inter,system-ui,sans-serif!important;text-transform:uppercase!important;letter-spacing:.16em!important;color:#7561bd!important;text-shadow:none!important;margin-top:2px}
.module-card .module-status{font:700 10px/1.15 Inter,system-ui,sans-serif!important;text-transform:uppercase;letter-spacing:.07em;padding:8px 10px;border-radius:999px;background:#f2eeff!important;border:1px solid #ddd3f6!important;color:#756d89!important;backdrop-filter:none!important}
.module-card .module-status.done{color:#397552!important;border-color:#c6dfcf!important;background:#eff8f2!important}.module-card .module-status.locked{color:#8b8497!important;background:#f5f3f8!important}
.module-card h3{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;font-size:clamp(25px,2.1vw,34px)!important;font-weight:650!important;letter-spacing:-.035em!important;line-height:1.06!important;margin:42px 0 11px!important;color:#2b2451!important;text-shadow:none!important;max-width:18ch!important}
.module-card p{max-width:42ch!important;color:#645d86!important;font-size:14.5px!important;line-height:1.58!important;text-shadow:none!important;margin:0!important}
.module-card .module-actions{margin-top:auto;padding-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.module-card .module-link{min-height:46px;padding:11px 12px!important;border-radius:13px!important;display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid #d7cdf2!important;background:#faf8ff!important;color:#5740ac!important;font-size:12.5px!important;font-weight:750!important;backdrop-filter:none!important;box-shadow:none!important}
.module-card .module-link:hover{background:#f0ebff!important;border-color:#a995e7!important}.module-card .lecture-module-link{background:#f1ecff!important;border-color:#d0c3f0!important;color:#5740ac!important}
/* opacity is the wrong way to say "locked": it dims the copy along with
   everything else. Measured at .70 the card description came to 3.05:1
   and the locked link to 2.40:1, against the 4.5 both need. The pale
   ground and the muted border say it instead, and the text keeps its
   own colour. */
.module-card.locked{opacity:1!important;filter:none!important;background:linear-gradient(145deg,#fcfbff,#f5f2f9)!important}
body .module-card.locked .locked-link{color:#5f5880!important}.module-card:hover{transform:translateY(-4px)!important;border-color:#b29fe9!important;box-shadow:0 22px 58px rgba(76,58,132,.12)!important}
@media(max-width:760px){.module-card{min-height:286px;padding:23px 21px!important}.module-card::after{right:22px!important;top:22px!important}.module-top{padding-right:50px}.module-card h3{font-size:29px!important;margin:36px 0 10px!important;max-width:16ch!important}.module-card p{font-size:14px!important}.module-card .module-actions{grid-template-columns:1fr 1fr;gap:8px;padding-top:22px}}
@media(max-width:520px){.module-card{min-height:270px;padding:21px 18px!important;border-radius:22px!important}.module-card h3{font-size:27px!important;max-width:100%!important}.module-card .module-actions{grid-template-columns:1fr!important}.module-card .module-link{font-size:12px!important}.module-card::before{width:145px!important;height:145px!important}.module-card::after{width:38px!important;height:38px!important}}

/* ── one card, eight identities ──────────────────────────────
   The photographs that used to sit here were dark stock studio shots —
   eight variations of the same purple-black, which darkened the card
   without telling the reader anything and fought the light, airy language
   the rest of the site speaks. (The file they pointed at,
   module-approved-N.jpg, was not even a decodable image, so the old dark
   design had been drawing nothing for a while.)

   What separates the cards now is a large serif numeral, a hairline in the
   module's own accent, and a breath of that accent in the corner. Same
   family of colour throughout, so eight cards read as one set rather than
   as a paint chart. */
.module-card{ --accent:#8b5cf6; padding: 28px !important; }
.module-card:nth-child(1){ --accent:#7c5cf0 }
.module-card:nth-child(2){ --accent:#5a7fe0 }
.module-card:nth-child(3){ --accent:#b45fb0 }
.module-card:nth-child(4){ --accent:#6a48c4 }
.module-card:nth-child(5){ --accent:#c07a4a }
.module-card:nth-child(6){ --accent:#3f9a97 }
.module-card:nth-child(7){ --accent:#8a63d8 }
.module-card:nth-child(8){ --accent:#ae5273 }

/* a breath of the accent in the far corner, not a decoration in its own right */
.module-card::before{
  inset: auto !important;
  right: -70px !important; top: -70px !important;
  left: auto !important; bottom: auto !important;
  width: 220px !important; height: 220px !important;
  border-radius: 50% !important;
  transform: none !important;
  filter: none !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%) !important;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.module-card::after{ display: none !important; }

/* the number and the status share a line, and the accent hairline closes it */
.module-top{
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 0 0 15px !important;
  background-image: linear-gradient(90deg, var(--accent), transparent 78%) !important;
  background-size: 100% 2px !important;
  background-repeat: no-repeat !important;
  background-position: left bottom !important;
}
.module-card .module-no{
  font: 600 44px/1 'Cormorant Garamond', Georgia, serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--accent) !important;
  text-shadow: none !important;
  margin: 0 !important;
}
.module-card .module-status{
  background: #f7f4ff !important;
  border: 1px solid #e0d8f7 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  white-space: nowrap !important;   /* "ЗАВЕРШЕНО ✓" broke after the bird */
  flex: 0 0 auto;
}
.module-card h3{ margin: 22px 0 11px !important; padding: 0 !important; }
.module-card p{ margin: 0 !important; }
.module-card .module-actions{ margin: auto 0 0 !important; padding-top: 24px !important; }

.module-card:hover{ border-color: var(--accent) !important; }
.module-card.locked{ --accent:#8f87a9; }  /* 3.31:1 on the card, above the large-text floor */

/* "Відеолекція ↗ →" carried two arrows, and "Інтерактивний модуль" wrapped
   onto a second line inside a 239px button */
.module-card .module-link{
  white-space: nowrap !important;
  font-size: 12px !important;
  padding: 11px 10px !important;
  gap: 6px !important;
}
.module-card .lecture-module-link::after{ content: '' !important; display: none !important; }
.module-card .module-link.locked-link{ white-space: normal !important; }

@media (max-width: 620px){
  .module-card{ padding: 22px !important; }
  .module-card .module-no{ font-size: 38px !important; }
}

/* Signed out, and signed in without the NDA, the whole card is the way
   through the gate instead of each card repeating the same lock line.
   It is an <a> in that state, so it needs the link defaults undone. */
body .module-card--gate{
  text-decoration: none; color: inherit; cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body .module-card--gate:hover{
  transform: translateY(-3px);
  border-color: #b19cf0;
  box-shadow: 0 16px 40px rgba(76,58,132,.16);
}
body .module-card--gate:focus-visible{ outline: 2px solid #7b5ce1; outline-offset: 3px; }
/* the gate bar has no progress to show, so the track is hidden and the
   message carries the row on its own */
body .course-bar--gate .course-bar-copy{ gap: 0; }
/* without the action row the card keeps a height sized for buttons that
   are not there, so it ends in 120px of nothing */
body .module-card--gate{ min-height: 0; }
body .module-card--gate h3{ margin-bottom: 10px; }
body .module-card--gate p{ margin-bottom: 4px; }