/* =============================================================================
   SURFACE: Segment detail (HTMX dialog over the matrix + full deep-link page).
   Scoped under .segdetail (shared body) — reuses FOUNDATION classes from
   components.css (.media, .deco-frame, .section-head, .rule-gold, .prose,
   .portrait, .card, .badge*, .progress, .grid). Tokens only; no hardcoded
   colors/px outside the scale. New animation (none here) would need a
   prefers-reduced-motion: no-preference wrapper.
   ============================================================================= */

.segdetail { display: flex; flex-direction: column; gap: var(--space-6); }

/* ---- (4) Unified metadata band ----------------------------------------- */
.segdetail__band {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
.segdetail__band-dur {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-left: auto; color: var(--ink-muted); font-size: var(--text-sm);
}

/* ---- (2/3) Hero: framed preview well ----------------------------------- */
.segdetail__hero { display: flex; flex-direction: column; gap: var(--space-3); }

/* .media gives 16/9 + poster fallback beneath; deco-frame adds gold corners. */
.segdetail__well {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.segdetail__video,
.segdetail__iframe {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  background-color: transparent; background-position: center; background-size: cover;
  border: 0;
}
.segdetail__preview-placeholder {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-6); text-align: center;
  color: var(--ink-strong);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-0) 18%, transparent), color-mix(in srgb, var(--surface-0) 86%, transparent)),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
}
.segdetail__preview-placeholder[hidden] { display: none; }
.segdetail__preview-placeholder .icon-lg { color: var(--color-primary); }
.segdetail__preview-placeholder strong {
  font-family: var(--font-heading); font-size: var(--text-lg); line-height: var(--leading-tight);
}
.segdetail__preview-placeholder span {
  max-width: 34ch; color: var(--ink-muted); font-size: var(--text-sm); line-height: var(--leading-snug);
}
.segdetail__hero.is-preview-ready .segdetail__preview-placeholder { display: none; }
.segdetail__hero:not(.is-preview-ready) .segdetail__video,
.segdetail__hero:not(.is-preview-ready) .segdetail__iframe,
.segdetail__hero.is-preview-unavailable .segdetail__video {
  opacity: 0; pointer-events: none;
}
.segdetail__hero:not(.is-preview-ready) .progress--preview,
.segdetail__hero:not(.is-preview-ready) .progress__meta,
.segdetail__hero.is-preview-unavailable .progress--preview,
.segdetail__hero.is-preview-unavailable .progress__meta {
  display: none;
}
.segdetail__hero:not(.is-preview-ready) .media__badge { display: none; }
.segdetail__hero:not(.is-preview-ready) .segdetail__preview-audio-notice { display: none; }
.segdetail__hero:not(.is-preview-ready) .media-poster__mono { display: none; }
/* Until a preview frame/poster paints, let the gold media-poster show through
   instead of a bare black box (the well keeps card-grade fidelity). */
.segdetail__well .media-poster { z-index: 0; }
/* Gate revealed by dc-preview when the 2:00 limit hits. */
.segdetail__gate {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); padding: var(--space-6); text-align: center;
  color: #fff; background: rgba(8, 8, 11, 0.84);
}
.segdetail__gate .icon-lg { color: var(--color-primary); }
.segdetail__gate strong { font-family: var(--font-heading); font-size: var(--text-lg); }
.segdetail__gate-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-3);
}

/* ---- (2) Conversion ---------------------------------------------------- */
.segdetail__cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
}
.segdetail__cta-note { flex-basis: 100%; margin: 0; }

/* Tighter section heads inside the detail body (foundation .section-head is
   page-scale; here heads sit close to their content). */
.segdetail .section-head--tight { margin-bottom: var(--space-3); }
.segdetail .section-head--tight h2 { font-size: var(--text-xl); margin-bottom: var(--space-1); }

.segdetail__rule { margin: var(--space-2) 0; }

/* ---- (1) Two-column body ----------------------------------------------- */
.segdetail__cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  gap: var(--space-8); align-items: start;
}
.segdetail__main .segdetail__sect + .segdetail__rule { margin-top: var(--space-2); }

