/* Public chrome must match WordPress after motion settles.
   Slide / scroll / tile-expand may run, but they must not leave the grid translated or wrapped. */

html:not(.aktuell-enter-left):not(.aktuell-enter-right):not(.aktuell-sliding)
  .page-content.slide-active:not(.slide-out-left):not(.slide-out-right) {
  transform: none !important;
  opacity: 1;
}

/* Leftover slide-in-* after a view-transition still hid the projects grid.
   Hold class keeps first-visit /projects gated until menu → hero → tiles. */
html:not(.aktuell-enter-left):not(.aktuell-enter-right):not(.aktuell-sliding):not(.aktuell-projects-hold)
  .page-content.slide-active.slide-in-left .project-item:not(.fade-in),
html:not(.aktuell-enter-left):not(.aktuell-enter-right):not(.aktuell-sliding):not(.aktuell-projects-hold)
  .page-content.slide-active.slide-in-right .project-item:not(.fade-in),
html:not(.aktuell-enter-left):not(.aktuell-enter-right):not(.aktuell-sliding):not(.aktuell-projects-hold)
  .page-content.slide-active.slide-in-left .hero-text,
html:not(.aktuell-enter-left):not(.aktuell-enter-right):not(.aktuell-sliding):not(.aktuell-projects-hold)
  .page-content.slide-active.slide-in-right .hero-text,
html:not(.aktuell-enter-left):not(.aktuell-enter-right):not(.aktuell-sliding):not(.aktuell-projects-hold)
  .page-content.slide-active.slide-in-left .projects-hero-line,
html:not(.aktuell-enter-left):not(.aktuell-enter-right):not(.aktuell-sliding):not(.aktuell-projects-hold)
  .page-content.slide-active.slide-in-right .projects-hero-line {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto;
}

html.aktuell-scroll-smooth,
html.aktuell-scroll-elastic,
html.lenis,
html.aktuell-scroll-smooth body,
html.aktuell-scroll-elastic body,
html.lenis body {
  height: auto !important;
}

.projects-grid:not(.list-view) {
  display: grid;
  --projects-cols: 3;
  grid-template-columns: repeat(var(--projects-cols, 3), minmax(0, 1fr));
  gap: 80px;
  width: 100%;
  max-width: none;
  padding-bottom: 200px;
  overflow: visible;
}

.projects-grid:not(.list-view) .project-item:not(.is-hero):not(.is-active) {
  grid-column: auto;
  width: 100%;
}

.projects-section {
  width: 100%;
  max-width: none;
}

.page-content:has(.inspiration-gallery) {
  padding-top: 0;
}

.page-article:has(.inspiration-gallery) {
  position: relative;
}

.inspiration-gallery {
  width: 100%;
  padding-top: 20vh;
  box-sizing: border-box;
}

@media (min-width: 801px) {
  .inspiration-gallery,
  .inspiration-gallery.inspiration-gallery--mosaic {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    align-items: start;
    justify-items: stretch;
    column-gap: 0;
    row-gap: 0;
    gap: 0;
    width: 100%;
    padding-top: 20vh;
  }

  .inspiration-item {
    width: auto;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
  }

  .inspiration-item:nth-child(10n + 1) {
    grid-column: 1 / 8;
    margin-top: 0;
    margin-bottom: 88px;
    padding: 0 28px 0 8px;
  }

  .inspiration-item:nth-child(10n + 2) {
    grid-column: 8 / 13;
    margin-top: 72px;
    margin-bottom: 52px;
    padding: 0 12px 0 36px;
  }

  .inspiration-item:nth-child(10n + 3) {
    grid-column: 2 / 10;
    margin-top: 16px;
    margin-bottom: 120px;
    padding: 0 20px 0 0;
  }

  .inspiration-item:nth-child(10n + 4) {
    grid-column: 6 / 13;
    margin-top: 64px;
    margin-bottom: 72px;
    padding: 0 8px 0 40px;
  }

  .inspiration-item:nth-child(10n + 5) {
    grid-column: 2 / 12;
    margin-top: 8px;
    margin-bottom: 140px;
    padding: 0 48px;
  }

  .inspiration-item:nth-child(10n + 6) {
    grid-column: 1 / 6;
    margin-top: 48px;
    margin-bottom: 64px;
    padding: 0 16px 0 24px;
  }

  .inspiration-item:nth-child(10n + 7) {
    grid-column: 6 / 13;
    margin-top: 28px;
    margin-bottom: 96px;
    padding: 0 24px 0 12px;
  }

  .inspiration-item:nth-child(10n + 8) {
    grid-column: 3 / 11;
    margin-top: 4px;
    margin-bottom: 112px;
    padding: 0 32px;
  }

  .inspiration-item:nth-child(10n + 9) {
    grid-column: 7 / 13;
    margin-top: 96px;
    margin-bottom: 48px;
    padding: 0 16px 0 8px;
  }

  .inspiration-item:nth-child(10n + 10) {
    grid-column: 1 / 7;
    margin-top: 20px;
    margin-bottom: 128px;
    padding: 0 12px 0 32px;
  }
}

