/* =============================================================
   WORK.CSS — Work page layout and components
   ============================================================= */

/* -------------------------------------------------------------
   Work page overrides .page to lock exactly to viewport height
   ------------------------------------------------------------- */
.page {
  height: 100dvh;
}

/* -------------------------------------------------------------
   Page content — slideshow left, work panel right
   ------------------------------------------------------------- */
.page-content {
  display: flex;
  gap: 0;
  flex: 1;
  min-height: 0;
}

/* Gap only exists when the work panel is visible */
.page[data-state="work"] .page-content {
  gap: 16px;
}

/* Animate gap in sync with the panel width */
.page.is-animating .page-content {
  transition: gap 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------------------------------
   Work panel — animates in/out as SPA state changes
   ------------------------------------------------------------- */
.work-panel {
  flex-shrink: 0;
  width: 0;
  overflow: hidden;
  opacity: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Work state: panel fully visible, extends to viewport bottom */
.page[data-state="work"] .work-panel {
  width: calc((100vw - 72px) / 3);
  opacity: 1;
  overflow: visible;
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-card);
}

/* Animating: enable transitions, keep overflow hidden to prevent bleed */
.page.is-animating .work-panel {
  overflow: hidden;
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 350ms ease;
}

/* -------------------------------------------------------------
   Slideshow — left panel
   ------------------------------------------------------------- */
.slideshow {
  flex: 1;
  min-width: 0;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  box-shadow: var(--shadow-card);
}

.slideshow__track {
  width: 100%;
  height: 100%;
  position: relative;
}

.slideshow__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-slow);
  pointer-events: none;
}

.slideshow__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.slideshow__slide.is-active[data-href] {
  cursor: pointer;
}

.slideshow__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.slideshow__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 24px;
}

.slideshow__placeholder span {
  font-family: var(--font-accent);
  font-size: var(--scale-5);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.slideshow__placeholder p {
  font-family: var(--font-primary);
  font-size: var(--scale-1);
  color: var(--color-text-muted);
}

/* Dot indicators — absolutely positioned at bottom center */
.slideshow__dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 100px;
  padding: 15px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.slideshow__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.slideshow__dot.is-active {
  background: rgba(0, 0, 0, 0.65);
  transform: scale(1.2);
}

/* -------------------------------------------------------------
   Glass intro card — home state only, centered in slideshow
   ------------------------------------------------------------- */
.glass-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 48px);
  max-width: 680px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--border-radius-xl);
  padding: 28px 40px 26px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
              0 1px 2px rgba(0, 0, 0, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
  pointer-events: none;
  z-index: 10;
  opacity: 1;
  transition: opacity 400ms ease;
}

.glass-card__title {
  font-family: var(--font-accent);
  font-size: var(--scale-6);
  font-weight: 700;
  color: #111;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.glass-card__body {
  font-family: var(--font-primary);
  font-size: var(--scale-3);
  font-weight: 400;
  color: #444;
  line-height: 1.55;
  margin-top: 8px;
}

/* Glass card header — title and X on the same row */
.glass-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* X close button — sits inline at the right of the title */
.glass-card__close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 2px 0 0 12px;
  cursor: pointer;
  color: #000;
  opacity: 0.25;
  pointer-events: auto;
  line-height: 0;
  transition: opacity 200ms ease;
}

.glass-card__close:hover {
  opacity: 0.7;
}

/* Work FAB — fixed bottom-right, glass pill */
.work-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 100px;
  padding: 9px 14px 9px 16px;
  font-family: var(--font-primary);
  font-size: var(--scale-2);
  font-weight: 600;
  color: rgba(0, 0, 0, 0.5);
  text-decoration: none;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: color var(--transition-fast),
              padding var(--transition-fast),
              opacity 400ms ease;
}

.work-fab:hover {
  color: rgba(0, 0, 0, 0.85);
  padding-left: 20px;
}

.work-fab__label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  margin-right: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  transform: translateY(-1px);
  transition: max-width 320ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 220ms ease,
              margin-right 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.work-fab:hover .work-fab__label {
  max-width: 50px;
  opacity: 1;
  margin-right: 5px;
}

.work-fab svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

/* Dissolve card + FAB when SPA transitions to work */
.page[data-state="work"] .glass-card,
.page[data-state="work"] .work-fab {
  opacity: 0;
  pointer-events: none;
}


/* -------------------------------------------------------------
   Work nav — single unified container replacing individual cards
   ------------------------------------------------------------- */