/* ---- Sessions ---------------------------------------------------------- */
.segdetail__sessions { list-style: none; margin: 0; padding: 0; }
.segdetail__session {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px dashed var(--border);
}
.segdetail__session-when { display: inline-flex; align-items: center; gap: var(--space-2); }
.segdetail__session-when .icon { color: var(--color-primary); flex: none; }
.segdetail__session-note { margin-top: var(--space-3); }

/* ---- (3) Teacher card + (1) sunken fact panel -------------------------- */
.segdetail__aside { position: sticky; top: var(--space-6); }
/* Clearer separation between the teacher card and the facts panel (the default
   .stack 16px read as cramped where both are heavy blocks). */
.segdetail__aside.stack > * + * { margin-top: var(--space-6); }
.segdetail__teacher { padding: var(--space-5); }
.segdetail__teacher-item + .segdetail__teacher-item {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.segdetail__teacher-head { display: flex; align-items: center; gap: var(--space-3); }
.segdetail__teacher .portrait--sm { width: 48px; height: 48px; }
.segdetail__teacher-bio { margin: var(--space-3) 0 0; }
.segdetail__teacher-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-top: var(--space-3); color: var(--color-primary-ink); text-decoration: none;
}
.segdetail__teacher-link:hover { text-decoration: underline; }

/* Sunken inset panel — the recessed --surface-0 fill reads as "carved in"
   against the lighter page/card around it (no inset-shadow token in the scale). */
.segdetail__facts {
  margin: 0; padding: var(--space-3) var(--space-5);
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Key/value row. A short value sits inline at the right (space-between); a value
   too long to share the narrow sidebar row (e.g. "Kunskapskontroll" + "3 moment
   ingår") wraps to its own line LEFT-aligned under the label, reading as a clean
   stacked pair rather than a detached right-floating fragment. */
.segdetail__fact {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) 0;
}
.segdetail__fact + .segdetail__fact { border-top: 1px solid var(--border); }
.segdetail__fact dt {
  display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0;
  font-size: var(--text-sm); color: var(--ink-muted);
}
.segdetail__fact dt .icon { color: var(--color-primary); flex: none; }
.segdetail__fact dd {
  margin: 0; font-weight: var(--font-semibold); color: var(--ink-strong);
}

/* ---- (4) Related mini cards -------------------------------------------- */
/* Auto-fit so the cards stretch to fill the row width (no dead column when only
   a couple relate). min-width:0 lets them shrink below the base card minimum. */
.segdetail__related { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.segdetail__related .segment-card { text-decoration: none; color: inherit; min-width: 0; }
.segdetail__related .segment-card__body { padding: var(--space-4); gap: var(--space-2); }
.segdetail__related .segment-card__title { font-size: var(--text-base); }
.segdetail__related .segment-card__meta .icon { color: var(--color-primary); flex: none; }

/* ---- Full-page back link (no left-arrow glyph in sprite → flip i-arrow-right) */
.segdetail__back { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.segdetail__back:hover { text-decoration: underline; }
.segdetail__back .icon { transform: scaleX(-1); flex: none; }

/* ---- Responsive: collapse to single column ----------------------------- */
@media (max-width: 48rem) {
  .segdetail__cols { grid-template-columns: minmax(0, 1fr); }
  .segdetail__aside { position: static; }
}

@media (max-width: 30rem) {
  .segdetail__gate { gap: var(--space-1); padding: var(--space-3); }
  .segdetail__gate strong { font-size: var(--text-base); max-width: 14rem; }
  .segdetail__gate-actions {
    flex-wrap: nowrap; width: auto; max-width: calc(100% - var(--space-2));
    gap: var(--space-2);
  }
  .segdetail__gate-actions .btn { min-height: 40px; justify-content: center; }
  .segdetail__gate-actions button.btn {
    flex: 0 0 44px; width: 44px; padding-inline: 0;
  }
  .segdetail__gate-actions button.btn span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .segdetail__gate-actions a.btn {
    flex: 1 1 auto; min-width: 0; padding-inline: var(--space-3);
  }
}