@charset "UTF-8";
/*! MKM Labs frontend 2026-10-04 - /en/courses/ + /en/courses/* page layer (W2-E1c). Classes prefixed "ecr-". */
.ecr-page h1,.ecr-page h2,.ecr-page h3,.ecr-page p{margin:0}
.ecr-page a{text-decoration:none}
.ecr-label{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6699ff}

/* course cards */
.ecr-list{display:flex;flex-direction:column;gap:18px}
.ecr-course{display:flex;flex-wrap:wrap;border-radius:32px;overflow:hidden;background:#12161f;border:1px solid rgba(255,255,255,.08);color:#fff;transition:border-color 200ms ease,transform 140ms cubic-bezier(0.23,1,0.32,1)}
.ecr-course:hover{border-color:rgba(153,186,255,.3);color:#fff}
.ecr-course:active{transform:scale(0.995)}
.ecr-course:focus-visible{outline:2px solid #3378ff;outline-offset:4px}
.ecr-cover{position:relative;isolation:isolate;overflow:hidden;flex:1 1 380px;min-height:300px;margin:clamp(8px,1vw,12px);border-radius:24px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:flex-end;gap:14px;background:linear-gradient(135deg,#020617,rgba(0,20,102,.84) 55%,rgba(0,87,255,.5))}
.ecr-cover::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--ecr-art);background-size:cover;background-position:center right;opacity:.6;transition:opacity 300ms ease,transform 600ms cubic-bezier(0.23,1,0.32,1)}
.ecr-cover::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(2,6,23,.95),rgba(2,6,23,.75) 45%,rgba(2,6,23,.35))}
.ecr-course:hover .ecr-cover::before{opacity:.72;transform:scale(1.03)}
.ecr-cover--abecadlo{--ecr-art:url(/img/courses/abecadlo-vibecodera-bg.webp)}
.ecr-cover--prompt{--ecr-art:url(/img/courses/prompt-engineering-bg.webp)}
.ecr-cover--vscode-claude{--ecr-art:url(/img/courses/vibecoding-vscode-claude-bg.webp)}
.ecr-tags{display:flex;flex-wrap:wrap;gap:6px}
.ecr-tag{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#e5e8ee}
.ecr-tag--new{background:#0057FF;border-color:#0057FF;color:#fff}
.ecr-course__t{font-size:clamp(30px,3.4vw,52px);font-weight:600;letter-spacing:-0.045em;line-height:1}
.ecr-course__p{max-width:460px;color:#d7dbe4;font-size:16px;line-height:1.55}
.ecr-course__body{flex:1.4 1 520px;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:clamp(24px,3vw,40px)}
.ecr-course__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px 32px}
.ecr-course__cols .ecr-label{margin-bottom:14px}
.ecr-learn{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.ecr-learn li{display:flex;gap:10px;align-items:flex-start;color:#c3c8d3;font-size:15px;line-height:1.5}
.ecr-check__i{flex:none;color:#4dff9f;font-weight:700}
.ecr-learn--lg li{font-size:16px;padding:14px 18px;border-radius:18px;background:#12161f;border:1px solid rgba(255,255,255,.07)}
.ecr-dets{display:flex;flex-direction:column;gap:8px}
.ecr-det{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:16px;background:#0a0c10;border:1px solid rgba(255,255,255,.08)}
.ecr-split .ecr-det{background:#12161f}
.ecr-det__t{font-size:15px;font-weight:600;color:#fff}
.ecr-det__d{font-size:13px;color:#aeb4c2;line-height:1.5}
.ecr-course__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08)}
.ecr-ready{display:flex;flex-direction:column;gap:4px}
.ecr-ready__t{font-size:17px;font-weight:600}
.ecr-ready__d{font-size:14px;color:#aeb4c2}
.ecr-course__btn{pointer-events:none}
.ecr-soon{display:flex;flex-direction:column;align-items:center;gap:12px;padding:clamp(32px,4vw,48px) clamp(20px,3vw,40px);border-radius:32px;border:1px dashed rgba(255,255,255,.16);text-align:center}
.ecr-soon__t{font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-0.025em;color:#e5e8ee}
.ecr-soon__p{max-width:440px;color:#aeb4c2;font-size:15px;line-height:1.6}

/* sections */
.ecr-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.ecr-head-row .fe-h2{max-width:760px}
.ecr-head-row__p{max-width:420px}
.ecr-long .fe-card__d+.fe-card__d{margin-top:-2px}
.ecr-sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px;padding:clamp(28px,4vw,56px);border-radius:36px;background:radial-gradient(ellipse 60% 80% at 90% 0%,rgba(0,87,255,.22),transparent 65%),#12161f;border:1px solid rgba(153,186,255,.18)}
.ecr-sub__text{flex:1 1 420px;display:flex;flex-direction:column;gap:16px;max-width:640px}
.ecr-about{display:flex;flex-direction:column;gap:14px;max-width:900px}
.ecr-about__p{color:#c3c8d3;font-size:16px;line-height:1.7}
.ecr-about__p strong{color:#fff;font-weight:600}

/* course subpage */
.ecr-sec--tight{padding-bottom:clamp(28px,4vw,48px)}
.ecr-pl{display:flex;align-items:flex-start;gap:16px;padding:22px 26px;border-radius:24px;background:rgba(255,180,0,.07);border:1px solid rgba(255,180,0,.22)}
.ecr-pl__flag{font-size:22px;line-height:1.2}
.ecr-pl__t{color:#ffd166;font-size:16px;font-weight:600;margin-bottom:4px!important}
.ecr-pl__d{color:#c3c8d3;font-size:15px;line-height:1.6}
.ecr-split{display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,72px);align-items:flex-start}
.ecr-split__col{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:18px}
.ecr-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:14px}
.ecr-actions .fe-btn,.ecr-actions .fe-btn-ghost{justify-content:center}
.ecr-back{align-self:center;min-height:44px;display:inline-flex;align-items:center;color:#aeb4c2;font-size:14px;transition:color 150ms ease}
.ecr-back:hover{color:#fff}
.ecr-eng{display:flex;flex-direction:column;gap:14px;padding:clamp(26px,3.4vw,44px);border-radius:32px;background:#12161f;border:1px solid rgba(255,255,255,.07)}
.ecr-eng .fe-body{max-width:640px}
.ecr-eng__links{display:flex;flex-wrap:wrap;gap:8px 24px}
.ecr-eng__links a{min-height:44px;display:inline-flex;align-items:center;color:#99baff;font-size:15px;font-weight:600;transition:color 150ms ease}
.ecr-eng__links a+a{color:#aeb4c2}
.ecr-eng__links a:hover{color:#fff}

@media (max-width:560px){
  .ecr-cover{flex-basis:100%;min-height:260px}
  .ecr-course__body{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .ecr-page *{transition:none!important}
  .ecr-course:active{transform:none}
  .ecr-course:hover .ecr-cover::before{transform:none}
}