/* ============================================================
   Project Detail Page
   ============================================================ */

/* ── Body override for detail page ───────────────────────── */

body:has(.detail) {
  background-color: rgba(29, 29, 29, 1); /* matches .detail's own background so the gaps this centering opens up above/below it show no seam */
  display: flex;
  flex-direction: column;
  justify-content: center; /* centers the header + .detail as a single block, preserving the spacing between them */
  min-height: 100vh;
}

html.detail-preload .detail__container {
  visibility: hidden;
}

/* ── Header override ──────────────────────────────────────── */

.header--detail {
  position: absolute;
  top: 3rem;
  margin-top: 0;
  background: transparent;
  max-width: 1440px;
  left: 50%;
  transform: translateX(-50%);
}

.header--detail .nav__link--about,
.header--detail .nav__link--skills {
  color: #1d1d1d;
}

.header--detail .nav__link--projects,
.header--detail .nav__link--contact {
  color: var(--color-text-light);
}

/* Below 900px the paper/black split composition gives way to the stacked mobile
   layout, so the dark-on-paper contrast for About/Skills no longer applies — all
   four links go white like Projects/Contact already are. */
@media (max-width: 900px) {
  .header--detail .nav__link--about,
  .header--detail .nav__link--skills {
    color: var(--color-text-light);
  }
}

/* Desktop only: the paper/black split sits close enough behind "Skills" /
   "Fähigkeiten" that the word can touch or be covered by the torn edge, so
   nudge the shared slot left to keep it clear regardless of language. Below
   901px the split composition is gone (see above), so no nudge is needed there. */
@media (min-width: 901px) {
  .header--detail .nav__link--skills {
    display: inline-block;
    transform: translateX(-1rem);
  }
}

/* ── Page wrapper ─────────────────────────────────────────── */

.detail {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: rgba(29, 29, 29, 1);
  overflow: hidden;
}

.detail__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 1440px; /* image is transparent past this point, so .detail's own background-color fills the rest; centering it here (matching .header--detail and .detail__container) keeps the paper/torn-edge composition aligned with the header's nav-link colors regardless of viewport width */
  height: 900px;
  margin: 0 auto;
  object-fit: fill;
  object-position: left top;
  pointer-events: none;
  z-index: 0;
}

/* Desktop: the paper/torn-edge image is applied straight to .detail (the
   outer, full-viewport section) instead of the inner .detail__bg image, so
   it always reaches the top/left/bottom edges of the viewport regardless of
   its height, while .detail__container stays exactly where it was. Mobile
   keeps using .detail__bg (rotated via transform below), since that's a
   different, non-stretched composition this change doesn't touch. */
@media (min-width: 901px) {
  .detail {
    background-image: url("../../assets/img/01_Background/Design Size Relation@3x/Note-book-paper.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: top left;
  }

  .detail__bg {
    display: none;
  }
}

/* Beyond 1440px, .detail__container stops growing with the viewport (it caps
   at max-width:1440px and centers instead), so its content's right edge now
   grows at 0.5px per viewport px. But background-size:100% 100% above still
   ties the torn edge to a fixed ~42.7% fraction of the *viewport*, which
   grows slower than that — so the gap between "edge" and "content" shrinks
   as the viewport widens past 1440px, and by ~1660–1900px the edge has
   already fallen behind the text. This isn't a one-off "ultra-wide" glitch
   at some arbitrary breakpoint, it's continuous from 1440px up — so instead
   of a threshold, grow the background at the same 0.5px-per-viewport-px rate
   the content uses from 1440px onward (117.01% / -245px solve that rate for
   this image's fixed 42.7% edge fraction), keeping pace at any width without
   touching .detail__container or anything inside it. */
@media (min-width: 1440px) {
  .detail {
    background-size: calc(117.01% - 245px) 100%;
  }
}

.detail__container {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  height: 900px; /* pins .detail__next's absolute bottom offset to a fixed box, not to content height (which varies as text reflows) */
  margin: 0 auto;
  padding-top: 3rem;
  padding-bottom: 6rem;
  padding-inline: clamp(3rem, 13.333vw - 4.5rem, 7.5rem); /* 7.5rem at 1440px viewport → 3rem at 900px, fluid in between */
  display: flex;
  flex-direction: column;
}

/* ── Back link ────────────────────────────────────────────── */

.detail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text);
  text-decoration: none;
  margin-top: 5rem;
  margin-left: -2.5rem;
  transition: color var(--transition-base);
  cursor: pointer;
}

