/* Case study pages — sidebar + two-column band. Load after detail-page.css */

body.project-page {
  --layout-section-nav: 192px;
}

.project-layout {
  --project-band: calc(var(--layout-section-nav) + var(--sds-size-space-400) + var(--layout-column));
  width: var(--project-band);
  max-width: 100%;
  margin: 0 auto;
  padding: var(--layout-main-content-padding-top) var(--sds-size-space-400) 0;
  display: flex;
  gap: var(--sds-size-space-400);
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
}

.project-sidebar-slot {
  width: var(--layout-section-nav);
  flex-shrink: 0;
}

.project-sidebar {
  width: var(--layout-section-nav);
  flex-shrink: 0;
  position: fixed;
  top: var(--layout-main-content-padding-top);
  z-index: 45;
  max-height: none;
  overflow: visible;
  left: max(
    var(--sds-size-space-400),
    calc(
      50vw - min(var(--project-band), 100vw - 2 * var(--sds-size-space-400)) / 2 + var(--sds-size-space-400)
    )
  );
}

.project-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.project-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sds-size-space-100);
}

.project-sidebar__link {
  display: block;
  padding: calc(var(--sds-size-space-100) + 2px) var(--sds-size-space-100);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--sds-color-text-neutral-secondary);
  text-decoration: none;
  border-radius: var(--sds-size-radius-200);
  transition: background-color 0.24s cubic-bezier(0.33, 1, 0.32, 1);
}

.project-sidebar__link:hover,
.project-sidebar__link:focus-visible {
  background-color: var(--color-project-hover-fill);
  text-decoration: none;
}

.project-sidebar__link.is-active {
  color: var(--sds-color-text-neutral-default);
  font-weight: 600;
  background-color: var(--color-project-hover-fill);
}

body.project-page .project-sidebar {
  animation: home-intro-in 0.72s cubic-bezier(0.33, 1, 0.32, 1) backwards;
  animation-delay: 0.07s;
}

body.project-page .project-hero .project-title {
  animation: home-intro-in 0.85s cubic-bezier(0.33, 1, 0.32, 1) backwards;
  animation-delay: 0.1s;
}

body.project-page .project-hero .project-tag {
  animation: home-intro-in 0.85s cubic-bezier(0.33, 1, 0.32, 1) backwards;
  animation-delay: 0.18s;
}

body.project-page .project-hero .project-intro {
  animation: home-intro-in 0.88s cubic-bezier(0.33, 1, 0.32, 1) backwards;
  animation-delay: 0.26s;
}

body.project-page .project-main > .project-block {
  animation: project-row-enter 0.72s cubic-bezier(0.33, 1, 0.32, 1) backwards;
}

body.project-page .project-main > .project-block:nth-child(2) {
  animation-delay: 0.32s;
}

body.project-page .project-main > .project-block:nth-child(3) {
  animation-delay: 0.37s;
}

body.project-page .project-main > .project-block:nth-child(4) {
  animation-delay: 0.42s;
}

body.project-page .project-main > .project-block:nth-child(5) {
  animation-delay: 0.47s;
}

body.project-page .project-main > .project-block:nth-child(6) {
  animation-delay: 0.52s;
}

body.project-page .project-main > .project-block:nth-child(7) {
  animation-delay: 0.57s;
}

body.project-page .project-main > .project-block:nth-child(8) {
  animation-delay: 0.62s;
}

body.project-page .project-pager {
  animation: home-intro-in 0.72s cubic-bezier(0.33, 1, 0.32, 1) backwards;
  animation-delay: 0.58s;
}

@media (max-width: 768px) {
  .project-layout {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding-top: var(--layout-main-content-padding-top);
    box-sizing: border-box;
  }

  .project-sidebar-slot {
    display: none;
  }

  .project-sidebar {
    display: none !important;
  }

  .project-main {
    width: 100%;
    max-width: var(--layout-column);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 393px) {
  .project-layout {
    padding-left: var(--sds-size-space-400);
    padding-right: var(--sds-size-space-400);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.project-page .project-sidebar,
  body.project-page .project-hero .project-title,
  body.project-page .project-hero .project-tag,
  body.project-page .project-hero .project-intro,
  body.project-page .project-main > .project-block,
  body.project-page .project-pager {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body.project-page .project-pager__link {
    transition: none !important;
  }

  body.project-page .project-pager__link:hover,
  body.project-page .project-pager__link:focus-visible {
    transform: none !important;
  }

  body.project-page .project-sidebar__link {
    transition: none !important;
  }
}