/* masters.md FIRST: Read masters.md BEFORE editing or adding files.
 * styles-card-highlight.css — per-card highlight styles for cursuri.html (see
 * card-highlight.js). Every rule keys off a data-hl-* attribute on ONE
 * .course-card (or a .hl-* piece that file builds), so a card without the
 * attributes looks exactly as before. Loaded after styles-cursuri2.css.
 * Also holds the edit-mode panel (#mm-hl). */

.course-card[data-hl-look], .course-card[data-hl-layout], .course-card[data-hl-badge],
.course-card[data-hl-motion] { position: relative; }
/* wide / side / tall cards span; let small cards fill the holes they leave */
html.hl-has-span .course-grid { grid-auto-flow: row dense; }

/* ===================================================== LOOK (surface) === */
.course-card[data-hl-look="kraft"] { background: var(--kraft) !important; border-color: rgba(27, 28, 31, .14) !important; }
.course-card[data-hl-look="glass"] {
  background: rgba(255, 253, 249, .55) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, .8) !important;
  box-shadow: 0 10px 40px rgba(59, 63, 224, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.course-card[data-hl-look="outline"] { border: 3px solid var(--coral) !important; }
.course-card[data-hl-look="double"] {
  border: 2px solid var(--ink) !important;
  box-shadow: 0 0 0 5px var(--cream), 0 0 0 7px var(--coral);
}
.course-card[data-hl-look="retro"] {
  border: 2px solid var(--ink) !important; border-radius: var(--radius) !important;
  box-shadow: 7px 7px 0 var(--coral);
}
.course-card[data-hl-look="retro"]:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--coral); }
.course-card[data-hl-look="sticky"] {
  background: #FFF4C7 !important; border-color: rgba(27, 28, 31, .08) !important;
  transform: rotate(-1.2deg); box-shadow: 0 14px 30px rgba(27, 28, 31, .14);
}
.course-card[data-hl-look="sticky"]:hover { transform: rotate(0deg) translateY(-2px); }
.course-card[data-hl-look="ticket"] {
  border: 2px dashed var(--coral-deep) !important;
  background: radial-gradient(circle at 0 50%, var(--background) 12px, transparent 13px),
              radial-gradient(circle at 100% 50%, var(--background) 12px, transparent 13px),
              var(--surface) !important;
}
.course-card[data-hl-look="stripe"] { border-left: 8px solid var(--coral) !important; }
.course-card[data-hl-look="grid"] {
  background-color: var(--surface) !important;
  background-image: linear-gradient(rgba(59, 63, 224, .07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(59, 63, 224, .07) 1px, transparent 1px) !important;
  background-size: 18px 18px !important;
  border-color: rgba(59, 63, 224, .3) !important;
}

/* dark surfaces */
.course-card[data-hl-look="ink"]      { background: var(--ink) !important; border-color: var(--ink) !important; }
.course-card[data-hl-look="coral"]    { background: var(--coral) !important; border-color: var(--coral) !important; }
.course-card[data-hl-look="indigo"]   { background: var(--indigo) !important; border-color: var(--indigo) !important; }
.course-card[data-hl-look="gradient"] { background: linear-gradient(145deg, var(--coral) 0%, var(--indigo) 100%) !important; border-color: transparent !important; }
.course-card[data-hl-look="sunset"]   { background: linear-gradient(160deg, var(--coral) 0%, var(--coral-deep) 100%) !important; border-color: transparent !important; }
.course-card[data-hl-look="neon"] {
  background: var(--ink) !important; border: 1px solid var(--coral) !important;
  box-shadow: 0 0 0 1px var(--coral), 0 0 24px rgba(245, 68, 60, .55), inset 0 0 18px rgba(245, 68, 60, .18);
}
.course-card[data-hl-layout="cover"] { background: var(--ink) !important; border-color: var(--ink) !important; }

/* text on dark surfaces */
.course-card:is([data-hl-look="ink"],[data-hl-look="coral"],[data-hl-look="indigo"],[data-hl-look="gradient"],[data-hl-look="sunset"],[data-hl-look="neon"],[data-hl-layout="cover"]) {
  color: var(--cream);
}
.course-card:is([data-hl-look="ink"],[data-hl-look="coral"],[data-hl-look="indigo"],[data-hl-look="gradient"],[data-hl-look="sunset"],[data-hl-look="neon"],[data-hl-layout="cover"])
  :is(h3, .mentor-name, .ff-lead, .ff-n, .course-stats .v) { color: var(--cream); }
.course-card:is([data-hl-look="ink"],[data-hl-look="coral"],[data-hl-look="indigo"],[data-hl-look="gradient"],[data-hl-look="sunset"],[data-hl-look="neon"],[data-hl-layout="cover"])
  :is(.mentor-role, .course-note, .ff-k, .ff-note, .ff-s-n, .course-stats .k, .course-nr) { color: rgba(250, 247, 241, .72); }
.course-card:is([data-hl-look="ink"],[data-hl-look="coral"],[data-hl-look="indigo"],[data-hl-look="gradient"],[data-hl-look="sunset"],[data-hl-look="neon"],[data-hl-layout="cover"]) > p { color: rgba(250, 247, 241, .72); }
.course-card:is([data-hl-look="ink"],[data-hl-look="coral"],[data-hl-look="indigo"],[data-hl-look="gradient"],[data-hl-look="sunset"],[data-hl-look="neon"],[data-hl-layout="cover"])
  :is(.course-stats, .course-mentor, .feature-format, .ff-sessions li) {
  background: rgba(250, 247, 241, .08) !important;
  border-color: rgba(250, 247, 241, .2) !important;
}
.course-card:is([data-hl-look="ink"],[data-hl-look="coral"],[data-hl-look="indigo"],[data-hl-look="gradient"],[data-hl-look="sunset"],[data-hl-look="neon"],[data-hl-layout="cover"])
  .course-stats div + div { border-left-color: rgba(250, 247, 241, .2) !important; }
.course-card:is([data-hl-look="ink"],[data-hl-look="coral"],[data-hl-look="indigo"],[data-hl-look="gradient"],[data-hl-look="sunset"],[data-hl-look="neon"],[data-hl-layout="cover"])
  :is(.tag-live, .tag-mixt, .tag-async) { background: rgba(250, 247, 241, .16); color: var(--cream); }
.course-card:is([data-hl-look="ink"],[data-hl-look="neon"],[data-hl-look="indigo"],[data-hl-layout="cover"]) :is(.tag-nov, .feature-pin) { background: var(--coral); color: var(--cream); }
.course-card:is([data-hl-look="coral"],[data-hl-look="gradient"],[data-hl-look="sunset"]) :is(.tag-nov, .feature-pin) { background: var(--cream); color: var(--ink); }
.course-card:is([data-hl-look="coral"],[data-hl-look="gradient"],[data-hl-look="sunset"]) .course-cta:not([data-x]) { background: var(--ink); color: var(--cream); }
.course-card:is([data-hl-look="ink"],[data-hl-look="neon"],[data-hl-look="indigo"],[data-hl-layout="cover"]) :is(.feature-format-label, .ff-s-h) { color: var(--coral); }
.course-card:is([data-hl-look="coral"],[data-hl-look="gradient"],[data-hl-look="sunset"]) :is(.feature-format-label, .ff-s-h) { color: var(--cream); }

/* ===================================================== LAYOUT ========== */
/* shared photo pieces */
.hl-initials {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic; font-size: 2.6rem; color: var(--fog);
}
.hl-poster, .hl-sidephoto, .hl-round, .hl-cover { position: relative; display: block; overflow: hidden; background: var(--kraft); }
.hl-poster img, .hl-sidephoto img, .hl-round img, .hl-cover img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
  transition: transform .4s ease;
}
.course-card:hover :is(.hl-poster, .hl-sidephoto, .hl-cover) img { transform: scale(1.04); }
.hl-poster::after, .hl-sidephoto::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(to top, rgba(27, 28, 31, .82), transparent); pointer-events: none;
}
.hl-who {
  position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px;
  display: flex; flex-direction: column; gap: 2px; color: var(--cream);
}
.hl-who-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.15; }
.hl-who-role { font-family: var(--font-mono); font-size: .64rem; opacity: .85; }