.detail__back:hover {
  color: var(--color-cta-hover);
}

/* ── Two-column layout ────────────────────────────────────── */

.detail__layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2rem; /* 32px */
}

/* ── Left: text content ───────────────────────────────────── */

.detail__content {
  flex: 1 1 0;
  min-width: 0;
  min-height: 398px;
  padding-right: 4rem;
  display: flex;
  flex-direction: column;
}

.detail__title-wrap {
  display: inline-flex;
  flex-direction: column;
}

.detail__title {
  font-family: var(--font-base);
  font-size: clamp(3rem, 9vw, var(--font-size-section-heading));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-text-dark);
  margin: 0;
  margin-top: 3rem;
}

@keyframes detail-underline-sweep {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  10% {
    clip-path: inset(0 0% 0 0);
  }
  70% {
    clip-path: inset(0 0% 0 0);
  }
  80% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 100% 0 0);
  }
}

.detail__title-underline {
  display: block;
  width: auto;
  max-width: 100%;
  height: 1.25rem;
  object-fit: fill;
  animation: detail-underline-sweep 5s ease-out infinite;
  animation-delay: 3000ms;
}

.detail__section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.detail__title-wrap + .detail__section {
  margin-top: 3rem; /* Join → Description */
}

.detail__section + .detail__section {
  margin-top: 1.6rem; /* Description → Impl Details, Impl Details → Duration, Duration → Tags */
}

.detail__section-heading {
  font-family: var(--font-base);
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-dark);
  margin: 0;
}

.detail__description,
.detail__impl {
  font-family: var(--font-base);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: justify;
  color: var(--color-text);
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  padding-right: 3rem;
}

.detail__duration-label {
  display: flex;
  gap: 0.4rem;
  font-family: var(--font-base);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.detail__duration-label span:last-child {
  font-weight: 400;
}

.detail__section + .detail__tech {
  margin-top: 1.6rem;
  padding-left: 2rem;
}

/* ── Tech stack tags ──────────────────────────────────────── */

.detail__tech {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  overflow: hidden;
}

.detail__tech-tag {
  font-family: var(--font-base);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-dark);
}

.detail__tech-tag--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.detail__tech-icon--angular {
  width: 24px;
  height: 27px;
  opacity: 1;
  object-fit: contain;
  position: relative;
  top: -1.54px;
  left: -0.29px;
}

/* ── Action buttons ───────────────────────────────────────── */

.detail__actions {
  display: flex;
  gap: 2.3rem;
  flex-wrap: wrap;
  margin-top: 3rem;
  padding-right: 0.6rem;
  justify-content: flex-end;
}

.detail__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 1.5rem;
  border-radius: 6.25rem;
  font-family: var(--font-base);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: justify;
  color: var(--color-off-white);
  transform: translate(0, 0);
  transition:
    transform 90ms ease-in,
    background-color 80ms ease-in,
    box-shadow 80ms ease-in,
    color 80ms ease-in;
}

.detail__btn--github {
  color: var(--color-text-light);
  background-color: transparent;
  box-shadow:
    inset 0 0 0 1px var(--color-off-white),
    2px 3.5px 0 0 var(--color-off-white);
}

