/* R1.1.7 — Desktop/Laptop login composition only.
   The existing login card and <=767px mobile presentation stay intact. */

.login-shell{
  width:min(1120px,calc(100vw - 48px));
  min-height:min(650px,calc(100vh - 40px));
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(390px,440px);
  align-items:center;
  gap:clamp(22px,4vw,54px);
  direction:ltr;
}

.login-shell>.auth-card,
.login-visual{direction:rtl}

.login-shell>.auth-card{
  width:100%;
  position:relative;
  z-index:2;
}

.login-visual{
  min-width:0;
  min-height:560px;
  align-self:stretch;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  padding:clamp(28px,3.8vw,50px);
  border:1px solid rgba(177,146,81,.24);
  border-radius:30px;
  background:
    radial-gradient(circle at bottom right,rgba(199,154,59,.23),transparent 34%),
    radial-gradient(circle at top left,rgba(255,253,248,.86),transparent 38%),
    linear-gradient(145deg,#e7f0e9 0%,#f8f1e3 54%,#fffaf0 100%);
  box-shadow:0 24px 70px rgba(37,68,55,.12);
  isolation:isolate;
}

.login-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.11;
  background:url("assets/images/landing/decorations/landing-corner-pattern.webp") top left/340px auto no-repeat;
  transform:scaleX(-1);
}

.login-visual::after{
  content:"";
  position:absolute;
  width:310px;
  height:310px;
  left:-105px;
  bottom:-145px;
  z-index:-1;
  border:1px solid rgba(199,154,59,.23);
  border-radius:50%;
  box-shadow:0 0 80px rgba(199,154,59,.14);
}

.login-visual-copy{position:relative;z-index:2;max-width:510px}
.login-return-tag{
  display:inline-flex;
  align-items:center;
  min-height:31px;
  padding:5px 12px;
  border:1px solid rgba(177,146,81,.28);
  border-radius:999px;
  background:rgba(255,253,248,.72);
  color:#876b2d;
  font-size:13px;
  font-weight:800;
}
.login-visual h2{
  margin:13px 0 8px;
  color:var(--green);
  font-size:clamp(30px,3vw,46px);
  line-height:1.18;
  letter-spacing:-.025em;
}
.login-visual p{
  margin:0;
  color:#557068;
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.8;
}
.login-visual>img{
  width:min(100%,600px);
  height:auto;
  margin:-10px auto -6px;
  object-fit:contain;
  filter:drop-shadow(0 22px 22px rgba(24,51,43,.14));
}
.login-visual-notes{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
.login-visual-notes span{
  padding:7px 12px;
  border:1px solid rgba(11,75,58,.13);
  border-radius:999px;
  background:rgba(255,253,248,.76);
  color:var(--green);
  font-size:13px;
  font-weight:750;
}

@media (min-width:768px) and (max-width:1050px){
  .login-shell{
    width:min(100% - 32px,1000px);
    grid-template-columns:minmax(0,1fr) minmax(370px,420px);
    gap:18px;
  }
  .login-visual{min-height:540px;padding:27px 23px}
  .login-visual h2{font-size:30px}
  .login-visual>img{width:min(100%,490px)}
}

@media (max-width:767px){
  .login-shell{
    display:block;
    width:min(100%,460px);
    min-height:0;
  }
  .login-visual{display:none}
  .login-shell>.auth-card{width:min(100%,460px)}
}

@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  .login-visual>img{animation:login-scene-breathe 7s ease-in-out infinite}
}

@keyframes login-scene-breathe{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}