/* Reciprocal chrome: default strip is off the top; .is-scroll-shown slides it in.
   Hidden chrome parks fully above the viewport plus a small overshoot. */
html {
  --aktuell-chrome-top: 40px;
  --aktuell-chrome-overshoot: 12px;
  --aktuell-chrome-hide: calc(-100% - var(--aktuell-chrome-top) - var(--aktuell-chrome-overshoot));
}

html body nav#mainNav.main-nav.is-scroll-ready,
html body #mainNav.is-scroll-ready {
  transition-property: transform, opacity !important;
  transition-duration: var(--aktuell-nav-ms, 320ms) !important;
  transition-timing-function: var(--aktuell-nav-ease, var(--aktuell-ease, cubic-bezier(0.65, 0, 0.35, 1))) !important;
}

html body nav#mainNav.main-nav.is-scroll-hidden:not(.first-visit):not(.fade-in),
html body nav#mainNav.main-nav.slide-to-top.is-scroll-hidden,
html body #mainNav.main-nav.is-scroll-hidden {
  transform: translate(-50%, var(--aktuell-chrome-hide, calc(-100% - 52px))) !important;
  pointer-events: none !important;
}

html body #inspirationStrip.inspiration-nav-strip,
html body .inspiration-nav-strip {
  top: 40px;
  transform: translate(-50%, var(--aktuell-chrome-hide, calc(-100% - 52px))) !important;
  pointer-events: none !important;
}

html body #inspirationStrip.is-scroll-ready,
html body .inspiration-nav-strip.is-scroll-ready,
html body #mainNav.is-scroll-ready ~ #inspirationStrip,
html body #mainNav.is-scroll-ready ~ .inspiration-nav-strip {
  transition-property: transform, opacity !important;
  transition-duration: var(--aktuell-nav-ms, 320ms) !important;
  transition-timing-function: var(--aktuell-strip-ease, var(--aktuell-ease, cubic-bezier(0.65, 0, 0.35, 1))) !important;
}

html body #inspirationStrip.inspiration-nav-strip.is-scroll-shown,
html body .inspiration-nav-strip.is-scroll-shown,
html body #mainNav.is-scroll-hidden ~ #inspirationStrip,
html body #mainNav.is-scroll-hidden ~ .inspiration-nav-strip {
  transform: translate(-50%, 0) !important;
  pointer-events: auto !important;
}

html body #inspirationStrip .thumbnail-container {
  overflow: hidden !important;
  scroll-behavior: auto !important;
  padding: 0 !important;
  touch-action: pan-x;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior-x: contain;
}

html body #inspirationStrip.is-scrubbing .thumbnail-container,
html body #inspirationStrip.is-scrubbing .thumbnail-track {
  cursor: grabbing;
}

html body .inspiration-image-container {
  text-align: left;
}

html body .inspiration-gallery .inspiration-image,
html body .inspiration-content .inspiration-image {
  margin-left: 0;
  margin-right: 0;
}

html body .inspiration-caption {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

html body .inspiration-caption p {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

html body #inspirationStrip .thumbnail-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
  gap: 2px;
  padding: 10px 15px;
  box-sizing: border-box;
  width: max-content;
  transform: translateX(0);
  transition-property: transform;
  transition-duration: var(--aktuell-strip-track-ms, 720ms);
  transition-timing-function: var(
    --aktuell-strip-track-ease,
    cubic-bezier(0.4, 0, 0.15, 1)
  );
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html body nav#mainNav.main-nav.is-scroll-ready,
  html body #inspirationStrip.is-scroll-ready,
  html body .inspiration-nav-strip.is-scroll-ready,
  html body #mainNav.is-scroll-ready ~ #inspirationStrip,
  html body #mainNav.is-scroll-ready ~ .inspiration-nav-strip {
    transition-duration: 0.01ms !important;
  }

  html body #inspirationStrip .thumbnail-track {
    transition-duration: 0.01ms;
  }
}

.aktuell-splash,
.aktuell-splash.has-media,
.aktuell-splash[hidden] {
  display: none !important;
}

