/* =========================================================
   MINUVIA TEACHER LOGIN HOLDING PAGE
   Shared navigation comes from styles.css
========================================================= */


:root {

  --login-navy: #0B1F3C;

  --login-blue: #246CF5;

  --login-text: #142744;

  --login-muted: #687991;

  --login-line: #DDE6F1;

  --login-pale: #F4F8FE;

  --login-white: #FFFFFF;

}


/* =========================================================
   BASE
========================================================= */

html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  color: var(--login-text);

  background: #FFFFFF;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;
}


* {
  box-sizing: border-box;
}


main {
  flex: 1;
}


button {
  font-family: inherit;
}


.teacher-login-container {

  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin: 0 auto;

}


/* =========================================================
   ACTIVE LOGIN LINK
========================================================= */

.teacher-login-active {

  color: #FFFFFF !important;

  font-weight: 800 !important;

}


/* =========================================================
   HERO
========================================================= */

.teacher-login-hero {

  position: relative;

  min-height:
    calc(100vh - 95px);

  padding:
    95px 0 90px;

  overflow: hidden;

  display: flex;

  align-items: center;

  background:
    linear-gradient(
      135deg,
      #FFFFFF 0%,
      #FBFDFF 48%,
      #EDF4FD 100%
    );

}


/* =========================================================
   HERO GRID
========================================================= */

.teacher-login-grid {

  position: relative;

  z-index: 3;

  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(480px, 1.05fr);

  align-items: center;

  gap: 45px;

}


/* =========================================================
   COPY
========================================================= */

.teacher-login-copy {

  max-width: 650px;

}


.teacher-login-eyebrow {

  min-height: 32px;

  padding:
    0 14px;

  border:
    1px solid #CFE0FA;

  border-radius: 999px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color:
    var(--login-blue);

  background:
    rgba(255,255,255,0.78);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.6px;

}


.teacher-login-copy h1 {

  margin:
    23px 0 19px;

  color:
    var(--login-navy);

  font-size:
    clamp(
      48px,
      5vw,
      72px
    );

  line-height: 1.01;

  letter-spacing:
    -3.4px;

}


.teacher-login-copy h1 span {

  display: block;

  margin-top: 8px;

  color:
    var(--login-blue);

}


.teacher-login-lead {

  max-width: 570px;

  margin: 0;

  color: #314864;

  font-size: 19px;

  font-weight: 700;

  line-height: 1.55;

}


.teacher-login-description {

  max-width: 590px;

  margin:
    17px 0 0;

  color:
    var(--login-muted);

  font-size: 14px;

  line-height: 1.8;

}


/* =========================================================
   POINTS
========================================================= */

.teacher-login-points {

  margin-top: 28px;

  display: grid;

  gap: 11px;

}


.teacher-login-points div {

  display: flex;

  align-items: center;

  gap: 11px;

  color: #405472;

  font-size: 13px;

  font-weight: 700;

}


.teacher-login-points span {

  flex:
    0 0 auto;

  width: 23px;

  height: 23px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #FFFFFF;

  background:
    var(--login-blue);

  font-size: 11px;

  font-weight: 900;

}


/* =========================================================
   ACTIONS
========================================================= */

.teacher-login-actions {

  margin-top: 32px;

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

}


.teacher-login-button {

  min-height: 50px;

  padding:
    0 20px;

  border-radius: 12px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 13px;

  font-weight: 800;

  text-decoration: none;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;

}


.teacher-login-button:hover {

  transform:
    translateY(-2px);

}


.teacher-login-button-primary {

  border:
    1px solid var(--login-blue);

  color: #FFFFFF;

  background:
    var(--login-blue);

  box-shadow:
    0 12px 25px
    rgba(36,108,245,0.17);

}


.teacher-login-button-secondary {

  border:
    1px solid #D1DCE9;

  color:
    var(--login-navy);

  background:
    #FFFFFF;

}


/* =========================================================
   TABLET AREA
========================================================= */

.teacher-login-device-area {

  position: relative;

  min-height: 560px;

}


.teacher-login-device-glow {

  position: absolute;

  z-index: 0;

  width: 600px;

  height: 430px;

  left: 52%;

  top: 48%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(186,214,253,0.28) 0%,
      rgba(218,233,253,0.12) 50%,
      rgba(244,249,255,0) 76%
    );

  filter:
    blur(10px);

}


/* =========================================================
   TABLET
========================================================= */

