/* Case-study layout, assembled from the home page's own pieces so a project
   page reads as part of the site — not a bolt-on:
     - off-centre column (left: 20%, width 60%), like .My-Works-Container
     - titles in the blue #0900FF box with the yellow #E1E803 offset shadow
     - body copy in #131313 panels, Catamaran / TS Block, like .text + .Existing-Now
     - the Learn-More button reused for the bottom link
   Loaded on top of style.css (shared chrome: particles, cursor, nav, footer). */

/* Off-centre column, mirroring .My-Works-Container */
.case{
  position: relative;
  left: 20%;
  width: 60%;
  background-color: transparent;
}

/* Back to works — TS Block, the site's letter-spacing hover */
.case-back{
  display: inline-block;
  margin-top: 120px;              /* clears the fixed "menu" trigger up top */
  margin-bottom: 40px;
  font-family: "TS Block", "wedding-gothic-atf", sans-serif;
  font-size: 25px;
  text-decoration: none;
  background-color: transparent;
  transition: letter-spacing 0.05s ease-out;
}
.case-back:hover{
  letter-spacing: 0.2em;
}

/* Project title — the signature blue box + yellow shadow (like .My-Works-Title) */
.case-title{
  display: inline-flex;
  align-items: center;
  min-height: 87px;
  max-width: 100%;
  padding: 12px 30px;
  margin-bottom: 40px;
  background-color: #0900FF;
  box-shadow: 8px 12px #E1E803;
  font-family: "TS Block", "wedding-gothic-atf", sans-serif;
  /* A title like "project:exoplanet" is a single unbreakable token ~993px wide
     at 60px, so a fixed size overflowed the blue box on anything under ~1755px.
     Scale with the viewport, still reaching the intended 60px on wide screens. */
  font-size: clamp(24px, 3.2vw, 60px);
  line-height: 1.05;
  overflow-wrap: anywhere;   /* last-resort guard for very long titles */
}

/* Intro line under the title */
.case-intro{
  font-family: "Catamaran", sans-serif;
  font-size: 1.5em;
  line-height: 1.6;
  margin-bottom: 40px;
  background-color: transparent;
}

/* Facts (role / year / tools) — a #131313 panel like the carousel captions */
.case-facts{
  background-color: #131313;
  font-family: "Catamaran", sans-serif;
  font-size: 20px;
  line-height: 2em;
  padding: 16px 20px;
  margin-bottom: 30px;
}
.case-facts p{ background-color: transparent; }
.case-facts b{
  font-family: "TS Block", "wedding-gothic-atf", sans-serif;
  font-weight: normal;
  background-color: transparent;
}

/* Text section — #131313 panel with a TS Block heading, i.e. the carousel
   .text block + .Existing-Now heading, expanded into full paragraphs */
.case-section{
  background-color: #131313;
  font-family: "Catamaran", sans-serif;
  font-size: 20px;
  line-height: 2em;
  padding: 18px 24px;
  margin-bottom: 30px;
}
.case-section h2{
  font-family: "TS Block", "wedding-gothic-atf", sans-serif;
  font-size: 25px;
  line-height: 1.2;
  margin-bottom: 12px;
  background-color: transparent;
}
.case-section p{
  background-color: transparent;
  margin-bottom: 1em;
}
.case-section p:last-child{ margin-bottom: 0; }

/* Text beside media (like koek.nl's "inform" slides): a 50/50 row, vertically
   centred. Default is text on the left / media on the right; add .is-reversed
   to swap the media to the left. Stacks with the media on top on mobile.
   The text side is just a .case-section, so it keeps the #131313 panel look. */
.case-split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);  /* two equal halves */
  align-items: center;
  gap: 35px;
  margin-bottom: 30px;
  background-color: transparent;
}
.case-split .case-section{
  margin-bottom: 0;              /* it sits beside the media now, not stacked */
}
.case-split.is-reversed .case-section{
  order: 1;                      /* text after media → media on the left */
}
.case-split-media{
  background-color: transparent;
}
.case-split-media img,
.case-split-media video{
  display: block;
  width: 100%;
  background-color: #131313;
}

/* Full-width media */
.case-media{
  background-color: transparent;
  margin-bottom: 30px;
}
.case-media img,
.case-media video{
  display: block;
  width: 100%;
  background-color: #131313;
}
.case-caption{
  font-family: "Catamaran", sans-serif;
  font-size: 16px;
  padding: 8px 2px;
  background-color: transparent;
}

/* Statement / highlight — reuses the blue box for a punchy line */
.case-statement{
  display: flex;
  align-items: center;
  min-height: 87px;
  padding: 20px 30px;
  margin: 15px 0 45px;
  background-color: #0900FF;
  box-shadow: 8px 12px #E1E803;
  font-family: "TS Block", "wedding-gothic-atf", sans-serif;
  font-size: 32px;
  line-height: 1.25;
}

/* Bottom link — the site's Learn-More button */
.case-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 90px;
  padding: 6px 22px;
  background-color: #0900FF;
  box-shadow: 6px 6px #E1E803;
  font-family: "TS Block", "wedding-gothic-atf", sans-serif;
  font-size: 25px;
  text-decoration: none;
  transition: 0.2s ease;
}
.case-cta:hover{
  letter-spacing: 2px;
  box-shadow: 9px 9px #E1E803;
}

/* Tablet — mirror style.css: pull the off-centre offset in so the case column
   isn't squeezed to ~460px, and stack the 50/50 splits while each half would
   still be too narrow to read comfortably. */
@media only screen and (min-width: 601px) and (max-width: 1024px){
  .case{
    left: 8%;
    width: 84%;
  }
}
@media only screen and (min-width: 601px) and (max-width: 900px){
  .case-split,
  .case-split.is-reversed{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .case-split-media{
    order: -1;                          /* media on top, text below */
  }
}

/* Mobile — mirror the site's 600px overrides */
@media only screen and (max-width: 600px){
  .case{
    width: 100%;
    left: auto;
    padding: 0 30px;
    box-sizing: border-box;
  }
  .case-back{
    margin-top: 90px;
    font-size: 20px;
  }
  .case-title{
    font-size: 24px;
    min-height: 40px;
    padding: 10px 18px;
    box-shadow: 6px 6px #E1E803;
  }
  .case-intro{ font-size: 1.1em; }
  .case-facts,
  .case-section{ font-size: 1rem; }
  .case-section h2{ font-size: 20px; }
  .case-split,
  .case-split.is-reversed{
    grid-template-columns: 1fr;       /* stack into one column */
    gap: 18px;
  }
  .case-split-media{
    order: -1;                        /* media on top, text below */
  }
  .case-statement{
    font-size: 20px;
    min-height: 40px;
    box-shadow: 6px 6px #E1E803;
  }
  .case-cta{ font-size: 20px; }
}