/* Viva Adaptive landing — colors aligned with index (styles.css) + assessment (stage-pages.css) */

:root {
  /* Match assessment.html / src/styles/stage-pages.css */
  --viva-brand: #11a592;
  --viva-accent: #2f7ef1;
  --viva-violet: #7b57f9;
  --viva-page-text: #101c37;
  --viva-page-muted: #61708d;
  /* Home styles.css */
  --viva-brand-2: #2d7fd4;
  --viva-logo-violet: #6c4cff;
  --viva-text: #101828;
  --viva-muted: #5b6475;
  --viva-line: #d7e1f5;
  --viva-card-shadow: 0 18px 40px rgba(23, 95, 112, 0.16);
  --viva-card-shadow-hover: 0 24px 48px rgba(23, 95, 112, 0.22);
  --viva-link-admin: #5b4fc9;
  --viva-link-student: #1f7bcf;
  /* One column width for hero + cards so edges line up */
  --viva-content-max: 920px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Allow page to grow so shared site footer is visible (scroll if needed) */
html.viva-doc {
  min-height: 100dvh;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

html.viva-doc body {
  margin: 0;
}

/* Same accent strip as assessment.html (.top-strip) */
.viva-top-strip {
  height: 8px;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--viva-brand), var(--viva-accent), var(--viva-violet));
}

body.viva-page {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--viva-page-text);
  line-height: 1.5;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: visible;
  /* Assessment base + soft left–right wash (mint → lavender) */
  background:
    linear-gradient(105deg, rgba(232, 250, 246, 0.5) 0%, transparent 44%, rgba(238, 234, 255, 0.42) 100%),
    radial-gradient(circle at 12% 8%, rgba(99, 210, 193, 0.27) 0%, transparent 28%),
    radial-gradient(circle at 86% 6%, rgba(96, 134, 255, 0.2) 0%, transparent 29%),
    linear-gradient(180deg, #edf3ff 0%, #e7eefb 100%);
}

.viva-shell {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding:
    max(6px, env(safe-area-inset-top, 0px)) clamp(14px, 3vw, 28px)
    max(clamp(8px, 1.8dvh, 16px), env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  gap: 0;
}

.site-footer--viva {
  flex-shrink: 0;
  width: 100%;
}

.site-footer--viva .footer-wrap--with-contact {
  max-width: min(1120px, 92vw);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(14px, 3vw, 28px);
  padding-right: clamp(14px, 3vw, 28px);
}

.viva-top-bar {
  width: 100%;
  max-width: var(--viva-content-max);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: 10px;
  min-height: 40px;
}

/* Frosted panel — same language as .header on assessment.html */
.viva-intro-panel {
  width: 100%;
  max-width: var(--viva-content-max);
  margin-left: auto;
  margin-right: auto;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  padding: clamp(14px, 2.2dvh, 22px) clamp(16px, 3vw, 24px) clamp(16px, 2.4dvh, 24px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(37, 61, 111, 0.09);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2dvh, 20px);
  margin-bottom: clamp(12px, 2dvh, 20px);
}

.viva-brand-text {
  text-align: center;
}

.viva-back-link {
  color: #375286;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(140deg, #f7f9ff, #eff5ff);
  border: 1px solid #c7d7f2;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.viva-back-link:hover {
  background: linear-gradient(140deg, #fff, #f3f7ff);
  border-color: #b4c8ec;
  box-shadow: 0 6px 16px rgba(37, 61, 111, 0.08);
  transform: translateY(-1px);
}

.viva-header {
  display: flex;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  margin: 0;
  width: 100%;
}

.viva-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.4dvh, 14px);
}

.viva-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 8dvh, 52px);
  height: clamp(40px, 8dvh, 52px);
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--viva-line);
  box-shadow: 0 10px 28px rgba(37, 61, 111, 0.1);
}

.viva-logo svg {
  width: clamp(22px, 4.5dvh, 30px);
  height: clamp(22px, 4.5dvh, 30px);
}