/* poster / tall: big photo on top */
.hl-poster { aspect-ratio: 4 / 3.4; max-width: 100%; border-radius: var(--radius); margin: 0 0 16px; }
.course-card[data-hl-layout="tall"] { grid-row: span 2; }
.course-card[data-hl-layout="tall"] .hl-poster { aspect-ratio: 3 / 4; }
.course-card:is([data-hl-layout="poster"],[data-hl-layout="tall"],[data-hl-layout="side"],[data-hl-layout="cover"]) :is(.course-mentor, .feature-teacher) { display: none; }

/* portrait: big round photo */
.hl-round {
  width: 132px; height: 132px; max-width: 100%; border-radius: 50%;
  margin: 4px auto 16px;
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--coral);
}
.hl-round .hl-initials { font-size: 2.2rem; }
.course-card[data-hl-layout="portrait"] { text-align: center; }
.course-card[data-hl-layout="portrait"] .course-top { justify-content: center; }
.course-card[data-hl-layout="portrait"] .tag-status { margin-left: 0; }
.course-card[data-hl-layout="portrait"] .course-mentor { justify-content: center; text-align: left; }

/* side: big photo in a left column, card spans two columns */
.course-card[data-hl-layout="side"] {
  grid-column: span 2;
  display: grid !important;
  grid-template-columns: minmax(200px, 40%) 1fr;
  grid-template-rows: auto auto auto 1fr;
  column-gap: 24px;
}
.course-card[data-hl-layout="side"] > *:not(.hl-sidephoto) { grid-column: 2; }
.hl-sidephoto { grid-column: 1; grid-row: 1 / -1; border-radius: var(--radius); min-height: 280px; }