.work-nav {
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: #ffffff;
  border-radius: var(--border-radius-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
}

.work-nav__scroller {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* -------------------------------------------------------------
   Work sections — stacked inside the nav container
   ------------------------------------------------------------- */
.work-section {
  display: flex;
  flex-direction: column;
}

/* Section separators — rounded top corners + shadow over section above */
.work-section + .work-section {
  border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
  background: #ffffff;
  box-shadow: 0px -10px 30px -15px rgba(0, 0, 0, 0.2);
}

.work-section:last-child {
  box-shadow: 0px -2px 30px -10px rgba(0, 0, 0, 0.2);
}

/* PD section fills all remaining height; its body scrolls internally */
.work-section:first-child {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Alumni / Transferred: fixed at bottom, height controlled by JS */
.work-section[data-section="alumni"],
.work-section[data-section="transferred"] {
  flex-shrink: 0;
  overflow: hidden;
}

.work-section[data-section="transferred"] {
  max-height: fit-content;
}

/* PD header — no longer needs sticky; naturally stays at top of its flex section */
.work-section__sticky {
  flex-shrink: 0;
  background: #ffffff;
  padding: 20px 14px 20px;
  cursor: pointer;
}

/* PD body: fills remaining PD section height and scrolls internally */
.work-section__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: none;
  padding: 0 14px 48px;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
}

.work-section__body::-webkit-scrollbar {
  display: none;
}

/* Non-sticky header for Alumni / Transferred */
.work-section__head {
  padding: 20px 14px 20px;
  cursor: pointer;
}

/* Sub-details row (education text) */
.work-section__sub {
  padding: 0 14px 16px;
}

.work-section[data-section="transferred"] .work-section__sub {
  padding: 0 14px 32px;
}

/* Items area with bottom breathing room */
.work-section__items {
  padding: 0 14px 48px;
  display: flex;
  flex-direction: column;
}

/* Head and sub stay pinned in both Alumni and Transferred so the flex
   algorithm never compresses them — only the items region clips */
.work-section[data-section="alumni"] .work-section__head,
.work-section[data-section="alumni"] .work-section__sub,
.work-section[data-section="transferred"] .work-section__head,
.work-section[data-section="transferred"] .work-section__sub {
  flex-shrink: 0;
}

.work-section[data-section="alumni"] .work-section__items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: none;
  scrollbar-width: none;
}

.work-section[data-section="alumni"] .work-section__items::-webkit-scrollbar {
  display: none;
}

/* Section content is always in flow — height + overflow:hidden clips it.
   JS reveals content by growing the section height, hides by shrinking. */

/* -------------------------------------------------------------
   Card header — role title, logo, date, sub-roles
   ------------------------------------------------------------- */
.card-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
  padding-right: 6px;
}

.card-header__top {
  display: flex;
  flex-direction: column;
  padding-bottom: 4px;
}

.card-header__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: -2px;
}

.card-header__role {
  font-family: var(--font-accent);
  font-size: var(--scale-5);   /* 24.88px */
  font-weight: 700;
  line-height: normal;
  color: var(--color-text-dark);
  white-space: nowrap;
}

.card-header__logo {
  width: 40px;
  height: 36px;
  flex-shrink: 0;
  object-fit: contain;
}

/* ND logo is a widescreen canvas — cover crops it to fill the square */
.card-header__logo--cover {
  object-fit: cover;
  object-position: center;
}

.card-header__date {
  font-family: var(--font-primary);
  font-size: var(--scale-2);   /* 14.4px */
  font-weight: 700;
  line-height: normal;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Education row (no connector, full width) */
.card-header__education {
  font-family: var(--font-primary);
  font-size: var(--scale-2);   /* 14.4px */
  font-weight: 500;
  line-height: normal;
  color: var(--color-text-muted);
  margin-top: -4px;
}

/* -------------------------------------------------------------
   Case study items — within a card
   ------------------------------------------------------------- */
.card-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.work-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--border-radius-lg);
  color: var(--color-text-primary);
  transition: background var(--transition-fast);
  cursor: pointer;
}

.work-item:hover {
  background-color: var(--color-surface);
}

.work-item__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.work-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.work-item__title {
  font-family: var(--font-primary);
  font-size: var(--scale-3);   /* 17.28px */
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.work-item__lock {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.work-item__desc {
  font-family: var(--font-primary);
  font-size: var(--scale-2);   /* 14.4px */
  font-weight: 500;
  line-height: normal;
}

.work-item__arrow {
  flex-shrink: 0;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity 250ms ease, transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.work-item:hover .work-item__arrow {
  opacity: 1;
  transform: translateX(4px);
}

.work-item[data-protected] .work-item__arrow {
  display: none;
}

/* -------------------------------------------------------------
   Other Work link — bottom of Alumni section
   ------------------------------------------------------------- */
.work-other {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--font-primary);
  font-size: var(--scale-3);   /* 17.28px */
  font-weight: 600;
  color: var(--color-text-dark);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.work-other:hover {
  opacity: 0.6;
}

.work-other svg {
  flex-shrink: 0;
}