/**
 * Projekt detail — DT_Projekt Detail / MO_Projekte Detail
 */

.page-projekt .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-projekt {
  color: var(--color-cd);
  overflow-x: clip;
  padding-bottom: 5rem;
}

@media (min-width: 1024px) {
  .page-projekt {
    padding-bottom: 6rem;
  }
}

/* ——— Above the fold: hero + tags (header overlays hero) ——— */
/* Figma: MO Startframe 420×774 + tags @816; DT 1440×912 + tags @952.
   Fixed aspect-ratio fills ~viewport and pushes tags below the fold —
   flex column keeps meta in the first screen on all viewports. */

.page-projekt__above-fold {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  margin-bottom: 2.75rem; /* gap before gallery (was meta margin-bottom) */
}

@media (min-width: 1024px) {
  .page-projekt__above-fold {
    margin-bottom: 5rem; /* ~80px before gallery */
  }
}

.page-projekt__hero {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: clip;
  background: var(--color-gray-light);
}

.page-projekt__hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.page-projekt__meta-wrap {
  flex: 0 0 auto;
}

/* ——— Meta: tags + location ——— */
/* Mobile: stack; Ort indented to match .btn horizontal padding (tag label inset).
   Desktop: tags left, Ort right (DT_Projekt Detail). */

.page-projekt__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: 2.625rem; /* ~42px under hero (MO 816−774) */
  padding-bottom: 1.5rem; /* keep tags off the viewport edge */
}

@media (min-width: 1024px) {
  .page-projekt__meta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2.5rem; /* 40px — Figma 952−912 */
    padding-bottom: 2rem;
  }
}

.page-projekt__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem; /* 20px */
  align-self: flex-start;
  max-width: 100%;
}

.page-projekt__location {
  margin: 0;
  margin-inline: 0;
  padding-left: 14px; /* match .btn padding-inline so Ort aligns with tag label text */
  color: var(--color-cd);
  text-align: left;
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
}

@media (min-width: 1024px) {
  .page-projekt__location {
    padding-left: 0;
    text-align: right;
    margin-left: auto;
    align-self: auto;
    width: auto;
  }
}

/* ——— Gallery ——— */
/* Desktop: sit on the site 12-col grid (was a private 6-col track). */

.page-projekt__gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem; /* ~24px stacked on mobile */
}

@media (min-width: 1024px) {
  .page-projekt__gallery {
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gutter);
  }

  .page-projekt__gallery-item:nth-child(-n + 2) {
    grid-column: span 6; /* half row — was span 3 of a 6-col track */
    aspect-ratio: 611 / 697;
  }

  .page-projekt__gallery-item:nth-child(n + 3) {
    grid-column: span 4; /* third of row — was span 2 of a 6-col track */
    aspect-ratio: 400 / 456;
  }
}

.page-projekt__gallery-item {
  margin: 0;
  aspect-ratio: 347 / 396;
  border-radius: 1.875rem;
  overflow: clip;
  background: var(--color-gray-light);
  min-width: 0;
}

.page-projekt__gallery-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ——— Related slider ——— */
/* Mobile (6-col): arrow col 1 | 4-col card (cols 2–5) | arrow col 6.
   Desktop (12-col): centered 8-col group —
   arrow col 3 | 3×2-col slides (cols 4–9) | arrow col 10;
   cols 1–2 and 11–12 are equal side margins. */

.page-projekt__related {
  margin-top: 4rem;
  --projekte-grid-width: min(
    calc(100vw - (var(--page-margin) * 2)),
    var(--container-max)
  );
  --projekte-col: calc(
    (var(--projekte-grid-width) - ((var(--grid-columns) - 1) * var(--grid-gutter))) /
      var(--grid-columns)
  );
  /* Mobile: 4 of 6 cols */
  --projekte-card: calc((var(--projekte-col) * 4) + (var(--grid-gutter) * 3));
  --projekte-track: var(--projekte-card);
}

@media (min-width: 1024px) {
  .page-projekt__related {
    margin-top: 10rem; /* generous gap under gallery like Figma */
    /* Desktop: 2 of 12 cols per card; track = 6 cols = 3 cards */
    --projekte-card: calc((var(--projekte-col) * 2) + (var(--grid-gutter) * 1));
    --projekte-track: calc((var(--projekte-col) * 6) + (var(--grid-gutter) * 5));
  }
}

.page-projekt__related-inner {
  /* col1 + gutter + (4col+3gutter) + gutter + col6 = full 6-col grid */
  display: grid;
  grid-template-columns: var(--projekte-col) var(--projekte-track) var(--projekte-col);
  column-gap: var(--grid-gutter);
  align-items: center;
  width: var(--projekte-grid-width);
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .page-projekt__related-inner {
    /* 8-col group (arrow | 6-col track | arrow) centered on the 12-col page */
    grid-template-columns: var(--projekte-col) var(--projekte-track) var(--projekte-col);
    width: calc((var(--projekte-col) * 8) + (var(--grid-gutter) * 7));
    max-width: 100%;
  }
}

.page-projekt__related-prev,
.page-projekt__related-next {
  justify-self: center;
}

.page-projekt__related-scroller {
  min-width: 0;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.page-projekt__related-scroller::-webkit-scrollbar {
  display: none;
}

.page-projekt__related-scroller.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.page-projekt__related-track {
  position: relative; /* offsetParent for cards if JS ever uses offsetLeft */
  display: flex;
  gap: var(--grid-gutter);
  width: max-content;
}

.page-projekt__related-card {
  display: block;
  width: var(--projekte-card);
  flex: 0 0 var(--projekte-card);
  color: var(--color-cd);
  text-decoration: none;
  text-align: center;
}

.page-projekt__related-card:hover,
.page-projekt__related-card:focus,
.page-projekt__related-card:focus-visible {
  text-decoration: none;
}

.page-projekt__related-media {
  aspect-ratio: 190 / 216;
  border-radius: 1.875rem;
  overflow: clip;
  background: var(--color-gray-light);
  margin-bottom: 0.5rem;
}

.page-projekt__related-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-projekt__related-title {
  margin: 0;
  padding-inline: 1.875rem; /* match media border-radius inset */
  color: var(--color-cd);
  text-decoration: none;
  box-sizing: border-box;
}

.page-projekt__related-card:hover .page-projekt__related-title,
.page-projekt__related-card:focus .page-projekt__related-title,
.page-projekt__related-card:focus-visible .page-projekt__related-title {
  text-decoration: none;
}