.teacher-login-tablet {

  position: absolute;

  z-index: 2;

  width: 660px;

  max-width: none;

  left: 50%;

  top: 30px;

  transform:
    translateX(-50%);

  display: block;

  object-fit: contain;

  filter:
    drop-shadow(
      0 27px 34px
      rgba(11,31,60,0.14)
    );

}


/* =========================================================
   STATUS CARD
========================================================= */

.teacher-login-status-card {

  position: absolute;

  z-index: 5;

  right: 8px;

  bottom: 65px;

  min-width: 225px;

  padding:
    14px 18px;

  border:
    1px solid #DCE5F1;

  border-radius: 16px;

  display: flex;

  align-items: center;

  gap: 12px;

  background:
    rgba(255,255,255,0.95);

  box-shadow:
    0 15px 34px
    rgba(11,31,60,0.11);

  backdrop-filter:
    blur(10px);

}


.teacher-login-status-dot {

  flex:
    0 0 auto;

  width: 11px;

  height: 11px;

  border-radius: 50%;

  background:
    var(--login-blue);

  box-shadow:
    0 0 0 6px
    rgba(36,108,245,0.10);

}


.teacher-login-status-card small {

  display: block;

  margin-bottom: 3px;

  color: #8391A5;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.5px;

}


.teacher-login-status-card strong {

  display: block;

  color:
    var(--login-navy);

  font-size: 12px;

}


/* =========================================================
   DECORATIVE CIRCLES
========================================================= */

.teacher-login-circle {

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

}


.teacher-login-circle-one {

  width: 560px;

  height: 560px;

  right: -280px;

  bottom: -250px;

  background:
    rgba(184,211,249,0.34);

}


.teacher-login-circle-two {

  width: 380px;

  height: 380px;

  left: -260px;

  top: 120px;

  background:
    rgba(219,232,249,0.38);

}


/* =========================================================
   FOOTER
========================================================= */

.teacher-login-footer {

  padding:
    24px 0;

  color:
    rgba(255,255,255,0.65);

  background:
    #08182F;

}


.teacher-login-footer-inner {

  display: grid;

  grid-template-columns:
    1fr auto auto;

  align-items: center;

  gap: 40px;

}


.teacher-login-footer-brand {

  display: flex;

  align-items: center;

  gap: 14px;

}


.teacher-login-footer-logo {

  width: 90px;

  display: block;

}


.teacher-login-footer-brand span {

  max-width: 300px;

  font-size: 10px;

  line-height: 1.5;

}


.teacher-login-footer-links {

  display: flex;

  flex-wrap: wrap;

  gap: 18px;

}


.teacher-login-footer-links a {

  color: inherit;

  font-size: 10px;

  text-decoration: none;

}


.teacher-login-copyright {

  font-size: 10px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

  .teacher-login-grid {

    grid-template-columns:
      minmax(0,1fr)
      minmax(430px,0.95fr);

  }


  .teacher-login-tablet {

    width: 570px;

  }

}


@media (max-width: 900px) {

  .teacher-login-hero {

    padding:
      70px 0 75px;

  }


  .teacher-login-grid {

    grid-template-columns:
      1fr;

    gap: 20px;

  }


  .teacher-login-copy {

    max-width: 700px;

  }


  .teacher-login-device-area {

    min-height: 500px;

  }


  .teacher-login-tablet {

    width: 610px;

    max-width: 90vw;

    top: 40px;

  }


  .teacher-login-status-card {

    right: 12%;

    bottom: 45px;

  }


  .teacher-login-footer-inner {

    grid-template-columns: 1fr;

    gap: 20px;

  }

}


@media (max-width: 600px) {

  .teacher-login-container {

    width:
      calc(100% - 26px);

  }


  .teacher-login-hero {

    min-height: auto;

    padding:
      55px 0 55px;

  }


  .teacher-login-copy h1 {

    font-size: 45px;

    letter-spacing:
      -2.4px;

  }


  .teacher-login-lead {

    font-size: 17px;

  }


  .teacher-login-actions {

    flex-direction: column;

  }


  .teacher-login-button {

    width: 100%;

  }


  .teacher-login-device-area {

    min-height: 330px;

    margin-top: 15px;

  }


  .teacher-login-tablet {

    width: 400px;

    max-width: 94vw;

    top: 30px;

  }


  .teacher-login-status-card {

    right: 5px;

    bottom: 5px;

    min-width: 205px;

  }


  .teacher-login-footer-brand {

    align-items: flex-start;

    flex-direction: column;

  }

}