/* ===== Session details block ============================================== */

.fs-session-details .session-details {
  border: 1px solid var(--color-border-light);
}
.fs-session-details .session-details .sd-header {
  background: var(--color-primary);
  color: #fff;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.fs-session-details .session-details .sd-header h3 {
  font-family: var(--font-title);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  font-size: 1.2rem;
  margin: 0;
}
.fs-session-details .session-details .sd-header .sd-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 5px 10px;
}
.fs-session-details .session-details .sd-body {
  padding: 24px;
}
/* Space between the composed children (meta-list, calendar, included-excluded). */
.fs-session-details .sd-body > * + * {
  margin-top: 28px;
}

/* The design lays the meta list out as four columns. This block sits in the
   narrower main column of the two-column course body, where the shared meta-list
   minmax(160px) auto-fit collapses to three; nudge the min track down so all four
   fit at the desktop column width. Still folds to fewer on tablet / phone. */
.fs-session-details .sd-meta {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.fs-session-details .sd-dates h4 {
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: -0.01em;
  font-size: 1rem;
  margin: 0 0 4px;
}
.fs-session-details .sd-dates .schedule {
  color: var(--color-text-sub);
  font-size: 0.85rem;
  margin: 0;
}
.fs-session-details .sd-dates-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.fs-session-details .sd-dates .ics-hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-sub);
  line-height: 1.45;
}

/* Collapsible session calendar — native <details> fold, month-grouped. */
.fs-session-details .sd-cal-toggle {
  /* Explicit border-box: <summary> doesn't pick up the theme's inherited
     box-sizing reset, so with width:100% its 14px padding would be added on top
     and push the toggle box past the card's right border. */
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-light);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  text-align: left;
  list-style: none;
  transition:
    background 150ms ease-out,
    border-color 150ms ease-out;
}
.fs-session-details .sd-cal-toggle::-webkit-details-marker {
  display: none;
}
.fs-session-details .sd-cal-toggle:hover {
  background: var(--color-surface-pill);
  border-color: var(--color-primary);
}
.fs-session-details .sd-cal-toggle-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fs-session-details .sd-cal-icon {
  display: inline-flex;
  color: var(--color-primary);
}
.fs-session-details .sd-cal-range {
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--color-text-sub);
  text-transform: capitalize;
}
.fs-session-details .sd-cal-chevron {
  flex: 0 0 auto;
  color: var(--color-text-sub);
  transition: transform 220ms ease-out;
}
.fs-session-details .sd-cal[open] .sd-cal-chevron {
  transform: rotate(180deg);
}
/* Swap the toggle label with the open state (the design does this in JS). */
.fs-session-details .sd-cal-label--hide {
  display: none;
}
.fs-session-details .sd-cal[open] .sd-cal-label--show {
  display: none;
}
.fs-session-details .sd-cal[open] .sd-cal-label--hide {
  display: inline;
}
.fs-session-details .sd-cal-body {
  padding: 16px 2px 2px;
  display: grid;
  gap: 18px;
}
.fs-session-details .sd-cal-mlabel {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-sub);
  margin-bottom: 8px;
}
.fs-session-details .sd-cal-days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fs-session-details .sd-cal-day {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  background: var(--color-surface-alt);
  padding: 6px 11px;
  font-size: 0.9rem;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  border-left: 2px solid transparent;
}
.fs-session-details .sd-cal-wd {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.fs-session-details .sd-cal-dnum {
  font-weight: 600;
}
.fs-session-details .sd-cal-day.prep {
  border-left-color: var(--color-cta);
  background: var(--color-surface-pill);
  color: var(--color-primary);
}
.fs-session-details .sd-cal-prep {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-cta);
}
.fs-session-details .sd-cal-note {
  font-size: 0.68rem;
  color: var(--color-text-sub);
}

/* ICS action group — CTA paired with its explanatory hint, below the calendar. */
.fs-session-details .sd-ics {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-light);
}
.fs-session-details .sd-ics .ics-button {
  flex: 0 0 auto;
}
.fs-session-details .sd-ics .ics-hint {
  flex: 1 1 220px;
  min-width: 0;
}

/* ICS download button — primary (outlined) style. */
.fs-session-details .ics-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  background: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  cursor: pointer;
  transition:
    background 150ms ease-out,
    color 150ms ease-out;
}
.fs-session-details .ics-button:hover,
.fs-session-details .ics-button:focus-visible {
  background: var(--color-primary);
  color: #fff;
}
.fs-session-details .ics-button svg {
  stroke: currentColor;
}
.fs-session-details .ics-button .ics-ext {
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--color-surface-pill);
  color: var(--color-text-muted);
}
.fs-session-details .ics-button:hover .ics-ext,
.fs-session-details .ics-button:focus-visible .ics-ext {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
}

/* The print-only title is hidden on screen; the swap happens in @media print. */
.fs-session-details .sd-title-print {
  display: none;
}

/* Print: the on-screen view shows only the selected session (others carry an
   inline display:none, toggled by the session switcher). On paper there is no
   switcher, so reveal every session and give each its own page. The calendar is
   collapsed by default; force it open (the fold toggle has no meaning in print).
   The ICS button is a download link with no meaning in print. The intro copy
   references the switcher, so swap the screen title/intro for a print heading. */
@media print {
  .fs-session-details .sd-title-screen,
  .fs-session-details .sd-intro-screen {
    display: none;
  }
  .fs-session-details .sd-title-print {
    display: block;
    /* Keep the section title with the first session box (don't strand it alone
       on the previous page when the box moves to the next). */
    break-after: avoid;
  }
  .fs-session-details article.session-details {
    display: block !important;
    break-before: page;
    /* Keep a session's whole box on one page where it fits. */
    break-inside: avoid;
  }
  .fs-session-details article.session-details:first-of-type {
    break-before: avoid;
  }
  .fs-session-details .sd-cal-toggle {
    display: none;
  }
  .fs-session-details .sd-cal-body {
    /* Keep the grid so its row gap separates the months; forcing block here
       dropped that gap to 0. Tighten it a third (18px → 12px) for print. */
    display: grid !important;
    gap: 6px;
    padding: 0;
  }
  /* Tighten the month-label → days spacing in print (also drop the label's line
     leading, which adds apparent space under it). */
  .fs-session-details .sd-cal-mlabel {
    margin-bottom: 1px;
    line-height: 1;
  }
  .fs-session-details .ics-button,
  .fs-session-details .ics-hint {
    display: none;
  }
  /* The header's navy background is dropped by the browser, leaving the white
     title/mode as near-invisible grey. Recolour them to navy on white, and tighten
     the (now background-less) padding so the title/mode sit closer to the box. */
  .fs-session-details .session-details .sd-header {
    background: none;
    /* Title keeps a slight left indent; the mode sits in the box's top-right
       corner with a small top gap from the border. */
    padding: 4px 0 6px 16px;
    align-items: flex-start;
  }
  .fs-session-details .session-details .sd-body {
    padding: 8px 16px 16px;
  }
  .fs-session-details .session-details .sd-header h3,
  .fs-session-details .session-details .sd-header .sd-mode {
    color: var(--color-primary);
  }
  /* Flush the mode badge into the top-right corner: no badge border/background
     (would double up against the box border) and no top padding. */
  .fs-session-details .session-details .sd-header .sd-mode {
    background: none;
    border: none;
    padding-top: 0;
  }
}