@import '../../styles/tokens.css';
@import './sessions-guide-overlays.css';

:is(.sessions-guide, .sessions-guide-full-page) {
  font-family: var(--body-font-family);
  color: var(--s2a-color-content-default);
  background: var(--s2a-color-background-default);
  box-sizing: border-box;
}

:is(.sessions-guide, .sessions-guide-full-page) .sg-app {
  display: block;
  min-height: 100px;
  padding: var(--s2a-spacing-md);
}

:is(.sessions-guide, .sessions-guide-full-page) .sg-loading {
  color: var(--s2a-color-content-subtle);
  font-size: var(--s2a-font-size-sm);
}

/* ── Loading State ───────────────────────────────────────── */

.sg-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s2a-spacing-3xl) var(--s2a-spacing-lg);
}

.sg-loading-state__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--s2a-color-gray-100);
  border-top-color: var(--s2a-color-gray-600);
  border-radius: 50%;
  animation: sg-loading-spin 0.8s linear infinite;
}

.sg-loading-state__text {
  margin: var(--s2a-spacing-md) 0 var(--s2a-spacing-2xl);
  color: var(--s2a-color-content-subtle);
  font-size: var(--s2a-font-size-sm);
}

.sg-loading-state__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--s2a-spacing-lg);
  width: 100%;
  max-width: 900px;
}

.sg-loading-state__skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--s2a-spacing-md);
}

.sg-loading-state__skeleton-time,
.sg-loading-state__skeleton-card {
  border-radius: var(--s2a-border-radius-md);
  background: linear-gradient(
    90deg,
    var(--s2a-color-gray-75) 25%,
    var(--s2a-color-gray-50) 37%,
    var(--s2a-color-gray-75) 63%
  );
  background-size: 400% 100%;
  animation: sg-loading-shimmer 1.4s ease infinite;
}

.sg-loading-state__skeleton-time {
  flex: none;
  width: 40px;
  height: 16px;
}

.sg-loading-state__skeleton-card {
  flex: 1 1 0;
  min-width: 0;
  height: 96px;
}

.sg-loading-state__skeleton-card:nth-child(3) { animation-delay: 0.1s; }
.sg-loading-state__skeleton-card:nth-child(4) { animation-delay: 0.2s; }

@keyframes sg-loading-spin {
  to { transform: rotate(360deg); }
}

@keyframes sg-loading-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Screen-reader-only text: visual-only cues (count badges, status changes) need a spoken equivalent. */
.sg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sg-loading-state__spinner,
  .sg-loading-state__skeleton-time,
  .sg-loading-state__skeleton-card {
    animation: none;
  }

  /* The drawer's own slide is set inline by DrawerShell.setTop(), which checks motion prefs in JS. */
  .sg-card,
  .sg-card__actions,
  .sg-live-card,
  .sg-time-row,
  .sg-time-row__cards,
  .sg-carousel__cards,
  .sg-detail-panel,
  .sg-header-controls-collapse,
  .sg-backdrop,
  .sg-search-inline,
  .sg-search-inline__input {
    transition: none;
  }

  .sg-card__btn--favorite,
  .sg-card__btn--schedule,
  .sg-card__btn--play,
  .sg-detail-panel--open {
    animation: none;
  }
}

/* Icon-only controls draw their glyph as a CSS background, invisible in forced-colors mode. */
@media (forced-colors: active) {
  .sg-close-btn,
  .sg-filter-panel__close,
  .sg-filter-btn,
  .sg-search-btn,
  .sg-search-inline,
  .sg-download-btn {
    border: 1px solid currentcolor;
  }
}

/* ── Portal & Shell ──────────────────────────────────────── */

.sg-portal {
  font-family: var(--body-font-family);
  color: var(--s2a-color-content-default);
  box-sizing: border-box;
}

/* Portal's z-index: 9 traps the drawer below the nav; lift it while open. */
.sg-portal:has(.sg-drawer:not([inert])) {
  z-index: 11;
}

.sg-portal *,
.sg-portal *::before,
.sg-portal *::after {
  box-sizing: inherit;
}

:is(.sessions-guide, .sessions-guide-full-page) *,
:is(.sessions-guide, .sessions-guide-full-page) *::before,
:is(.sessions-guide, .sessions-guide-full-page) *::after {
  box-sizing: inherit;
}

.sg-shell {
  /* positioning context for CTA button */
}

/* ── Backdrop ────────────────────────────────────────────── */

.sg-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(255 255 255 / 10%);
  backdrop-filter: blur(12px);
  z-index: 49;
  transition: opacity 0.35s ease;
}

/* ── Drawer ──────────────────────────────────────────────── */

.sg-drawer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 100%;
  top: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--s2a-color-background-default, #fff);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgb(0 0 0 / 30%);
  z-index: 50;
}

/* Off-screen positioning alone can expose the sticky header on iOS (MWPW-208862). */
.sg-drawer[inert] {
  opacity: 0;
}

/* Clip rounded corners without clipping dropdown panels */
.sg-drawer::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px 20px 0 0;
  pointer-events: none;
}

/* ── Header ──────────────────────────────────────────────── */

.sg-header {
  position: sticky;
  top: 0;
  z-index: 60;
  flex-shrink: 0;
  background: var(--s2a-color-background-default, #fff);
  border-bottom: 1px solid var(--s2a-color-border-subtle);
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2a-spacing-lg);
  padding: var(--s2a-spacing-lg) 0 var(--s2a-spacing-lg);
}

.sg-header-title-row,
.sg-header-controls {
  padding: 0 var(--s2a-spacing-md);
}

.sg-header-title {
  font-family: var(--heading-font-family);
  font-size: var(--s2a-font-size-3xl);
  font-weight: var(--s2a-font-weight-adobe-clean-display-black);
  line-height: 1.15;
  letter-spacing: var(--s2a-font-letter-spacing-3xl);
  color: var(--s2a-color-content-title);
  margin: 0;
  padding-right: 28px;
}

.sg-header-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--s2a-spacing-lg);
}

/* Grid-row collapse, not max-height: row height varies by breakpoint (see .sg-detail-panel). */
.sg-header-controls-collapse {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.3s ease, opacity 0.25s ease;
}

.sg-header-controls-collapse-inner {
  display: flex;
  flex-direction: column;
  gap: var(--s2a-spacing-lg);
  min-height: 0;
}

/* Only while a detail is open/collapsing: Filter/View dropdowns overflow this row when open. */
.sg-drawer--detail-open .sg-header-controls-collapse-inner {
  overflow: hidden;
}

.sg-drawer--detail-open .sg-header-controls-collapse {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

/* ── Date Tabs ───────────────────────────────────────────── */

.sg-date-tabs {
  display: flex;
  align-items: center;
  background: var(--s2a-color-gray-75);
  border-radius: var(--s2a-border-radius-round);
  padding: 2px;
  width: 100%;
}

.sg-date-tab {
  flex: 1;
  width: auto;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: var(--s2a-border-radius-round);
  font-family: var(--body-font-family);
  font-weight: var(--s2a-font-weight-adobe-clean-bold);
  font-size: var(--s2a-font-size-sm);
  cursor: pointer;
  color: rgb(0 0 0 / 60%);
  transition: background 0.2s ease, color 0.2s ease;
}

.sg-date-tab--active {
  background: #000;
  color: #fff;
}

.sg-date-tabs--disabled .sg-date-tab {
  opacity: 0.35;
  pointer-events: none;
}

/* ── Right Controls ──────────────────────────────────────── */

.sg-right-controls {
  display: flex;
  align-items: center;
  gap: var(--s2a-spacing-sm);
  position: relative;
  width: 100%;
}

/* ── View Dropdown ───────────────────────────────────────── */

.sg-view-dropdown-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  order: -1;
}

.sg-view-btn {
  display: flex;
  align-items: center;
  gap: var(--s2a-spacing-xs);
  height: 40px;
  padding: 0 var(--s2a-spacing-md);
  border: none;
  border-radius: 12px;
  background: var(--s2a-color-gray-75);
  font-family: var(--body-font-family);
  font-size: var(--s2a-font-size-sm);
  font-weight: var(--s2a-font-weight-adobe-clean-bold);
  cursor: pointer;
  color: var(--s2a-color-content-default);
  white-space: nowrap;
  width: 100%;
  justify-content: space-between;
}

.sg-view-btn--open {
  border: none;
}

.sg-view-chevron {
  display: inline-block;
  width: 10px;
  height: 6px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  background-color: currentcolor;
  transition: transform 0.2s ease;
}

/* Caret points at the open menu. */
.sg-view-btn--open .sg-view-chevron {
  transform: scaleY(-1);
}

.sg-view-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 134px;
  list-style: none;
  margin: 0;
  padding: var(--s2a-spacing-xs);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--s2a-color-background-default, #fff);
  border-radius: 10px;
  box-shadow:
    0 0 1px rgb(0 0 0 / 12%),
    0 2px 3px rgb(0 0 0 / 4%),
    0 4px 6px rgb(0 0 0 / 8%);
  z-index: 100;
}

.sg-view-menu-item {
  display: flex;
  align-items: center;
  gap: var(--s2a-spacing-xs);
  padding: 6px var(--s2a-spacing-xs);
  border-radius: 6px;
  font-size: var(--s2a-font-size-sm);
  cursor: pointer;
  color: var(--s2a-color-content-default);
  white-space: nowrap;
}

.sg-view-menu-item:hover {
  background: var(--s2a-color-gray-75);
}

/* Always rendered, empty when unselected, so every label lines up on the same left edge. */
.sg-view-menu-item__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--s2a-color-blue-900);
}

/* Selection reads from the checkmark, not from weight — Figma keeps every label regular. */
.sg-view-menu-item--selected {
  font-weight: var(--s2a-font-weight-adobe-clean-regular, 400);
}

/* ── Body Scroll ─────────────────────────────────────────── */

.sg-body-scroll {
  flex: 1;
  overflow-y: hidden;
}

.sg-body-scroll--scrollable {
  overflow-y: auto;
}

/* tabindex="-1" is only a programmatic landing target (Back-to-top, Reset all), so the UA focus ring here is noise. */
.sg-body-scroll:focus,
.sg-body-scroll:focus-visible {
  outline: none;
}

/* ── Close Button ────────────────────────────────────────── */

.sg-close-btn,
.sg-filter-panel__close {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 19px;
  height: 19px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  z-index: 10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19' fill='none'%3E%3Crect width='19' height='19' rx='9.5' fill='%23292929'/%3E%3Cpath d='M10.5606 9.50001L12.7803 7.28028C13.0733 6.98731 13.0733 6.5127 12.7803 6.21973C12.4873 5.92676 12.0127 5.92676 11.7197 6.21973L9.50001 8.43946L7.28028 6.21973C6.98731 5.92676 6.5127 5.92676 6.21973 6.21973C5.92676 6.5127 5.92676 6.98731 6.21973 7.28028L8.43946 9.50001L6.21973 11.7197C5.92676 12.0127 5.92676 12.4873 6.21973 12.7803C6.36621 12.9268 6.55762 13 6.75 13C6.94238 13 7.13379 12.9268 7.28027 12.7803L9.5 10.5606L11.7197 12.7803C11.8662 12.9268 12.0576 13 12.25 13C12.4424 13 12.6338 12.9268 12.7803 12.7803C13.0732 12.4873 13.0732 12.0127 12.7803 11.7197L10.5606 9.50001Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.sg-filter-panel__close {
  top: var(--s2a-spacing-xs);
  right: var(--s2a-spacing-xs);
}

/* ── Filter & Search Controls ────────────────────────────── */

.sg-filter-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2a-spacing-xs);
  flex-shrink: 0;
}

.sg-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2a-spacing-2xs);
  height: 40px;
  min-width: 40px;
  width: 40px;
  padding: 0;
  border: 2px solid rgb(0 0 0 / 10%);
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  font-family: var(--body-font-family);
  font-weight: var(--s2a-font-weight-adobe-clean-bold);
  font-size: var(--s2a-font-size-sm);
  color: var(--s2a-color-content-default);
  white-space: nowrap;
}

.sg-filter-btn:hover {
  background: rgb(0 0 0 / 4%);
}

.sg-filter-btn-label {
  display: none;
}

