/**
 * Product Concerns Feature — Beresheet Dead Sea (Feature 02)
 * Wide screenshot presentation, supporting variations, contribution summary,
 * and the full-size screenshot viewer. Loaded only by work/beresheet-dead-sea.html.
 */

/* ==========================================================================
   Wide-figure support
   The case-study prose column is capped at the reading measure. Screenshots
   with small type need more room, so this page lets figures use the full
   grid column while text blocks keep the original measure.
   ========================================================================== */

.cs-prose-column--wide {
  max-width: none;
  container-type: inline-size;
}

.cs-prose-column--wide > .cs-section,
.cs-prose-column--wide > .cs-pagination {
  max-width: var(--prose-max);
}

.cs-feature-wide {
  width: 100%;
  width: min(100cqw, 1024px); /* Screenshots are 1024px wide; never upscale */
}

/* ==========================================================================
   Feature block
   ========================================================================== */

.cs-feature {
  margin-top: var(--space-16);
  margin-bottom: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border-subtle);
  scroll-margin-top: 120px;
}

/* Keep the figure label on one line when captions wrap */
.cs-feature .cs-caption-marker {
  flex-shrink: 0;
  white-space: nowrap;
}

.cs-feature-heading {
  font-size: var(--text-h3);
  color: var(--color-ink-primary);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.cs-prose-column .cs-feature-subhead {
  font-size: var(--text-body-lg);
  font-weight: var(--weight-medium);
  color: var(--color-ink-primary);
  margin-bottom: var(--space-6);
}

/* Contribution / objective summary (reuses the metadata matrix styling) */
.cs-metadata-matrix.cs-feature-meta {
  grid-template-columns: repeat(2, 1fr);
  margin: var(--space-8) 0 0;
}

/* Role breakdown */
.cs-feature-roles {
  margin-top: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cs-feature-roles-heading {
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-ink-muted);
  background-color: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.cs-feature-roles-row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
}

.cs-feature-roles-row + .cs-feature-roles-row {
  border-top: 1px solid var(--color-border-subtle);
}

.cs-feature-roles dt {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-primary);
}

.cs-feature-roles dd {
  font-size: var(--text-body-sm);
  color: var(--color-ink-secondary);
  line-height: var(--leading-normal);
}

/* ==========================================================================
   Screenshots
   ========================================================================== */

.cs-figure-frame--scroll {
  background-color: var(--color-surface);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

.cs-figure-frame--scroll img {
  width: 100%;
  height: auto;
}

.cs-shot-hint {
  display: none;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
}

.cs-shot-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* Touch target */
  margin-top: var(--space-1);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-ink);
}

.cs-shot-link:hover {
  color: var(--color-ink-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Supporting variations */
.cs-feature-variations-head {
  margin: var(--space-12) 0 var(--space-2);
}

.cs-feature-variations-title {
  font-size: var(--text-h4);
  color: var(--color-ink-primary);
  margin-bottom: var(--space-2);
}

.cs-prose-column .cs-feature-variations-note {
  font-size: var(--text-body);
  margin-bottom: 0;
}

.cs-feature-variations {
  display: grid;
  /* minmax(0, …) stops the wide screenshots from stretching the track on small screens */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4) var(--space-6);
}

.cs-feature-variations .cs-figure {
  min-width: 0;
  margin: var(--space-4) 0 0;
}

/* Side by side only when the column is wide enough for both to stay recognizable */
@container (min-width: 800px) {
  .cs-feature-variations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Full-size screenshot viewer (native <dialog>)
   The global reset zeroes margins, so centering is restated explicitly.
   ========================================================================== */

html.viewer-open {
  overflow: hidden;
}

.shot-viewer {
  margin: auto;
  padding: 0;
  width: min(1080px, calc(100vw - var(--space-8)));
  max-height: calc(100vh - var(--space-8));
  max-height: calc(100dvh - var(--space-8));
  background-color: var(--color-surface);
  color: var(--color-ink-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.shot-viewer[open] {
  display: flex;
  flex-direction: column;
}

.shot-viewer::backdrop {
  background-color: rgba(23, 23, 23, 0.72);
}

.shot-viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.shot-viewer-title {
  font-family: var(--font-mono);
  font-size: var(--text-mono-tag);
  color: var(--color-ink-secondary);
}

.shot-viewer-close {
  min-height: 44px;
  padding: 0 var(--space-4);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-primary);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.shot-viewer-close:hover {
  background-color: var(--color-surface-subtle);
}

.shot-viewer-body {
  overflow: auto;
  background-color: var(--color-surface);
}

.shot-viewer-body img {
  width: 1024px;
  max-width: none;
  height: auto;
  margin-inline: auto;
}

/* ==========================================================================
   Responsive adaptations
   ========================================================================== */

/* Keep screenshot type legible: when the column is narrower than this, pan
   sideways instead of shrinking the image further (stacked examples only). */
@container (max-width: 759px) {
  .cs-figure-frame--scroll img {
    min-width: 760px;
    max-width: none;
  }

  .cs-shot-hint {
    display: block;
  }
}

@media (max-width: 720px) {
  .cs-feature-roles-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
    padding: var(--space-4);
  }

  .cs-feature-roles-heading {
    padding: var(--space-4);
  }
}

@media (max-width: 640px) {
  .cs-metadata-matrix.cs-feature-meta {
    grid-template-columns: 1fr;
  }
}