/* SIPEKA 2.0 landing + login. Mobile-first. Requires tokens.css + app.css. */

.auth { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--c-surface); }

/* Hero photo (mobile: header band) */
.auth-hero {
  position: relative; isolation: isolate; overflow: hidden;
  height: 34vh; min-height: 220px; max-height: 340px;
  color: #fff; background: var(--c-navy-900);
}
.auth-hero-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}
.auth-hero-img.focus-top { object-position: 50% 15%; }
.auth-hero-img.focus-bottom { object-position: 50% 85%; }
.auth-hero-img.focus-left { object-position: 15% 50%; }
.auth-hero-img.focus-right { object-position: 85% 50%; }
.auth-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15, 29, 51, .30) 0%, rgba(15, 29, 51, .88) 100%);
}
.auth-hero-inner {
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-5) var(--sp-5) calc(var(--sp-8) + 4px);
}
.auth-brand { display: flex; align-items: center; gap: var(--sp-3); }
.auth-brand-mark {
  width: 44px; height: 60px; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}
.auth-brand-name { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.auth-brand-sub { font-size: var(--fs-sm); color: rgba(255, 255, 255, .82); }
.auth-hero-copy { display: none; }

/* Panel (mobile: sheet overlapping the photo) */
.auth-panel {
  position: relative; flex: 1;
  margin-top: -20px; border-radius: 20px 20px 0 0;
  background: var(--c-surface);
  padding: var(--sp-6) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
.auth-panel-inner { width: 100%; max-width: 420px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; }
.auth-title { font-size: var(--fs-xl); font-weight: 700; color: var(--c-navy-900); line-height: 1.25; }
.auth-lead { margin-top: var(--sp-1); color: var(--c-muted); }
.auth-body { margin-top: var(--sp-6); }
.auth-body > .alert { margin-bottom: var(--sp-4); }
.auth-foot { margin-top: auto; padding-top: var(--sp-8); font-size: var(--fs-xs); color: var(--c-muted); }

/* Role picker */
.role-group + .role-group { margin-top: var(--sp-5); }
.role-group-label {
  display: block; margin-bottom: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted);
}
.role-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.role-link {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 60px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  color: var(--c-ink); text-decoration: none; background: var(--c-surface);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.role-link:hover { border-color: var(--c-navy-600); background: var(--c-navy-50); }
.role-link:active { background: var(--c-navy-100); }
.role-link:focus-visible { outline: 2px solid var(--c-green-700); outline-offset: 2px; }
.role-icon {
  width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--c-navy-50); color: var(--c-navy-700);
}
.role-text { display: grid; min-width: 0; }
.role-title { font-weight: 600; }
.role-desc { font-size: var(--fs-sm); color: var(--c-muted); }
.role-chevron { margin-left: auto; color: var(--c-line-strong); flex-shrink: 0; }
.role-link:hover .role-chevron { color: var(--c-navy-600); }

.role-more { margin-top: var(--sp-5); border-top: 1px solid var(--c-line); padding-top: var(--sp-4); }
.role-more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-height: 44px; cursor: pointer; list-style: none;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted);
}
.role-more > summary::-webkit-details-marker { display: none; }
.role-more > summary:hover { color: var(--c-navy-700); }
.role-more > summary .role-more-caret { transition: transform var(--dur) var(--ease); }
.role-more[open] > summary .role-more-caret { transform: rotate(90deg); }
.role-more .role-list { margin-top: var(--sp-2); }

/* Selected role + form */
.auth-back { margin-left: calc(var(--sp-2) * -1); margin-bottom: var(--sp-4); color: var(--c-muted); }
.role-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 4px 10px 4px 6px; border-radius: var(--r-full);
  background: var(--c-navy-50); color: var(--c-navy-700); font-size: var(--fs-sm); font-weight: 600;
}
.auth-actions { margin-top: var(--sp-6); }
.btn-google { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-line-strong); }
.btn-google:hover { background: var(--c-navy-50); border-color: var(--c-navy-600); }
.auth-note { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-muted); }

/* Tablet */
@media (min-width: 768px) {
  .auth-hero { height: 38vh; max-height: 380px; }
  .auth-hero-inner { padding: var(--sp-8) var(--sp-10) calc(var(--sp-10) + 4px); }
  .auth-panel { padding: var(--sp-10) var(--sp-10) var(--sp-8); }
  .role-list { grid-template-columns: 1fr 1fr; }
}

/* Desktop: split layout, photo left */
@media (min-width: 1024px) {
  .auth { flex-direction: row; }
  .auth-hero { flex: 0 0 55%; height: auto; min-height: 100vh; max-height: none; }
  .auth-hero::after { background: linear-gradient(180deg, rgba(15, 29, 51, .20) 0%, rgba(15, 29, 51, .55) 45%, rgba(15, 29, 51, .92) 100%); }
  .auth-hero-inner { padding: var(--sp-12); }
  .auth-brand-mark { width: 52px; height: 72px; }
  .auth-brand-name { font-size: var(--fs-3xl); }
  .auth-hero-copy { display: block; margin-top: var(--sp-6); max-width: 34rem; }
  .auth-hero-copy p { font-size: var(--fs-lg); line-height: 1.5; color: rgba(255, 255, 255, .9); }
  .auth-hero-meta {
    display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-6);
    padding-top: var(--sp-5); border-top: 1px solid rgba(255, 255, 255, .22);
    font-size: var(--fs-sm); color: rgba(255, 255, 255, .78);
  }
  .auth-panel {
    flex: 1; margin-top: 0; border-radius: 0; justify-content: center;
    padding: var(--sp-12) var(--sp-10); overflow-y: auto; max-height: 100vh;
  }
  .auth-panel-inner { flex: 0 1 auto; }
  .auth-title { font-size: var(--fs-2xl); }
  .role-list { grid-template-columns: 1fr; }
  .auth-foot { margin-top: var(--sp-10); padding-top: 0; }
}