.sg-filter-icon {
  width: 18px;
  height: 18px;
  background-color: rgb(0 0 0 / 84%);
  flex-shrink: 0;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.99902 18.7285C8.63964 18.7285 8.28222 18.6304 7.96191 18.4356C7.35937 18.0698 7 17.4307 7 16.7261V10.4902C7 10.3042 6.93164 10.1265 6.80762 9.98878L2.62793 5.34521C2.08984 4.75488 1.9541 3.92871 2.2793 3.19287C2.60352 2.45703 3.30469 2 4.10938 2H15.8906C16.6953 2 17.3965 2.45703 17.7207 3.19287C18.0459 3.92871 17.9102 4.75488 17.3682 5.34863L13.1924 9.98877C13.0684 10.1265 13 10.3042 13 10.4902V15.5356C13 16.3794 12.5352 17.1445 11.7871 17.5327L9.92189 18.501C9.6299 18.6528 9.31347 18.7285 8.99902 18.7285ZM4.10938 3.5C3.81446 3.5 3.69141 3.7085 3.65137 3.79834C3.61133 3.88818 3.54102 4.12012 3.73926 4.33789L7.92285 8.98486C8.29492 9.39843 8.5 9.9331 8.5 10.4902V16.7261C8.5 16.98 8.66797 17.1094 8.74023 17.1533C8.8125 17.1978 9.00585 17.2856 9.23046 17.1699L11.0957 16.2012C11.3457 16.0718 11.5 15.8169 11.5 15.5356V10.4902C11.5 9.9331 11.7051 9.39843 12.0771 8.98486L16.2568 4.34131C16.459 4.12012 16.3887 3.88819 16.3486 3.79834C16.3086 3.70849 16.1855 3.5 15.8906 3.5H4.10938Z' fill='black'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

/* Figma "Icon Button XL / XL Primary Outline" — 2px gray-100 ring rather than a bare icon. */
.sg-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 2px solid var(--s2a-color-gray-100);
  background: var(--s2a-color-background-default, #fff);
  cursor: pointer;
  flex-shrink: 0;
}

.sg-search-btn:hover {
  background: rgb(0 0 0 / 4%);
}

.sg-search-btn.active {
  background: rgb(0 0 0 / 10%);
}

.sg-search-icon,
.sg-search-field-icon {
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--s2a-color-border-default);
  flex-shrink: 0;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.5 2.5a6 6 0 1 1 0 12 6 6 0 0 1 0-12zm0 1.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zM12.74 12.74l4.5 4.5-1.06 1.06-4.5-4.5z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

.sg-header-controls--search-active .sg-search-btn {
  background: rgb(0 0 0 / 10%);
}

/* ── Mobile Search Row ───────────────────────────────────── */

.sg-mobile-search-row {
  display: none;
  padding: 0 var(--s2a-spacing-md) var(--s2a-spacing-sm);
}

.sg-mobile-search-row--open {
  display: flex;
}

.sg-mobile-search-wrap {
  display: flex;
  align-items: center;
  gap: var(--s2a-spacing-2xs);
  width: 100%;
  height: 40px;
  background: var(--s2a-color-background-default, #fff);
  border: 2px solid var(--s2a-color-border-strong);
  border-radius: 20px;
  padding: 0 var(--s2a-spacing-2xs) 0 var(--s2a-spacing-sm);
  overflow: hidden;
}

/* Ring on the wrap, not the input, so it surrounds the whole field (icon + input + clear). */
.sg-mobile-search-wrap:focus-within {
  outline: 1px solid var(--s2a-color-focus-ring-default, #3b63fb);
  outline-offset: 2px;
}

.sg-mobile-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--body-font-family);
  font-size: var(--s2a-font-size-md);
  color: var(--s2a-color-border-default);
  height: 100%;
  padding: 0;
}

.sg-mobile-search-input::placeholder {
  color: rgb(0 0 0 / 40%);
}

/* Suppresses the native type="search" cancel button; .sg-search-clear-btn replaces it. */
.sg-mobile-search-input::-webkit-search-cancel-button {
  appearance: none;
}

.sg-search-clear-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  font-size: var(--s2a-font-size-lg);
  color: #444;
  line-height: 1;
  flex-shrink: 0;
}

.sg-search-clear-btn:hover {
  background: rgb(0 0 0 / 7%);
}

/* Desktop-only (1280px+ block has the rest); below that, mobile/tablet use sg-search-btn instead. */
.sg-search-inline {
  display: none;
}

/* ── CTA Button ──────────────────────────────────────────── */

/* Figma "FAB / Arrow=Yes" (node 7676:247711): 243×52 pill, calendar icon left, decorative
   arrow circle right. The arrow is part of the single open-guide CTA, not a separate control. */
.sg-cta-btn {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0;
  height: 52px;
  padding: 0 9px 0 27px;
  background: rgb(255 255 255 / 80%);

  /* Approximates Figma's GLASS effect (refraction/dispersion have no CSS equivalent). */
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid #e9e9e9;
  border-radius: 100px;
  font-family: var(--body-font-family);
  font-weight: var(--s2a-font-weight-adobe-clean-bold);
  font-size: 16px;
  letter-spacing: -0.48px;
  line-height: 0.98;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    inset 1px 1px 0 rgb(255 255 255 / 60%),
    0 0 2px rgb(0 0 0 / 12%),
    0 2px 6px rgb(0 0 0 / 4%),
    0 4px 12px rgb(0 0 0 / 8%);
  z-index: 9;

  /* The delay rides out the player's brief collapse when a session switch remounts it. */
  transition: opacity 200ms ease 100ms, visibility 0s 100ms;
}

@supports not (backdrop-filter: blur(1px)) {
  .sg-cta-btn {
    background: rgb(255 255 255 / 92%);
  }
}

.sg-cta-btn > svg {
  flex-shrink: 0;
}

/* Figma's fixed 122px text box, so the arrow's position doesn't shift with font metrics. */
.sg-cta-btn__label {
  min-width: 122px;
}

.sg-cta-btn__arrow {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-left: 32px;
  background: rgb(0 0 0 / 4%);
  border: 1px solid rgb(0 0 0 / 8%);
  border-radius: 100px;
  color: #292929;
}

/* Hidden (and out of the tab order) while it would cover a video player's controls;
   fades back once the player scrolls clear (MWPW-208524). */
.sg-cta-btn--over-player {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, visibility 0s 200ms;
}

@media (prefers-reduced-motion: reduce) {
  .sg-cta-btn,
  .sg-cta-btn--over-player {
    transition: none;
  }
}

/* Real Mobile Safari only (isSafariMobile()) — 24px above its controls (MWPW-208776). */
.sg-cta-btn--safari-mobile {
  bottom: 24px;
}

/* ── Placeholders ────────────────────────────────────────── */

.sg-error {
  padding: var(--s2a-spacing-md);
  color: var(--s2a-color-content-utility-error);
  font-size: var(--s2a-font-size-sm);
}

/* ── Page Surface ────────────────────────────────────────── */

:is(.sessions-guide, .sessions-guide-full-page) .sg-app--page {
  display: block;
  min-height: 200px;

  /* Full page runs edge-to-edge like the rest of the site; .sg-app's padding is a
     drawer-only affordance. Top clearance now comes from .sg-full-page__header-wrap;
     views/sections manage their own remaining inner spacing. */
  padding: 0;
}

/* ── View layouts ────────────────────────────────────────── */

/* Clears the floating Back to Top button (~78px + 20px bottom); not a generic spacing token. */
.sg-view {
  padding: 0 0 var(--s2a-spacing-80);
}

.sg-carousel-section {
  padding: var(--s2a-spacing-lg) 0 var(--s2a-spacing-lg) var(--s2a-spacing-lg);
  background: var(--s2a-color-gray-50);
  overflow: visible;
}

.sg-section-title {
  font-family: var(--body-font-family);
  font-weight: var(--s2a-font-weight-adobe-clean-display-black);
  font-size: var(--s2a-font-size-lg);
  color: var(--s2a-color-gray-800);
  line-height: 1.1;
  letter-spacing: normal;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--s2a-spacing-xs);
}

.sg-carousel-section--live .sg-section-title::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #eb1000;
  flex-shrink: 0;
}

.sg-section-time {
  font-family: var(--body-font-family);
  font-size: var(--s2a-font-size-md);
  font-style: normal;
  font-weight: var(--s2a-font-weight-adobe-clean-regular);
  line-height: 140%;
  color: var(--s2a-color-gray-800);
  margin-left: var(--s2a-spacing-xs);
}

.sg-upcoming-section {
  display: flex;
  flex-direction: column;
}

.sg-upcoming-title {
  font-family: var(--heading-font-family);
  font-weight: var(--s2a-font-weight-adobe-clean-display-black);
  font-size: var(--s2a-font-size-lg);
  color: var(--s2a-color-content-title);
  line-height: 1.1;
  letter-spacing: normal;
  margin: var(--s2a-spacing-lg) 0 0;
  padding: 0 var(--s2a-spacing-lg) var(--s2a-spacing-sm);
  border-bottom: 1px solid #e8e8e8;
}

.sg-empty {
  padding: var(--s2a-spacing-2xl) var(--s2a-spacing-lg);
  color: var(--s2a-color-content-subtle);
  font-size: var(--s2a-font-size-sm);
}

.sg-empty--no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2a-spacing-md);
  padding: var(--s2a-spacing-4xl) var(--s2a-spacing-lg);
  text-align: center;
  color: var(--s2a-color-content-default);
  font-size: var(--s2a-font-size-md);
}

.sg-empty--no-results p {
  margin: 0;
  max-width: 60ch;
}

.sg-empty__message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2a-spacing-md);
}

.sg-empty__title {
  font-family: var(--heading-font-family);
  font-weight: var(--s2a-font-weight-adobe-clean-display-black);
  font-size: var(--s2a-font-size-lg);
  line-height: var(--s2a-font-line-height-18, 18px);
  letter-spacing: var(--s2a-font-letter-spacing-neg-0-2, -0.2px);
}

.sg-empty__reset {
  min-height: 40px;
  padding: var(--s2a-spacing-xs) var(--s2a-spacing-lg);
  border: var(--s2a-border-width-sm) solid var(--s2a-color-border-knockout, #000);
  border-radius: var(--s2a-border-radius-round);
  background: transparent;
  color: inherit;
  font-family: var(--body-font-family);
  font-weight: var(--s2a-font-weight-adobe-clean-bold);
  font-size: var(--s2a-font-size-sm);
  line-height: var(--s2a-font-line-height-18, 18px);
  cursor: pointer;
}

.sg-empty__reset:hover {
  background: var(--s2a-color-background-subtle);
}

.sg-empty__reset:focus-visible {
  outline: 1px solid var(--s2a-color-focus-ring-default, #3b63fb);
  outline-offset: 2px;
}

[data-theme="dark"] .sg-empty__reset,
.sg-portal[data-theme="dark"] .sg-empty__reset {
  border-color: var(--s2a-color-transparent-white-16);
}

/* ── Carousel ────────────────────────────────────────────── */

.sg-carousel {
  position: relative;
}

.sg-carousel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2a-spacing-md);
  margin: 0 0 var(--s2a-spacing-md);
}

/* Left time gutter — desktop only (see 1280px breakpoint). */
.sg-carousel__time {
  display: none;
}

.sg-carousel__time-tz {
  color: var(--s2a-color-gray-1000);
  font-family: var(--body-font-family);
  font-size: var(--s2a-typography-font-size-body-sm);
  font-style: normal;
  font-weight: 400;
  line-height: var(--s2a-typography-line-height-body-sm);
  letter-spacing: var(--s2a-typography-letter-spacing-body-sm);
  white-space: normal;
}

.sg-carousel__body {
  display: flex;
  align-items: flex-start;
}

.sg-carousel__track {
  flex: 1;
  min-width: 0;
  overflow-x: clip;
}

.sg-carousel__cards {
  display: flex;
  gap: var(--s2a-spacing-xs);
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-right: var(--s2a-spacing-md);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}

.sg-carousel__cards::-webkit-scrollbar { display: none; }

.sg-carousel__card-wrap {
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* Carousel nav arrows — hidden on mobile/tablet (native scroll), shown on desktop. */
.sg-carousel__nav {
  display: none;
  gap: var(--s2a-spacing-sm);
  flex-shrink: 0;
}

.sg-carousel__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--s2a-color-border-subtle);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--s2a-color-content-default);
  transition: background 0.15s, opacity 0.15s;
}

/* Live/Recommended arrows are 32px (Figma); Broadcast keeps its own 40px arrows. */
.sg-carousel-section .sg-carousel__nav { gap: 16px; }

.sg-carousel-section .sg-carousel__arrow {
  width: 32px;
  height: 32px;
}

.sg-carousel__arrow:hover:not([disabled]) { background: var(--s2a-color-gray-75); }

.sg-carousel__arrow[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* ── Live Card ───────────────────────────────────────────── */

.sg-live-card {
  background: #fff;
  border: none;
  border-radius: var(--s2a-border-radius-md);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  width: 311px;
  overflow: hidden;
  transition: background 0.2s, border-color 0.2s;
}

.sg-live-card:is(:hover, :focus-within) {
  background: #fff;
  border-color: transparent;
}

.sg-live-card__image {
  background: var(--s2a-color-gray-400);
  border-radius: var(--s2a-border-radius-md) var(--s2a-border-radius-md) var(--s2a-border-radius-md) var(--s2a-border-radius-md);
  flex-shrink: 0;
  width: 100%;
  height: 168px;
  position: relative;
  overflow: hidden;
}

.sg-live-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sg-live-card__thumb-placeholder {
  width: 100%;
  height: 100%;
}

.sg-live-card__progress-row {
  position: absolute;
  bottom: 12px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sg-carousel-section--recommended .sg-live-card__progress-row {
  display: none;
}

.sg-live-card__progress {
  flex: 1;
  height: 6px;
  background: rgb(255 255 255 / 17%);
  border-radius: 3px;
  overflow: hidden;
}

.sg-live-card__duration {
  font-size: var(--s2a-font-size-sm);
  font-weight: var(--s2a-font-weight-adobe-clean-regular);
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}

.sg-live-card__progress-bar {
  height: 100%;
  background: #fafafa;
  border-radius: 3px;
  transition: width 1s linear;
}

.sg-live-card__meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2a-spacing-xs);
  width: 100%;
  margin: 0;
}

