/* ===========================================================================
   engst-design.de — Stylesheet
   Nachbau des Cargo-Designs: Schriftgroessen, Farben und Abstaende sind aus
   dem urspruenglichen Cargo-Stylesheet uebernommen und in rem angegeben.
   Die rem-Basis setzt site.js abhaengig vom Viewport (wie Cargo es tat).
   =========================================================================== */

/* --- Schrift ---------------------------------------------------------------
   Das Original nutzt "ABC Diatype" (Dinamo), lizenziert ueber cargo.site.
   Diese Datei darf nicht mitgeliefert werden. Wenn eine eigene Lizenz
   vorliegt: woff2 nach site/assets/fonts/ legen und den Block einkommentieren.

@font-face {
  font-family: 'Diatype';
  src: url('../fonts/Diatype-Variable.woff2') format('woff2-variations');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Diatype Mono';
  src: url('../fonts/Diatype-Mono-Variable.woff2') format('woff2-variations');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
--------------------------------------------------------------------------- */

:root {
  --sans: 'Diatype', 'ABC Diatype', 'Helvetica Neue', Helvetica, Arial,
          system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Diatype Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo,
          Consolas, monospace;

  --ink-1: rgba(0, 0, 0, 0.85);
  --ink-2: rgba(0, 0, 0, 0.75);
  --ink-3: rgba(0, 0, 0, 0.6);
  --ink-4: rgba(0, 0, 0, 0.4);
  --link: rgba(43, 43, 43, 0.85);
  --active: #8319ff;

  --pad: 2rem;          /* Seitenrand, wie .page-content im Original */
  --nav-width: 22%;
  --content-width: 78%;
  --radius: 1rem;       /* media-item::part(media) border-radius */
}

/* rem-Basis: von site.js gesetzt. Der Fallback entspricht der Cargo-Formel
   min(Breite, Hoehe) * 0.09 * 0.16 und greift, solange kein JS gelaufen ist. */
html {
  font-size: var(--base-size, max(3.2px, min(100vw, 100vh) * 0.0144));
  -webkit-text-size-adjust: none;
}
html.is-mobile {
  font-size: calc(var(--base-size, max(3.2px, min(100vw, 100svh) * 0.0224)) * 1.3);
}

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

body {
  margin: 0;
  background: #fff;
  color: var(--ink-1);
  font-family: var(--sans);
  font-size: 1.65rem;
  font-weight: 425;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

a { color: var(--link); text-decoration: none; }
a:active { opacity: 0.7; }
a.is-active { font-weight: 700; color: var(--active); }

h1 { margin: 0; font-size: 4.5rem; line-height: 1; font-weight: 400; color: var(--ink-1); }
h1 a { color: var(--ink-1); }
h2 { margin: 0; font-size: 2rem; line-height: 1.1; font-weight: 400; color: var(--ink-2); }

hr { display: block; height: 1px; border: 0; margin: 0; background: var(--ink-2); }

p { margin: 0 0 1.5em; }
p:last-child { margin-bottom: 0; }

.caption {
  display: block;
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink-4);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #fff; padding: 1rem 1.5rem;
}
.skip-link:focus { left: 0; }

/* --- Grundgeruest ---------------------------------------------------------- */

.layout { display: flex; flex-direction: column; min-height: 100vh; }

.nav {
  position: fixed;
  top: 0; left: 0;
  width: var(--nav-width);
  padding: var(--pad) 0 var(--pad) var(--pad);
  z-index: 30;
}
.nav__name { font-weight: 700; display: block; margin-bottom: 1.5em; }
.nav__name a { color: var(--ink-1); }

/* ul.lineated aus dem Original: haengender Einzug fuer umbrechende Titel */
.nav__list {
  list-style: none;
  margin: 0 0 1.5em 3em;
  padding: 0;
  text-indent: -3em;
}

.nav__meta a { display: block; }