/* cover: photo behind the whole card */
.course-card[data-hl-layout="cover"] { overflow: hidden; min-height: 460px; }
.course-card[data-hl-layout="cover"] > *:not(.hl-cover) { position: relative; z-index: 1; }
.hl-cover { position: absolute !important; inset: 0; z-index: 0; border-radius: inherit; }
.hl-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(27, 28, 31, .96) 0%, rgba(27, 28, 31, .78) 45%, rgba(27, 28, 31, .35) 100%);
}
.hl-cover .hl-initials { opacity: .25; font-size: 8rem; }

@media (max-width: 620px) {
  .course-card[data-hl-layout="side"] { grid-column: span 1; grid-template-columns: 1fr; grid-template-rows: none; }
  .course-card[data-hl-layout="side"] > * { grid-column: 1 !important; }
  .hl-sidephoto { grid-row: auto; min-height: 0; aspect-ratio: 4 / 3.4; margin-bottom: 16px; }
  .course-card[data-hl-layout="tall"] { grid-row: auto; }
}

/* ===================================================== BADGE =========== */
.hl-badge {
  position: absolute; z-index: 3; pointer-events: none;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.hl-badge-ribbon {
  top: 20px; right: -40px; width: 160px; padding: 5px 0; text-align: center;
  transform: rotate(40deg); background: var(--coral); color: var(--cream); letter-spacing: .12em;
}
.course-card[data-hl-badge="ribbon"] { overflow: hidden; }
.course-card[data-hl-badge="ribbon"] .tag-status { margin-right: 46px; }
.hl-badge-stamp {
  top: -18px; right: -14px; width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px dashed var(--coral-deep); background: var(--cream); color: var(--coral-deep);
  font-size: .7rem; transform: rotate(-14deg);
  box-shadow: 0 6px 16px rgba(140, 32, 22, .2);
}
.hl-badge-sticker {
  top: -14px; left: -10px; padding: 8px 12px; border-radius: 999px;
  background: var(--coral); color: var(--cream); transform: rotate(-8deg);
  box-shadow: 0 8px 18px rgba(245, 68, 60, .35); font-size: .7rem;
}
:is(.hl-badge-pill, .hl-badge-last, .hl-badge-new, .hl-badge-top, .hl-badge-seats, .hl-badge-live, .hl-badge-one) {
  top: -12px; left: 50%; transform: translateX(-50%);
  padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 6px 14px rgba(27, 28, 31, .15);
}
.hl-badge-pill  { background: var(--success); color: var(--cream); }
.hl-badge-last  { background: var(--coral-deep); color: var(--cream); }
.hl-badge-new   { background: var(--indigo); color: var(--cream); }
.hl-badge-top   { background: var(--ink); color: var(--cream); }
.hl-badge-seats { background: var(--kraft); color: var(--ink); border: 1px solid var(--border-strong); }
.hl-badge-live  { background: var(--cream); color: var(--coral); border: 1px solid var(--coral); }
.hl-badge-one   { background: var(--coral); color: var(--cream); }

/* ===================================================== MOTION ========== */
@keyframes hl-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 68, 60, .45); } 70% { box-shadow: 0 0 0 16px rgba(245, 68, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 68, 60, 0); } }
@keyframes hl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes hl-glow  { 0%, 100% { box-shadow: 0 0 0 1px rgba(245, 68, 60, .25), 0 0 14px rgba(245, 68, 60, .15); } 50% { box-shadow: 0 0 0 2px rgba(245, 68, 60, .55), 0 0 34px rgba(245, 68, 60, .4); } }
@keyframes hl-shine { 0% { background-position: -160% 0; } 60%, 100% { background-position: 260% 0; } }
@keyframes hl-wiggle { 0%, 84%, 100% { rotate: 0deg; } 88% { rotate: -7deg; } 92% { rotate: 7deg; } 96% { rotate: -4deg; } }
@keyframes hl-spin { to { --hl-angle: 360deg; } }
@property --hl-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.course-card[data-hl-motion="pulse"] { animation: hl-pulse 2.2s ease-out infinite; }
.course-card[data-hl-motion="float"] { animation: hl-float 4s ease-in-out infinite; }
.course-card[data-hl-motion="glow"]  { animation: hl-glow 3s ease-in-out infinite; }
.course-card[data-hl-motion="shine"] .course-cta {
  background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  background-size: 220% 100%; background-repeat: no-repeat;
  animation: hl-shine 3s ease-in-out infinite;
}
.course-card[data-hl-motion="wiggle"] .hl-badge,
.course-card[data-hl-motion="wiggle"] .tag-nov { animation: hl-wiggle 3.5s ease-in-out infinite; display: inline-block; }
.course-card[data-hl-motion="lift"]:hover { transform: translateY(-10px) !important; box-shadow: 0 26px 50px rgba(27, 28, 31, .18); }
.course-card[data-hl-motion="tilt"]:hover { transform: rotate(-1.5deg) scale(1.02) !important; }
.course-card[data-hl-motion="border"] {
  border: 3px solid transparent !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  background-image: linear-gradient(var(--surface), var(--surface)),
                    conic-gradient(from var(--hl-angle), var(--coral), var(--indigo), var(--coral)) !important;
  animation: hl-spin 4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .course-card[data-hl-motion], .course-card[data-hl-motion] * { animation: none !important; }
}