.fullscreen-slideshow:not(.active),
#mainNav.first-visit ~ .fullscreen-slideshow,
#mainNav.fade-in ~ .fullscreen-slideshow {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 1024px) {
  .projects-grid:not(.list-view):not(.presentation-view) {
    grid-template-columns: repeat(var(--projects-cols, 3), minmax(0, 1fr));
    gap: 50px;
  }
}

@media (max-width: 800px) {
  .inspiration-gallery,
  .inspiration-gallery.inspiration-gallery--mosaic {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 0;
    padding-top: 20vh;
    overflow-x: hidden;
    max-width: 100%;
  }

  .inspiration-item {
    grid-column: auto;
    max-width: 100%;
    box-sizing: border-box;
  }

  .inspiration-item:nth-child(5n + 1) {
    width: 100%;
    margin: 0 0 40px;
    padding: 0;
  }

  .inspiration-item:nth-child(5n + 2) {
    width: 92%;
    margin: 0 auto 28px 0;
    padding: 0;
  }

  .inspiration-item:nth-child(5n + 3) {
    width: 88%;
    margin: 0 0 48px auto;
    padding: 0;
  }

  .inspiration-item:nth-child(5n + 4) {
    width: 96%;
    margin: 0 0 32px 2%;
    padding: 0;
  }

  .inspiration-item:nth-child(5n + 5) {
    width: 90%;
    margin: 0 0 44px 0;
    padding: 0;
  }
}

@media (max-width: 768px) {
  .projects-grid:not(.list-view):not(.presentation-view) {
    --projects-cols: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  /* Count pills stay next to labels — same chrome as desktop. */
  #imageCount,
  #projectCount,
  #fieldNotesCount,
  .main-nav #imageCount,
  .main-nav #projectCount,
  .main-nav #fieldNotesCount {
    display: inline-block !important;
    font-variant-numeric: tabular-nums;
  }

  /* Air between mobile nav labels; pills stay inline. */
  .main-nav .nav-links,
  ul.nav-links,
  .nav-links {
    gap: 12px !important;
  }

  /* Extra inline room so Projects / About clear the pill radii. */
  html body nav#mainNav.main-nav,
  html body #mainNav.main-nav {
    padding: 4px 14px !important;
  }

}

/* Tile chrome: no empty-frame border until the still/video is decoded. */
.project-thumbnail {
  border: none;
  outline: 1px solid transparent;
  outline-offset: -1px;
}
.project-thumbnail.thumb-media-ready {
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}
body.dark-background .project-thumbnail.thumb-media-ready,
body.dark-transition .project-thumbnail.thumb-media-ready {
  outline-color: rgba(255, 255, 255, 0.1);
}

/* Don't keep a GPU layer on every tile / slide — scroll memory. */
.projects-grid {
  transition-property: opacity;
}
.project-item {
  will-change: auto;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  transform-style: flat;
}
.project-thumbnail .slideshow-video,
.project-thumbnail .slideshow-images img,
.project-thumbnail .slideshow-images video {
  will-change: auto;
  transform: none;
}
.inspiration-item {
  will-change: auto;
}
.hero-line.reveal,
.projects-hero-line.reveal {
  will-change: auto;
}

/* Nav is a white pill on every page so it reads over light and dark content. */
html body nav#mainNav.main-nav,
html body #mainNav.main-nav {
  width: max-content;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  padding: 6px 10px;
  background: #fff;
  border-radius: 999px;
  border: none;
  box-shadow: none;
}

html body.dark-background nav#mainNav.main-nav,
html body.dark-transition nav#mainNav.main-nav,
html body.nav-on-dark nav#mainNav.main-nav,
html body.fn-nav-on-dark nav#mainNav.main-nav {
  background: #fff !important;
}

html body.dark-background nav#mainNav.main-nav a,
html body.dark-transition nav#mainNav.main-nav a,
html body.nav-on-dark nav#mainNav.main-nav a,
html body.fn-nav-on-dark nav#mainNav.main-nav a,
html body.dark-background nav#mainNav.main-nav .nav-links a.active,
html body.dark-background nav#mainNav.main-nav .nav-links a[aria-current="page"],
html body.nav-on-dark nav#mainNav.main-nav .nav-links a.active,
html body.nav-on-dark nav#mainNav.main-nav .nav-links a[aria-current="page"],
html body.fn-nav-on-dark nav#mainNav.main-nav .nav-links a.active,
html body.fn-nav-on-dark nav#mainNav.main-nav .nav-links a[aria-current="page"] {
  color: #000 !important;
}

html body nav#mainNav.main-nav .nav-links a.active :is(#projectCount, #imageCount, #fieldNotesCount),
html body nav#mainNav.main-nav .nav-links a[aria-current="page"] :is(#projectCount, #imageCount, #fieldNotesCount) {
  color: #fff !important;
  background: #000 !important;
  background-color: #000 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  opacity: 0.5 !important;
}