.column {
  width: var(--content-width);
  margin-left: auto;
  padding: var(--pad);
}
.column--content { flex: 1 0 auto; }
.column--footer { flex: 0 0 auto; }

.footer { display: flex; gap: 2rem; }
.footer > * { flex: 1; }

/* --- Mobiler Header + Overlay-Navigation ----------------------------------- */

.mobile-header { display: none; }

.menu-icon {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-1);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--sans);
}

.nav-overlay { display: none; }

html.is-mobile .nav { display: none; }
html.is-mobile .column { width: 100%; margin-left: 0; padding: 1.2rem; }

html.is-mobile .mobile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.2rem;
}
.mobile-header__links { margin: 0.5em 0 0; }
.mobile-header__links a { display: block; }

html.is-mobile .nav-overlay[data-open='true'] {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #fff;
  padding: 1.2rem;
  overflow-y: auto;
}
.nav-overlay__top { display: flex; align-items: flex-start; justify-content: space-between; }
.nav-overlay__list { list-style: none; margin: 1.5em 0; padding: 0; }
.nav-overlay__list a { display: block; }

/* --- Medien ---------------------------------------------------------------- */

.media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.03);
  transition: opacity 120ms ease-in-out;
}
.media--zoom { cursor: zoom-in; }

figure { margin: 0; }

/* --- Galerien -------------------------------------------------------------- */

.gallery { margin: 0 0 1.5em; }
.gallery:last-child { margin-bottom: 0; }

/* gallery-grid: drei gleiche Spalten, grid-span aus dem Original */
.gallery--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter, 1rem);
  align-items: start;
}
.gallery--grid > * { grid-column: span var(--span, 1); }
html.is-mobile .gallery--grid { grid-template-columns: 1fr; }
html.is-mobile .gallery--grid > * { grid-column: span 1; }

/* gallery-justify + gallery-columnized:
   Ohne JS ein Flex-Fallback, der dank flex-grow bereits sauber ausrichtet.
   Mit JS positioniert site.js exakt so wie im Original (siehe .is-laid-out). */
.gallery--justify,
.gallery--columnized {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, 1rem);
}
.gallery--justify > *,
.gallery--columnized > * {
  flex: var(--ar) 1 calc(var(--ar) * 190px);
}

.gallery.is-laid-out {
  display: block;
  position: relative;
}
.gallery.is-laid-out > * {
  position: absolute;
  margin: 0;
}

/* Einzelne Bilder im Fliesstext (scale-Attribut aus dem Original) */
.inline-media {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 1.5em;
}
.inline-media > * { width: var(--scale, 100%); }
html.is-mobile .inline-media > * { width: 100%; }

/* --- Startseite: Projektuebersicht ----------------------------------------- */

.index-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5em;
}
.index-list a { display: block; }
.index-list a:hover .media { opacity: 0.85; }

/* --- Projektkopf ----------------------------------------------------------- */

.project-head { display: flex; gap: 2rem; margin-bottom: 1.5em; }
.project-head > * { flex: 1; }
/* Im Original steht der Titel als <b> im Fliesstext — also gleiche Groesse */
.project-head__title { font-size: 1em; line-height: inherit; font-weight: 700; color: var(--ink-1); }
html.is-mobile .project-head { flex-direction: column; gap: 0.5rem; }

.project-text { margin-bottom: 1.5em; }

/* --- Lightbox (Cargo "Quick View") ---------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  background: #fff;
  padding: 3rem;
}
.lightbox[data-open='true'] { display: flex; align-items: center; justify-content: center; }
html.is-mobile .lightbox { padding: 10px; }

.lightbox__media {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  object-fit: contain;
}

.lightbox__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(87, 87, 87, 0.35);
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lightbox__btn:active { opacity: 0.7; }
.lightbox__btn--prev { left: 15px; }
.lightbox__btn--next { right: 15px; }
.lightbox__btn--close { top: 15px; right: 15px; transform: none; }
.lightbox__btn[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}