/* Page-specific layout for the Sterts case-study page. Loaded alongside the
   shared ../../style.css, which this reuses for the reset, fonts, colors,
   --pad/--fit-size variables, .fit sizing mechanics and .contact-details
   link styling. */

/* No custom cursor on this page (unlike the homepage) — overrides the
   shared body { cursor: none } back to the native pointer. */
body {
  cursor: auto;
}

/* The shared .row-toggle, .work-project-cta a and .contact-details
   .copy-email rules all set cursor: none too, on the assumption the
   homepage's custom big cursor is following the mouse instead — without
   that here, the OS pointer just vanishes over the Contact toggle, the
   "Visit sterts.co.uk" link, and the copy-email button. Restored to a
   normal pointer for all three. */
.row-toggle,
.work-project-cta a,
.contact-details .copy-email {
  cursor: pointer;
}

/* The wordmark stays pinned at the top of the viewport while the page
   scrolls underneath it, exactly like the homepage. script.js measures its
   rendered height into --header-height so .project-main can pad itself
   clear of it. */
.project-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: var(--pad-row) var(--pad);
  background: #fff;
}

.project-title-link {
  display: block;
  width: 100%;
  text-decoration: none;
  /* Homepage's title sits inside a <button>, and browsers reset
     letter-spacing to normal on form controls by default — breaking its
     inheritance of body's -0.2em tightening there. This <a> would normally
     inherit that tightening correctly, rendering the same text narrower and
     throwing off the auto-fit size/position to not match. Resetting it here
     reproduces the button's (accidental) behavior so the two render
     identically. */
  letter-spacing: normal;
}

/* Same size and position as the homepage's "Made with Ace" (.title-toggle
   .fit in ../../style.css): font-size and the negative margins that tighten
   the font's own line-height both key off the shared --fit-size variable,
   which script.js here fits to this header's width using the exact same
   algorithm as ../../script.js's fitBaseSize does for the homepage title.
   Filled white with a black stroke rather than the homepage's solid
   white-on-green, since this page's background is white. */
.project-title {
  font-size: var(--fit-size);
  margin-top: calc(var(--fit-size) * -0.12);
  margin-bottom: calc(var(--fit-size) * -0.12);
  color: #fff;
  -webkit-text-stroke: 1px #000;
}

/* ==========================================================================
   Case-study body. One normally-scrolling page: the write-up sits in a
   left-hand text column, the work sits on the right. In each section below
   the intro, the left label is sticky so it rides alongside its (usually
   much taller) assets as they scroll past.
   ========================================================================== */

.project-main {
  /* Clear the fixed wordmark up top and the fixed Contact bar at the
     bottom (both heights measured into CSS vars by script.js). */
  padding: var(--header-height, 0px) var(--pad) calc(var(--footer-height, 84px) + var(--pad));
  letter-spacing: normal;
}

/* Intro: the write-up on the left (sticky, like the section labels below),
   the hero film on the right filling the space between the fixed wordmark
   and the fixed Contact bar, cropped with object-fit: cover. */
.project-intro {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding-bottom: 104px;
}

.project-intro-text {
  flex: 0 0 30%;
  position: sticky;
  top: calc(var(--header-height, 0px) + 28px);
}

.project-intro-media {
  flex: 1;
  min-width: 0;
  /* Fills the viewport below the wordmark. Taller than the write-up beside
     it, so the sticky text stays fully pinned for most of the intro's
     scroll before the section's end carries it up (same as a section whose
     asset is taller than its label). */
  position: relative;
  height: calc(100dvh - var(--header-height, 0px) - 24px);
  min-height: 480px;
  border-radius: 4px;
  overflow: hidden;
  background: #f0f0f0;
}

/* Absolutely filled into the box (the same pattern the homepage's
   .work-project-media uses) rather than sized in flow. The <video> carries
   NO aspect-ratio of its own on purpose: Safari mishandles object-fit on a
   replaced element that also has an inline aspect-ratio when width and
   height are both definite, laying it out at its own size and leaving the
   #f0f0f0 box showing through. The box's own shape comes from its height
   (desktop) or its aspect-ratio (mobile, see the media query), and this
   just fills it. */