html body.dark-background nav#mainNav.main-nav #projectCount,
html body.dark-background nav#mainNav.main-nav #imageCount,
html body.dark-background nav#mainNav.main-nav #fieldNotesCount,
html body.nav-on-dark nav#mainNav.main-nav #projectCount,
html body.nav-on-dark nav#mainNav.main-nav #imageCount,
html body.nav-on-dark nav#mainNav.main-nav #fieldNotesCount,
html body.fn-nav-on-dark nav#mainNav.main-nav #projectCount,
html body.fn-nav-on-dark nav#mainNav.main-nav #imageCount,
html body.fn-nav-on-dark nav#mainNav.main-nav #fieldNotesCount {
  background: #000 !important;
  background-color: #000 !important;
  color: #fff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  opacity: 1;
}

html body.dark-background nav#mainNav.main-nav .nav-links a.active :is(#projectCount, #imageCount, #fieldNotesCount),
html body.dark-background nav#mainNav.main-nav .nav-links a[aria-current="page"] :is(#projectCount, #imageCount, #fieldNotesCount),
html body.nav-on-dark nav#mainNav.main-nav .nav-links a.active :is(#projectCount, #imageCount, #fieldNotesCount),
html body.nav-on-dark nav#mainNav.main-nav .nav-links a[aria-current="page"] :is(#projectCount, #imageCount, #fieldNotesCount),
html body.fn-nav-on-dark nav#mainNav.main-nav .nav-links a.active :is(#projectCount, #imageCount, #fieldNotesCount),
html body.fn-nav-on-dark nav#mainNav.main-nav .nav-links a[aria-current="page"] :is(#projectCount, #imageCount, #fieldNotesCount) {
  color: #fff !important;
  background: #000 !important;
  background-color: #000 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  opacity: 0.5 !important;
}

body.dark-background #projectCount,
body.dark-background #imageCount,
body.dark-background #fieldNotesCount,
body.nav-on-dark #projectCount,
body.nav-on-dark #imageCount,
body.nav-on-dark #fieldNotesCount,
body.fn-nav-on-dark #projectCount,
body.fn-nav-on-dark #imageCount,
body.fn-nav-on-dark #fieldNotesCount,
body.dark-background .main-nav #projectCount,
body.dark-background .main-nav #imageCount,
body.dark-background .main-nav #fieldNotesCount,
body.nav-on-dark .main-nav #projectCount,
body.nav-on-dark .main-nav #imageCount,
body.nav-on-dark .main-nav #fieldNotesCount,
body.fn-nav-on-dark .main-nav #projectCount,
body.fn-nav-on-dark .main-nav #imageCount,
body.fn-nav-on-dark .main-nav #fieldNotesCount {
  background: #000 !important;
  background-color: #000 !important;
  color: #fff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  opacity: 1;
}

body.dark-background .main-nav .nav-links a.active :is(#projectCount, #imageCount, #fieldNotesCount),
body.dark-background .main-nav .nav-links a[aria-current="page"] :is(#projectCount, #imageCount, #fieldNotesCount),
body.nav-on-dark .main-nav .nav-links a.active :is(#projectCount, #imageCount, #fieldNotesCount),
body.nav-on-dark .main-nav .nav-links a[aria-current="page"] :is(#projectCount, #imageCount, #fieldNotesCount),
body.fn-nav-on-dark .main-nav .nav-links a.active :is(#projectCount, #imageCount, #fieldNotesCount),
body.fn-nav-on-dark .main-nav .nav-links a[aria-current="page"] :is(#projectCount, #imageCount, #fieldNotesCount) {
  color: #fff !important;
  background: #000 !important;
  background-color: #000 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  opacity: 0.5 !important;
}

.projects-grid:not(.list-view):not(.presentation-view) .project-item > .project-hover-overlay {
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  background: transparent !important;
}

.projects-grid:not(.list-view):not(.presentation-view) .project-item.hovered .project-hover-overlay,
.projects-grid.thumbnail-hovered .project-item .project-hover-overlay {
  opacity: 0 !important;
  visibility: hidden !important;
  background: transparent !important;
}

.projects-grid:not(.list-view):not(.presentation-view) .project-item > .project-meta,
.projects-grid:not(.list-view):not(.presentation-view) .project-item .project-title,
.projects-grid:not(.list-view):not(.presentation-view) .project-item .project-category {
  position: relative;
  z-index: 3;
  background: transparent !important;
}

.projects-grid:not(.list-view):not(.presentation-view) .project-item.hovered {
  z-index: 1200;
  background: transparent !important;
  box-shadow: none;
}