/**
 * MAIN (WORK) PAGE — OVERRIDES
 * =============================
 * Loaded after main.07544d9b.css, so these rules win without editing that
 * hard-to-read hashed file.
 */

/* 1) "Info" button: yellow outline by default (yellow text), fills solid
   yellow with white text while open/clicked. Built directly in CSS as a
   true ellipse (fixed width/height + 50% border-radius) instead of the two
   image files, since those default to filled (not outline) and only swap
   to outline on click — the opposite of what's wanted here. */
.project__button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none;
  background-color: transparent;
  border: 1px solid #f4b809; /* adjust: outline color/thickness */
  border-radius: 50%; /* with a fixed width/height below, this curves into a true ellipse rather than a pill */
  width: 4.5em; /* adjust: ellipse width — widen/narrow the oval */
  height: 1.5em; /* matches the original button height */
  padding: 0; /* width now controls sizing, not padding */
  color: #f4b809;
  flex-shrink: 0; /* keeps the ellipse's shape even if the caption text is long */
  transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out, transform .15s ease;
}

.project__button:active,
.project__button--clicked {
  background-color: #f4b809; /* adjust: fill color */
  border-color: #f4b809;
  color: #fff;
  background-image: none;
}

/* The footer's grid used to stretch the button all the way to the right
   edge of the row. Switching to flex puts the button right next to the
   caption text instead, so it's no longer pinned to the corner. */
.project__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between; /* caption stays left, button pinned to the far right */
}

.project__footer > .project__caption {
  margin-right: 1em; /* adjust: minimum gap before the button, even if the caption runs long */
}

/* 2) Star icon: rotates while it moves side to side on desktop, and just
   rotates in place (no side-to-side) on mobile. */
@media (min-width: 768px) {
  nav.navbar > ul.main > li.star > img {
    animation: pingpong 3s cubic-bezier(0, .35, 1, .65) infinite alternate;
  }

  @keyframes pingpong {
    0% {
      left: calc(50% - 50px);
      transform: rotate(0deg);
    }
    to {
      left: calc(-50% + 50px);
      transform: rotate(360deg); /* adjust: more/fewer full turns per pass */
    }
  }
}

@media (max-width: 767px) {
  nav.navbar > ul.main > li.star > img {
    animation: spin 3s linear infinite;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}

/* 3) Body copy always black instead of yellow. */
.project__big-text,
.project__accordion-text {
  color: #000;
}

/* Line breaks typed into a project's description in projects-data.js
   (e.g. a blank line between paragraphs) now actually show up on the page,
   instead of being collapsed away like normal HTML text. */
.project__accordion-text p {
  white-space: pre-line;
	
}

/* 4) Year/credits: pinned to the bottom of the "Info" panel — which is the
   same size as the picture, so this lines up with the bottom of the image.
   Uses a flex column instead of sticky positioning: sticky only "sticks"
   once there's enough text to actually scroll, so short descriptions were
   leaving it sitting right after the text near the top instead. With flex,
   the paragraph (flex: 1) always fills the remaining space above it and
   scrolls internally if it's long, so the meta line lands in the same spot
   every time. */
.project__accordion-text {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* scrolling now happens on the paragraph itself, see below */
}

.project__accordion-text p {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0 0 .5em;
}

.project__meta {
  font-size: .9em;
  line-height: 1.1;   /* Zeilenabstand: höher = mehr Abstand zwischen Jahr, Studio usw. */
  padding-top: 0;     /* vorher .25em */
  color: #f4b809;
  background: #fff;
}

.project__meta dl {
  margin: 0;          /* entfernt den Standard-Abstand der Liste (1em oben und unten) */
}

.project__meta a {
  text-decoration: underline;
}

/* 5) Remove the drop shadow around the fullscreen image modal. */
.modal {
  box-shadow: none;
}

/* 7) Project title: always bold, doesn't change when Info is opened. */
.project__caption,
.project__caption.bold {
  font-family: gangstergrotesk;
  font-weight: 600;
  color: #000;
}

/* 8) **Bold words** in the description use the same face and weight as the
   open project title, so they are exactly as heavy as the headline. */
.project__accordion-text strong {
  font-family: gangstergrotesk;
  font-weight: 600;
  color: #000;
}

/* 9) Weiche obere Kante am Info-Feld (Jahr, Photos, ...): ein weißer Verlauf
   direkt über dem Feld blendet den Beschreibungstext sanft aus,
   statt ihn hart abzuschneiden. */
.project__meta {
  position: relative;
}

/* 9) Weiche obere Kante am Info-Feld (Jahr, Photos, ...): ein weißer Verlauf
   direkt über dem Feld blendet den Beschreibungstext sanft aus,
   statt ihn hart abzuschneiden. */
.project__meta {
  position: relative;
}

.project__meta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;        /* sitzt direkt über dem Info-Feld */
  height: 4em;       /* Länge des Verlaufs: größer = weicher */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none; /* damit er das Scrollen und Klicken im Text nicht stört */
}

/* Letzte Zeile bleibt lesbar: Platz unter dem Text, damit sie beim
   Ans-Ende-Scrollen über dem Verlauf (Block 9) landet. */
.project__accordion-text p {
  padding-bottom: 1.5em;  /* ungefähr so hoch wie der Verlauf */
}