/* ============================================
   KIVI public site — inner pages
   Corporate solutions grid, client portal dialog (classes owned by
   js/portal.js), presentation gate (classes owned by js/presentations.js)
   and the simplified error layout.
   ============================================ */

/* Compatibility alias for buttons created by existing portal/presentation JS. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  border: 1px solid var(--color-line-strong);
  font-weight: var(--fw-bold);
  transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.btn-primary {
  background: var(--kiwi-flesh);
  border: 1.5px solid var(--kiwi-ink);
  color: var(--kiwi-ink);
  box-shadow: 0 3px 0 var(--kiwi-ink);
}

.btn-primary:hover {
  background: var(--color-accent-strong);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: progress;
}

.btn-ghost {
  border: 1.5px dashed var(--color-line-strong);
}

.btn-ghost:hover {
  border-style: solid;
  border-color: var(--color-text);
}

/* ---- Corporate solutions: a ruled editorial index ---- */

.solutions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1.5px solid var(--color-text);
}

.solution {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  padding: var(--sp-5) 0 var(--sp-7);
  border-bottom: 1px solid var(--color-line-strong);
}

.solution--wide {
  grid-column: span 1;
}

.solution__index {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
}

.solution__icon {
  color: var(--color-accent-text);
}

.solution__icon .icon {
  width: 26px;
  height: 26px;
  stroke-width: 1.4;
}

.solution h3 {
  margin-top: var(--sp-4);
  font-size: var(--fs-h3);
}

.solution p {
  max-width: 36ch;
  color: var(--color-text-muted);
}

/* Portal band: a plain ruled statement with its actions. */
.portal-band {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: end;
  gap: var(--sp-6);
  padding: clamp(var(--sp-6), 6vw, var(--sp-9)) 0;
  border-top: 1.5px solid var(--color-text);
  border-bottom: 1px solid var(--color-line-strong);
}

.portal-band h2 {
  margin-top: var(--sp-4);
  font-size: var(--fs-h2);
}

.portal-band p {
  margin-top: var(--sp-4);
  color: var(--color-text-muted);
  max-width: 46ch;
}

.portal-band__actions {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}

.portal-band__lock {
  color: var(--color-accent-text);
}

.portal-band__lock .icon {
  width: 30px;
  height: 30px;
  stroke-width: 1.4;
}

/* ---- Client portal dialog (state classes owned by js/portal.js) ---- */

.portal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: rgba(5, 7, 4, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease-out), visibility var(--t-base);
}

.portal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.portal-locked {
  overflow: hidden;
}

.portal-dialog {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100vh - 2 * var(--sp-4));
  overflow-y: auto;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  border-radius: var(--r-xl);
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface);
  box-shadow: var(--shadow-pop);
  transform: translateY(24px) scale(0.97);
  transition: transform var(--t-slow) var(--ease-out);
}

.portal-overlay.open .portal-dialog {
  transform: none;
}

.portal-close {
  position: absolute;
  right: var(--sp-4);
  top: var(--sp-4);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-line-strong);
}

.portal-close svg {
  width: 18px;
  height: 18px;
}

.portal-header {
  text-align: center;
}

.portal-lock-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--sp-4);
  border-radius: 20px;
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.portal-lock-icon svg {
  width: 28px;
  height: 28px;
}

.portal-title {
  font-size: 1.6rem;
}

.portal-subtitle {
  margin-top: var(--sp-2);
  color: var(--color-text-muted);
}

#portal-form {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.portal-field {
  display: grid;
  gap: var(--sp-2);
}

.portal-field label {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

.portal-input,
.gate-input {
  width: 100%;
  height: 52px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--color-line-strong);
  background: var(--color-bg);
  transition: border-color var(--t-fast) var(--ease-out);
}

.portal-input:focus,
.gate-input:focus {
  border-color: var(--color-accent-text);
}

