/* Detail-page alignment and touch-friendly controls. */

.detail-header.detail-header,
.detail-gallery.detail-gallery,
.detail-video.detail-video,
.detail-nav.detail-nav {
  width:100%;
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}

.detail-header.detail-header {
  padding-top:clamp(32px, 5vw, 58px);
}

.detail-header .description {
  margin:0;
}

.detail-gallery.detail-gallery {
  align-items:start;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.detail-shot {
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
}

.detail-shot figcaption {
  flex:1;
}

.detail-shot .phone-frame {
  width:min(100%, clamp(250px, 30vw, 350px));
  margin-left:auto;
  margin-right:auto;
}

.detail-video.detail-video {
  min-width:0;
}

.detail-nav.detail-nav {
  align-items:stretch;
}

.detail-nav a {
  min-width:0;
  padding:14px 16px;
  border:1px solid var(--card-line);
  border-radius:12px;
  background:var(--panel);
  transition:color .18s ease, border-color .18s ease, transform .18s ease;
}

.detail-nav a:hover {
  border-color:var(--gold);
  transform:translateY(-2px);
}

@media (max-width:720px) {
  .detail-header.detail-header { padding-bottom:10px; }
  .detail-header h1 { font-size:clamp(1.8rem, 8vw, 2.4rem); }
  .detail-header .tagline { line-height:1.45; }
  .detail-gallery.detail-gallery {
    grid-template-columns:1fr;
    gap:14px;
    padding-top:14px;
    padding-bottom:48px;
  }
  .detail-shot { padding:11px 11px 15px; border-radius:14px; }
  .detail-shot .phone-frame {
    width:100%;
    max-width:360px;
  }
  .detail-shot figcaption { font-size:.82rem; }
  .detail-nav.detail-nav { padding-bottom:58px; gap:10px; }
  .detail-nav a { max-width:none; flex:1 1 0; padding:12px; font-size:.82rem; }
  .detail-nav .dn-label { font-size:.62rem; }
}

@media (max-width:480px) {
  .detail-gallery.detail-gallery { grid-template-columns:1fr; }
  .detail-shot .phone-frame { max-height:none; }
  .detail-nav.detail-nav { flex-direction:column; }
  .detail-nav a { width:100%; }
  .detail-nav .dn-next { text-align:left; align-items:flex-start; }
}