/* ==========================================================================
   Project (case study) page
   Figma: Concepts / AI photo studio (2560:14126)
   Uses the tokens from style.css
   ========================================================================== */

.project {
  --muted-label: #958f83;
  --text: #e0d8c9;
  --column: 966px;
  position: relative;
  padding-bottom: 153px;
}

/* ---------- close (right side of the shared header, like the nav on the home page) ---------- */
.project__close {
  flex: none;
  margin-top: calc((31px * .92 - 46px) / 2); /* centred on the name line (31px × .92 line height) */
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--card);
  display: grid;
  place-items: center;
  transition: background-color .25s var(--ease);
}
.project__close svg { width: 46px; height: 46px; fill: #f1eee3; }
.project__close:hover { background: var(--card-hover); }
.project__close:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- title ---------- */
.project__head {
  margin-top: 120px; /* 162 from the top of the page */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.project__title {
  font-weight: 400;
  font-size: 42px;
  line-height: .92;
  letter-spacing: -.01em;
}
.project__meta {
  display: flex;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- content column ---------- */
.project__body {
  max-width: var(--column);
  margin: 42px auto 0;
}
.project__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-weight: 300;
  font-size: 20px;
  line-height: 32px;
  color: var(--text);
}
.project__lead { font-weight: 400; }
.project__facts { display: flex; flex-direction: column; gap: 18px; }
.project__facts div { display: flex; flex-direction: column; gap: 8px; }
.project__facts dt { color: var(--muted-label); font-size: 16px; line-height: normal; }
.project__facts dd { margin: 0; }

.project__panel {
  margin: 42px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #f3f5f9;
}
.project__panel img { width: 100%; height: auto; }
.project__panel + .project__text { margin-top: 42px; }
/* a page that opens with a picture (About): 42 below the title, like the text */
.project__body > .project__panel:first-child { margin-top: 0; }
/* About: one continuous story, regular weight, no gaps between paragraphs */
.project__text--flow { gap: 0; font-weight: 400; }

/* ---------- carousel controls: ← progress → (added by js/pages.js) ---------- */
.slider__controls {
  width: 358px;
  max-width: 100%;
  margin: 42px auto 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.slider__controls + .project__text { margin-top: 42px; }
.slider__btn {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  padding: 12px;
  border-radius: 40px;
  background: var(--card);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color .25s var(--ease), transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.slider__btn:active { transform: scale(.88); }
.slider__btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--text);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.slider__btn--prev svg { transform: scaleX(-1); }
.slider__btn:hover { background: var(--card-hover); }
.slider__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.slider__bar {
  position: relative;
  flex: 1;
  height: 1px;
  background: rgba(224, 216, 201, .2);
  overflow: hidden;
}
.slider__progress {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(224, 216, 201, .7);
}

/* ---------- header: the same .site-header as the home page ---------- */
.project__top { margin-bottom: 0; } /* pinned and hidden on scroll like every .site-header (style.css) */

/* the top blur (style.css) is taller here so it reaches below the pinned header */
.project .top-blur { height: 150px; }
.project__top + .project__head { margin-top: 82px; } /* title at 192 */

/* ---------- list & subheads ---------- */
.project__list { margin: 0; padding-left: 30px; list-style: disc; }
.project__subhead { font-weight: 700; font-size: inherit; line-height: inherit; }

/* full-bleed carousels must not widen the page */
.project { overflow-x: clip; }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .project { padding-bottom: 64px; }
  .project__close { margin-top: calc((26px * .92 - 40px) / 2); width: 40px; height: 40px; }
  .project__close svg { width: 40px; height: 40px; }
  .project__head { margin-top: 72px; }
  .project__title { font-size: 32px; }
  .project__text { font-size: 17px; line-height: 27px; }
  .project__meta { font-size: 17px; }
  .project__body { margin-top: 40px; }
  .project__panel { margin-top: 24px; border-radius: 14px; }
  .project__panel + .project__text { margin-top: 24px; }
  .project__top + .project__head { margin-top: 48px; }
  .project .top-blur { height: 120px; }
  .project__list { padding-left: 22px; }
  .slider__controls { margin-top: 20px; }
  .slider__controls + .project__text { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .slider__btn { transition: none; }
}

/* ---------- carousel on every project page (js/pages.js) ----------
   Every image has the same height; its width follows the image. The row is full-bleed,
   starts in line with the text column and scrolls sideways (trackpad, swipe, drag, ← →). */
.pages { margin-top: 42px; }
.pages__track {
  --pages-h: min(775px, 72vh);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0 max(var(--gutter), (100vw - var(--column)) / 2);
  scroll-padding-inline: max(var(--gutter), (100vw - var(--column)) / 2);
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.pages__track::-webkit-scrollbar { display: none; }
.pages__track:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.pages__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.pages__item {
  flex: none;
  margin: 0;
  height: var(--pages-h);
  border-radius: 12px;
  overflow: hidden;
  background: #f3f5f9;
  scroll-snap-align: start;
}
.pages__item img { width: auto; height: 100%; pointer-events: none; }
/* wide: 966×528 slides (Gen AI Illustrations, API Playground), the full column width, Figma gap 30 */
.pages--wide .pages__track {
  --pages-h: calc(min(966px, 100vw - 2 * var(--gutter)) * 528 / 966);
  gap: 30px;
}
.pages--wide .pages__item { border-radius: var(--radius); }

/* phone: a shorter row, swiped with a finger */
@media (max-width: 640px) {
  .pages { margin-top: 24px; }
  .pages__track { --pages-h: 480px; gap: 12px; }
  .pages--wide .pages__track { gap: 12px; }
  .pages--wide .pages__item { border-radius: 14px; }
}