/* Project page layout: an info panel on the left (title, description,
   credits) and the project image grid on the right. The panel is plain
   text on the page, styled and spaced like the rest of the site.

   The site nav sits at the top of the panel. On desktop the panel is
   sticky: the page scrolls normally and the nav + info stay in view
   beside the images until they end. */

/* Spacing comes from the site's own classes in the markup, so it matches
   the rest of the site at every screen size: a .spacer-large under the
   title, and .grid-col-3 gaps between the text and the images and between
   the credit columns. These rules only set the columns. */

/* Full width inside the page gutters (not the 75% text column): the panel
   is up to 457px, the images take the rest */
.grid-col-3.project-layout {
  grid-template-columns: clamp(20rem, 32%, 28.5625rem) 1fr;
  align-items: start;
  margin: 0;
}

.project-images > .project-grid {
  width: 100%;
  margin: 0;
}

/* Panel text: the description, then the collapsible sections, then the
   random project link (temporary until it's redesigned) */
.grid-col-3.is-project-panel {
  grid-template-columns: 1fr;
}

/* Desktop: rows sit closer than the usual 5rem grid gap, matching the
   .spacer-large under the title (smaller screens already use less) */
@media screen and (min-width: 992px) {
  .grid-col-3.is-project-panel {
    grid-row-gap: 2.5rem;
  }
}

.project-panel p {
  margin: 0;
}

/* ---- Collapsible cards (Credits, Fun facts) ----
   Each one looks like the homepage's floating tab: a clear glass pill with
   a glass lens over the + on the right (the shared glass look in
   css/styles.css). Clicking presses the lens in, the + spins into a −,
   and the pill grows into a card as the content rises in
   (js/panel-sections.js). */
.project-panel_sections {
  display: grid;
  row-gap: 0.75rem;
}

.project-panel_section {
  padding: 0.25rem 0.25rem 0.25rem 1.25rem; /* the lens sits 0.25rem in, like the tab's */
  border-radius: 1.625rem; /* a pill while closed (half its height) */
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}

.project-panel_section > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
}

.project-panel_section > summary::-webkit-details-marker {
  display: none;
}

/* The + / −, built like the homepage tab's toggle (index.html): the same
   size, in a recessed slot, with a glass lens over it (::after, on top of
   the icon) */
.project-panel_toggle {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--slot-bg);
  box-shadow: var(--slot-shadow);
  color: var(--black);
  transition: scale 0.2s ease;
}

.project-panel_toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--lens-bg);
  box-shadow: var(--lens-shadow);
  pointer-events: none;
}

.project-panel_section > summary:active .project-panel_toggle {
  scale: 0.92;
}

.project-panel_section > summary:focus-visible {
  outline: none;
}

.project-panel_section > summary:focus-visible .project-panel_toggle {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.project-panel_toggle svg {
  width: 1.5rem;
  height: 1.5rem;
  filter: var(--icon-emboss);
}

/* + → −: the icon spins half a turn as its upright stroke folds away.
   (.is-closing: still open while it animates shut, js/panel-sections.js,
   but the lens already shows +) */
.project-panel_toggle svg {
  transition: rotate 0.5s cubic-bezier(0.22, 1, 0.36, 1); /* the site's arrival ease */
}

.project-panel_toggle path:first-child {
  transform-box: fill-box;
  transform-origin: center;
  transition: scale 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-panel_section[open]:not(.is-closing) .project-panel_toggle svg {
  rotate: 180deg;
}

.project-panel_section[open]:not(.is-closing) .project-panel_toggle path:first-child {
  scale: 1 0;
}

/* Room around the opened content; the right side clears the lens column.
   Opening and closing are animated by js/panel-sections.js */
.project-panel_section > :not(summary) {
  margin: 0.75rem 1rem 1rem 0;
}

/* Credits in two columns (gaps from .grid-col-3, like the rest of the site) */
.grid-col-3.is-project-credits {
  grid-template-columns: auto auto;
  justify-content: start;
  margin-left: 0;
  margin-right: 0;
}

.project-panel_results {
  display: grid;
  row-gap: 1rem;
}

/* On project pages the site nav sits at the top of the panel instead of
   across the page. The nav row (.is-navbar) keeps its usual look; this
   only recreates the spacing it had as its own section: 1.25rem above,
   2rem below plus the section gap (5rem, smaller on small screens). */
.section_project > .padding-global {
  padding-top: 1.25rem;
}

.project-nav {
  padding-bottom: 2rem;
  margin-bottom: 5rem;
}

@media screen and (max-width: 767px) {
  .project-nav {
    margin-bottom: 3.5rem;
  }
}

@media screen and (max-width: 479px) {
  .project-nav {
    margin-bottom: 1.5rem;
  }
}

/* ---- Desktop: sticky info panel ----
   The page scrolls normally; the panel (with the nav) stays in view beside
   the images until they end, then scrolls away with the rest of the page. */
@media screen and (min-width: 992px) {
  /* Sticky needs ancestors that don't create a scroll box; `clip` hides
     overflow the same way `hidden` does without breaking it */
  .page-wrapper:has(.project-panel) {
    overflow: clip;
  }

  /* Nav + info stay in view together, at the nav's usual spot */
  .project-panel {
    position: sticky;
    top: 1.25rem;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2.5rem);
  }

  /* If the window is too short for everything, the text under the nav
     scrolls on its own and the nav stays put (and never gets squeezed) */
  .project-nav {
    flex: none;
  }

  .project-panel_content {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    /* Scrolling clips at the edges, so leave room around the text for the
       cards' soft shadows (the negative margins keep everything in place) */
    padding: 0 1.5rem 2rem;
    margin: 0 -1.5rem;
  }

  .project-panel_content::-webkit-scrollbar {
    display: none;
  }
}

/* Desktop: the nav has to fit the panel (20rem to 28.5rem wide), which is
   much narrower than the page-wide nav. With the usual gaps it overflowed
   and pushed the avatar off the left edge. Tighter gaps, and on narrow
   panels the phone-size avatar and theme switch too. */
@media screen and (min-width: 992px) {
  .project-nav {
    container-type: inline-size;
  }

  .project-nav .grid-col-4.is-navbar {
    column-gap: 2rem;
  }

  .project-nav .nav-theme {
    margin-left: -1rem;
  }

  /* Keep each lock on the same line as its link */
  .project-nav .is-navbar > h4 {
    white-space: nowrap;
  }

  @container (max-width: 25rem) {
    .project-nav .grid-col-4.is-navbar {
      column-gap: 1rem;
    }

    .project-nav .logo {
      width: 44px;
    }

    .project-nav .nav-theme {
      --ts-btn: 1.875rem;
      --ts-gap: .125rem;
      margin-left: -.25rem;
    }

    .project-nav .theme-switch {
      padding: .1875rem;
    }

    .project-nav .theme-icon {
      width: 1.0625rem;
      height: 1.0625rem;
    }
  }
}

/* Tablet and phone: panel stacks above the images, the page scrolls normally */
@media screen and (max-width: 991px) {
  .grid-col-3.project-layout {
    grid-template-columns: 1fr;
  }
}