/* ==========================================================================
   DETAIL PAGE — individual treatment/article view. Big framed hero image
   (same rounded-frame language as the homepage content block), generous
   editorial type, a photo gallery feeding the shared lightbox, and a
   share bar built for social-campaign links.
   ========================================================================== */

.detail-page {
  background: var(--color-white);
  /* Top padding is tied to the floating header's real height (not a flat
     spacing value) so the eyebrow/title never sit under it — see fixed
     .site-header in header.css. */
  padding: calc(var(--header-height) + var(--sp-4)) 0 var(--sp-8);
  min-height: auto;
}

.detail-page--not-found {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.detail-page--not-found .container { text-align: center; }

.detail-page .container { max-width: 860px; }

.detail-page__eyebrow { color: var(--color-accent); text-align: center; }

.detail-page__title {
  font-size: var(--fs-hero);
  text-align: center;
  margin-top: var(--sp-2);
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

.detail-page__meta {
  text-align: center;
  color: var(--color-ink-soft);
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
}

.detail-page__hero-image {
  margin-top: var(--sp-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.detail-page__hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.detail-page__body {
  margin-top: var(--sp-6);
  font-size: 1.05rem;
  line-height: var(--lh-normal);
  color: var(--color-ink);
}

.detail-page__body p { margin-top: var(--sp-4); }
.detail-page__body p:first-child { margin-top: 0; }

.detail-page__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}

.detail-page__gallery-item {
  border: none;
  padding: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  transition: transform var(--dur-fast) var(--ease-out-soft);
}

.detail-page__gallery-item:hover { transform: translateY(-3px); }
.detail-page__gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.detail-page__share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-border);
}

.detail-page__share-label {
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: var(--sp-2);
}

.detail-page__share-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  color: var(--color-ink);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-soft);
  border: none;
  cursor: pointer;
}

.detail-page__share-btn:hover { background: var(--color-accent); color: var(--color-white); transform: translateY(-2px); }
.detail-page__share-btn svg { width: 18px; height: 18px; }
.detail-page__share-btn { position: relative; }

.detail-page__share-copied {
  position: absolute;
  bottom: -1.4rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: var(--color-accent);
  white-space: nowrap;
}

.detail-page__cta { margin-top: var(--sp-6); text-align: center; }

@media (max-width: 720px) {
  .detail-page__title { font-size: var(--fs-h1); }
}