/* Project detail page */

.p-hero {
  position: relative;
  min-height: 44vh;
  overflow: hidden;
  /* clear the fixed nav so the back-link never collides with it */
  padding: calc(var(--nav-h) + 40px) 0 64px;
}
.p-hero__bg {
  position: absolute;
  inset: 0;
}
.p-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 60%);
}
.p-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}
.p-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 26px;
  transition: color .25s var(--ease);
}
.p-back:hover { color: var(--text); }
.p-back svg { width: 16px; height: 16px; stroke: currentColor; }
.p-appicon {
  width: 78px;
  height: 78px;
  border-radius: 20px;
  display: block;
  margin-bottom: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 36px -16px rgba(0,0,0,0.8);
}
.p-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.p-meta .card__dot { width: 7px; height: 7px; }
.p-title {
  font-size: clamp(40px, 7vw, 78px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.p-tagline {
  margin-top: 16px;
  font-size: clamp(17px, 2.4vw, 22px);
  color: var(--text-dim);
  max-width: 620px;
}

.p-body {
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px 24px 40px;
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 64px;
}
.p-section-title {
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 18px;
}
.p-desc p { font-size: 19px; color: var(--text); line-height: 1.7; margin-bottom: 20px; }
.p-desc p:first-child { color: var(--text); }

/* margin-top offsets the card's own padding so its heading lines up with
   the bare "Overview" heading in the left column. */
.p-aside { align-self: start; position: sticky; top: 88px; margin-top: -26px; }
.p-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 26px;
  margin-bottom: 20px;
}
.p-tech { display: flex; flex-wrap: wrap; gap: 9px; }
.p-tech span {
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 980px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
/* Primary call-to-action in the hero (download badge or live link). */
.p-hero__cta { margin-top: 32px; }

/* Official App Store badge: shown at its true proportions (never stretched). */
.p-badge {
  display: inline-flex;
  border-radius: 8px;
  transition: opacity .25s var(--ease);
}
.p-badge img { height: 50px; width: auto; display: block; }
.p-badge:hover { opacity: .85; }
.p-badge:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Demo video */
.p-demo {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 24px 96px;
}
.p-demo__frame {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.85);
}
.p-demo__frame video {
  width: 100%;
  height: auto;
  display: block;
}
/* Portrait phone recordings: composited inside an iPhone 16 frame, perfectly aligned.
   Screen-cutout geometry measured from the frame PNG (1359x2736):
   left 6.62%, top 3.29%, width 86.75%, height 93.42%.
   Screen aspect matches the 1180x2556 recording, so no cropping is needed.
   The opaque bezel masks the video's square corners. */
.p-phone {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  aspect-ratio: 1359 / 2736;
  filter: drop-shadow(0 40px 90px rgba(0,0,0,0.6));
  container-type: inline-size;
}
.p-phone__screen {
  position: absolute;
  left: 6.62%;
  top: 3.29%;
  width: 86.75%;
  height: 93.42%;
  object-fit: cover;
  background: #000;
  z-index: 1;
  /* match the screen's rounded corners (13.66% of screen width, scaled to phone width) */
  border-radius: 11.85cqw;
}
.p-phone__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Gallery — responsive grid; phone screenshots sit App-Store style */
.p-gallery {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 24px 120px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  justify-items: center;
}
.p-shot {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.p-shot img { width: 100%; height: auto; display: block; }

/* Next project */
.p-next {
  border-top: 1px solid var(--border);
  max-width: var(--max);
  margin: 0 auto;
  padding: 60px 24px 100px;
  text-align: center;
}
.p-next a { font-size: clamp(24px, 4vw, 40px); font-weight: 600; letter-spacing: -0.02em; }
.p-next a:hover { color: var(--text-dim); }
.p-next .p-section-title { text-align: center; }

.p-missing { max-width: 680px; margin: 0 auto; padding: 200px 24px; text-align: center; }

/* -------------------------------------------------- STUDIO PAGE EXTRAS ---- */
/* Used only by studionapoli.html, which reuses the project-page chrome above. */
.cta-arrow { width: 15px; height: 15px; margin-left: 9px; }

/* Live-site preview, shown inside a minimal browser-window frame that links out. */
.sp-preview { max-width: var(--max); margin: 0 auto; padding: 16px 24px 8px; }
.sp-browser {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 40px 90px -42px rgba(0, 0, 0, 0.85);
  transition: transform .5s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease);
}
.sp-browser:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 54px 110px -42px rgba(0, 0, 0, 0.9);
}
.sp-browser__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 46px;
  padding: 0 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.sp-browser__dots { display: flex; gap: 7px; flex-shrink: 0; }
.sp-browser__dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.sp-browser__url {
  flex: 1;
  max-width: 360px;
  margin: 0 auto;
  padding: 6px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 980px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-browser__open { flex-shrink: 0; font-size: 13px; color: var(--text-dim); white-space: nowrap; transition: color .25s var(--ease); }
.sp-browser:hover .sp-browser__open { color: var(--text); }
.sp-browser__viewport {
  position: relative;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  background: #0b0b0c;
}
.sp-browser__viewport img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .6s var(--ease);
}
.sp-browser:hover .sp-browser__viewport img { transform: scale(1.02); }
.sp-preview__cap { text-align: center; margin-top: 16px; font-size: 14px; color: var(--text-mute); }

/* Bare aside groups (no card chrome) so the right column reads as light as the
   overview beside it. .sp-aside cancels .p-aside's card-padding offset above. */
.sp-aside { margin-top: 0; }
.sp-aside-group + .sp-aside-group {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}

.sp-facts { display: grid; gap: 16px; }
.sp-facts dt {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 4px;
}
.sp-facts dd { font-size: 15px; color: var(--text); line-height: 1.5; }

.sp-disc { display: grid; gap: 16px; }
.sp-disc h4 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.sp-disc p { font-size: 14px; color: var(--text-dim); line-height: 1.5; }

/* Sits inside the Overview column, beneath the narrative, so the left and right
   columns balance instead of leaving a void under the shorter one. */
.sp-work { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--border); }
.sp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sp-chips span {
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 980px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}

/* Quiet closing line. The hero and the preview frame already link out, so this
   stays deliberately light rather than a second large call-to-action. */
.sp-outro {
  max-width: var(--max);
  margin: 40px auto 0;
  padding: 32px 24px 100px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.sp-outro__meta {
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

@media (max-width: 860px) {
  .p-body { grid-template-columns: 1fr; gap: 40px; }
  .p-aside { position: static; margin-top: 0; }
}
@media (max-width: 520px) {
  .sp-browser__open { display: none; }
  .sp-browser__url { max-width: none; }
}