.sg-live-card__track-row {
  display: flex;
  align-items: center;
  gap: var(--s2a-spacing-xs);
}

/* inline-flex so the ::before divider added at 1024px centers as a flex item. */
.sg-live-card__track-extra {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* Figma 8463:87698, mobile 'live' card only. Fixed height keeps 1- and 2-badge cards the same size. */
.sg-live-card__badges {
  display: flex;
  flex-direction: column;
  gap: var(--s2a-spacing-xs);
  height: 40px;
  width: 100%;
  margin-top: var(--s2a-spacing-sm);
}

.sg-live-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--s2a-spacing-md);
  min-width: 0;
  gap: 0;
}

/* Own flex column so its 8px gap isn't inflated by .sg-live-card__body's space-between. */
.sg-live-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--s2a-spacing-xs);
  width: 100%;
  min-width: 0;
}

.sg-live-card__track {
  font-size: var(--s2a-font-size-sm);
  font-weight: 500;
  color: var(--s2a-color-content-default);
  line-height: 1.5;
  white-space: nowrap;
  transition: color 0.2s;
}

.sg-live-card:is(:hover, :focus-within) .sg-live-card__track,
.sg-live-card:is(:hover, :focus-within) .sg-live-card__track-extra { color: inherit; }

.sg-live-card__time {
  font-size: var(--s2a-font-size-sm);
  color: var(--s2a-color-content-default);
  line-height: 1.5;
  white-space: nowrap;
  margin: 0;
  transition: color 0.2s;
}

.sg-live-card:is(:hover, :focus-within) .sg-live-card__time { color: inherit; }

/* Same reasoning as .sg-card__title-btn above — a real <button>, not the whole card. */
.sg-live-card__title-btn {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

.sg-live-card__title-btn:focus-visible {
  outline: 1px solid var(--s2a-color-focus-ring-default, #3b63fb);
  outline-offset: 2px;
}

.sg-live-card__title {
  font-family: var(--heading-font-family);
  font-weight: var(--s2a-font-weight-adobe-clean-display-black);
  font-size: 20px;
  line-height: 1.1;
  margin: var(--s2a-spacing-lg) 0 0;
  color: var(--s2a-color-content-default);
  transition: color 0.2s;

  /* Reserved at 2 lines' height so a 1-line title doesn't leave its card shorter than a 2-line one. */
  min-height: calc(2 * 1.1em);
}

/* On the span: WebKit ignores line-clamp on buttons (MWPW-209870). */
.sg-live-card__title-text {
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sg-live-card--mobile .sg-live-card__title {
  margin-top: 0;
}

.sg-live-card--mobile .sg-live-card__image {
  height: 175px;
}

.sg-live-card__time--mobile {
  margin: 0 0 var(--s2a-spacing-sm) 0;
  color: var(--s2a-color-gray-700);
  font-family: var(--body-font-family);
  font-size: var(--s2a-font-size-xs);
  font-weight: var(--s2a-font-weight-adobe-clean-medium);
  line-height: var(--s2a-font-line-height-2xs);
}

.sg-live-card:is(:hover, :focus-within) .sg-live-card__title { color: inherit; }

.sg-live-card__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--s2a-spacing-lg);
}

/* Figma 8463:87698 — same 16px rhythm as the rest of this card, instead of the shared 24px. */
.sg-live-card--mobile .sg-live-card__actions {
  margin-top: var(--s2a-spacing-sm);
}

/* `live` variant only (Also Live carousel) — own margin so other row consumers are unaffected. */
.sg-live-card__actions-time {
  margin-left: auto;
  color: var(--s2a-color-gray-600, #717171);
  font-size: var(--s2a-font-size-xs, 12px);
}

.sg-live-card__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2a-spacing-xs);
  height: 40px;
  padding: 0 var(--s2a-spacing-lg);
  border-radius: 20px;
  font-family: var(--body-font-family);
  font-weight: var(--s2a-font-weight-adobe-clean-bold);
  font-size: var(--s2a-font-size-sm);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* Figma 8463:87698 — this card's buttons are 32px, not the shared 40px. */
.sg-live-card--mobile .sg-live-card__btn {
  height: 32px;
}

.sg-live-card__btn--watch {
  background: #292929;
  color: #fff;
  border: none;
  min-width: 90px;
  padding: 0 var(--s2a-spacing-lg);
}

.sg-live-card:is(:hover, :focus-within) .sg-live-card__btn--watch {
  background: #292929;
  color: #fff;
}

/* Figma 11658:143458 — schedule CTA gets the outlined treatment, not the Watch button's solid fill. */
.sg-live-card__btn--schedule-cta {
  background: #fff;
  border: 1px solid #000;
  color: #000;
}

.sg-live-card__btn--schedule {
  display: none;
}

/* Figma 10533:55223 — solid dark border; the heart glyph (see LiveCard.js) carries favorited state. */
.sg-live-card__btn--favorite {
  background: #fff;
  border: 1px solid #292929;
  color: #292929;
  width: 40px;
  padding: 0;
  flex-shrink: 0;
  justify-content: center;
}

/* Keeps the favorite button a circle at the shrunk height above (base rule is a fixed 40px square). */
.sg-live-card--mobile .sg-live-card__btn--favorite {
  width: 32px;
}

/* ── Time Slot Row ───────────────────────────────────────── */

.sg-time-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2a-spacing-sm);
  padding: var(--s2a-spacing-lg) 0 var(--s2a-spacing-lg) var(--s2a-spacing-lg);
  border-bottom: 1px solid #e8e8e8;
  position: relative;
  overflow: visible;
  max-height: none;
  background: transparent;
  transition: background 0.15s ease,
              opacity 0.25s ease,
              max-height 0.5s cubic-bezier(0.4,0,0.2,1),
              margin 0.5s cubic-bezier(0.4,0,0.2,1),
              padding 0.5s cubic-bezier(0.4,0,0.2,1),
              border-color 0.5s ease;
}

.sg-time-row:last-child { border-bottom: none; }

.sg-time-row:is(:hover, :focus-within) { background: transparent; }

.sg-time-row:is(:hover, :focus-within) .sg-card:not(:hover, :focus-within) { background: #fff; }

.sg-time-row__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: var(--s2a-font-weight-adobe-clean-bold);
  font-size: var(--s2a-font-size-sm);
  color: var(--s2a-color-gray-900);
  line-height: var(--s2a-font-line-height-sm);
  white-space: normal;
  width: auto;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
}

/* Figma MAX-2026-Virtual-VizD-SSOT node 8463:87705 — mobile shows time + timezone on one
   line; tablet/desktop (below) keep the stacked layout for their narrower fixed-width column. */
@media (max-width: 767px) {
  .sg-time-row__label {
    flex-direction: row;
    align-items: baseline;
    gap: var(--s2a-spacing-4);
    white-space: nowrap;
  }
}

/* Matches .sg-time-row__time-value's font (Figma title-xs below 1280px; desktop restates lg);
   font-family explicit since this is a real <h3>. */
.sg-time-row__label--category {
  font-family: var(--body-font-family);
  font-size: var(--s2a-font-size-md);
  font-weight: var(--s2a-font-weight-adobe-clean-bold);
  color: var(--s2a-color-gray-800);
  line-height: var(--s2a-font-line-height-sm);
}

.sg-time-row__time-value {
  color: var(--s2a-color-gray-800);
  font-size: var(--s2a-font-size-md);
  font-style: normal;
  font-weight: var(--s2a-font-weight-adobe-clean-bold);
  line-height: var(--s2a-font-line-height-sm);
}

.sg-time-row__time-tz {
  color: var(--s2a-color-gray-1000);
  font-family: var(--body-font-family);
  font-size: var(--s2a-typography-font-size-body-sm);
  font-style: normal;
  font-weight: 400;
  line-height: var(--s2a-typography-line-height-body-sm);
  letter-spacing: var(--s2a-typography-letter-spacing-body-sm);
  white-space: normal;
}

.sg-time-row__track {
  flex: 1;
  min-width: 0;
  overflow: visible;
  width: 100%;
  position: relative;
}

/* Mobile: transparent passthrough. Desktop overrides this to clip the carousel. */
.sg-time-row__viewport {
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.sg-time-row__cards {
  display: flex;
  flex-direction: row;
  gap: var(--s2a-spacing-sm);
  align-items: center;
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  padding: 0;
  height: auto;
  transform: none;
  scroll-snap-type: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}

.sg-time-row__cards::-webkit-scrollbar { display: none; }

.sg-time-row__card-wrap {
  flex-shrink: 0;
  scroll-snap-align: none;
  min-width: 0;
  width: 255px;
  transition: max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.sg-time-row__card-wrap--collapsing {
  max-width: 0 !important;
  overflow: hidden;
}

.sg-time-row__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--s2a-color-border-subtle);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: #000;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, background 0.15s;
}

.sg-time-row:is(:hover, :focus-within) .sg-time-row__arrow {
  opacity: 1;
  pointer-events: auto;
}

/* stylelint-disable-next-line no-descending-specificity */
.sg-time-row__arrow:hover { background: var(--s2a-color-gray-75); }

/* Stays mounted but disabled at the ends (unmounting would destroy focus) — kept invisible. */
.sg-time-row:is(:hover, :focus-within) .sg-time-row__arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

.sg-time-row__arrow--prev { left: -16px; }
.sg-time-row__arrow--next { right: 20px; }

/* ── Session Card ────────────────────────────────────────── */

/* stylelint-disable no-descending-specificity */
:is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card,
:is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card:is(:hover, :focus-within),
:is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card.is-scheduled,
:is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card.is-favorited {
  flex-direction: column;
  width: 255px;
  min-height: 0;
  background: var(--s2a-color-gray-50);
  border: none;
  border-radius: var(--s2a-border-radius-md);
  padding: var(--s2a-spacing-md);
  gap: var(--s2a-spacing-md);
  box-shadow: none;
  transition: none;
  align-items: flex-start;
}
/* stylelint-enable no-descending-specificity */

/* stylelint-disable-next-line no-descending-specificity */
:is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card {
  flex-shrink: 0;
  display: flex;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  max-width: 1600px;
}

/* stylelint-disable-next-line no-descending-specificity */
:is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card:active { background: var(--s2a-color-gray-75); }

