/* ==========================================================================
   Tombiela — main.css
   1. Variablen
   2. Reset
   3. Grid / Bahnen
   4. Navbar
   5. Projekt-Raster
   6. Projekt-Detailseite
   7. Seiten
   8. Mobile
   ========================================================================== */

/* --- 1. Variablen --------------------------------------------------------- */

:root {
  /* Grid */
  --gz-cols:      12;
  --gz-gutter:    20px;
  --gz-margin:    30px;
  --gz-top:       26px;

  /* Typo — Werte aus dem bisherigen Entwurf.
     Tracking wie im Semplice-Editor: 4 → 0.004em, 12 → 0.012em */
  --gz-font:      "GT Planar Light", "GT Planar", Helvetica, Arial, sans-serif;
  --gz-weight:    300;
  --gz-home-fs:   25px;
  --gz-home-ls:   0.004em;
  --gz-label-fs:  14px;
  --gz-label-ls:  0.012em;
  --gz-lh:        1.2;

  /* Farbe */
  --gz-color:     #000000;
  --gz-bg:        #ffffff;
  --gz-dim:       rgba(0,0,0,.4);

  /* Abstände */
  --gz-content-top: 120px;   /* Freiraum unter der Navbar */
  --gz-row-gap:     60px;

  --gz-ease:      cubic-bezier(.25,.1,.25,1);
}

/* --- 2. Reset ------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--gz-bg);
  color: var(--gz-color);
  font-family: var(--gz-font);
  font-weight: var(--gz-weight);
  font-size: var(--gz-label-fs);
  line-height: 1.45;
  letter-spacing: var(--gz-label-ls);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

figure { margin: 0; }

h1, h2, h3 { font-weight: inherit; margin: 0; }

/* --- 3. Grid / Bahnen ----------------------------------------------------- */

.gz-main {
  padding: var(--gz-content-top) var(--gz-margin) 12vh;
}

/* Die Content-Bahn: Spalte 3 bis 10 des 12er-Grids.
   Umgesetzt über Prozentbreite, damit sie sich in jeden Kontext einsetzen lässt. */
.gz-lane {
  display: grid;
  grid-template-columns: repeat(var(--gz-cols), minmax(0, 1fr));
  column-gap: var(--gz-gutter);
}

.gz-lane > * { grid-column: 3 / span 8; }

/* --- 4. Navbar ------------------------------------------------------------ */

.gz-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  padding: var(--gz-top) var(--gz-margin) 0;
  pointer-events: none;              /* Content darunter bleibt bedienbar */
}

.gz-nav__grid {
  display: grid;
  grid-template-columns: repeat(var(--gz-cols), minmax(0, 1fr));
  column-gap: var(--gz-gutter);
  align-items: baseline;
}

.gz-nav a,
.gz-nav button {
  pointer-events: auto;
  display: inline-block;
  font-family: var(--gz-font);
  font-weight: var(--gz-weight);
  font-size: var(--gz-label-fs);
  line-height: var(--gz-lh);
  letter-spacing: var(--gz-label-ls);
  color: var(--gz-color);
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .25s var(--gz-ease);
}

.gz-nav a:hover,
.gz-nav button:hover { opacity: .5; }

.gz-nav__home {
  grid-column: 1 / span 1;
  font-size: var(--gz-home-fs);
  letter-spacing: var(--gz-home-ls);
}

.gz-nav__cat {
  grid-column: 2 / span 1;
  text-transform: uppercase;
}

.gz-nav__menu {
  grid-column: 11 / span 1;
  justify-self: start;
}

.gz-nav__toggle { text-transform: uppercase; }

.gz-nav__list {
  list-style: none;
  margin: 1.1em 0 0;
  padding: 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .35s;
}

.gz-nav__menu.is-open .gz-nav__list {
  visibility: visible;
  transition: visibility 0s;
}

.gz-nav__list li {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity .3s var(--gz-ease), transform .3s var(--gz-ease);
}

