/* ============================================================
   PORTFOLIO — brutalizm francuski, era Concorde'a (1969–2003)
   ------------------------------------------------------------
   Inspiracje: Aéroport CDG (Paul Andreu, 1974), Centre Pompidou
   (Piano + Rogers, 1977), Frutiger Roissy, panele informacyjne
   ORTF. Beton, geometryczne podziały, monumentalne negative
   space, typografia mono w funkcji „tablicy informacyjnej".
   Brak ozdobników, brak dekoracji. Tylko struktura.
   ============================================================ */

:root {
  --concrete: #0a0a0a;          /* dominujący „beton wyłany ramą" */
  --ink-light: #f5f1ea;          /* tekst */
  --ink-soft: rgba(245, 241, 234, 0.62);
  --ink-faint: rgba(245, 241, 234, 0.32);
  --ink-line: rgba(245, 241, 234, 0.16);  /* linie konstrukcyjne */
  --ink-line-strong: rgba(245, 241, 234, 0.28);

  --font-display: "IBM Plex Serif", "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --font-meta: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Marginesy frame'a — symetryczne, jak na fasadzie betonowego budynku.
     Mniejsze niż w aplikacji konsumenckiej, by frame był blisko brzegu. */
  --frame-pad: clamp(16px, 2.5vw, 28px);
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--concrete);
  color: var(--ink-light);
  font-family: var(--font-display);
  min-height: 100vh;
  min-height: 100dvh;
}

a { color: inherit; }

/* ------------------------------------------------------------
   FRAME — jedna ramka 1px na całej stronie. Jak tablica
   informacyjna w hali odlotów. Strukturuje wszystko poniżej.
   ------------------------------------------------------------ */
.frame {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--frame-pad);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0;
}

/* ------------------------------------------------------------
   STRIP — paski meta (top/bottom). Cienkie linie, mono.
   ------------------------------------------------------------ */
.strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 24px;
  border: 1px solid var(--ink-line);
  font-family: var(--font-meta);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}

.strip--top { border-bottom: none; }
.strip--bottom { border-top: none; }

.strip__meta {
  font-family: var(--font-meta);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}

.strip__brand {
  text-decoration: none;
  color: var(--ink-light);
  transition: opacity 0.3s var(--ease);
}
.strip__brand:hover { opacity: 0.7; }

/*
  Wordmark — 1:1 kopia rozwiązania z landing page (style.css).
  Kluczowe: „.wordmark" definiuje font-size (17px) i całą rodzinę typografii,
  a „Implement" + „AI" dziedziczą ten rozmiar. Mono w 17px optycznie
  zrównuje się z Serif italic 17px bez żadnych transform/translate.
*/
.wordmark {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink-light);
  letter-spacing: -0.005em;
  font-weight: 400;
  display: inline-flex;
  align-items: baseline;
}
.wordmark__serif {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
}
.wordmark__sans {
  font-family: var(--font-meta);
  font-weight: 500;
  font-size: 1em;        /* identyczny rozmiar jak „Implement" */
  letter-spacing: 0.01em;
  color: var(--ink-light);
}

.strip__back {
  font-family: var(--font-meta);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.strip__back:hover { color: var(--ink-light); }

/* ============================================================
   GATE — ekran z hasłem
   ============================================================ */
.gate {
  border: 1px solid var(--ink-line);
  border-top: none;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 12vh, 120px) clamp(24px, 6vw, 64px);
}
/* Force-hide gate when JS sets [hidden], overriding display:flex */
.gate[hidden] { display: none; }

.gate__inner {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.gate__eyebrow {
  margin: 0;
  font-family: var(--font-meta);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}

.gate__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink-light);
}
.gate__heading em {
  font-style: italic;
  color: var(--ink-light);
}

.gate__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.gate__label {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
}

.gate__field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  border-bottom: 1px solid var(--ink-line-strong);
  transition: border-color 0.3s var(--ease);
}
.gate__field:focus-within {
  border-bottom-color: var(--ink-light);
}