.project-intro-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sections. Each is a sticky label naming the piece, plus its assets. */
.project-entries {
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.project-entry {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.project-entry-label {
  flex: 0 0 30%;
  position: sticky;
  top: calc(var(--header-height, 0px) + 28px);
}

.project-eyebrow {
  display: block;
  margin-bottom: 0.55em;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000;
}

.project-entry-label p {
  max-width: 67%;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
}

.project-entry-assets {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.project-entry-asset {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #f0f0f0;
}

.project-entry-asset video,
.project-entry-asset img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Near-square / phone-shaped clips read far too tall at the asset column's
   full width, so they're held to a calmer measure and hang to the left. */
.project-entry-asset-tight {
  max-width: 58%;
}

/* The Leaving video is a screen recording of the exit-prompt modal —
   the default centred crop cuts into its buttons; anchor to the bottom. */
.project-entry-asset-focus-bottom {
  object-position: center bottom;
}

/* The three printed brochure pages sit side by side as their own spread,
   each keeping its own portrait aspect-ratio. width: 0 + flex: 1 1 0
   overrides the general img rule so the three share the row equally. */
.project-entry-asset-spread {
  background: none;
  display: flex;
  gap: 8px;
}

.project-entry-asset-spread img {
  width: 0;
  flex: 1 1 0;
  border-radius: 4px;
}

/* Same style as the homepage's "Main services" list items (.contact-col-links
   in ../../style.css): 16px, muted grey, ambient line-height. */
.project-copy-body {
  margin-top: 1.2em;
  max-width: 40em;
  font-size: 16px;
  color: #444;
}

/* Homepage's work card title is 18px (.work-project-title in ../../style.css)
   — doubled here since this is a full case-study heading. */
.project-intro-text .work-project-title {
  font-size: 36px;
  line-height: 1.05;
}

/* .work-project-type normally trails .work-project-category on the same
   line after a middle-dot (see ::before in ../../style.css) — broken onto
   its own line here instead, so the dot separator is dropped, and turned
   black instead of the homepage card's muted grey. */
.project-intro-text .work-project-type {
  display: block;
  margin-top: 0.3em;
  color: #000;
}

.project-intro-text .work-project-type::before {
  content: none;
  margin: 0;
}

/* .work-project-category is the homepage card's brand-green eyebrow — black
   here instead. */
.project-intro-text .work-project-category {
  color: #000;
}

/* Same pill shape/sizing as the homepage's Work row CTA link
   (.work-project-cta a in ../../style.css), just black-outline so it
   matches this page's black-on-white palette. */
.project-visit-cta {
  margin-top: 2em;
}

.project-visit-cta a {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.project-visit-cta a:hover {
  background: #000;
  color: #fff;
  border-color: transparent;
}

.project-collaborators {
  margin-top: 2.5em;
}

/* Same style as .work-project-category above (the "Nature, Arts & Culture"
   eyebrow): 12px, bold, uppercase, black. */
.project-collaborators-title {
  margin-bottom: 0.4em;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000;
}

/* Same style as .work-project-type above: 12px, black. */
.project-collaborators p:not(.project-collaborators-title) {
  font-size: 12px;
  color: #000;
}

.project-collaborators a {
  position: relative;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.project-collaborators a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.05em;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.project-collaborators a:hover::after {
  opacity: 1;
}

@media (max-width: 700px) {
  /* Both blocks stack: label above assets, nothing sticky. */
  .project-intro,
  .project-entry {
    flex-direction: column;
    gap: 20px;
  }

  .project-intro {
    padding-bottom: 64px;
  }

  .project-entries {
    gap: 72px;
  }

  .project-intro-text,
  .project-entry-label {
    flex: 0 0 auto;
    width: 100%;
    position: static;
  }

  /* Stacked: no sibling text column to fill the height of, so the box sizes
     itself — full width, and a 1:1 aspect-ratio (matching the hero source)
     for its height. The absolutely-positioned video still fills it exactly.

     flex/width/min-height all have to be reset from the desktop rule here:
     .project-intro keeps align-items: flex-start (not stretch), so without
     an explicit width the box shrink-wraps its abs-positioned contents to
     nothing; and desktop's flex: 1 + min-height: 480px would otherwise
     fight the aspect-ratio (960px is wider than the phone, 480px is taller
     than a square) — that's what was making the hero overflow, then vanish. */
  .project-intro-media {
    flex: none;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  /* The tight clips go full width. */

  .project-entry-asset-tight {
    max-width: none;
  }
}

/* Pinned to the bottom of the viewport so the Contact bar is on screen at
   all times. .project-main pads its bottom by --footer-height (measured by
   script.js) so nothing hides behind it. Opening the accordion grows it
   upward from the pinned bottom edge; a max-height keeps it clear of the
   fixed wordmark, scrolling internally on the rare tall-content/short-screen
   case. z-index above the header so an open drawer wins any overlap. */
.project-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 12;
  max-height: calc(100dvh - var(--header-height, 0px));
  overflow-y: auto;
  background: #fff;
  border-top: 1px solid #000;
  color: #000;
  letter-spacing: normal;
  font-size: 1.1rem;
}

/* Now a real .row-toggle/.menu-toggle button (see ../../style.css) instead
   of static text, so Contact collapses the same way the homepage's rows do
   — those shared classes already supply the flex layout, padding and button
   reset, so only the fill/stroke recoloring lives here. The open/close
   choreography is this page's own simplified toggle in script.js. */
.project-footer-heading .fit {
  color: #fff;
  -webkit-text-stroke: 1px #000;
}

.project-footer-heading .row-swatch {
  background: #fff;
  border: 1px solid #000;
}

/* The shared .row[data-open="true"] .row-content-inner rule in
   ../../style.css is scoped to elements with the .row class, which
   .project-footer deliberately isn't — so the fade-in needs its own
   equivalent here. */
.project-footer[data-open="true"] .row-content-inner {
  opacity: 1;
}

/* Homepage's Contact row zeroes the content's top padding and doubles its
   bottom padding, and tightens contact-col-location's gap/line-height —
   matched here, just in black rather than the homepage's pink/grey. */
.project-footer .row-content-inner {
  padding-top: 0;
  padding-bottom: calc(var(--pad-menu-row) * 2);
  color: inherit;
}

.project-footer .contact-col-location {
  gap: 0.4em;
  line-height: 1;
  font-weight: 420;
  color: #000;
}