/* ===================================================== COUNTDOWN ======= */
.hl-count-text {
  flex-basis: 100%; margin-top: 4px;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--coral-deep);
}
.hl-count-chip {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
  padding: 5px 9px; border-radius: 999px;
  background: rgba(245, 68, 60, .12); color: var(--coral-deep);
}
.hl-count-big {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 14px; padding: 12px 14px;
  border-radius: var(--radius); background: var(--ink); color: var(--cream);
}
.hl-count-big .hl-count-n { font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; line-height: 1; color: var(--coral); }
.hl-count-big .hl-count-k { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; }
.hl-count-bar { display: grid; gap: 6px; margin: 0 0 14px; }
.hl-count-bar .hl-count-k { font-family: var(--font-mono); font-size: .64rem; font-weight: 700; color: var(--coral-deep); text-transform: uppercase; letter-spacing: .05em; }
.hl-count-track { height: 6px; border-radius: 999px; background: rgba(27, 28, 31, .1); overflow: hidden; }
.hl-count-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--coral), var(--coral-deep)); }
.course-card:is([data-hl-look="ink"],[data-hl-look="coral"],[data-hl-look="indigo"],[data-hl-look="gradient"],[data-hl-look="sunset"],[data-hl-look="neon"],[data-hl-layout="cover"])
  :is(.hl-count-text, .hl-count-bar .hl-count-k) { color: var(--cream); }