.portal-error,
.gate-error {
  display: none;
  color: var(--color-danger);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.portal-error.show,
.gate-error.show {
  display: block;
}

.portal-submit {
  width: 100%;
}

.portal-contact {
  margin-top: var(--sp-5);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.portal-contact a {
  color: var(--color-accent-text);
  font-weight: var(--fw-bold);
}

.portal-view-hidden {
  display: none;
}

.portal-integrations {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.portal-integration-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}

.portal-integration-card:hover {
  border-color: var(--color-accent-text);
  transform: translateX(4px);
}

.portal-int-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.portal-int-icon svg,
.portal-int-arrow {
  width: 18px;
  height: 18px;
}

.portal-int-title {
  font-weight: var(--fw-bold);
}

.portal-int-desc {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.portal-int-badge {
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--color-surface-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
}

.portal-logout {
  width: 100%;
  margin-top: var(--sp-5);
}

/* ---- Presentation gate (state classes owned by js/presentations.js) ---- */

.gate-page {
  min-height: 70vh;
  padding-top: calc(var(--header-height) + var(--sp-8));
  padding-bottom: var(--sp-8);
}

.gate-container {
  display: grid;
  place-items: center;
}

.gate-container.is-hidden {
  display: none;
}

.gate-card {
  width: min(520px, 100%);
  padding: var(--sp-7) var(--sp-6);
  border-radius: var(--r-xl);
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface);
  text-align: center;
  box-shadow: var(--shadow-card);
}

.gate-card-wide {
  width: min(680px, 100%);
}

.gate-landing-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--sp-5);
  border-radius: 22px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  transform: rotate(-6deg);
}

.gate-landing-icon.is-error {
  background: var(--color-danger);
}

.gate-landing-icon svg {
  width: 32px;
  height: 32px;
}

.gate-title,
.gate-company-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.gate-landing-desc,
.gate-subtitle {
  margin-top: var(--sp-4);
  color: var(--color-text-muted);
}

.gate-landing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.gate-landing-contact {
  margin-top: var(--sp-5);
  color: var(--color-text-faint);
  font-size: var(--fs-small);
}

.gate-landing-contact a {
  color: var(--color-accent-text);
  font-weight: var(--fw-bold);
}

#pres-form {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.gate-btn {
  width: 100%;
}

.presentations-content {
  display: none;
}

.presentations-content.visible {
  display: block;
}

.pres-active-title {
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-6);
}

.presentation-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-lg);
  background: var(--color-surface);
}

.presentation-placeholder {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-5);
  border-radius: var(--r-xl);
  border: 1px dashed var(--color-line-strong);
  text-align: center;
}

.presentation-placeholder svg {
  width: 48px;
  height: 48px;
  color: var(--color-accent-text);
}

.presentation-placeholder-desc {
  color: var(--color-text-muted);
}

/* ---- Error layout ---- */

.hero__burst-count {
  min-width: 2ch;
  color: var(--color-accent-text);
  font-weight: var(--fw-bold);
}

.error-page {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-6);
  padding-block: var(--sp-8);
}

.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 16vw, 13rem);
  font-weight: var(--fw-black);
  line-height: 0.85;
  letter-spacing: -0.07em;
  color: var(--color-accent-text);
}

.error-page h1 {
  margin-top: var(--sp-5);
  font-size: var(--fs-h2);
}

.error-page__lead {
  margin-top: var(--sp-4);
  max-width: 44ch;
  color: var(--color-text-muted);
  font-size: var(--fs-lead);
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-6);
}

.error-page__stage {
  position: relative;
  aspect-ratio: 1;
  width: min(100%, 520px);
  justify-self: center;
}

.error-page__hint {
  margin-top: var(--sp-5);
  color: var(--color-text-faint);
  font-size: var(--fs-small);
}

.error-page__brand {
  position: absolute;
  top: var(--sp-5);
  left: 0;
}

.error-page__brand img {
  width: 110px;
}

@media (max-width: 1024px) {
  .solutions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .error-page {
    grid-template-columns: minmax(0, 1fr);
    padding-top: calc(var(--sp-9) + var(--sp-4));
  }

  .error-page__stage {
    order: -1;
    width: min(70vw, 360px);
  }
}

@media (max-width: 768px) {
  .solutions {
    grid-template-columns: minmax(0, 1fr);
  }

  .solution--wide {
    grid-column: auto;
  }

  .solution {
    min-height: 0;
  }

  .portal-integration-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .portal-int-badge {
    display: none;
  }
}