
/* SKILLOK PHASE 4 - Registration UX + Mobile Layout Hardening */
:root{
  --sk-navy:#102F3D;--sk-blue:#155B7A;--sk-orange:#F58220;
  --sk-cream:#FBF8F3;--sk-green:#F1F5F2;--sk-line:#E4E9E7;
  --sk-muted:#64767E;
}
*,*:before,*:after{box-sizing:border-box}
img,video,iframe{max-width:100%;height:auto}
button,input,select,textarea{max-width:100%}

/* Mobile card/grid normalization */
.card-grid,.cards-grid,.course-grid,.project-grid,.testimonial-grid,.story-grid,
.partner-grid,.sector-grid,.program-grid,.feature-grid,.logo-grid,.stats-grid{
  align-items:stretch;
}
.card-grid>* ,.cards-grid>* ,.course-grid>* ,.project-grid>* ,.testimonial-grid>* ,
.story-grid>* ,.partner-grid>* ,.sector-grid>* ,.program-grid>* ,.feature-grid>*{
  min-width:0;
  height:100%;
}
.card-grid img,.cards-grid img,.course-grid img,.project-grid img,.testimonial-grid img,
.story-grid img,.partner-grid img,.sector-grid img,.program-grid img{
  object-fit:cover;
}

/* Prevent long content from creating irregular cards */
.card-grid h1,.card-grid h2,.card-grid h3,.card-grid p,
.cards-grid h1,.cards-grid h2,.cards-grid h3,.cards-grid p,
.course-grid h1,.course-grid h2,.course-grid h3,.course-grid p,
.project-grid h1,.project-grid h2,.project-grid h3,.project-grid p,
.testimonial-grid h1,.testimonial-grid h2,.testimonial-grid h3,.testimonial-grid p,
.story-grid h1,.story-grid h2,.story-grid h3,.story-grid p{
  overflow-wrap:anywhere;
}

/* Registration shell */
.sk-form-shell{
  max-width:1040px;
  margin:0 auto;
}
.sk-form-intro{
  max-width:760px;
  margin:0 auto 26px;
  text-align:center;
}
.sk-form-card{
  background:#fff;
  border:1px solid var(--sk-line);
  border-radius:24px;
  box-shadow:0 16px 45px rgba(16,47,61,.08);
  padding:clamp(20px,4vw,38px);
}
.sk-form-card fieldset{
  border:0;
  padding:0;
  margin:0;
  min-width:0;
}
.sk-form-card legend{
  width:100%;
  margin-bottom:5px;
  color:var(--sk-navy);
  font:800 1.15rem/1.2 "Manrope",sans-serif;
}
.sk-form-help{
  color:var(--sk-muted);
  font-size:.78rem;
  line-height:1.6;
  margin:0 0 18px;
}
.sk-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;
}
.sk-form-grid .full{grid-column:1/-1}
.sk-field{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
}
.sk-field label{
  color:var(--sk-navy);
  font-size:.75rem;
  font-weight:800;
}
.sk-field label .optional{
  color:#8A9A9F;
  font-weight:600;
}
.sk-field input,
.sk-field select,
.sk-field textarea{
  width:100%;
  min-height:46px;
  border:1px solid #D5E0DD;
  border-radius:12px;
  background:#FCFDFB;
  color:var(--sk-navy);
  padding:11px 13px;
  font:500 .86rem/1.3 "DM Sans",sans-serif;
}
.sk-field textarea{min-height:120px;resize:vertical}
.sk-field input:focus,
.sk-field select:focus,
.sk-field textarea:focus{
  border-color:var(--sk-orange);
  box-shadow:0 0 0 4px rgba(245,130,32,.10);
  outline:none;
}
.sk-field input:user-invalid,
.sk-field select:user-invalid,
.sk-field textarea:user-invalid{
  border-color:#D66B5D;
}
.sk-field small{
  color:var(--sk-muted);
  font-size:.68rem;
  line-height:1.5;
}
.sk-required{color:var(--sk-orange)}
.sk-upload{
  border:1.5px dashed #C8D7D3;
  border-radius:14px;
  background:#F7FAF8;
  padding:18px;
  text-align:center;
}
.sk-upload input{border:0;padding:0;background:transparent}
.sk-upload-preview{
  margin-top:10px;
  display:grid;
  gap:5px;
  text-align:left;
  font-size:.72rem;
  color:var(--sk-muted);
}
.sk-form-divider{
  border:0;
  border-top:1px solid var(--sk-line);
  margin:26px 0;
}
.sk-form-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:25px;
}
.sk-form-footer .hint{font-size:.7rem;color:var(--sk-muted)}
.sk-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.sk-choice{
  position:relative;
}
.sk-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.sk-choice label{
  display:block;
  cursor:pointer;
  padding:15px;
  border:1px solid var(--sk-line);
  border-radius:15px;
  background:#fff;
  transition:.2s ease;
}
.sk-choice label strong{
  display:block;
  color:var(--sk-navy);
  font-size:.82rem;
}
.sk-choice label span{
  display:block;
  margin-top:4px;
  color:var(--sk-muted);
  font-size:.7rem;
  line-height:1.5;
}
.sk-choice input:checked + label{
  border-color:var(--sk-orange);
  box-shadow:0 0 0 3px rgba(245,130,32,.10);
  background:#FFF8F2;
}
.sk-progress-wrap{margin-bottom:24px}
.sk-progress-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--sk-muted);
  font-size:.7rem;
  font-weight:700;
  margin-bottom:7px;
}
.sk-progress{
  height:7px;
  border-radius:99px;
  background:#E8EFEC;
  overflow:hidden;
}
.sk-progress span{
  display:block;
  height:100%;
  width:0;
  border-radius:99px;
  background:var(--sk-orange);
  transition:width .25s ease;
}
.sk-form-step[hidden]{display:none!important}
.sk-step-actions{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:24px;
}
.sk-success{
  max-width:720px;
  margin:0 auto;
  text-align:center;
  padding:clamp(28px,6vw,55px);
  border:1px solid var(--sk-line);
  border-radius:28px;
  background:linear-gradient(135deg,#EEF5F2,#FFF2E7);
}
.sk-success-icon{
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  margin:0 auto 16px;
  background:#fff;color:var(--sk-orange);
  font-size:25px;font-weight:900;
  box-shadow:0 8px 25px rgba(16,47,61,.08);
}
.sk-registration-id{
  display:inline-block;
  margin:12px 0;
  padding:10px 14px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--sk-line);
  color:var(--sk-navy);
  font:800 1rem/1 "DM Sans",sans-serif;
  letter-spacing:.04em;
}

