/* ============================================================
   Case Studies — horizontal carousel (desktop / tablet)
                  vertical stack    (mobile)

   Each slide holds TWO cards side-by-side.
   Each card stacks vertically: thumbnail → eyebrow → title → desc → pills.

   Tokens inherited from styles.css:
     --bg, --ink, --border, --surface-soft, --muted,
     --font-serif, --font-sans
   ============================================================ */

:root {
  --cs-gap:    24px;   /* margin around each card  */
  --cs-radius: 24px;   /* card corner radius       */
  --cs-pad:    24px;   /* inner padding            */
  --cs-nav-h:  72px;   /* sticky header height     */
}

/* ---------- Page shell ---------- */
.cs-page {
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;        /* page transition lives off-canvas */
  font-family: var(--font-sans);
}

.cs-main {
  position: relative;
  height: calc(100vh - var(--cs-nav-h));
  padding-top: var(--cs-nav-h);
}

/* ---------- Viewport / Track ---------- */
.cs-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: pan-y;        /* let vertical scroll bubble; we own horizontal */
}

.cs-track {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  transform: translateX(0);
  transition: transform 600ms cubic-bezier(.7,0,.3,1);
  will-change: transform;
}

.cs-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Cards take ~70% of the available slide height and sit top-aligned
     in the slide. The remaining 30% of vertical space falls below the
     row (align-content: start). */
  grid-template-rows: 70%;
  align-content: start;
  gap: var(--cs-gap);
  /* Horizontal padding stays uniform; vertical padding becomes the
     top breathing room above the cards. */
  padding: var(--cs-gap) var(--cs-gap);
  box-sizing: border-box;
}

/* ---------- Card primitive ---------- */
.cs-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--cs-radius);
  padding: var(--cs-pad);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;     /* vertical stacking inside card */
  gap: 16px;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* Thumbnail — top of the stack, gets the remaining vertical space */
.cs-card__media {
  position: relative;
  background: var(--surface-soft);
  border-radius: calc(var(--cs-radius) - 8px);
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 180px;
}
.cs-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text bits */
.cs-eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #4a4a4a);
}

.cs-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  /* Playfair Display H1 — scaled to ~70% of the original card size
     to match the smaller cards. Looser line-height for breathing room. */
  font-size: clamp(18px, 1.8vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.cs-desc {
  margin: 0;
  font-family: var(--font-sans);
  /* DM Sans H4 */
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.55;
  color: var(--ink);
}

/* Pills */
.cs-pills {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cs-pill {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}

/* Closing card — no media, has action row */
.cs-card--closing {
  justify-content: center;
  background: var(--surface-soft);
}

/* "Coming soon" card — same shape, just non-interactive */
.cs-card--soon { opacity: 0.92; }
.cs-card--soon .cs-pill:last-child {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* Behance tile — no media, centered title */
.cs-card--behance {
  background: linear-gradient(135deg, #e8eaff 0%, #d6e0ff 40%, #e4d9f7 100%);
  justify-content: center;
  border-color: transparent;
}
.cs-card--behance .cs-title { font-size: clamp(20px, 2vw, 32px); }

/* Card-link wrapper — keeps the whole card clickable without
   stealing layout from the grid. */
.cs-card-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}
.cs-card-link .cs-card { cursor: pointer; transition: transform 220ms ease, box-shadow 220ms ease; }
.cs-card-link:hover .cs-card { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(16,24,32,0.10); }
.cs-closing-actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cs-link {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.cs-link:hover { opacity: 0.7; }

/* ---------- Carousel controls (bottom-right) ---------- */
.cs-nav {
  position: fixed;
  right: 32px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 20;
}
.cs-counter {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
}
.cs-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--ink);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 4px 12px rgba(16, 24, 32, 0.10);
}
.cs-arrow:hover  { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(16, 24, 32, 0.18); }
.cs-arrow:active { transform: translateY(0); }
.cs-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1280px) {
  .cs-card { gap: 12px; }
}

@media (max-width: 1024px) {
  :root { --cs-gap: 18px; --cs-radius: 20px; }
  .cs-pill  { font-size: 11px; padding: 5px 10px; }
}

/* Mobile — switch to vertical native scroll, full stack */
@media (max-width: 768px) {
  :root { --cs-nav-h: 64px; }

  /* Sticky, solid top header on this page (the global mobile rule
     makes the nav-bar transparent for the home-hero canvas — here
     we want a clear divider over the scrolling stack). */
  .cs-page .nav-bar {
    position: sticky;
    top: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    pointer-events: auto;
    z-index: 50;
  }

  .cs-main {
    height: auto;
    min-height: calc(100vh - var(--cs-nav-h));
    padding-top: 0;                    /* sticky bar already in flow */
  }
  .cs-viewport {
    overflow: visible;
    height: auto;
    touch-action: auto;
  }
  .cs-track {
    flex-direction: column;
    height: auto;
    transform: none !important;       /* override any JS transform */
    transition: none;
  }
  .cs-slide {
    flex: 0 0 auto;
    grid-template-columns: 1fr;        /* cards stack within a slide */
    grid-template-rows: auto;
    height: auto;
    padding: 0 12px 12px;
  }
  .cs-card {
    margin: 12px 0 0;
    gap: 14px;
  }
  .cs-card__media {
    aspect-ratio: 16 / 10;
    flex: 0 0 auto;
  }
  .cs-title { font-size: clamp(22px, 6vw, 30px); }
  .cs-desc  { font-size: 15px; line-height: 1.55; }

  .cs-card--behance { min-height: 200px; }
  .cs-card--behance .cs-title { font-size: 24px; text-align: center; }

  .cs-nav { display: none; }
}