.sg-card__body {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

/* The body's overflow: hidden clipped three sides of the title's focus ring (1px + 2px offset).
   Pad the clip box by the ring's 3px reach and cancel it with a negative margin: layout is unchanged.
   Scoped to SessionCard's hosts so other .sg-card users (upcoming-sessions) are untouched. */
@media (max-width: 1279px) {
  :is(.sessions-guide, .sessions-guide-full-page, .sg-portal, .sb-carousel-section--up-next) .sg-card__body {
    box-sizing: border-box;
    width: calc(100% + 6px);
    margin: -3px;
    padding: 3px;
  }
}

/* Titles are real buttons, so reset UA chrome before .sg-card__title's own rule. */
.sg-card__title-btn {
  display: block;
  text-align: left;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

.sg-card__title-btn:focus-visible {
  outline: 1px solid var(--s2a-color-focus-ring-default, #3b63fb);
  outline-offset: 2px;
}

.sg-card__title {
  font-weight: var(--s2a-font-weight-adobe-clean-extrabold);
  font-size: var(--s2a-font-size-md);
  color: var(--s2a-color-gray-900);
  line-height: 1.25;
  overflow: hidden;
  margin: 0;
  min-width: 0;
  width: 100%;
  min-height: 40px;
  transition: none;
}

/* Figma's small card title is a fixed two lines (40px), so every card in a row is the same height.
   Below 1280px only. On the span: WebKit ignores line-clamp on buttons (MWPW-209870). */
@media (max-width: 1279px) {
  .sg-card__title-text {
    /* stylelint-disable-next-line value-no-vendor-prefix */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.sg-card:is(:hover, :focus-within) .sg-card__title { color: var(--s2a-color-gray-900); }

/* Revealed on hover at 1280px+ (below). */
.sg-card__description {
  display: none;
}

.sg-card__footer {
  display: none;
}

.sg-card__track {
  font-size: 12px;
  font-weight: 500;
  color: var(--s2a-color-gray-900);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
  transition: none;
}

/* Track row below the title on mobile/tablet, hidden on desktop. Figma's row is 16px tall; the
   20px badge (16px icon + 2px padding) overflows it evenly, as in the design. */
.sg-card__badge-row {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  height: 16px;
  overflow: visible;
  margin-top: var(--s2a-spacing-md);
}

/* Desktop footer track and badge hidden on mobile */
.sg-card__track--footer { display: none; }
.sg-card__footer-badge { display: none; }

.sg-card:is(:hover, :focus-within) .sg-card__track { color: var(--s2a-color-gray-900); }

.sg-card__time {
  font-size: var(--s2a-font-size-xs);
  color: var(--s2a-color-gray-600);
  line-height: 1.5;
  white-space: nowrap;
  text-align: right;
  transition: none;
}

.sg-card:is(:hover, :focus-within) .sg-card__time { color: var(--s2a-color-gray-600); }

/* Icon action column — always visible on mobile, row layout */
.sg-card__actions {
  display: flex;
  flex-direction: row;
  gap: var(--s2a-spacing-sm);
  flex-shrink: 0;
  width: 100%;
  padding-left: 0;
  padding-top: 0;
  margin-top: 0;
  box-sizing: border-box;
  opacity: 1;
  pointer-events: auto;
  align-items: center;
  justify-content: center;
  border-top: none;
  transition: none;
}

/* Time on the right via data attribute */
.sg-card__actions::after {
  content: attr(data-time);
  font-size: var(--s2a-font-size-xs);
  color: var(--s2a-color-gray-600);
  margin-left: auto;
  white-space: nowrap;
  line-height: 1.5;
  pointer-events: none;
}

.sg-card:is(:hover, :focus-within) .sg-card__actions {
  width: 100%;
  padding-left: 0;
  opacity: 1;
}

.sg-card:not(:hover, :focus-within).is-scheduled:not(.is-favorited) .sg-card__btn--favorite,
.sg-card:not(:hover, :focus-within).is-favorited:not(.is-scheduled) .sg-card__btn--schedule {
  display: flex;
}

.sg-card:not(:hover, :focus-within).is-scheduled .sg-card__btn,
.sg-card:not(:hover, :focus-within).is-favorited .sg-card__btn {
  border-color: var(--s2a-color-gray-100);
}

/* Frosted glass icon buttons */
/* stylelint-disable-next-line no-descending-specificity */
.sg-card__btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 40%);
  background: rgb(255 255 255 / 80%);
  backdrop-filter: blur(4.687px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: none;
  flex-shrink: 0;
  padding: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
.sg-card__btn:hover { background: rgb(255 255 255 / 100%); }

/* Mobile/tablet: a scheduled/favorited (solid variant) button keeps the unselected button's transparent
   look with Figma's gray-900 outline, instead of IconButton's frosted fill and near-invisible gray-100
   border. Hover/press tints match the outlined variant. Broadcast styles its own card. */
@media (max-width: 1279px) {
  :is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card .sg-icon-btn--solid.sg-icon-btn--on-light:is(.sg-card__btn--schedule, .sg-card__btn--favorite) {
    background: transparent;
    border-color: var(--s2a-color-gray-900, #131313);
    color: var(--s2a-color-gray-900, #131313);
  }

  :is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card .sg-icon-btn--solid.sg-icon-btn--on-light:is(.sg-card__btn--schedule, .sg-card__btn--favorite):hover:not(:disabled) {
    background: var(--s2a-color-transparent-black-08, rgb(0 0 0 / 8%));
    border-color: var(--s2a-color-gray-900, #131313);
  }

  :is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card .sg-icon-btn--solid.sg-icon-btn--on-light:is(.sg-card__btn--schedule, .sg-card__btn--favorite):active:not(:disabled) {
    background: var(--s2a-color-transparent-black-12, rgb(0 0 0 / 12%));
    border-color: var(--s2a-color-gray-900, #131313);
  }
}

/* ── My Sessions / My Favorites tabs ────────────────────── */

.sg-my-sessions-tab-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--s2a-spacing-lg);
  padding: 0 var(--s2a-spacing-lg);
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
}

.sg-my-sessions-tab {
  font-family: var(--heading-font-family);
  font-weight: var(--s2a-font-weight-adobe-clean-display-black);
  font-size: var(--s2a-font-size-2xl);
  color: rgb(0 0 0 / 35%);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  padding: var(--s2a-spacing-md) 0 var(--s2a-spacing-sm);
  line-height: 1.1;
  margin-bottom: -1px;
}

.sg-my-sessions-tab--active {
  color: var(--s2a-color-gray-800);
  border-bottom-color: var(--s2a-color-gray-800);
}

.sg-my-sessions-tab:hover:not(.sg-my-sessions-tab--active) {
  color: rgb(0 0 0 / 60%);
}

.sg-my-sessions__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2a-spacing-lg);
  padding: var(--s2a-spacing-4xl) var(--s2a-spacing-lg);
  text-align: center;
}

.sg-my-sessions__empty p {
  margin: 0;
  font-size: var(--s2a-font-size-md);
  color: var(--s2a-color-content-default);
}

.sg-my-sessions__see-live-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s2a-spacing-sm) var(--s2a-spacing-xl);
  font-family: var(--body-font-family);
  font-size: var(--s2a-font-size-md);
  font-weight: var(--s2a-font-weight-adobe-clean-regular);
  color: var(--s2a-color-content-default);
  background: none;
  border: 1.5px solid var(--s2a-color-content-default);
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
}

.sg-my-sessions__see-live-btn:hover {
  background: rgb(0 0 0 / 5%);
}

.sg-my-favorites__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2a-spacing-lg);
  padding: var(--s2a-spacing-4xl) var(--s2a-spacing-lg);
  text-align: center;
}

.sg-my-favorites__empty p {
  margin: 0;
  font-size: var(--s2a-font-size-md);
  color: var(--s2a-color-content-default);
}

.sg-my-favorites__see-live-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s2a-spacing-sm) var(--s2a-spacing-xl);
  font-family: var(--body-font-family);
  font-size: var(--s2a-font-size-md);
  font-weight: var(--s2a-font-weight-adobe-clean-regular);
  color: var(--s2a-color-content-default);
  background: none;
  border: 1.5px solid var(--s2a-color-content-default);
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
}

.sg-my-favorites__see-live-btn:hover {
  background: rgb(0 0 0 / 5%);
}

/* ── Tablet (min-width: 768px) ───────────────────────────────────────────── */

@media (min-width: 768px) {
  /* ── Header ────────────────────────────────────────────────── */

  .sg-header {
    gap: var(--s2a-spacing-md);
    padding: var(--s2a-spacing-lg) 0;
  }

  .sg-header-title-row,
  .sg-header-controls {
    padding: 0 var(--s2a-spacing-lg);
  }

  .sg-header-title {
    font-size: var(--s2a-font-size-3xl);
    line-height: 1.1;
    padding-right: 0;
  }

  .sg-header-controls {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2a-spacing-md);
  }

  .sg-date-tabs {
    width: auto;
    flex-shrink: 0;
  }

  .sg-date-tab {
    flex: none;
    width: 80px;
  }

  .sg-right-controls {
    width: auto;
    gap: var(--s2a-spacing-md);
    margin-left: auto;
  }

  /* Post-event (no date tabs): title shares the controls' row, 6/12 columns on tablet. */
  .sg-header.sg-header--no-dates {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(max-content, 6fr);
    column-gap: 72px;
    align-items: center;
  }

  .sg-header.sg-header--no-dates .sg-header-title-row {
    padding-right: 0;
  }

  .sg-header.sg-header--no-dates .sg-header-controls {
    padding-left: 0;
  }

  /* Drawer only: controls now share the close button's row; clear its 16px inset + 19px width. */
  .sg-drawer .sg-header--no-dates .sg-header-controls {
    padding-right: calc(35px + var(--s2a-spacing-md));
  }

  .sg-view-dropdown-wrap {
    flex: none;
    min-width: auto;
    order: 0;
  }

  .sg-view-btn {
    width: auto;
    justify-content: flex-start;
  }

  .sg-filter-btn-label {
    display: inline;
  }

  .sg-filter-btn {
    min-width: 90px;
    width: auto;
    padding: 0 var(--s2a-spacing-md);
  }

  /* ── Live section / Carousel ───────────────────────────────── */

  .sg-carousel-section {
    background: var(--s2a-color-gray-75);
    overflow: visible;
  }

  .sg-section-title {
    font-size: var(--s2a-font-size-2xl);
    font-weight: var(--s2a-font-weight-adobe-clean-display-black);
  }

  .sg-upcoming-title {
    font-size: var(--s2a-font-size-2xl);
    margin: 0;
    padding: var(--s2a-spacing-lg) var(--s2a-spacing-lg) var(--s2a-spacing-sm);
  }

  /* ── Time slot rows ────────────────────────────────────── */

  .sg-time-row {
    flex-direction: row;
    align-items: center;
    gap: 36px;
    padding: var(--s2a-spacing-md) 0 var(--s2a-spacing-lg) var(--s2a-spacing-lg);
    background: #fff;
  }

  .sg-time-row__label {
    font-size: var(--s2a-font-size-md);
    color: var(--s2a-color-gray-800);
    white-space: nowrap;
    width: 60px;
  }

  .sg-time-row__label--category {
    width: 98px;
    white-space: normal;
    overflow-wrap: break-word;

    /* Restates .sg-time-row__time-value's values so the category label keeps matching it. */
    font-size: var(--s2a-font-size-md);
    color: var(--s2a-color-gray-800);
  }

  .sg-carousel__header {
    margin-bottom: 20px;
  }

  .sg-carousel__body {
    gap: 36px;
    align-items: center;
  }

  .sg-section-time {
    display: none;
  }

  .sg-carousel__time {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex-shrink: 0;
    font-family: var(--body-font-family);
    font-weight: var(--s2a-font-weight-adobe-clean-bold);
    font-size: var(--s2a-font-size-md);
    color: var(--s2a-color-gray-800);
    white-space: nowrap;
  }

  .sg-carousel__track { margin-right: 0; }
}

/* ── Mobile + tablet carousel arrows ─────────────────────────────────────── */

/* Grid + `display: contents` moves the nav into the header row without changing the DOM. */
@media (max-width: 1023px) {
  .sg-carousel-section .sg-carousel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    row-gap: var(--s2a-spacing-md);
  }

  .sg-carousel-section .sg-carousel__header {
    grid-area: 1 / 1;
    margin: 0;
  }

  .sg-carousel-section .sg-carousel__body { display: contents; }

  .sg-carousel-section .sg-carousel__time { display: none; }

  .sg-carousel-section .sg-section-time { display: inline; }

  .sg-carousel-section .sg-carousel__track { grid-area: 2 / 1 / 3 / -1; }

  .sg-carousel-section .sg-carousel__nav {
    display: flex;
    grid-area: 1 / 2;
    margin-right: var(--s2a-spacing-lg);
  }

  .sg-carousel-section .sg-carousel__arrow { position: relative; }

  /* 40px touch target. */
  .sg-carousel-section .sg-carousel__arrow::after {
    content: '';
    position: absolute;
    inset: -4px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sg-carousel-section .sg-carousel { row-gap: 20px; }
}

/* Tablet, no date tabs, search open: flatten the controls wrapper so the search row gets its own
   full-width grid row below the title and controls, whatever the title's height. */
@media (min-width: 768px) and (max-width: 1279px) {
  .sg-header--no-dates:has(.sg-mobile-search-row--open) :is(.sg-header-controls-collapse, .sg-header-controls-collapse-inner) {
    display: contents;
  }

  .sg-header.sg-header--no-dates:has(.sg-mobile-search-row--open) {
    row-gap: var(--s2a-spacing-lg);
  }

  .sg-header--no-dates .sg-mobile-search-row {
    grid-column: 1 / -1;
  }

  /* The flattened wrapper can't collapse, so hide its contents while a session detail is open. */
  .sg-drawer--detail-open .sg-header--no-dates:has(.sg-mobile-search-row--open) :is(.sg-header-controls, .sg-mobile-search-row) {
    display: none;
  }
}

/* ── Intermediate Tablet (1024px–1279px) — desktop-style live section ─────── */