.detail__btn--github:hover {
  background-color: var(--color-cta-hover);
  box-shadow: inset 0 0 0 2px var(--color-off-white);
  transform: translate(0.25rem, 0.25rem);
}

.detail__btn--live {
  box-shadow:
    inset 0 0 0 1px var(--color-off-white),
    2px 3.5px 0 0 var(--color-off-white);
}

.detail__btn--live:hover {
  background-color: var(--color-cta-hover);
  color: var(--color-text-light);
  box-shadow: inset 0 0 0 2px var(--color-off-white);
  transform: translate(0.25rem, 0.25rem);
}

/* ── Right: project image ─────────────────────────────────── */

.detail__visual {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  padding: 3.4rem 0rem 0rem 0rem;
  overflow: visible;
}

.detail__image-wrap {
  position: relative;
  display: block;
  width: clamp(360px, 37vw + 26.7px, 560px); /* 560px at 1440px viewport → 360px at 900px, fluid in between */
  aspect-ratio: 560 / 398;
  height: auto;
}

.detail__image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1.3rem;
  object-fit: cover;
}

.detail__sticker {
  position: absolute;
  bottom: 8.8rem;
  right: -3rem;
  width: 120px;
  height: 120px;
  object-fit: contain;
  pointer-events: none;
}

/* ── Previous / Next Project navigation ──────────────────────────────── */

.detail__next {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem; /* same spacing as between "Next Project" and its own arrow */
  position: absolute;
  right: 4.5rem;
  top: 0; /* actual offset set inline by positionNextProjectLink() in project-detail.js, so it always sits exactly 3rem below .detail__actions */
  padding-top: 0;
  margin-right: 0;
}

.detail__next-btn,
.detail__prev-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-base);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: justify;
  color: var(--color-off-white);
  text-decoration: none;
  transition: color 80ms ease-in;
  cursor: pointer;
}

/* Same arrow image as Next Project, mirrored horizontally so it points the
   other way, and placed before the label instead of after. Recolored red by
   default (regardless of its original yellow), by flattening it to black
   then rebuilding the exact target color, var(--color-error) (#e53e3e). */
.detail__prev-btn img {
  transform: scaleX(-1);
  filter: brightness(0) saturate(100%) invert(29%) sepia(82%) saturate(538%) hue-rotate(311deg)
    brightness(116%) contrast(115%);
  transition:
    transform 90ms ease-in,
    filter 80ms ease-in;
}

.detail__next-btn:hover,
.detail__prev-btn:hover {
  color: var(--color-yellow);
}

.detail__prev-btn:hover img,
.detail__prev-btn:focus-visible img {
  /* the icon is mirrored via scaleX(-1), so the translateX below is applied
     in that flipped coordinate system — a positive value here is what moves
     the icon left on screen, not a negative one */
  transform: scaleX(-1) translateX(5px);
  /* recolors the icon to var(--color-success) (#38a169) the same way as the
     default red above */
  filter: brightness(0) saturate(100%) invert(47%) sepia(100%) saturate(164%) hue-rotate(95deg)
    brightness(90%) contrast(153%);
}

.detail__prev-btn:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 4px;
}

@media (max-width: 1150px) {
.detail__back {
       margin-left: 0rem;

  }

  .detail__sticker {
    display: none;
  }
}

/* Longer titles ("El Pollo Loco") wrap to 2 lines once the text column gets
   narrow — shrink smoothly instead of letting it break. */
@media (min-width: 901px) and (max-width: 1050px) {
  .detail__title {
    font-size: clamp(3.5rem, 5.369vw + 0.475rem, 4rem);
  }
}


/* ── Responsive (≤ 900px) ─────────────────────────────────── */

