/* ===== Single Project (v5.7: cleaned, mobile gap fix, figure reset) ===== */

.project-wrap{
  padding:0 15px;
  max-width:none;
  color:var(--fg);
}

/* HERO – wie Frontpage: mini Luft unter Header */
.p-hero{ margin-top:15px !important; margin-bottom:var(--hero-gap); }
.p-hero-media{ position:relative; width:100%; }
.p-hero-el{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }

/* TITELBLOCK */
.p-title-block{
  margin:0 auto var(--project-gap);
  width:100%;
  text-align:center;
  padding:0 10vw;
  overflow:hidden;
}
.p-title-line{
  margin:0 0 clamp(16px,3vw,28px);
  font-weight:400;
  letter-spacing:.06em;
  line-height:.9;
  text-transform:uppercase;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
}

/* RANDOM TEXT */
.p-random-text{
  position:relative;
  margin-bottom:var(--project-gap);
  min-height:40vh;
}
.p-random-text .text-box{
  position:absolute;
  top:35%;
  right:12%;
  max-width:600px;
}
.p-random-text p{
  font-size:clamp(13px,1.6vw,18px);
  line-height:1.7;
  letter-spacing:.05em;
  text-transform:uppercase;
}

/* GALLERY — gleiche Seitenabstände wie Frontpage, aber mobile = 15px */
.p-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;                          /* Abstand zwischen Items: 15px */
  margin-bottom:var(--project-gap);
  padding-left:15px;                  /* Basis: 15px links/rechts */
  padding-right:15px;
}
/* WICHTIG: Browser-Default-Margins entfernen (sonst ~30px Effekt) */
.p-gallery figure,
.p-block{ margin:0; }

.p-block{ grid-column:span 1; }
.p-block.is-wide{ grid-column:1 / -1; }
.p-media{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  aspect-ratio:4/3;
}

/* HEADER: 15px padding fix */
.site-header .bar{ padding:0 15px !important; }

/* FOOTER kompakt */
.footer{
  margin-top:40px;
  padding:16px 15px 16px;
  text-align:left;
}
.footer .wrap{ margin:0; width:100%; max-width:none; }
.footer .wordmark{ font-size:var(--h1-size); text-transform:uppercase; margin-bottom:10px; }
.footer .wordmark .ast{ color:var(--accent); }

/* PROJECT PAGER (nah am Footer) */
.p-pager{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 15px 30px;
  margin-top:60px;
}
.pager-link{
  text-transform:uppercase;
  letter-spacing:.08em;
  text-decoration:none;
  color:var(--fg);
  font-size:clamp(12px,1.4vw,16px);
}
.pager-link:hover{ color:var(--accent); }

/* ===== RESPONSIVE ===== */

/* sehr grosse Screens: wie Frontpage mehr Luft */
@media (min-width:1440px){
  .p-gallery{ padding-left:6vw; padding-right:6vw; }
}

/* mittelgross – etwas Luft, aber nicht zu viel */
@media (max-width:1200px){
  .p-gallery{ padding-left:8vw; padding-right:8vw; }
}

/* mobile / tablet Tweaks */
@media (max-width:900px){
  /* Hero -> Titel: minimal mehr Abstand, wie gewünscht */
  .p-hero{ margin-bottom:clamp(40px,10vw,90px); }

  /* Titel sicher nicht abgeschnitten + etwas enger */
  .p-title-block{ overflow:visible; padding:0 6vw; margin-bottom:clamp(40px,10vw,80px); }
  .p-title-line{ white-space:nowrap; overflow:visible; text-overflow:clip; letter-spacing:.05em; }

  /* Text -> Bilder deutlich kürzer */
  .p-random-text{ margin-bottom:clamp(28px,7vw,56px); }

  /* Galerie-Seitenränder moderat */
  .p-gallery{ padding-left:5vw; padding-right:5vw; margin-bottom:clamp(40px,9vw,100px); }

  .footer{ margin-top:30px; }
  .p-pager{ padding:16px 15px 24px; }
}

/* sehr klein */
@media (max-width:600px){
  /* Hero -> Titel: fein kompakter */
  .p-hero{ margin-bottom:clamp(38px,12vw,84px); }

  .p-title-block{ padding:0 5vw; margin-bottom:clamp(28px,8vw,56px); }

  /* Galerie EINSPALTIG, KEIN doppelter Rahmen: nur 15px von der Seite */
  .p-gallery{
    grid-template-columns:1fr;
    padding-left:15px !important;
    padding-right:15px !important;
    gap:15px; /* sicherstellen */
    margin-bottom:clamp(36px,8vw,72px);
  }

  .footer{ margin-top:25px; }
  .p-pager{ padding:12px 15px 18px; }
}