/* ==========================================================================
   Case study page
   Shares reset / fonts / tokens / main with the homepage; everything here is
   specific to the case study layout. Values measured from the live Framer
   page at all three breakpoints.
   ========================================================================== */

:root {
  --cs-bg:        #ffffff;
  --cs-line:      #e6e6e6;  /* image + table borders */
  --cs-row-alt:   #fafafa;  /* zebra rows in the module table */
  --cs-label:     #1a1a1a;  /* meta labels (Timeline, Team, ...) */

  --cs-gap-section: 48px;   /* vertical rhythm between blocks */
  --cs-col:         640px;  /* content column */

  /* Ticker: 3 items per row, velocity 20px/s (Framer's tickerEffectVelocity) */
  --cs-ticker-item:  696px;
  --cs-ticker-gap:   16px;
  --cs-ticker-cycle: 2136px;  /* 3 x (696 + 16) */
  --cs-ticker-time:  106.8s;  /* cycle / 20px per second */

  --cs-wireframe-w: 1922px;   /* deliberately wider than the viewport */
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  :root { --cs-wireframe-w: 1485px; }
}

@media (max-width: 809.98px) {
  :root {
    --cs-ticker-item:  458px;
    --cs-ticker-gap:   9.25px;
    --cs-ticker-cycle: 1401.75px; /* 3 x (458 + 9.25) */
    --cs-ticker-time:  70.09s;
    --cs-wireframe-w:  830px;
  }
}

/* The case study sits on white, not the homepage cream. */
body { background: var(--cs-bg); }

/* Unlike the homepage, the case study keeps 20px of top padding and a 48px
   rhythm at every breakpoint. */
.page--case {
  gap: var(--cs-gap-section);
  padding: 20px 6px 6px;
  /* The wireframe is deliberately wider than the viewport; without this the
     page scrolls sideways. The original clips at the root for the same reason. */
  overflow: clip;
}

/* --- Title block --------------------------------------------------------- */

.cs-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: var(--cs-col);
}
.cs-head h1 {
  font-family: var(--f-display);
  font-size: 24px;
  line-height: 36px;
  font-weight: 500;
  color: var(--c-heading);
}
.cs-head p {
  font-family: var(--f-mono);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  color: var(--c-text);
}

/* --- Full-bleed hero ----------------------------------------------------- */

.cs-hero {
  flex: none;
  width: 100%;
  aspect-ratio: 3200 / 1440;
  border-radius: 16px;
  overflow: hidden;
}
.cs-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Section ------------------------------------------------------------- */

.cs-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: none;
  width: var(--cs-col);
}
.cs-section h2 {
  font-family: var(--f-label);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--c-heading);
}
.cs-prose { width: 100%; }
.cs-prose p {
  font-family: var(--f-ui);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  color: var(--c-text);
}
/* Framer separates paragraphs with an empty <p>, so blocks sit one blank
   line apart rather than using margins. */
.cs-prose p + p { margin-top: var(--t-body-line); }

/* --- Overview meta rows -------------------------------------------------- */

.cs-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.cs-meta__row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.cs-meta__row dt,
.cs-meta__row dd {
  font-family: var(--f-ui);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
}
.cs-meta__row dt { color: var(--cs-label); }
.cs-meta__row dd { color: var(--c-text); text-align: right; }

/* --- Figures within the column ------------------------------------------- */

.cs-figure {
  flex: none;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}
.cs-figure img { width: 100%; height: 100%; object-fit: cover; }
.cs-figure--bordered { border: 1px solid var(--cs-line); }

.cs-figure--competitors { aspect-ratio: 1440 / 1508; }
.cs-figure--personas    { aspect-ratio: 2560 / 2260; }
.cs-figure--swot        { aspect-ratio: 2560 / 2152; }
.cs-figure--ia          { aspect-ratio: 2560 / 1088; }
.cs-figure--feedback    { aspect-ratio: 2; }

/* --- Module feature table ------------------------------------------------ */

/* Borders are drawn as overlays (::after / inset shadow) rather than real
   borders so they never add to the row heights — the original does the same,
   and the table's 570px height depends on it. */
.cs-table {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}
.cs-table::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--cs-line);
  border-radius: 16px;
  pointer-events: none;
}
.cs-table__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 16px;
  box-shadow: inset 0 -1px 0 var(--cs-line);
}
.cs-table__row:last-child { box-shadow: none; }
.cs-table__row:nth-child(even) { background: var(--cs-row-alt); }
.cs-table__row dt {
  flex: none;
  align-self: stretch;
  width: 180px;
  font-family: var(--f-ui);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  font-weight: 500;
  color: var(--c-text);
}
.cs-table__row dd {
  flex: 1 0 0;
  width: 1px;
  font-family: var(--f-ui);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  color: var(--c-text);
}

/* --- Wireframes: intentionally wider than the viewport ------------------- */

.cs-bleed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.cs-bleed > .cs-section { width: var(--cs-col); }
.cs-wireframe {
  flex: none;
  width: var(--cs-wireframe-w);
  max-width: none;
  aspect-ratio: 4088 / 1334;
}
.cs-wireframe img { width: 100%; height: 100%; object-fit: contain; }

/* --- Mockup tickers ------------------------------------------------------ */

.cs-mockups {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cs-gap-section);
  width: 100%;
}
.cs-mockups__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.cs-mockups__intro > * { width: var(--cs-col); }
.cs-mockups__rows {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.cs-ticker {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: clip;
}
.cs-ticker__track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--cs-ticker-gap);
  width: max-content;
  /* The track holds the three items twice, so translating by exactly one
     cycle lands on an identical frame and the loop is seamless. */
  animation: cs-ticker-left var(--cs-ticker-time) linear infinite;
  will-change: transform;
}
.cs-ticker--reverse .cs-ticker__track { animation-name: cs-ticker-right; }

@keyframes cs-ticker-left {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--cs-ticker-cycle))); }
}
@keyframes cs-ticker-right {
  from { transform: translateX(calc(-1 * var(--cs-ticker-cycle))); }
  to   { transform: translateX(0); }
}

.cs-ticker__item {
  flex: none;
  width: var(--cs-ticker-item);
  aspect-ratio: 1.547;
  border: 1px solid var(--cs-line);
  border-radius: 8px;
  overflow: hidden;
}
.cs-ticker__item img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .cs-ticker__track { animation: none; }
}

/* ==========================================================================
   Mobile — up to 809.98px
   ========================================================================== */

@media (max-width: 809.98px) {
  .cs-head,
  .cs-section { width: 100%; padding: 0 10px; }

  .cs-bleed { padding: 0; }
  .cs-bleed > .cs-section { width: 100%; }

  .cs-mockups__intro > * { width: 100%; padding: 0 10px; }

  .cs-hero { aspect-ratio: 2512 / 1441; border-radius: 10px; }

  .cs-figure { border-radius: 10px; }
  .cs-figure--competitors { aspect-ratio: 358 / 374; }

  .cs-table__row dt { width: 120px; }

  .cs-ticker__item { border-radius: 5px; border-width: 0.66px; }
  .cs-mockups__rows { gap: 18.28px; }
}