.course-card:is([data-hl-look="ink"],[data-hl-look="neon"],[data-hl-layout="cover"]) .hl-count-big { background: rgba(250, 247, 241, .1); }

/* ===================================================== CTA ============= */
.course-card[data-hl-cta="big"] .course-cta { padding: 18px 20px; font-size: .92rem; }
.course-card[data-hl-cta="big"] .course-cta::after,
.course-card[data-hl-cta="underline"] .course-cta::after { content: " →"; }
.course-card[data-hl-cta="ink"] .course-cta { background: var(--ink) !important; color: var(--cream) !important; border-color: var(--ink) !important; }
.course-card[data-hl-cta="glow"] .course-cta { box-shadow: 0 10px 26px rgba(245, 68, 60, .45); }
.course-card[data-hl-cta="pill"] .course-cta { border-radius: 999px; }
.course-card[data-hl-cta="indigo"] .course-cta { background: var(--indigo) !important; color: var(--cream) !important; border-color: var(--indigo) !important; }
.course-card[data-hl-cta="underline"] .course-cta {
  background: none !important; border: 0 !important; color: var(--coral) !important;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px;
}

/* ===================================================== EDIT PANEL ====== */
#mm-hl {
  position: fixed; right: 16px; bottom: 84px; z-index: 2147483001;
  width: min(290px, calc(100vw - 32px));
  background: var(--ink); color: var(--cream);
  border-radius: var(--radius-lg); box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
  font: 500 12px/1.3 var(--font-mono);
}
#mm-hl[hidden] { display: none; }
.mm-hl-head {
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; color: inherit; font: inherit; font-weight: 700; padding: 12px 14px;
}
.mm-hl-head::after { content: "▾"; float: right; }
#mm-hl.is-closed .mm-hl-head::after { content: "▸"; }
#mm-hl.is-closed .mm-hl-body { display: none; }
.mm-hl-body { display: grid; gap: 5px; padding: 0 14px 14px; max-height: min(64vh, 560px); overflow-y: auto; }
.mm-hl-lab { margin-top: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .65; }
#mm-hl select {
  width: 100%; font: inherit; padding: 7px 8px; border-radius: var(--radius-sm);
  background: #26272c; color: var(--cream); border: 1px solid #3a3c42;
}
#mm-hl select option { color: var(--ink); background: #fff; }
.mm-hl-text {
  width: 100%; font: inherit; padding: 7px 8px; border-radius: var(--radius-sm);
  background: #26272c; color: var(--cream); border: 1px solid #3a3c42;
}
.mm-hl-text::placeholder { color: rgba(250, 247, 241, .45); }
.mm-hl-text:disabled { opacity: .45; }
.mm-hl-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mm-hl-btn {
  font: inherit; cursor: pointer; padding: 7px 9px; border-radius: 8px;
  border: 1px solid #3a3c42; background: #26272c; color: var(--cream);
}
.mm-hl-btn:hover { background: #34363c; }
.mm-hl-hint { margin: 8px 0 0; font-size: 10px; opacity: .6; line-height: 1.45; }
#mm-hl :focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
@media print { #mm-hl { display: none; } }