/* =============================================================================
   CASESTUDY.CSS — Case study page template styles (SandBagAnimations, and any
   future case studies reusing this layout).
   Shares tokens.css (colors/fonts) and components.css (the .nav__close
   "back" button, used on any page one level into the site). This file used
   to be a ~400-line inline <style> block with its own parallel token set
   (--color-bg, --color-text, --sec-intro, etc.) that didn't match
   tokens.css's names OR values (e.g. --sec-intro's #f5c518 vs the shared
   --yellow's #FFBB00) despite a comment saying to keep them in sync — this
   version uses the shared tokens directly so that can't drift again.
   ============================================================================= */

:root {
  /* Layout constants specific to this page's two-column striped-section
     template — no equivalent elsewhere on the site, so these stay local
     rather than living in tokens.css. */
  --nav-h:         92px;
  --col-left:      260px;   /* sidebar label column width */
  --gap:           40px;
  --section-pad-v: 56px;
  --border:        1px solid var(--black);
}

/* =============================================
   RESET / BASE
   ============================================= */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}
body {
  font-weight: 300;
}
a { color: inherit; text-decoration: none; cursor: pointer; }
img { display: block; max-width: 100%; }

/* =============================================
   NAV  (matches homepage nav; .nav__close itself comes from components.css)
   ============================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--white);
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 24px;
}

/* Title block */
.nav__title-block {
  margin-left: 32px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav__title {
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
}
.nav__subtitle {
  font-size: 14px;
  font-weight: 400;
  color: var(--sky);
  white-space: nowrap;
}

/* In-page section nav */
.nav__sections {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15px;
  font-weight: 300;
}
.nav__sections a {
  position: relative;
  padding: 4px 8px;
  opacity: 0.6;
  transition: opacity 0.2s;
  white-space: nowrap;
  border: 1px solid transparent;
}
.nav__sections a:hover { opacity: 1; }
.nav__sections a.active {
  opacity: 1;
  font-weight: 600;
  border-color: var(--black);
}
.nav__sections a.active::before {
  content: '';
  position: absolute;
  inset: 3px -3px -3px 3px;
  border: 1px solid var(--black);
  pointer-events: none;
}

/* CTA buttons — matches homepage nav-links style */
.nav__buttons {
  display: flex;
  gap: 4px;
  margin-left: 40px;
}
.btn-nav {
  position: relative;
  display: inline-block;
  padding: 8px 20px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 18px;
  color: var(--black);
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color 0.2s;
}
.btn-nav::before {
  content: '';
  position: absolute;
  inset: 3px -3px -3px 3px;
  border: 1px solid var(--black);
  pointer-events: none;
}
.btn-nav:hover {
  border-color: var(--black);
}
.btn-nav.contact-btn {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.btn-nav.contact-btn::before {
  border-color: var(--black);
}

/* =============================================
   PAGE WRAPPER
   ============================================= */
.page {
  padding-top: var(--nav-h);
}

/* =============================================
   SECTION STRUCTURE
   Each section: coloured top bar + two-col layout
   Left col = rotated label, Right col = content
   ============================================= */
.case-section {
  display: flex;
  align-items: stretch;
  border-bottom: var(--border);
  scroll-margin-top: var(--nav-h);
}

/* Wrapper that stacks the stripe + body */
.section-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.section-stripe {
  height: 27px;
  width: 100%;
}
.section-body {
  display: flex;
  align-items: stretch;
  flex: 1;
}

/* Left sidebar with rotated label */
.cs-label {
  width: var(--col-left);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--section-pad-v) 0;
  overflow: hidden;
}
.cs-label span {
  display: block;
  font-size: 24px;
  font-weight: 300;
  white-space: nowrap;
  transform: rotate(-90deg);
}
/* Section label background colours */
.case-section--intro   .cs-label { background: var(--yellow); }
.case-section--role    .cs-label { background: var(--sky); }
.case-section--goals    .cs-label { background: var(--coral); }
.case-section--results  .cs-label { background: var(--teal); }

/* White text on darker/more saturated backgrounds */
.case-section--role  .cs-label span,
.case-section--goals  .cs-label span { color: var(--white); }

/* Wireframes label — white text on dark bg */
.cs-label--inv span { color: var(--white); }
.cs-label--inv { background: var(--navy); }

/* Right content area */
.section-content {
  flex: 1;
  padding: var(--section-pad-v) var(--gap);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* =============================================
   CONTENT BLOCKS
   ============================================= */

/* Bordered text box (intro / role / goals) */
.content-box {
  border: var(--border);
  min-height: 160px;
  padding: 28px 32px;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.7;
}
.content-box p + p { margin-top: 1em; }

/* Image placeholder grids */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap);
}
.img-placeholder {
  background: var(--placeholder);
  aspect-ratio: 4 / 3;
  width: 100%;
}
/* Wireframe placeholders are taller */
.img-placeholder--tall {
  aspect-ratio: 9 / 13;
}

/* =============================================
   SECTION — WIREFRAMES (dark bg)
   ============================================= */
.case-section--wireframes .section-stripe {
  background: var(--navy);
}
.case-section--wireframes .section-content {
  background: var(--white);
}

/* =============================================
   SECTION STRIPE COLOURS
   ============================================= */
.case-section--intro    .section-stripe { background: var(--yellow); }
.case-section--role     .section-stripe { background: var(--sky); }
.case-section--goals    .section-stripe { background: var(--coral); }
.case-section--results  .section-stripe { background: var(--teal); }

/* =============================================
   FOOTER BAR
   ============================================= */
.footer-bar {
  background: var(--muted);
  height: 20px;
  width: 100%;
}

/* Footer content (above the bar) */
.footer-contact {
  border-top: var(--border);
  padding: 56px 24px 56px calc(var(--col-left) + var(--gap));
}
.footer-contact__box {
  border: var(--border);
  padding: 40px 48px;
  max-width: 960px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
}

/* =============================================
   SCROLL PROGRESS — thin top accent line
   ============================================= */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--black);
  width: 0%;
  z-index: 200;
  transition: width 0.1s linear;
}

/* =============================================
   TABLET  ≤ 1024px
   ============================================= */
@media (max-width: 1024px) {
  :root {
    --col-left:      180px;
    --gap:           28px;
    --section-pad-v: 40px;
  }
  .nav__sections { display: none; }
  .nav__buttons { margin-left: auto; }
  .nav__title { font-size: 18px; }
  .cs-label span { font-size: 20px; }
  .content-box { font-size: 16px; }
}

/* =============================================
   MOBILE  ≤ 768px
   ============================================= */
@media (max-width: 768px) {
  :root {
    --nav-h:         72px;
    --col-left:      0px;
    --gap:           20px;
    --section-pad-v: 32px;
  }

  .nav__title-block { margin-left: 16px; }
  .nav__title { font-size: 15px; }
  .nav__subtitle { font-size: 12px; }

  /* Stack label above content on mobile */
  .section-body { flex-direction: column; }
  .cs-label {
    width: 100%;
    border-right: none;
    border-bottom: var(--border);
    padding: 16px 24px;
    justify-content: flex-start;
  }
  .cs-label span {
    transform: none;
    font-size: 18px;
  }
  .section-content { padding: 24px 20px; }

  /* Switch to single column grids */
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }

  .footer-contact { padding: 40px 20px; }
  .footer-contact__box { padding: 28px 24px; font-size: 16px; }
}