/* ==========================================================================
   Right-side Details / Information panel.
   Owning feature: browse
   Load order is defined in Views/Shared/_CssIncludes.cshtml — do not reorder.
   ========================================================================== */

/* --- Right-side Details / Information panel (.fh-details-panel) ----------- */
/* Offcanvas details panel — 90vw keeps it on-screen on a 360px phone, while
   the upper bound grows on the large-display ladder so a 4K panel doesn't show
   a 360px sliver of metadata against a 3840px page. */
.fh-details-panel {
  width: clamp(min(360px, 90vw), 24vw, 30rem);
  max-width: 90vw;
}
@media (min-width: 1920px) and (max-width: 2559.98px) {
  .fh-details-panel {
    width: clamp(min(360px, 90vw), 24vw, 32rem);
  }
}
@media (min-width: 2560px) and (max-width: 3839.98px) {
  .fh-details-panel {
    width: clamp(min(360px, 90vw), 22vw, 36rem);
  }
}
@media (min-width: 3840px) {
  .fh-details-panel {
    width: clamp(min(360px, 90vw), 20vw, 40rem);
  }
}

.fh-details-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0 1.25rem;
  margin-bottom: 1rem;
  text-align: center;
  border-bottom: 1px solid var(--fh-border);
}

.fh-details-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Tracks the panel, which is itself fluid now. Square via aspect-ratio
     rather than a matched height, so the two stay in step. */
  width: clamp(6rem, 42%, 11rem);
  aspect-ratio: 1;
  height: auto;
  overflow: hidden;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-lg);
  box-shadow: var(--fh-shadow-sm);
}

.fh-details-thumb--icon {
  font-size: var(--fh-text-6xl);
}

.fh-details-hero-name {
  max-width: 100%;
  font-size: var(--fh-text-lg);
  font-weight: var(--fh-weight-semibold);
  color: var(--fh-text);
  word-break: break-word;
}

.fh-details-hero-sub {
  font-size: var(--fh-text-base);
  color: var(--fh-muted);
}

.fh-details-props {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fh-details-prop {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--fh-border);
}

.fh-details-prop:last-child {
  border-bottom: none;
}

.fh-details-prop dt {
  flex: 0 0 40%;
  margin: 0;
  font-size: var(--fh-text-base);
  font-weight: var(--fh-weight-medium);
  color: var(--fh-muted);
}

.fh-details-prop dd {
  flex: 1;
  margin: 0;
  font-size: var(--fh-text-base);
  color: var(--fh-text);
  text-align: right;
  word-break: break-word;
}

.fh-details-prop dd a {
  color: var(--fh-primary);
  text-decoration: none;
}

.fh-details-prop dd a:hover {
  text-decoration: underline;
}