@media (min-width: 1024px) and (max-width: 1279px) {
  .sg-carousel-section {
    padding: var(--s2a-spacing-2xl) 20px var(--s2a-spacing-3xl);
    overflow: visible;
  }

  .sg-section-time {
    display: none;
  }

  .sg-carousel__cards {
    overflow: visible;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: auto;
    scrollbar-width: auto;
    padding-right: 0;
  }

  /* Cancels .sg-carousel-section's 20px right padding so the peeking card bleeds to the edge. */
  .sg-carousel-section .sg-carousel__track {
    margin-right: -20px;
  }

  .sg-carousel__card-wrap {
    scroll-snap-align: none;
  }

  .sg-carousel__nav {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
  }

  /* No position here: .sg-carousel__nav anchors to the relatively-positioned .sg-carousel. */
  .sg-carousel__body {
    align-items: center;
    gap: 36px;
  }

  .sg-carousel__time {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex-shrink: 0;
    width: 50px;
    font-family: var(--body-font-family);
    font-weight: var(--s2a-font-weight-adobe-clean-bold);
    font-size: var(--s2a-font-size-md);
    color: var(--s2a-color-gray-800);
    white-space: nowrap;
  }

  /* ── Live card ─────────────────────────────────────────────── */

  /* Guards against session-broadcast's cards, which carry .sg-live-card--mobile up to 1280px. */
  .sg-live-card:not(.sg-live-card--mobile) {
    flex-direction: row;
    width: 100%;
    max-width: 900px;
    border: 4px solid #fff;
    border-radius: 20px;
  }

  .sg-live-card:not(.sg-live-card--mobile):is(:hover, :focus-within) {
    background: #000;
    border-color: #000;
  }

  /* Fixed, not auto (Figma: 425x240): an <img> with height:100% keeps its own aspect ratio,
     so sibling cards could end up different heights depending on photo ratio otherwise. */
  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__image {
    width: 425px;
    height: 240px;
    border-radius: 20px;
    border: 1px solid rgb(255 255 255 / 15%);
  }

  /* Fixed 192px bar, not a right-inset that stretches with the image. */
  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__progress-row {
    top: auto;
    bottom: 13px;
    left: 27px;
    right: auto;
    width: 192px;
  }

  /* No gap: .sg-live-card__content owns it, or space-between would inflate it here too. */
  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__body {
    flex: none;
    width: 425px;
    padding: var(--s2a-spacing-lg);
    justify-content: space-between;
  }

  /* Grows to fill the space above .sg-live-card__actions and centers its rows (Figma). */
  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__content {
    flex: 1 0 0;
    justify-content: center;
  }

  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__meta {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--s2a-spacing-md);
    margin: 0;
  }

  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__track-row { gap: 6px; }

  /* Figma: 12px, overriding CategoryBadge's 14px default. */
  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__meta .sg-category-badge__label {
    font-size: var(--s2a-font-size-xs, 12px);
  }

  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__track {
    font-size: var(--s2a-font-size-sm);
    font-weight: 500;
    color: #000;
  }

  .sg-live-card:not(.sg-live-card--mobile):is(:hover, :focus-within) .sg-live-card__track { color: #fff; }

  .sg-live-card:not(.sg-live-card--mobile):is(:hover, :focus-within) .sg-live-card__track-row,
  .sg-live-card:not(.sg-live-card--mobile):is(:hover, :focus-within) .sg-live-card__track-extra { color: #fff; }

  /* Track colors can't be trusted against the dark hover fill — always go white. */
  .sg-live-card:not(.sg-live-card--mobile):is(:hover, :focus-within) .sg-category-badge__icon-color { color: #fff; }

  /* Own line above the title (Figma), 12px not the --sm 14px used elsewhere. */
  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__content > .sg-live-card__time {
    font-size: var(--s2a-font-size-xs, 12px);
    color: var(--s2a-color-gray-700);
    white-space: nowrap;
    margin: 0;
  }

  .sg-live-card:not(.sg-live-card--mobile):is(:hover, :focus-within) .sg-live-card__time { color: #fff; }

  /* Overrides the base rule's 24px margin — spacing now comes from the body's flex gap. */
  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__title {
    font-size: var(--s2a-font-size-2xl);
    color: #292929;
    margin-top: 0;
  }

  .sg-live-card:not(.sg-live-card--mobile):is(:hover, :focus-within) .sg-live-card__title { color: #fff; }

  /* .sg-live-card__content now grows to fill the space above, so this margin is unneeded. */
  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__actions {
    gap: var(--s2a-spacing-sm);
    margin-top: 0;
  }

  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__btn--watch {
    background: #000;
    color: #fff;
    min-width: auto;
    padding: 0 var(--s2a-spacing-lg);
  }

  /* Figma's Button v2 "Icon Start" slot is 12px, smaller than IconPlay's own 20px default. */
  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__btn--watch svg {
    width: 12px;
    height: 12px;
  }

  /* Hover/press on the light (card-not-hovered) black base. */
  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__btn--watch:hover {
    background: rgb(0 0 0 / 64%);
    border: 1px solid #000;
  }

  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__btn--watch:active {
    background: #000;
    border: 1px solid #000;
  }

  .sg-live-card:not(.sg-live-card--mobile):is(:hover, :focus-within) .sg-live-card__btn--watch {
    background: #fff;
    color: #111;
  }

  /* On the dark (card-hovered) base — hovering the button also triggers the card's :hover. */
  .sg-live-card:not(.sg-live-card--mobile):is(:hover, :focus-within) .sg-live-card__btn--watch:hover {
    background: rgb(255 255 255 / 64%);
    border: 1px solid #fff;
  }

  .sg-live-card:not(.sg-live-card--mobile):is(:hover, :focus-within) .sg-live-card__btn--watch:active {
    background: #fff;
    border: 1px solid #fff;
  }

  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__btn--schedule-cta {
    background: transparent;
    backdrop-filter: blur(16px);
    border: 1px solid #000;
    color: #000;
    min-width: auto;
    padding: 0 var(--s2a-spacing-lg);
  }

  /* Figma's Button v2 "Icon Start" slot is 12px, smaller than IconCalendarPlus's own 20px default. */
  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__btn--schedule-cta svg {
    width: 12px;
    height: 12px;
  }

  /* Figma outlined Button v2 — subtle tint only, no color flip (matches .sg-icon-btn--outlined). */
  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__btn--schedule-cta:hover {
    background: rgb(0 0 0 / 8%);
  }

  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__btn--schedule-cta:active {
    background: rgb(0 0 0 / 12%);
  }

  /* The hover fill turns black here — flip to a white border/text so it stays visible. */
  .sg-live-card:not(.sg-live-card--mobile):is(:hover, :focus-within) .sg-live-card__btn--schedule-cta {
    background: transparent;
    border-color: #fff;
    color: #fff;
  }

  /* On the dark (card-hovered) base — hovering the button also triggers the card's :hover. */
  .sg-live-card:not(.sg-live-card--mobile):is(:hover, :focus-within) .sg-live-card__btn--schedule-cta:hover {
    background: rgb(255 255 255 / 12%);
  }

  .sg-live-card:not(.sg-live-card--mobile):is(:hover, :focus-within) .sg-live-card__btn--schedule-cta:active {
    background: rgb(255 255 255 / 16%);
  }

  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__btn--schedule { display: none; }

  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__btn--favorite {
    background: #fff;
    border: 1px solid #000;
    color: #000;
  }

  /* Figma IconButton v2, light base — border stays black, only fill/icon color move. */
  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__btn--favorite:hover {
    background: #f8f8f8;
  }

  .sg-live-card:not(.sg-live-card--mobile) .sg-live-card__btn--favorite:active {
    background: #000;
    color: #fff;
  }

  .sg-live-card:not(.sg-live-card--mobile):is(:hover, :focus-within) .sg-live-card__btn--favorite {
    background: transparent;
    border-color: #fff;
    color: #fff;
  }

  /* Declared later to win over the base rule's dark border, invisible against this black hover fill. */
  .sg-live-card:not(.sg-live-card--mobile):is(:hover, :focus-within) .sg-live-card__btn--favorite.is-favorited {
    border-color: #fff;
  }

  /* On the dark (card-hovered) base — hovering the button also triggers the card's :hover. */
  .sg-live-card:not(.sg-live-card--mobile):is(:hover, :focus-within) .sg-live-card__btn--favorite:hover {
    background: rgb(255 255 255 / 12%);
  }

  .sg-live-card:not(.sg-live-card--mobile):is(:hover, :focus-within) .sg-live-card__btn--favorite:active {
    background: #fff;
    color: #000;
  }
}

/* ── Desktop (min-width: 1280px) ─────────────────────────────────────────── */

/* Mobile/tablet: drawer covers the full screen — no rounded top corners. */
@media (max-width: 1279px) {
  .sg-drawer,
  .sg-drawer::before,
  .sg-header {
    border-radius: 0;
  }

  .sg-time-row:is(:hover, :focus-within) .sg-card:not(:hover, :focus-within) { background: var(--s2a-color-gray-50); }

  /* Label and arrows on top, cards below; `display: contents` lifts the arrows into the header. */
  .sg-time-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 20px;
    row-gap: var(--s2a-spacing-sm);
  }

  .sg-time-row__label,
  .sg-time-row__label--category {
    grid-area: 1 / 1;
    flex-direction: row;
    align-items: baseline;
    gap: var(--s2a-spacing-4);
    width: auto;
  }

  .sg-time-row__track { display: contents; }

  .sg-time-row__viewport { grid-area: 2 / 1 / 3 / -1; }

  /* Trailing gutter after the last card. */
  .sg-time-row__cards { padding-right: var(--s2a-spacing-md); }

  .sg-time-row__arrow,
  .sg-time-row:is(:hover, :focus-within) .sg-time-row__arrow {
    display: flex;
    position: relative;
    inset: auto;
    transform: none;
    width: 24px;
    height: 24px;
    opacity: 1;
    pointer-events: auto;
  }

  .sg-time-row__arrow--prev { grid-area: 1 / 2; }

  .sg-time-row__arrow--next {
    grid-area: 1 / 3;
    margin-right: var(--s2a-spacing-lg);
  }

  .sg-time-row__arrow svg {
    width: 10px;
    height: 10px;
  }

  /* 40px touch target. */
  .sg-time-row__arrow::after {
    content: '';
    position: absolute;
    inset: -8px;
  }

  /* Below desktop, disabled arrows stay visible (dimmed). */
  .sg-time-row .sg-time-row__arrow:disabled,
  .sg-time-row:is(:hover, :focus-within) .sg-time-row__arrow:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
  }
}

@media (min-width: 1280px) {
  /* ── Drawer ────────────────────────────────────────────────── */

  .sg-drawer {
    width: min(1400px, calc(100% - 40px));
    max-width: none;
  }

  /* ── Header ────────────────────────────────────────────────── */

  .sg-header {
    gap: var(--s2a-spacing-md);
    padding: var(--s2a-spacing-2xl) 0 var(--s2a-spacing-lg);
  }

  .sg-header-title-row,
  .sg-header-controls {
    padding: 0 var(--s2a-spacing-lg);
  }

  .sg-header-title {
    font-size: var(--s2a-font-size-3xl);
    line-height: var(--s2a-font-line-height-lg);
    padding-right: 0;
  }

  .sg-header-controls {
    flex-direction: row;
    align-items: center;
    gap: var(--s2a-spacing-md);
  }

  .sg-header.sg-header--no-dates {
    grid-template-columns: minmax(0, 8fr) minmax(max-content, 4fr);
  }

  /* Full page (Figma 8463:87660): wider side gutter than the widget's drawer, and a shorter
     top padding (xl, not 2xl) — this frame covers desktop only, big desktop (1920) is separate. */
  .sg-full-page__header-wrap .sg-header {
    padding-top: var(--s2a-spacing-xl);
  }

  .sg-full-page .sg-header-title-row,
  .sg-full-page .sg-header-controls {
    padding: 0 156px;
  }

  /* ── Date Tabs ─────────────────────────────────────────────── */

  .sg-date-tabs {
    width: auto;
  }

  .sg-date-tab {
    flex: none;
    width: 120px;
    height: 40px;
    font-size: var(--s2a-font-size-sm);
  }

  /* ── Right Controls ────────────────────────────────────────── */

  .sg-right-controls {
    gap: var(--s2a-spacing-md);
    width: auto;
  }

  /* Figma nests Filter + Search in their own 16px-gap group; base stays 8px for narrower headers. */
  .sg-filter-wrap {
    gap: var(--s2a-spacing-md);
  }

  /* ── Desktop Inline Search (Figma 10114:52057) — icon morphs into the field, replacing
     mobile/tablet's sg-search-btn + sg-mobile-search-row. ──────────────────────────── */
  .sg-search-btn {
    display: none;
  }

  .sg-mobile-search-row {
    display: none !important;
  }

  .sg-search-inline {
    display: inline-flex;
    align-items: center;

    /* border-box: a declared height/width plus a border would otherwise add on top (40->44px). */
    box-sizing: border-box;
    height: 40px;
    width: 40px;
    border-radius: var(--s2a-border-radius-round, 999px);
    border: 2px solid var(--s2a-color-gray-100);
    background: var(--s2a-color-background-default, #fff);
    overflow: hidden;
    flex-shrink: 0;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.28s ease;
  }

  .sg-search-inline--open {
    width: 216px;
    border-color: #131313;
    cursor: text;
  }

  .sg-search-inline:focus-within {
    outline: 1px solid var(--s2a-color-focus-ring-default, #3b63fb);
    outline-offset: 2px;
  }

  /* 36px, not 40px: the pill's 40px already includes its 2px border, so the content box is smaller. */
  .sg-search-inline__icon-btn,
  .sg-search-inline__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    flex-shrink: 0;
  }

  .sg-search-inline__icon-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
  }

  .sg-search-inline__icon-btn:hover {
    background: rgb(0 0 0 / 4%);
  }

  .sg-search-inline__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--body-font-family);
    font-size: var(--s2a-font-size-md);
    color: #131313;
    height: 100%;
    padding: 0;

    /* Fades in only once the pill has mostly finished widening, not instantly. */
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .sg-search-inline--open .sg-search-inline__input {
    opacity: 1;
    transition-delay: 0.1s;
  }

  /* Suppresses the native cancel button; .sg-search-inline__clear replaces it. */
  .sg-search-inline__input::-webkit-search-cancel-button {
    appearance: none;
  }

  .sg-search-inline__input::placeholder {
    color: rgb(0 0 0 / 40%);
  }

  .sg-search-inline__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    margin-right: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    font-size: var(--s2a-font-size-lg);
    color: #444;
    line-height: 1;
    flex-shrink: 0;
  }

  .sg-search-inline__clear:hover {
    background: rgb(0 0 0 / 7%);
  }

  /* ── View Dropdown ─────────────────────────────────────────── */

  .sg-view-dropdown-wrap {
    flex: none;
    min-width: auto;
    order: 0;
  }

  .sg-view-btn {
    width: auto;
    justify-content: flex-start;
    gap: var(--s2a-spacing-sm);
    padding: 0 var(--s2a-spacing-lg);
  }

  /* ── Filter ────────────────────────────────────────────────── */

  .sg-filter-btn-label {
    display: inline;
  }

  .sg-filter-btn {
    min-width: 90px;
    width: auto;
    padding: 0 var(--s2a-spacing-md);
  }

  /* ── Section headers ───────────────────────────────────────── */

  .sg-carousel-section {
    padding: 36px 20px var(--s2a-spacing-3xl) 20px;
    overflow: visible;
  }

  /* Wider left gutter than the widget's drawer. Right stays at the base 20px so the card
     track still bleeds to the true edge (see .sg-carousel__track's -20px margin). */
  .sg-full-page .sg-carousel-section {
    padding-left: 156px;
  }

  .sg-section-title {
    font-family: var(--heading-font-family);
    font-weight: var(--s2a-font-weight-adobe-clean-display-black);
    font-size: var(--s2a-font-size-2xl);
  }

  .sg-carousel-section--live .sg-section-title::before {
    width: 8px;
    height: 8px;
  }

  /* No top margin — the drawer header's own bottom padding is the gap above it. */
  .sg-upcoming-title {
    font-size: var(--s2a-font-size-2xl);
    line-height: 110%;
    color: var(--s2a-color-content-default);
    margin: 0;
    padding: var(--s2a-spacing-lg) var(--s2a-spacing-20) var(--s2a-spacing-sm);
  }

  /* Full page (Figma 8463:87648): wider side gutter than the widget's drawer. The My Sessions /
     My Favorites tab bar shares it so the tabs line up with the header (MWPW-210088). */
  .sg-full-page .sg-upcoming-title,
  .sg-full-page .sg-my-sessions-tab-bar {
    padding-left: 156px;
    padding-right: 156px;
  }

  /* ── Carousel ──────────────────────────────────────────────── */

  .sg-carousel__cards {
    /* Must stay overflow:visible — this gets the translate transform; the static track clips. */
    overflow: visible;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: auto;
    scrollbar-width: auto;
    padding-right: 0;
  }

  .sg-carousel__card-wrap {
    scroll-snap-align: none;
  }

  /* Only the track bleeds past the section padding; title and arrows keep the inset. */
  .sg-carousel__track {
    margin-right: -20px;
  }

  /* Nav lives in .sg-carousel__body, so it anchors to the relatively-positioned carousel. */
  .sg-carousel__nav {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
  }

  /* Align with the header's search button (gutter minus the section's 20px right padding). */
  .sg-full-page .sg-carousel__nav {
    right: calc(156px - 20px);
  }

  /* Time inline with the title hides; it moves to the left gutter. */
  .sg-section-time {
    display: none;
  }

  .sg-carousel__body {
    align-items: center;
    gap: var(--s2a-spacing-3xl);
  }

  .sg-carousel__time {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex-shrink: 0;
    width: 60px;
    font-family: var(--body-font-family);
    font-weight: var(--s2a-font-weight-adobe-clean-bold);
    font-size: var(--s2a-font-size-lg);
    color: var(--s2a-color-gray-800);
    white-space: nowrap;
  }

  /* ── Live card ─────────────────────────────────────────────── */

  .sg-live-card {
    flex-direction: row;
    width: 100%;
    max-width: 1104px;
    border: 4px solid #fff;
    border-radius: 20px;
  }

  /* Full page has more available width than the widget — a cap, not a fixed width, so it can
     still shrink on narrower viewports in this range. */
  .sg-full-page .sg-live-card {
    max-width: 1156px;
  }

  /* No width of its own, so it shrink-wraps to content — flex-basis gives it a definite size
     to clamp against. Widget cap here; full page's wider cap overrides below. */
  .sg-carousel-section--live .sg-carousel__card-wrap {
    flex: 0 0 100%;
    max-width: 1104px;
  }

  .sg-full-page .sg-carousel-section--live .sg-carousel__card-wrap {
    max-width: 1156px;
  }

  .sg-full-page .sg-carousel-section--live .sg-carousel__cards {
    gap: var(--s2a-spacing-lg);
  }

  .sg-live-card:is(:hover, :focus-within) {
    background: var(--s2a-color-gray-900, #131313);
    border-color: var(--s2a-color-gray-900, #131313);
  }

  /* Fixed, not auto (Figma: 560x316): an <img> with height:100% keeps its own aspect ratio,
     so sibling cards could differ in height by photo ratio; object-fit:cover crops to this box. */
  .sg-live-card__image {
    width: 560px;
    height: 316px;
    border-radius: 20px;
    border: 1px solid rgb(255 255 255 / 15%);
  }

  /* Fixed 192px bar, not a right-inset that stretches with the image. */
  .sg-live-card__progress-row {
    top: auto;
    bottom: 13px;
    left: 27px;
    right: auto;
    width: 192px;
  }

  /* No gap: .sg-live-card__content owns it, or space-between would inflate it here too. */
  .sg-live-card__body {
    padding: var(--s2a-spacing-xl);
    justify-content: space-between;
  }

  /* Grows to fill the space above .sg-live-card__actions and centers its rows (Figma). */
  .sg-live-card__content {
    flex: 1 0 0;
    justify-content: center;
  }

  .sg-live-card__meta {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--s2a-spacing-md);
    margin: 0;
  }

  .sg-live-card__track-row { gap: 6px; }

  /* Figma: 12px, overriding CategoryBadge's 14px default. */
  .sg-live-card__meta .sg-category-badge__label {
    font-size: var(--s2a-font-size-xs, 12px);
  }

  .sg-live-card__track {
    font-size: var(--s2a-font-size-sm);
    font-weight: 500;
    color: #000;
  }

  .sg-live-card:is(:hover, :focus-within) .sg-live-card__track { color: #fff; }

  .sg-live-card:is(:hover, :focus-within) .sg-live-card__track-row,
  .sg-live-card:is(:hover, :focus-within) .sg-live-card__track-extra { color: #fff; }

  /* Track colors can't be trusted against the dark hover fill — always go white. */
  .sg-live-card:is(:hover, :focus-within) .sg-category-badge__icon-color { color: #fff; }

  /* Own line above the title (Figma), 12px not the --sm 14px used elsewhere. */
  .sg-live-card__content > .sg-live-card__time {
    font-size: var(--s2a-font-size-xs, 12px);
    color: var(--s2a-color-gray-700);
    white-space: nowrap;
    margin: 0;
  }

  .sg-live-card:is(:hover, :focus-within) .sg-live-card__time { color: #fff; }

  /* Overrides the base rule's 24px margin — spacing now comes from the body's flex gap. */
  .sg-live-card__title {
    font-size: var(--s2a-font-size-3xl);
    color: #292929;
    margin-top: 0;
  }

  .sg-live-card:is(:hover, :focus-within) .sg-live-card__title { color: #fff; }

  /* .sg-live-card__content now grows to fill the space above, so this margin is unneeded. */
  .sg-live-card__actions {
    gap: var(--s2a-spacing-sm);
    margin-top: 0;
  }

  .sg-live-card__btn--watch {
    background: #000;
    color: #fff;
    min-width: auto;
    padding: 0 var(--s2a-spacing-lg);
  }

  /* Figma's Button v2 "Icon Start" slot is 12px, smaller than IconPlay's own 20px default. */
  .sg-live-card__btn--watch svg {
    width: 12px;
    height: 12px;
  }

  /* Hover/press on the light (card-not-hovered) black base. */
  .sg-live-card__btn--watch:hover {
    background: rgb(0 0 0 / 64%);
    border: 1px solid #000;
  }

  .sg-live-card__btn--watch:active {
    background: #000;
    border: 1px solid #000;
  }

  .sg-live-card:is(:hover, :focus-within) .sg-live-card__btn--watch {
    background: #fff;
    color: #000;
  }

  /* On the dark (card-hovered) base — hovering the button also triggers the card's :hover. */
  .sg-live-card:is(:hover, :focus-within) .sg-live-card__btn--watch:hover {
    background: rgb(255 255 255 / 64%);
    border: 1px solid #fff;
  }

  .sg-live-card:is(:hover, :focus-within) .sg-live-card__btn--watch:active {
    background: #fff;
    border: 1px solid #fff;
  }

  .sg-live-card__btn--schedule-cta {
    background: transparent;
    backdrop-filter: blur(16px);
    border: 1px solid #000;
    color: #000;
    min-width: auto;
    padding: 0 var(--s2a-spacing-lg);
  }

  /* Figma's Button v2 "Icon Start" slot is 12px, smaller than IconCalendarPlus's own 20px default. */
  .sg-live-card__btn--schedule-cta svg {
    width: 12px;
    height: 12px;
  }

  /* Figma outlined Button v2 — subtle tint only, no color flip (matches .sg-icon-btn--outlined). */
  .sg-live-card__btn--schedule-cta:hover {
    background: rgb(0 0 0 / 8%);
  }

  .sg-live-card__btn--schedule-cta:active {
    background: rgb(0 0 0 / 12%);
  }

  /* The hover fill turns black here — flip to a white border/text so it stays visible. */
  .sg-live-card:is(:hover, :focus-within) .sg-live-card__btn--schedule-cta {
    background: transparent;
    border-color: #fff;
    color: #fff;
  }

  /* On the dark (card-hovered) base — hovering the button also triggers the card's :hover. */
  .sg-live-card:is(:hover, :focus-within) .sg-live-card__btn--schedule-cta:hover {
    background: rgb(255 255 255 / 12%);
  }

  .sg-live-card:is(:hover, :focus-within) .sg-live-card__btn--schedule-cta:active {
    background: rgb(255 255 255 / 16%);
  }

  /* Design shows only Watch now + Favorite on the desktop live card. */
  .sg-live-card__btn--schedule {
    display: none;
  }

  .sg-live-card__btn--favorite {
    background: transparent;
    border: 1px solid #000;
    color: #000;
  }

  /* Figma IconButton v2, light base — border stays black, only fill/icon color move. */
  .sg-live-card__btn--favorite:hover {
    background: #f8f8f8;
  }

  .sg-live-card__btn--favorite:active {
    background: #000;
    color: #fff;
  }

  .sg-live-card:is(:hover, :focus-within) .sg-live-card__btn--favorite {
    background: transparent;
    border-color: #fff;
    color: #fff;
  }

  /* Declared later to win over the base rule's dark border, invisible against this black hover fill. */
  .sg-live-card:is(:hover, :focus-within) .sg-live-card__btn--favorite.is-favorited {
    border-color: #fff;
  }

  /* On the dark (card-hovered) base — hovering the button also triggers the card's :hover. */
  .sg-live-card:is(:hover, :focus-within) .sg-live-card__btn--favorite:hover {
    background: rgb(255 255 255 / 12%);
  }

  .sg-live-card:is(:hover, :focus-within) .sg-live-card__btn--favorite:active {
    background: #fff;
    color: #000;
  }

  /* ── Time slot rows ────────────────────────────────────────── */

  .sg-time-row {
    flex-direction: row;
    align-items: center;
    gap: var(--s2a-spacing-3xl);

    /* Left gutter matches .sg-upcoming-title; right stays 0 so the carousel runs to the edge. */
    padding: var(--s2a-spacing-sm) 0 var(--s2a-spacing-sm) var(--s2a-spacing-20);
    border-bottom: 1px solid #e8e8e8;
    max-height: 600px;
    background: #fff;
    overflow-x: clip;
    overflow-y: visible;
  }

  /* Full page (Figma 8463:87648): wider left gutter than the widget's drawer, matching
     .sg-full-page .sg-upcoming-title; right stays 0 so the carousel still runs to the edge. */
  .sg-full-page .sg-time-row {
    padding-left: 156px;
  }

  .sg-time-row:last-child { border-bottom: none; }

  .sg-time-row:is(:hover, :focus-within) { background: #f6f6f6; }

  .sg-time-row__label {
    font-size: var(--s2a-font-size-md);
    color: var(--s2a-color-gray-800);
    white-space: nowrap;
    width: 60px;
    padding: 0;
  }

  /* Desktop row headings stay lg; mobile/tablet use Figma's title-xs (md). */
  .sg-time-row__time-value {
    font-size: var(--s2a-font-size-lg);
  }

  .sg-time-row__label--category {
    width: 98px;
    white-space: normal;
    overflow-wrap: break-word;

    /* Restates .sg-time-row__time-value's values so the category label keeps matching it. */
    color: var(--s2a-color-gray-800);
    font-size: var(--s2a-font-size-lg);
    font-style: normal;
    font-weight: var(--s2a-font-weight-adobe-clean-bold);
    line-height: var(--s2a-font-line-height-sm);
  }

  .sg-time-row__track {
    overflow: visible;
    width: auto;
  }

  /* The viewport clips, not the track, so the arrows can overhang; clip+visible still shows shadows. */
  .sg-time-row__viewport {
    overflow-x: clip;
    overflow-y: visible;
    width: auto;
  }

  .sg-time-row__cards {
    flex-direction: row;
    gap: var(--s2a-spacing-md);

    /* Must stay overflow:visible — this gets the translateX; the static viewport clips. */
    overflow: visible;
    width: auto;
    padding: 0;
    height: 124px;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: auto;
    scrollbar-width: auto;
  }

  .sg-time-row__card-wrap {
    scroll-snap-align: none;
    min-width: auto;
    width: auto;
  }

  .sg-time-row__arrow {
    display: flex;
  }

  /* ── Session cards ─────────────────────────────────────────── */

  :is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card {
    flex-direction: row;
    width: 379px;
    min-height: 124px;
    background: var(--s2a-color-gray-50);
    border: none;
    border-radius: var(--s2a-border-radius-md);
    padding: var(--s2a-spacing-lg);
    gap: 0;
    box-shadow: none;
    align-items: stretch;
    transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                min-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s ease,
                max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                border-width 0.45s ease;
  }

  :is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card:is(:hover, :focus-within) {
    flex-direction: row;
    width: 427px;
    min-height: 150px;
    background: var(--s2a-color-gray-900);
    border: none;
    border-radius: var(--s2a-border-radius-md);
    padding: var(--s2a-spacing-lg);
    gap: 0;
    box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
    align-items: stretch;
    transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                min-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s ease,
                max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                border-width 0.45s ease;
    z-index: 2;
  }

  /* :not(.sg-card--on-demand): don't reserve the removed schedule button's space (MWPW-208011). */
  :is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card.is-scheduled:not(.sg-card--on-demand),
  :is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card.is-favorited {
    flex-direction: row;
    width: 427px;
    min-height: 124px;
    background: var(--s2a-color-gray-50);
    border: none;
    border-radius: var(--s2a-border-radius-md);
    padding: var(--s2a-spacing-lg);
    gap: 0;
    box-shadow: none;
    align-items: stretch;
    transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                min-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s ease,
                max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                border-width 0.45s ease;
  }

  /* Restated: the resting .is-scheduled/.is-favorited rule ties on specificity and is later. */
  :is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card.is-scheduled:not(.sg-card--on-demand):is(:hover, :focus-within),
  :is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card.is-favorited:is(:hover, :focus-within) {
    background: var(--s2a-color-gray-900);
    min-height: 150px;
    box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
    z-index: 2;
  }

  /* Restates plain-card desktop layout at 4-class specificity so on-demand cards aren't
     shadowed by the base rule's .is-scheduled selector (MWPW-208011). */
  :is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card.is-scheduled.sg-card--on-demand:not(.is-favorited) {
    flex-direction: row;
    width: 379px;
    min-height: 124px;
    background: var(--s2a-color-gray-50);
    border: none;
    border-radius: var(--s2a-border-radius-md);
    padding: var(--s2a-spacing-lg);
    gap: 0;
    box-shadow: none;
    align-items: stretch;
    transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                min-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s ease,
                max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                border-width 0.45s ease;
  }

  :is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card.is-scheduled.sg-card--on-demand:not(.is-favorited):is(:hover, :focus-within) {
    width: 427px;
    min-height: 150px;
    background: var(--s2a-color-gray-900);
    box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
    z-index: 2;
  }

  .sg-card__body {
    flex: none;
    width: 331px;
  }

  .sg-card__title {
    font-size: var(--s2a-font-size-lg);
    font-weight: var(--s2a-font-weight-adobe-clean-extrabold);
    line-height: 1.22;
    height: auto;
    margin-top: 0;
    margin-bottom: 0;
    color: var(--s2a-color-gray-900);
    transition: color 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .sg-card:is(:hover, :focus-within) .sg-card__title { color: #fff; }

  /* margin-top here (not on the title) since .sg-card__body has gap: 0. */
  .sg-card__description {
    margin-top: var(--s2a-spacing-xs);
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -0.14px;
    color: var(--s2a-color-gray-500, #8f8f8f);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  .sg-card:is(:hover, :focus-within) .sg-card__description {
    display: block;
  }

  .sg-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s2a-spacing-xs);
    margin-top: auto;
    padding-top: var(--s2a-spacing-md);
  }

  .sg-card__track {
    transition: color 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Mobile variant hidden on desktop */
  .sg-card__badge-row { display: none; }

  /* Desktop footer: category badge replaces plain track text */
  .sg-card__track--footer { display: none; }
  .sg-card__footer-badge { display: contents; }

  .sg-card:is(:hover, :focus-within) .sg-card__track { color: #fff; }

  .sg-card:is(:hover, :focus-within) .sg-category-badge { color: #fff; }

  /* Track colors can't be trusted against the dark hover fill — always go white. */
  .sg-card:is(:hover, :focus-within) .sg-category-badge__icon-color { color: #fff; }

  .sg-card:is(:hover, :focus-within) .sg-icon-btn--outlined.sg-icon-btn--on-light {
    border-color: var(--s2a-color-border-inverse, #fff);
    color: var(--s2a-color-content-knockout, #fff);
  }

  .sg-card:is(:hover, :focus-within) .sg-icon-btn--outlined.sg-icon-btn--on-light:hover:not(:disabled) {
    background: var(--s2a-color-transparent-white-12, rgb(255 255 255 / 12%));
  }

  .sg-card:is(:hover, :focus-within) .sg-icon-btn--outlined.sg-icon-btn--on-light:active:not(:disabled) {
    background: var(--s2a-color-transparent-white-16, rgb(255 255 255 / 16%));
  }

  .sg-card__time {
    transition: color 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .sg-card:is(:hover, :focus-within) .sg-card__time { color: rgb(255 255 255 / 50%); }

  /* Icon action column — slides out from width:0 on hover/active */
  .sg-card__actions {
    flex-direction: column;
    gap: var(--s2a-spacing-md);
    width: 0;
    padding-left: 0;
    margin-top: 0;
    opacity: 0;
    pointer-events: none;
    align-items: center;
    justify-content: start;
    border-top: none;
    transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                padding-left 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.22s ease;
  }

  .sg-card__actions::after {
    display: none;
  }

  .sg-card:is(:hover, :focus-within) .sg-card__actions,
  .sg-card.is-favorited .sg-card__actions,
  .sg-card.is-scheduled:not(.sg-card--on-demand) .sg-card__actions {
    width: 48px;
    padding-left: var(--s2a-spacing-md);
    opacity: 1;
    pointer-events: auto;
  }

  /* Classes set on mouseenter only, so state changes while hovered don't re-trigger the animation. */
  .sg-card--anim-fav .sg-card__btn--favorite {
    animation: sg-card-heart-slide 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .sg-card--anim-fav .sg-card__btn--schedule,
  .sg-card--anim-fav .sg-card__btn--play,
  .sg-card--anim-sched .sg-card__btn--favorite {
    animation: sg-card-btn-reveal 0.22s ease both;
  }

  /* Figma calls for a gray-900 outline at rest on both buttons; overrides the base
     rule's near-invisible light-gray border-color (MWPW-207192). */
  .sg-card:not(:hover, :focus-within).is-scheduled:not(.sg-card--on-demand) .sg-card__btn--favorite,
  .sg-card:not(:hover, :focus-within).is-favorited .sg-card__btn--favorite,
  .sg-card:not(:hover, :focus-within).is-scheduled:not(.sg-card--on-demand) .sg-card__btn--schedule,
  .sg-card:not(:hover, :focus-within).is-favorited .sg-card__btn--schedule {
    border-color: var(--s2a-color-gray-900, #131313);
    color: var(--s2a-color-gray-900, #131313);
  }

  .sg-card:not(:hover, :focus-within).is-scheduled:not(.sg-card--on-demand):not(.is-favorited) .sg-card__btn--favorite,
  .sg-card:not(:hover, :focus-within).is-favorited:not(.is-scheduled) .sg-card__btn--schedule {
    display: none;
  }

  .sg-card:not(:hover, :focus-within) .sg-card__btn--play {
    display: none;
  }

  /* Card hover always darkens to gray-900 (see .is-scheduled/.is-favorited:is(:hover...)
     above); all three buttons become a solid white pill with a black icon so they read
     clearly against it, per Figma (MWPW-207192). The button swaps between the
     --outlined (unfavorited/unscheduled/play) and --solid (favorited/scheduled)
     icon-button variants, so both are covered here; classes are repeated to outrank
     each variant's own rule below, which would otherwise still win on `color` and
     paint the icon white-on-white. */
  .sg-card:is(:hover, :focus-within) .sg-icon-btn--outlined.sg-icon-btn--on-light.sg-card__btn--favorite,
  .sg-card:is(:hover, :focus-within) .sg-icon-btn--outlined.sg-icon-btn--on-light.sg-card__btn--schedule,
  .sg-card:is(:hover, :focus-within) .sg-icon-btn--outlined.sg-icon-btn--on-light.sg-card__btn--play,
  .sg-card:is(:hover, :focus-within) .sg-icon-btn--solid.sg-icon-btn--on-light.sg-card__btn--favorite,
  .sg-card:is(:hover, :focus-within) .sg-icon-btn--solid.sg-icon-btn--on-light.sg-card__btn--schedule {
    background: #fff;
    border-color: #fff;
    color: #000;
  }

  /* Each variant also darkens further on its own :hover/:active — meant for buttons on a
     light card, wrong once the card itself has gone dark. Neutralize both sub-states so
     a directly-hovered/pressed button doesn't go dark-on-dark and hide its icon again. */
  .sg-card:is(:hover, :focus-within) .sg-icon-btn--outlined.sg-icon-btn--on-light.sg-card__btn--favorite:hover:not(:disabled),
  .sg-card:is(:hover, :focus-within) .sg-icon-btn--outlined.sg-icon-btn--on-light.sg-card__btn--schedule:hover:not(:disabled),
  .sg-card:is(:hover, :focus-within) .sg-icon-btn--outlined.sg-icon-btn--on-light.sg-card__btn--play:hover:not(:disabled),
  .sg-card:is(:hover, :focus-within) .sg-icon-btn--solid.sg-icon-btn--on-light.sg-card__btn--favorite:hover:not(:disabled),
  .sg-card:is(:hover, :focus-within) .sg-icon-btn--solid.sg-icon-btn--on-light.sg-card__btn--schedule:hover:not(:disabled) {
    background: rgb(255 255 255 / 64%);
    border-color: #fff;
  }

  .sg-card:is(:hover, :focus-within) .sg-icon-btn--outlined.sg-icon-btn--on-light.sg-card__btn--favorite:active:not(:disabled),
  .sg-card:is(:hover, :focus-within) .sg-icon-btn--outlined.sg-icon-btn--on-light.sg-card__btn--schedule:active:not(:disabled),
  .sg-card:is(:hover, :focus-within) .sg-icon-btn--outlined.sg-icon-btn--on-light.sg-card__btn--play:active:not(:disabled),
  .sg-card:is(:hover, :focus-within) .sg-icon-btn--solid.sg-icon-btn--on-light.sg-card__btn--favorite:active:not(:disabled),
  .sg-card:is(:hover, :focus-within) .sg-icon-btn--solid.sg-icon-btn--on-light.sg-card__btn--schedule:active:not(:disabled) {
    background: #fff;
    border-color: transparent;
  }

  @keyframes sg-card-heart-slide {
    from { transform: translateY(-48px); }
    to { transform: translateY(0); }
  }

  @keyframes sg-card-btn-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .sg-card__btn {
    transition: background 0.15s;
  }

  /* Card dismiss: collapses horizontally + fades out */
  .sg-card--collapsing {
    opacity: 0 !important;
    max-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    pointer-events: none;
    overflow: hidden;
  }

  /* max-height is set by JS from the row's real height, keeping the slide in sync with the card. */
  .sg-time-row--collapsing {
    opacity: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    pointer-events: none;
    overflow: hidden;
  }
}

/* ── Suppress card hover on touch desktops (≥1280px, hover: none) ── */

@media (hover: none) and (min-width: 1280px) {
  /* Kill transitions so tap-triggered :hover resets are instant */
  :is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card { transition: none; }

  :is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card:is(:hover, :focus-within),
  :is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card.is-scheduled:is(:hover, :focus-within),
  :is(.sessions-guide, .sessions-guide-full-page, .sg-portal) .sg-card.is-favorited:is(:hover, :focus-within) {
    width: 379px;
    min-height: 124px;
    background: var(--s2a-color-gray-50);
    box-shadow: none;
    z-index: auto;
  }

  .sg-card:is(:hover, :focus-within) .sg-card__title { color: var(--s2a-color-gray-900); }
  .sg-card:is(:hover, :focus-within) .sg-card__track { color: var(--s2a-color-gray-900); }
  .sg-card:is(:hover, :focus-within) .sg-category-badge { color: var(--s2a-color-gray-900); }
  .sg-card:is(:hover, :focus-within) .sg-category-badge__icon-color { color: var(--sg-badge-icon-color, currentcolor); }
  .sg-card:is(:hover, :focus-within) .sg-card__time { color: var(--s2a-color-gray-600); }

  .sg-card:is(:hover, :focus-within) .sg-icon-btn--outlined.sg-icon-btn--on-light {
    border-color: var(--s2a-color-border-default, #292929);
    color: var(--s2a-color-content-default, #000);
  }

  .sg-card:is(:hover, :focus-within) .sg-card__actions {
    width: 0;
    padding-left: 0;
    opacity: 0;
    pointer-events: none;
  }
}

/* ── Drawer body layout (Phase 6 — overlay sibling) ─────────── */

.sg-drawer__body {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sg-drawer__body .sg-body-scroll {
  flex: 1;
  overflow-y: hidden;
}

.sg-drawer__body .sg-body-scroll--scrollable {
  overflow-y: auto;
}

/* ── Pending state — muted action buttons ────────────────────── */

.sg-live-card__btn.is-pending {
  opacity: 0.5;
  pointer-events: none;
}


/* ── Full Page Shell (Phase 9) ───────────────────────────────── */

.sg-full-page {
  display: flex;
  flex-direction: column;
  min-height: 100px;
  position: relative;
  background: var(--s2a-color-background-default);
}

/* Static, not sticky — sticky glued the ~300px control cluster to the top for the whole page.
   Still needs its own top clearance since nothing else pushes it below GNAV on load. */
.sg-full-page__header-wrap {
  border-bottom: 1px solid var(--s2a-color-border-subtle);
  background: var(--s2a-color-background-default);
  padding-top: var(--feds-nav-total-height, 80px);
}

@media (max-width: 767px) {
  .sg-full-page__header-wrap {
    border-bottom: none;
  }
}

.sg-full-page__header-wrap .sg-header {
  border-radius: 0;
  border-bottom: none;
  position: static;
}

.sg-full-page__body {
  flex: 1;
  padding: 0 0 var(--s2a-spacing-lg);
}

/* Programmatic focus target (Reset all), same as .sg-body-scroll. */
.sg-full-page__body:focus,
.sg-full-page__body:focus-visible {
  outline: none;
}

@media (max-width: 767px) {
  .sg-full-page .sg-header-title-row,
  .sg-full-page .sg-header-controls {
    padding: 0 var(--s2a-spacing-lg);
  }
}

/* Per-button backdrop blur causes paint artifacts while native-scroll cards resize. */
@media (max-width: 1279px) {
  .sg-full-page .sg-card .sg-icon-btn {
    backdrop-filter: none;
  }
}

/* Large desktop (Figma 8463-87634): even wider content gutter than the 1280px tier's 156px.
   Live card stays 1156px at this size too — no override needed. */
@media (min-width: 1920px) {
  .sg-full-page .sg-header-title-row,
  .sg-full-page .sg-header-controls {
    padding: 0 160px;
  }

  /* Right stays at the base 20px — see the 1280px tier's identical comment. */
  .sg-full-page .sg-carousel-section {
    padding-left: 160px;
  }

  .sg-full-page .sg-carousel__nav {
    right: calc(160px - 20px);
  }

  .sg-full-page .sg-upcoming-title,
  .sg-full-page .sg-my-sessions-tab-bar {
    padding-left: 160px;
    padding-right: 160px;
  }

  .sg-full-page .sg-time-row {
    padding-left: 160px;
  }
}

/* ── Track section (On Demand) ───────────────────────────────── */



/* ── Category Badge ──────────────────────────────────────── */

.sg-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* --sg-badge-icon-color is set inline by CategoryBadge.js; hover overrides it to white. */
.sg-category-badge__icon-color {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--sg-badge-icon-color, currentcolor);
}

.sg-icon {
  display: inline-flex;
}

.sg-icon svg {
  display: block;
}

.sg-category-badge__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: currentcolor;
}

.sg-category-badge--sm .sg-category-badge__label {
  font-size: 12px;
}

/* "+N" indicator for additionalTracks (Figma "Component/S/Bold") — currentcolor, no dimming. */
.sg-category-badge__count {
  font-size: var(--s2a-font-size-xs);
  font-weight: var(--s2a-font-weight-adobe-clean-bold);
  line-height: var(--s2a-font-line-height-16);
  letter-spacing: 0;
  color: currentcolor;
}

/* ── Icon Button (S2A Foundations) ──────────────────────────────────── */

.sg-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--s2a-border-radius-round, 999px);
  border: 1px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
  transition: background 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
  padding: 0;
}

.sg-icon-btn:disabled {
  opacity: 0.48;
  cursor: default;
  pointer-events: none;
}

.sg-icon-btn:focus-visible {
  outline: 1px solid var(--s2a-color-focus-ring-default, #3b63fb);
  outline-offset: 1px;
}

/* Sizes */
.sg-icon-btn--xs {
  width: 24px;
  height: 24px;
}

.sg-icon-btn--md {
  width: 32px;
  height: 32px;
}

.sg-icon-btn--lg {
  width: 40px;
  height: 40px;
}

/* Icon slot */
.sg-icon-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: none;
}

.sg-icon-btn--xs .sg-icon-btn__icon {
  width: 12px;
  height: 12px;
}

.sg-icon-btn--md .sg-icon-btn__icon {
  width: 16px;
  height: 16px;
}

.sg-icon-btn--lg .sg-icon-btn__icon {
  width: 20px;
  height: 20px;
}

.sg-icon-btn__icon > svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── solid / on-light ──────────────────────────────────────────────── */

.sg-icon-btn--solid.sg-icon-btn--on-light {
  border-radius: var(--s2a-radius-corner-full, 2000px);
  border: var(--s2a-border-width-sm) solid var(--s2a-color-gray-100);
  background: rgb(255 255 255 / 80%);
  backdrop-filter: blur(4.6875px);
  color: var(--s2a-color-content-default, #000);
}

.sg-icon-btn--solid.sg-icon-btn--on-light:hover:not(:disabled) {
  background: var(--s2a-color-transparent-black-64, rgb(0 0 0 / 64%));
  border-color: var(--s2a-color-border-knockout, #000);
}

.sg-icon-btn--solid.sg-icon-btn--on-light:active:not(:disabled) {
  background: var(--s2a-color-background-knockout, #000);
  border-color: transparent;
}

/* ── solid / on-dark ───────────────────────────────────────────────── */

.sg-icon-btn--solid.sg-icon-btn--on-dark {
  background: var(--s2a-color-background-default, #fff);
  color: var(--s2a-color-content-default, #000);
  border: var(--s2a-border-width-sm) solid #000;
}

.sg-icon-btn--solid.sg-icon-btn--on-dark:hover:not(:disabled) {
  background: var(--s2a-color-transparent-white-64, rgb(255 255 255 / 64%));
  border-color: var(--s2a-color-border-inverse, #fff);
}

.sg-icon-btn--solid.sg-icon-btn--on-dark:active:not(:disabled) {
  background: var(--s2a-color-background-default, #fff);
  border-color: transparent;
}

/* ── outlined / on-light ───────────────────────────────────────────── */

.sg-icon-btn--outlined.sg-icon-btn--on-light {
  background: transparent;
  border-color: var(--s2a-color-border-default, #292929);
  color: var(--s2a-color-content-default, #000);
  backdrop-filter: blur(16px);
}

.sg-icon-btn--outlined.sg-icon-btn--on-light:hover:not(:disabled) {
  background: var(--s2a-color-transparent-black-08, rgb(0 0 0 / 8%));
}

.sg-icon-btn--outlined.sg-icon-btn--on-light:active:not(:disabled) {
  background: var(--s2a-color-transparent-black-12, rgb(0 0 0 / 12%));
}

/* ── outlined / on-dark ────────────────────────────────────────────── */

.sg-icon-btn--outlined.sg-icon-btn--on-dark {
  background: transparent;
  border-color: var(--s2a-color-border-inverse, #fff);
  color: var(--s2a-color-content-knockout, #fff);
  backdrop-filter: blur(16px);
}

.sg-icon-btn--outlined.sg-icon-btn--on-dark:hover:not(:disabled) {
  background: var(--s2a-color-transparent-white-12, rgb(255 255 255 / 12%));
}

.sg-icon-btn--outlined.sg-icon-btn--on-dark:active:not(:disabled) {
  background: var(--s2a-color-transparent-white-16, rgb(255 255 255 / 16%));
}

/* ── transparent / on-light ────────────────────────────────────────── */

.sg-icon-btn--transparent.sg-icon-btn--on-light {
  background: transparent;
  color: var(--s2a-color-content-default, #000);
  backdrop-filter: blur(16px);
}

.sg-icon-btn--transparent.sg-icon-btn--on-light:hover:not(:disabled) {
  background: var(--s2a-color-transparent-black-08, rgb(0 0 0 / 8%));
}

.sg-icon-btn--transparent.sg-icon-btn--on-light:active:not(:disabled) {
  background: var(--s2a-color-transparent-black-12, rgb(0 0 0 / 12%));
}

/* ── transparent / on-dark ─────────────────────────────────────────── */

.sg-icon-btn--transparent.sg-icon-btn--on-dark {
  background: transparent;
  color: var(--s2a-color-content-knockout, #fff);
  backdrop-filter: blur(16px);
}

.sg-icon-btn--transparent.sg-icon-btn--on-dark:hover:not(:disabled) {
  background: var(--s2a-color-transparent-white-12, rgb(255 255 255 / 12%));
}

.sg-icon-btn--transparent.sg-icon-btn--on-dark:active:not(:disabled) {
  background: var(--s2a-color-transparent-white-16, rgb(255 255 255 / 16%));
}


/* ── Back to Top (Figma 9145:44653) — same treatment on mobile/tablet and desktop ─────── */

.sg-back-to-top {
  position: absolute;

  /* Pulled left by the padding below so the arrow/label sit at the design's 20px inset. */
  left: calc(var(--s2a-spacing-20, 20px) - var(--s2a-spacing-xs));
  bottom: var(--s2a-spacing-20, 20px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  /* Matched to the other three sides so the frosting fades in symmetrically. */
  gap: var(--s2a-spacing-xs);
  padding: var(--s2a-spacing-xs);
  border: none;
  border-radius: var(--s2a-border-radius-sm);

  /* transparent: otherwise the UA default background paints solid behind the glass ::before. */
  background: transparent;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Glass fill on a pseudo-element (Figma 11889:43436) so its blur/mask don't soften the
   arrow/label; fades out via a radial mask rather than blurring the box's own edges. */
.sg-back-to-top::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -40px;
  background: rgb(255 255 255 / 20%);
  backdrop-filter: blur(15px);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
  pointer-events: none;
}

/* Fades in once the list has been scrolled (see shouldShowBackToTop). */
.sg-back-to-top--visible {
  opacity: 1;
  visibility: visible;
}

/* Full-page surface: the window scrolls, so this anchors to the viewport, not the drawer body. */
.sg-back-to-top--fixed {
  position: fixed;
  z-index: 60;
}

.sg-back-to-top__arrow {
  width: 40px;
  height: 40px;
  border-radius: var(--s2a-radius-corner-full, 999px);
  background: #010101;
  backdrop-filter: blur(15px);
  color: var(--s2a-color-content-knockout, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sg-back-to-top__label {
  font-family: var(--heading-font-family);
  font-weight: var(--s2a-font-weight-adobe-clean-bold);
  font-size: var(--s2a-font-size-16, 16px);
  line-height: 0.9;
  letter-spacing: 0.16px;

  /* Figma specifies black; the token keeps it legible if the drawer is themed dark. */
  color: var(--s2a-color-content-default, #000);
  white-space: nowrap;
}

.sg-back-to-top:hover .sg-back-to-top__arrow {
  background: var(--s2a-color-gray-800, #292929);
}

.sg-back-to-top:focus-visible {
  outline: 1px solid var(--s2a-color-focus-ring-default, #3b63fb);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .sg-back-to-top {
    transition: none;
  }
}