.gz-nav__menu.is-open .gz-nav__list li {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.gz-nav__menu.is-open .gz-nav__list li:nth-child(1) { transition-delay: .02s; }
.gz-nav__menu.is-open .gz-nav__list li:nth-child(2) { transition-delay: .06s; }
.gz-nav__menu.is-open .gz-nav__list li:nth-child(3) { transition-delay: .10s; }
.gz-nav__menu.is-open .gz-nav__list li:nth-child(4) { transition-delay: .14s; }
.gz-nav__menu.is-open .gz-nav__list li:nth-child(5) { transition-delay: .18s; }
.gz-nav__menu.is-open .gz-nav__list li:nth-child(6) { transition-delay: .22s; }
.gz-nav__menu.is-open .gz-nav__list li:nth-child(7) { transition-delay: .26s; }
.gz-nav__menu.is-open .gz-nav__list li:nth-child(8) { transition-delay: .30s; }

.gz-nav__list a { padding: .16em 0; text-transform: uppercase; }
.gz-nav__list .is-current > a { opacity: .4; }

/* --- 5. Projekt-Raster ---------------------------------------------------- */

.gz-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gz-gutter);
  row-gap: var(--gz-row-gap);
}

.gz-card { display: block; }

.gz-card__media {
  overflow: hidden;
  background: #f2f2f2;
}

.gz-card__media img {
  width: 100%;
  transition: opacity .35s var(--gz-ease);
}

.gz-card:hover .gz-card__media img { opacity: .72; }

.gz-card__title {
  display: block;
  margin-top: .8em;
  text-transform: uppercase;
  letter-spacing: var(--gz-label-ls);
}

.gz-empty { color: var(--gz-dim); }

/* --- 6. Projekt-Detailseite ----------------------------------------------- */

.gz-project__title {
  font-size: var(--gz-home-fs);
  letter-spacing: var(--gz-home-ls);
  line-height: var(--gz-lh);
}

.gz-project__intro {
  margin-top: .6em;
  max-width: 46em;
  color: var(--gz-dim);
}

.gz-project__intro p { margin: 0; }

.gz-project__body { margin-top: var(--gz-row-gap); }

/* Bildstrecke aus dem Block-Editor */
.gz-project__body > * + * { margin-top: var(--gz-row-gap); }
.gz-project__body p { max-width: 46em; }
.gz-project__body figcaption {
  margin-top: .7em;
  color: var(--gz-dim);
  font-size: 12px;
}

/* Breite Blöcke dürfen aus der Bahn ausbrechen */
.gz-project__body .alignwide,
.gz-project__body .alignfull {
  grid-column: 1 / -1;
  width: 100%;
}

.gz-project__nav {
  margin-top: 14vh;
  text-transform: uppercase;
}

.gz-project__nav > * { grid-column: auto; }
.gz-project__nav-prev { grid-column: 3 / span 4; }
.gz-project__nav-next { grid-column: 7 / span 4; text-align: right; }

/* Pagination */
.pagination { margin-top: var(--gz-row-gap); text-transform: uppercase; }
.pagination .page-numbers { margin-right: 1em; }
.pagination .current { opacity: .4; }

/* --- 7. Seiten ------------------------------------------------------------ */

.gz-page__body { max-width: 46em; }
.gz-page__body > * + * { margin-top: 1.2em; }
.gz-page__body a { text-decoration: underline; text-underline-offset: .22em; }

/* --- 8. Mobile ------------------------------------------------------------ */

@media (max-width: 1023px) {
  .gz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gz-lane > * { grid-column: 2 / span 10; }
}

@media (max-width: 767px) {
  :root {
    --gz-margin:      18px;
    --gz-top:         18px;
    --gz-home-fs:     19px;
    --gz-label-fs:    12px;
    --gz-content-top: 90px;
    --gz-row-gap:     36px;
  }

  .gz-nav__home { grid-column: 1 / span 6; }
  .gz-nav__cat  { grid-column: 7 / span 3; }
  .gz-nav__menu { grid-column: 10 / span 3; justify-self: end; text-align: right; }

  .gz-lane > * { grid-column: 1 / span 12; }
  .gz-grid { grid-template-columns: minmax(0, 1fr); }

  .gz-project__nav-prev { grid-column: 1 / span 6; }
  .gz-project__nav-next { grid-column: 7 / span 6; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}