.gate__input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink-light);
  font-family: var(--font-meta);
  font-size: 20px;
  letter-spacing: 0.16em;
  padding: 14px 0;
  width: 100%;
}
.gate__input::placeholder { color: var(--ink-faint); }

.gate__submit {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-family: var(--font-meta);
  font-size: 22px;
  padding: 0 8px;
  cursor: pointer;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.gate__submit:hover {
  color: var(--ink-light);
  transform: translateX(4px);
}

.gate__error {
  min-height: 18px;
  margin: 4px 0 0;
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #d97f7f;
}
.gate__error:empty { visibility: hidden; }

/* Shake animacja na błąd */
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}
.gate__field.shake { animation: shake 0.5s var(--ease); }

/* ============================================================
   VAULT — zawartość po odblokowaniu
   ============================================================ */
.vault {
  border: 1px solid var(--ink-line);
  border-top: none;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 10vh, 96px) clamp(24px, 6vw, 80px);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.vault[hidden] { display: none; }
.vault.is-open {
  opacity: 1;
}

.vault__inner {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 8vh, 96px);
}

.vault__eyebrow {
  margin: 0;
  font-family: var(--font-meta);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------
   GRID — trzy komórki w jednym poziomym rzędzie.
   Każda z geometrycznym konturem 1px (panel kontrolny).
   ------------------------------------------------------------ */
.vault__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ink-line);
}

.cell {
  position: relative;
  border-right: 1px solid var(--ink-line);
}
.cell:last-child { border-right: none; }

.cell__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: clamp(48px, 8vh, 96px) clamp(24px, 4vw, 56px);
  min-height: clamp(260px, 38vh, 360px);
  text-decoration: none;
  color: var(--ink-light);
  transition: background 0.3s var(--ease);
}
.cell__link:hover {
  background: rgba(245, 241, 234, 0.03);
}

.cell__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 280px;
  height: clamp(64px, 9vh, 96px);
  color: var(--ink-light);
  opacity: 0.9;
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
}
.cell__link:hover .cell__logo {
  opacity: 1;
  transform: translateY(-2px);
}
.cell__logo svg,
.cell__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Indywidualne korekty rozmiaru per logo, by optycznie się równoważyły. */
.cell__logo--mz img { max-height: 88px; }
.cell__logo--uber img { max-height: 44px; }   /* wordmark uber, niska wysokość */
.cell__logo--paih img { max-height: 64px; }

.cell__caption {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-align: center;
  transition: color 0.3s var(--ease);
}
.cell__link:hover .cell__caption {
  color: var(--ink-soft);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 820px) {
  .vault__grid {
    grid-template-columns: 1fr;
  }
  .cell {
    border-right: none;
    border-bottom: 1px solid var(--ink-line);
  }
  .cell:last-child { border-bottom: none; }
  .cell__link {
    min-height: clamp(200px, 30vh, 260px);
  }
}

@media (max-width: 560px) {
  .strip {
    padding: 14px 16px;
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .wordmark { font-size: 16px; }
  .gate {
    padding: clamp(40px, 10vh, 80px) clamp(20px, 5vw, 40px);
  }
  .gate__heading {
    font-size: clamp(32px, 9vw, 44px);
  }
  .gate__input {
    font-size: 18px;
  }
  .vault {
    padding: clamp(40px, 8vh, 72px) clamp(16px, 4vw, 40px);
  }
  .cell__logo--mz img { max-height: 72px; }
  .cell__logo--uber img { max-height: 36px; }
  .cell__logo--paih img { max-height: 56px; }
}

/* Safe-area dla notch'a iPhone */
@supports (padding: max(0px)) {
  .frame {
    padding-left: max(var(--frame-pad), env(safe-area-inset-left));
    padding-right: max(var(--frame-pad), env(safe-area-inset-right));
    padding-top: max(var(--frame-pad), env(safe-area-inset-top));
    padding-bottom: max(var(--frame-pad), env(safe-area-inset-bottom));
  }
}