/* home.css - Landing page, login, register, legal pages */

/* ---- Landing / Home ---- */
.home-page { display: flex; flex-direction: column; }

.home-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-8) var(--sp-5);
  gap: var(--sp-8);
  min-height: 100dvh;
}

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-5);
  max-width: 580px;
}

.hero-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.hero-brand-name {
  font-size: var(--fz-xl);
  font-weight: 700;
  color: var(--clr-white);
  letter-spacing: -.02em;
}
.hero-logo { flex-shrink: 0; }

.hero-title {
  font-size: clamp(28px, 6vw, var(--fz-2xl));
  font-weight: 700;
  color: var(--clr-white);
  line-height: 1.15;
}
.hero-sub {
  font-size: var(--fz-md);
  color: var(--clr-text-2);
  max-width: 480px;
  line-height: 1.6;
}
.hero-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}
.hero-actions .btn { min-width: 140px; }
.hero-legal {
  font-size: var(--fz-xs);
  color: var(--clr-text-3);
}

.home-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  width: 100%;
  max-width: 900px;
}
.feature-card {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.feature-icon { font-size: 28px; }
.feature-card h3 { font-size: var(--fz-base); color: var(--clr-white); }
.feature-card p  { font-size: var(--fz-sm); color: var(--clr-text-2); line-height: 1.5; }

/* ---- Auth pages (login / register) ---- */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--sp-5);
}
.auth-wrap { width: 100%; max-width: 420px; }

.auth-box {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-xl);
  padding: var(--sp-7) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
@media (max-width: 480px) {
  .auth-box { padding: var(--sp-5) var(--sp-4); }
}

.auth-brand {
  display: flex;
  justify-content: center;
}
.auth-logo-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fz-lg);
  font-weight: 700;
  color: var(--clr-white);
  text-decoration: none;
}
.auth-logo-link:hover { text-decoration: none; color: var(--clr-accent-h); }

.auth-title {
  font-size: var(--fz-xl);
  text-align: center;
}

.auth-error {
  background: rgba(224,82,82,.12);
  border: 1px solid rgba(224,82,82,.3);
  border-radius: var(--r-md);
  color: #f58080;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fz-sm);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.form-upload-notice {
  font-size: var(--fz-xs);
  color: var(--clr-text-3);
  line-height: 1.5;
  border-left: 2px solid var(--clr-warn);
  padding-left: var(--sp-3);
}

.auth-switch {
  text-align: center;
  font-size: var(--fz-sm);
  color: var(--clr-text-2);
}
.auth-legal {
  text-align: center;
  font-size: var(--fz-xs);
  color: var(--clr-text-3);
}

/* ---- Legal pages ---- */
.legal-page { padding: var(--sp-7) var(--sp-5); }
.legal-wrap { max-width: 760px; margin: 0 auto; }

.legal-box {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fz-sm);
  color: var(--clr-text-2);
}
.legal-back::before { content: '\2190'; }
.legal-back:hover { color: var(--clr-accent); text-decoration: none; }

.legal-box h1 { color: var(--clr-white); }
.legal-box h2 { font-size: var(--fz-md); color: var(--clr-text); margin-top: var(--sp-2); }
.legal-box h3 { font-size: var(--fz-base); color: var(--clr-text-2); }
.legal-box p, .legal-box li { font-size: var(--fz-sm); color: var(--clr-text-2); line-height: 1.7; }
.legal-box ul { list-style: disc; padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-1); }

.legal-date { font-size: var(--fz-xs); color: var(--clr-text-3); }
.legal-copy { font-size: var(--fz-xs); color: var(--clr-text-3); margin-top: var(--sp-4); }