/* ==========================================================================
   adaptive.css — Laptop-focused overrides (keeps desktop/phone as-is)
   Load AFTER: style.css, form1.css, footer.css
   Targets 900–1366px widths + general overflow fixes.
   ========================================================================== */

/* ---------- Global tweaks (safe) ---------- */

/* Large hero headline stays readable on laptops */
.bibig-text{
  font-size: clamp(36px, 3.6vw, 52px) !important;
}

/* Make big rounded elements scale naturally */
.modal__panel,
.grid-right,
.right-mini,
.btn{
  border-radius: clamp(10px, 1.8vw, 32px);
}

/* Prevent 3-in-a-row inputs from overflowing on mid widths */
.grid-two{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.grid-two input{
  flex: 1 1 calc(50% - 12px);
  max-width: 100%;
  margin-right: 0;  /* overrides fixed margin */
}
@media (max-width: 600px){
  .grid-two input{ flex-basis: 100%; }
}

/* Make action buttons wrap gracefully */
.actions{
  flex-wrap: wrap;
  gap: clamp(12px, 1.8vw, 24px);
}
.btn{
  min-width: clamp(128px, 24vw, 160px);
  padding: clamp(10px,1.2vw,12px) clamp(16px,2vw,18px);
  font-size: clamp(14px,1.4vw,15px);
}

/* Ensure custom select menu overlays, not reflows */
.combo__menu{ position: absolute; }


/* ---------- Modal/Wizard containment ---------- */
@media (min-width: 768px) and (max-width: 1366px){
  /* Fit the panel to viewport with breathing room */
  .modal__panel{
    width: min(1120px, calc(100vw - clamp(24px, 6vw, 96px)));
    max-width: min(1120px, calc(100vw - clamp(24px, 6vw, 96px)));
    height: auto;
    max-height: calc(100vh - clamp(24px, 8vh, 96px));
  }

  .modal__header{
    padding: clamp(16px, 2.4vw, 32px);
  }
  .modal__progress{ gap: clamp(12px, 1.8vw, 24px); }

  .wizard{
    padding: clamp(16px, 2.4vw, 32px);
    overflow: auto;  /* allow inner scroll instead of breaking layout */
    min-height: auto;
  }
  /* Remove rigid fixed step height on laptops to avoid clipping */
  .wizard .step{
    min-height: auto;
    max-height: none;
    height: auto;
  }

  /* Two-column form becomes 1.2fr/1fr to reduce squeeze */
  .grid-2{
    grid-template-columns: 1.2fr 1fr;
    column-gap: clamp(16px, 2.2vw, 24px);
  }

  .grid-right{
    padding: clamp(20px, 2.4vw, 32px);
  }
  .right-mini{
    padding: clamp(12px, 2.2vw, 24px);
  }
}

/* Narrow laptops: stack columns to stop overflow */
@media (min-width: 900px) and (max-width: 1024px){
  .grid-2{ grid-template-columns: 1fr; }
  .grid-right{ order: -1; }       /* place teacher-code panel first */
}

/* Footer grid: soften at typical laptops */
@media (max-width: 1199px){
  .as-wrap{ grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 639px){
  .as-wrap{ grid-template-columns: 1fr; gap: 28px; }
}