/*
 * The single-session detail page (Story 71) -- styled to read as the
 * reference design's movie-info popup, even though it's a real page rather
 * than a JS overlay (see SessionPageController's own doc comment on why:
 * this app has no client-side script to drive a true modal). Every color/
 * type/spacing value is a var() from tokens.css, same rule as every other
 * component.
 */

/* One of these exists per visible session, hidden until its own
   #session-{id} fragment is the current URL target -- see
   FestivalPageController's own doc comment on why a film opens as an
   in-page overlay rather than a real page navigation. The backdrop is a
   full-bleed link back to a bare "#" (clearing the fragment un-targets
   every overlay at once, since only one can ever match); the panel itself
   stops that click reaching the backdrop via its own stacking, so tapping
   inside the sheet doesn't close it.

   The #session-{id} target itself is a zero-size marker as the very first
   thing inside the scrollable panel, not this outer wrapper -- so that
   jumping to it (e.g. from another screening's "Also showing" link) makes
   the browser scroll that panel back to its own top as part of the
   fragment navigation, rather than leaving it wherever it last was. The
   wrapper then shows itself via :has() on that marker's :target state. */
.session-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
}

.session-overlay:has(.session-overlay__anchor:target) {
  display: block;
}

.session-overlay__anchor {
  display: block;
  height: 0;
}

.session-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 15, 0.55);
}

.session-overlay__panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 35rem;
  height: calc(100% - 28px);
  background: var(--color-surface);
  border-top: var(--border-width-rule) solid var(--color-border);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--space-4);
}

.session-detail__header {
  position: sticky;
  top: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-background);
  border-bottom: var(--border-width-rule) solid var(--color-border);
  margin: 0 calc(-1 * var(--space-4));
  padding: var(--space-3) var(--space-4);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.session-detail__close {
  flex: none;
  font-size: 1.125rem;
  font-weight: var(--font-weight-black);
  color: var(--color-text);
  text-decoration: none;
  text-transform: none;
}

.session-detail__hero {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.session-detail__poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-subtle);
}

.session-detail__poster--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-2);
}

.session-detail__title {
  font-size: 1.375rem;
  margin: 0 0 var(--space-2);
  border-bottom: none;
  padding-bottom: 0;
}

.session-detail__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.session-detail__meta {
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.session-detail__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.session-detail__actions .btn {
  width: 100%;
}

.session-detail__clash-note {
  font-size: 0.8125rem;
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

/* "Send to a friend" -- a native <details> disclosure, not a JS-driven
   popover, per this app's no-client-side-script convention. Its own border
   only applies once opened, so closed it reads as a plain .btn.btn-secondary
   -- identical to Book tickets/More info alongside it -- rather than a box
   with its own bordered button doubled up inside it. */
.session-detail__share > summary {
  cursor: pointer;
  list-style: none;
}

.session-detail__share > summary::-webkit-details-marker {
  display: none;
}

.session-detail__share[open] {
  border: var(--border-width-rule) solid var(--color-border);
  padding: var(--space-3);
}

/* The summary's label swaps to "Close" while the panel is open. */
.session-detail__share-close-label,
.session-detail__share[open] .session-detail__share-open-label {
  display: none;
}

.session-detail__share[open] .session-detail__share-close-label {
  display: inline;
}

/* The message on top, full width; below it one row: their name, their friend's email (the wider), and Send. */
.session-detail__share-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.session-detail__share-message {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  resize: vertical;
}

.session-detail__share-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.session-detail__share-row .input {
  flex: 2 1 9rem;
  min-width: 0;
}

.session-detail__share-row .session-detail__share-name {
  flex: 1 1 7rem;
}

/* Overrides .session-detail__actions .btn { width: 100% }, which would
   otherwise stretch Send across the whole row. */
.session-detail__share-row .btn {
  flex: 0 0 auto;
  width: auto;
}

.session-detail__share-status {
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
  margin-top: var(--space-2);
}

.session-detail__share-status--error {
  color: var(--color-accent);
}

.session-detail__description {
  margin: var(--space-5) 0;
  color: var(--color-text);
}

.session-detail__section-title {
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.session-detail__table {
  border-top: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-5);
}

.session-detail__table-row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 0.875rem;
}

.session-detail__table-label {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
}

.session-detail__venue {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  border: var(--border-width-rule) solid var(--color-border);
  margin-bottom: var(--space-5);
}

/* The box's own padding lives on the text column, not the box, so the map
   can sit flush against the border on its three outer sides. */
.session-detail__venue-info {
  padding: var(--space-4);
}

/* The map fills its half of the box, flush against the border. */
.session-detail__map-frame {
  position: relative;
  min-height: 9rem;
}

.session-detail__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* No map (no coordinates or address): the info takes the whole box. */
.session-detail__venue-info:only-child {
  grid-column: 1 / -1;
}

.session-detail__venue-name {
  font-weight: var(--font-weight-bold);
  font-size: 0.9375rem;
}

.session-detail__venue-address {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: var(--space-1) 0 var(--space-3);
}

.session-detail__also-showing {
  margin-bottom: var(--space-5);
}

.session-detail__screening {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--color-text);
}

.session-detail__screening-venue {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* Story 146: same softer treatment as .session-card__clash--friend. */
.session-detail__clash-note--friend {
  color: var(--color-text-muted);
}