/* Partner landing cards */
.sk-partner-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.sk-partner-option{
  display:flex;
  gap:16px;
  align-items:flex-start;
  min-width:0;
  padding:23px;
  border:1px solid var(--sk-line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 8px 28px rgba(16,47,61,.06);
  transition:.22s ease;
}
.sk-partner-option:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 50px rgba(16,47,61,.10);
}
.sk-partner-icon{
  flex:0 0 50px;width:50px;height:50px;
  border-radius:15px;
  display:grid;place-items:center;
  background:var(--sk-green);color:var(--sk-orange);
  font-size:21px;
}
.sk-partner-option h3{margin:0;color:var(--sk-navy);font-family:"Manrope",sans-serif}
.sk-partner-option p{margin:5px 0 12px;color:var(--sk-muted);font-size:.78rem;line-height:1.6}

/* Course card consistency */
.sk-course-card{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  border:1px solid var(--sk-line);
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 28px rgba(16,47,61,.06);
}
.sk-course-card .media{aspect-ratio:16/9;min-height:0}
.sk-course-card .body{display:flex;flex:1;flex-direction:column;padding:18px}
.sk-course-card .actions{margin-top:auto;padding-top:15px}

/* Prevent horizontal overflow from long forms/cards */
main,.section,.container{min-width:0}
.sk-no-overflow{overflow:hidden}

/* Mobile hardening */
@media(max-width:900px){
  .sk-form-grid{grid-template-columns:1fr}
  .sk-form-grid .full{grid-column:auto}
  .sk-choice-grid,.sk-partner-options{grid-template-columns:1fr}
}
@media(max-width:600px){
  .sk-form-card{padding:18px 15px;border-radius:19px}
  .sk-form-footer,.sk-step-actions{flex-direction:column;align-items:stretch}
  .sk-form-footer .btn,.sk-step-actions .btn,
  .sk-form-footer button,.sk-step-actions button{width:100%;justify-content:center}
  .sk-field input,.sk-field select,.sk-field textarea{font-size:16px}
  .sk-partner-option{padding:18px}
  .sk-partner-icon{flex-basis:44px;width:44px;height:44px}
}

/* Very small phones */
@media(max-width:380px){
  .sk-form-card{padding:15px 12px}
  .sk-choice label{padding:12px}
  .sk-partner-option{gap:11px}
}
