/* ===== Session selector — sticky on desktop, static on mobile ============ */
/* Ported from formasuisse-design-system/project/site/course-page.css lines 92-198.
   Top-level selector renamed .session-rail → .fs-session-rail.
   All nested selectors prefixed with .fs-session-rail.
   .session-card.selected renamed to .session-card.is-selected (toggled by view.js).
   .cta-button omitted — defined globally in the theme. */

/* Fallback rail-band height; consumed by the sticky sidebar to stack below the
   (sticky) rail. view.js overrides this with the real measured height on load
   and resize, so this only matters before the script runs. */
:root {
  --fs-rail-h: 150px;
}

.fs-session-rail {
  background: #fff;
  border-bottom: 1px solid var(--color-border-light);
}
@media (min-width: 900px) {
  .fs-session-rail {
    position: sticky;
    /* Stick just below the sticky site header (height var). */
    top: var(--fs-header-h, 76px);
    z-index: 30;
    box-shadow: 0 2px 8px rgba(6, 35, 67, 0.06);
  }
}
.fs-session-rail .session-rail-inner {
  padding: 12px 0 14px;
}
/* Match the breadcrumb gutter below 1200px (where the global wrapper is
   full-width and adds no side padding). */
@media (max-width: 1199px) {
  .fs-session-rail .wrapper {
    padding: 0 clamp(20px, 4vw, 56px);
  }
}
.fs-session-rail .rail-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--color-text-sub);
  margin: 0 0 8px;
}
.fs-session-rail .session-cards {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .fs-session-rail .session-cards {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
  }
}

/* Compact mobile-first layout — single 56px row per session. */
.fs-session-rail .session-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "mode   dates  status"
    "foot   foot   foot";
  gap: 2px 12px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--color-border-light);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 150ms ease-out,
    box-shadow 150ms ease-out;
}
.fs-session-rail .session-card:hover {
  border-color: var(--color-primary);
}
.fs-session-rail .session-card.is-selected {
  /* Active session: a black border (not the navy --color-primary, which reads
     as blue) plus the red left marker (::after). */
  border-color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-ink);
}
.fs-session-rail .session-card.is-selected::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-cta);
}
.fs-session-rail .session-card .mode {
  grid-area: mode;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}
.fs-session-rail .session-card .mode svg {
  color: var(--color-primary);
}
.fs-session-rail .session-card .dates {
  grid-area: dates;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-session-rail .session-card .card-foot {
  grid-area: foot;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--color-text-sub);
}
.fs-session-rail .session-card .session-price {
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  font-size: 1rem;
}
.fs-session-rail .session-card .status-dot {
  grid-area: status;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: var(--color-text-sub);
  white-space: nowrap;
}
.fs-session-rail .session-card .status-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5dc878;
}
.fs-session-rail .session-card.warn .status-dot::before {
  background: #f5a623;
}

/* Very narrow phones: the 3-up row (mode | dates | status) cramps and the dates
   truncate. Give the dates their own full-width row, keep mode + status on top. */
@media (max-width: 480px) {
  .fs-session-rail .session-card {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "mode   status"
      "dates  dates"
      "foot   foot";
    row-gap: 4px;
  }
  .fs-session-rail .session-card .status-dot {
    justify-self: end;
  }
  .fs-session-rail .session-card .dates {
    white-space: normal;
    overflow: visible;
  }
}

/* On wide cards, switch to a stacked 3-line layout that breathes more. */
@media (min-width: 700px) {
  .fs-session-rail .session-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "mode"
      "dates"
      "foot";
    gap: 6px;
    padding: 14px 16px;
  }
  .fs-session-rail .session-card .status-dot {
    position: absolute;
    top: 10px;
    right: 12px;
  }
  .fs-session-rail .session-card .dates {
    white-space: normal;
  }
  .fs-session-rail .session-card .card-foot {
    padding-top: 4px;
    border-top: 1px solid var(--color-border-light);
  }
}

/* Print: the rail is an interactive selector with no purpose on paper — every
   session is laid out in full in the session-details section instead. */
@media print {
  .fs-session-rail {
    display: none;
  }
}