.viva-title {
  margin: 0;
  font-size: clamp(1.25rem, min(3.8vw, 4dvh), 2.05rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(95deg, #2348e6, #6c4cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not (background-clip: text) {
  .viva-title {
    color: #2348e6;
  }
}

.viva-tagline {
  margin: 2px 0 0;
  font-size: clamp(0.8rem, min(1.8vw, 2.2dvh), 1rem);
  font-weight: 500;
  color: var(--viva-page-muted);
}

.viva-hero {
  text-align: center;
  max-width: 640px;
  margin: 0;
  flex-shrink: 0;
  width: 100%;
  padding-top: clamp(10px, 1.6dvh, 16px);
  border-top: 1px solid rgba(215, 225, 245, 0.95);
}

.viva-hero h2 {
  margin: 0 0 clamp(6px, 1dvh, 10px);
  font-size: clamp(1.1rem, min(3.2vw, 3.8dvh), 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--viva-page-text);
}

.viva-hero p {
  margin: 0;
  font-size: clamp(0.78rem, min(1.9vw, 2.2dvh), 1.02rem);
  color: var(--viva-page-muted);
  font-weight: 400;
}

.viva-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  width: 100%;
  max-width: var(--viva-content-max);
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  align-items: stretch;
  margin-left: auto;
  margin-right: auto;
}

.viva-card {
  background: #fff;
  border: 1px solid var(--viva-line);
  border-radius: 18px;
  padding: clamp(12px, 2.4dvh, 22px) clamp(14px, 2.5vw, 22px);
  box-shadow: var(--viva-card-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: default;
}

.viva-card.is-interactive {
  cursor: pointer;
}

.viva-card:hover,
.viva-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--viva-card-shadow-hover);
  border-color: #c9d7ff;
}

.viva-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  flex-shrink: 0;
  color: #111827;
}

.viva-card-icon svg {
  width: 32px;
  height: 32px;
}

.viva-card h3 {
  margin: 0 0 6px;
  font-size: clamp(1rem, min(2.4vw, 2.4dvh), 1.22rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--viva-text);
}

.viva-card-desc {
  margin: 0 0 12px;
  font-size: clamp(0.84rem, min(2vw, 2dvh), 0.98rem);
  color: var(--viva-muted);
  width: 100%;
  max-width: 32ch;
  line-height: 1.45;
  /* Same vertical slot on both cards so headers + lists line up */
  min-height: calc(2 * 1.45em);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.viva-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  text-align: left;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.viva-feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-height: 42px;
  padding: 0 2px;
  font-size: clamp(0.84rem, min(1.85vw, 1.85dvh), 0.95rem);
  font-weight: 500;
  color: #36425f;
  line-height: 1.35;
  border-bottom: 1px solid #eef2f6;
}

.viva-feature-list li:last-child {
  border-bottom: 0;
}

.viva-feature-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.viva-feature-icon svg {
  width: 17px;
  height: 17px;
}

/* Chip tints aligned with home hero / brand */
.viva-feature-icon--teal {
  background: #e9f8f6;
  color: #167f7a;
}

.viva-feature-icon--blue {
  background: #e8f1ff;
  color: var(--viva-brand-2);
}

.viva-feature-icon--amber {
  background: #fff8eb;
  color: #b45309;
}

.viva-feature-icon--violet {
  background: #f1efff;
  color: var(--viva-logo-violet);
}

.viva-feature-icon--rose {
  background: #fff1f2;
  color: #be123c;
}

.viva-card-footer {
  margin-top: auto;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-top: 10px;
  border-top: 1px solid #eef2f6;
}

.viva-card-cta {
  display: inline-block;
  font-size: clamp(0.88rem, min(1.9vw, 2.05dvh), 1.02rem);
  font-weight: 700;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 4px 6px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.25;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* Same accent on both cards so footer links align visually */
.viva-card-cta--admin,
.viva-card-cta--student {
  color: var(--viva-link-student);
}

.viva-card-cta--admin:hover,
.viva-card-cta--admin:focus-visible,
.viva-card-cta--student:hover,
.viva-card-cta--student:focus-visible {
  color: #1560a8;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(21, 96, 168, 0.45);
}

/* Short viewports: stay on one screen, no document scroll */
@media (min-width: 520px) {
  .viva-brand {
    flex-direction: row;
    align-items: center;
    gap: clamp(12px, 2vw, 18px);
  }

  .viva-brand-text {
    text-align: left;
  }
}

@media (max-height: 620px) {
  .viva-back-link {
    padding: 5px 10px;
    font-size: 0.8rem;
  }

  .viva-shell {
    padding-top: max(4px, env(safe-area-inset-top, 0px));
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
  }

  .viva-intro-panel {
    padding-top: 10px;
    padding-bottom: 12px;
    gap: 8px;
    margin-bottom: 8px;
  }
}

/* Very small width: keep two columns so total height stays lower; tighten gap */
@media (max-width: 480px) {
  .viva-cards {
    gap: 8px;
  }
}