@media (max-width: 900px) {
  body:has(.detail) {
    margin-top: 0;
    /* Below 900px .detail no longer has a min-height:100vh floor (see below),
       so its content height can be shorter than the viewport. The header is
       position:absolute and never took part in this centering to begin with
       (only .detail did), so centering here just pushes .detail down and
       leaves an empty gap above the header — normal top alignment is what
       the mobile layout actually wants. */
    justify-content: flex-start;
  }

  .detail {
    height: auto;
    min-height: 0;
  }

  .detail::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 16vw;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    pointer-events: none;
    z-index: 0;
  }

  .detail__bg {
    left: 0;
    right: auto;
    margin: 0;
    max-width: none; /* the global img{max-width:100%} reset would otherwise cap this below 1440px */
    width: 1440px; /* fixed at the object-fit: cover scale the desktop image has at a 900px viewport, so it never rescales */
    height: 900px;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
  }

  .detail__container {
    height: auto;
    padding: 1.5rem clamp(2rem, 2.909vw + 1.364rem, 3rem) 2rem; /* 3rem at 900px viewport → 2rem at 350px, fluid in between */
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "layout layout"
      "back next";
    row-gap: 3.2rem;
  }

  .detail__layout {
    grid-area: layout;
  }

  .detail__back {
    grid-area: back;
    align-self: center;
    justify-self: start;
    margin-top: 0;
    margin-left: 0;
    color: var(--color-off-white);
  }

  .detail__layout {
    flex-direction: column;
    align-items: stretch;
    gap: 2.5rem;
  }

  .detail__content {
    flex: none;
    padding-right: 0;
    min-height: 0;
  }

  .detail__title {
    margin-top: 8rem;
  }

  .detail__visual {
    flex: none;
    padding-top: 0;
  }

  .detail__image-wrap {
    width: 100%;
    max-width: 560px;
    height: auto;
    aspect-ratio: 560 / 398;
    margin: 0 auto;
  }

  .detail__next {
    grid-area: next;
    align-self: center;
    justify-self: end;
    position: static;
    right: auto;
    bottom: auto;
    margin-right: 0;
    padding-top: 0;
  }

  .detail__btn--github svg {
    display: none;
  }

  .detail__section + .detail__tech {
    padding-left: 0;
  }

  .detail__description,
  .detail__impl {
    padding-right: 0;
  }
}

/* ── Narrow phones only (≤ 480px) ──────────────────────────── */

@media (max-width: 480px) {
  .detail__actions {
    gap: 1.75rem;
    padding-right: 0rem;
    margin-top: 2rem;
  }

  /* At >=481px the inherited 8rem margin-top clears the absolutely
     positioned .header--detail (top: 3rem + var(--nav-height)) with room
     to spare. Below 480px .detail__container's own padding-top shrinks
     (see the fluid clamp() above), so 8rem started clipping into the
     header — recompute the clearance from the header's actual height
     instead of guessing a fixed value, so "Join" never overlaps the logo. */
  .detail__title {
    margin-top: calc(var(--nav-height) + 2rem);
  }

  .detail__section-heading {
    font-size: var(--font-size-lg);
  }

  .detail__title-wrap + .detail__section {
    margin-top: 1.5rem; /* Join → Description */
  }

  .detail__tech {
    margin-left: 1rem;
    gap: 1rem;
  }
}

/* ── Very narrow phones (≤ 350px) ────────────────────────────── */

@media (max-width: 350px) {
  .detail__container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* "El Pollo Loco" is the longest title and starts wrapping to 2 lines
     around 320px — shrink smoothly instead of letting it break. */
  .detail__title {
    font-size: clamp(2.906rem, 5vw + 1.906rem, 3rem);
  }
}

/* Re-enable text selection for meaningful copy (title, section headings,
   description, implementation details, duration, tech-stack tags),
   overriding the global user-select: none from base.css. Back link, GitHub/
   Live Test buttons and Prev/Next project controls stay non-selectable. */
.detail__title,
.detail__section-heading,
.detail__description,
.detail__impl,
.detail__duration-label,
.detail__tech-tag {
  user-select: text;
  -webkit-user-select: text;
}